/* ============================================================
   Saud — mobile enhancements (owner-approved, 2026-06-13).
   EVERY rule here is scoped to ≤880px (or ≤560px) media queries:
   desktop rendering (≥881px) is provably untouched — the QA suite
   keeps verifying 1440/900 widths at 0.000% diff vs the original.
   Colors/fonts/radii only via the existing custom properties.
   ============================================================ */

/* mobile menu elements exist in markup on every page; hidden on desktop.
   Scoped as .topbar .mnav (two classes) to outrank day.css's
   `.topbar nav{display:flex}` (class+element). */
.topbar .mnav-btn{display:none}
.topbar .mnav{display:none}

@media(max-width:880px){
  /* safety net — no page may pan sideways (the hala mailcard used to) */
  html,body{overflow-x:clip}

  /* ── topbar: brand left, burger + Say hala right ── */
  .topbar .in{justify-content:flex-start;gap:14px}
  .topbar .say{margin-left:0}
  .topbar .mnav-btn{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:38px;margin-left:auto;padding:0;background:transparent;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;transition:.2s}
  .topbar .mnav-btn .bar{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s cubic-bezier(.33,1,.68,1)}
  .topbar .mnav-btn[aria-expanded="true"]{border-color:var(--accent)}
  .topbar .mnav-btn[aria-expanded="true"] .bar:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
  .topbar .mnav-btn[aria-expanded="true"] .bar:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

  /* ── the section menu: quiet rows in the portal's voice ──
     (day.css `.topbar nav{display:none}` at ≤880px keeps it closed by
     default; .open overrides with higher specificity) */
  .topbar .mnav{flex-direction:column;border-top:1px solid var(--line);background:color-mix(in srgb,var(--ground) 96%,transparent);backdrop-filter:blur(14px);box-shadow:var(--sh-2)}
  .topbar .mnav.open{display:flex}
  .topbar .mnav a{display:flex;flex-direction:column;gap:2px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:inherit}
  .topbar .mnav a:last-child{border-bottom:0}
  .topbar .mnav a.on::after{content:none}
  .topbar .mnav a b{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
  .topbar .mnav a .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0;text-transform:none}
  .topbar .mnav a.on b{color:var(--accent)}

  /* ── rhythm: phone-scale air instead of desktop-scale voids ── */
  section{padding:56px 0}
  .shead{margin-bottom:28px}

  /* ── hala: kill the 38px horizontal overflow, keep the cards ── */
  .contact-grid > *{min-width:0}
  .mailcard,.signupcard{padding:28px 22px}
  .mailcard a.mail{font-size:clamp(19px,5.8vw,26px);overflow-wrap:anywhere}
  .field input{min-width:0;width:100%}

  /* ── footer: the three links become stacked, tappable pills ── */
  footer.foot{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 22px 64px}
  footer.foot .sep{display:none}
  footer.foot a{display:inline-block;margin:0;padding:11px 20px;border:1px solid var(--line-2);border-radius:999px;font-size:12px;letter-spacing:.08em;color:var(--ink-2)}

  /* ── at the moment: owner's mobile order — coffee, learning, book, music ── */
  .momgrid{display:flex;flex-direction:column}
  .mright{order:-1}

  /* ── touch targets ── */
  .chip{padding:10px 16px}
  a.gr{padding:10px 17px}
  .track .play{padding:9px 14px}

  /* ── creation: captions can't be hover-only on touch ──
     persistent caption only when the slot actually holds a photo */
  .mosaic .cell:has(image-slot[data-filled]) .c,
  .ph:has(image-slot[data-filled]) .c,
  .feat:has(image-slot[data-filled]) .fl{opacity:1}
  .mosaic .cell .c{background:linear-gradient(transparent 55%,rgba(19,48,46,.5))}
  .mosaic{grid-auto-rows:124px}
  .feat .fl{left:10px;bottom:10px;border-radius:12px}

  /* ── bellwether people cards: aligned rows, no jitter ── */
  .pcard .pb2{display:flex;flex-direction:column;flex:1}
  .pcard .era{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pcard .bk2{margin-top:auto;align-self:flex-start;white-space:nowrap}
  .pcard h3{margin-bottom:6px}

  /* ── portal: hero → art band → destination links ──
     The illustration flows between the words and the link list as a
     full-strength panel; the links land in the thumb zone below it with
     their hover-only sublines restored. The portal scrolls when needed.
     .pgrid stays position:relative + z-index:2 — the portal's aurora
     ::before overlay is positioned, and a static .pgrid would fall behind
     it and lose every tap. */
  .portal{overflow-y:auto;-webkit-overflow-scrolling:touch}
  .ptop{position:sticky;top:0;background:color-mix(in srgb,var(--ground) 86%,transparent);backdrop-filter:blur(12px)}
  .pgrid{position:relative;top:auto;bottom:auto;left:auto;z-index:2;display:block;width:auto;min-width:0;padding:18px 22px 34px}
  .glimpse h1{max-width:none}
  .glimpse .ways{max-width:none;margin-top:6px}
  .dest{flex-wrap:wrap;row-gap:0;padding:13px 4px;min-height:52px;border-bottom:1px solid var(--line);border-radius:0}
  .dest:last-child{border-bottom:0}
  .dest .dnm{font-size:21px}
  .dest .dsub{display:block;opacity:1;transform:none;margin-left:0;flex-basis:100%;text-align:left;max-width:none;margin-top:1px}
  .frame{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;height:30vh;min-height:210px;max-height:300px;opacity:1;margin:6px 0 8px}
  .scene.pbeat{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent)}
}

@media(max-width:560px){
  /* reflections list: one shared left edge, pill tucked under its entry */
  .wl a{grid-template-columns:30px 1fr;row-gap:0}
  .wl .meta2{grid-column:2;flex-direction:row;align-items:center;margin-top:8px}
  /* tour cells: tighter bands, still fully tappable */
  .tour a{padding:30px 24px}
}