/* ============================================================
   VLOTE Brand Hub — Mobile layer
   Loaded LAST in every page so it reliably overrides the inline
   <style> blocks. A ground-up mobile rework of the chrome so the
   templates are actually usable — and spacious — on a phone.
   Desktop is untouched.
   ============================================================ */

@media (max-width: 640px) {

  /* ---- Global breathing room ---------------------------------- */
  /* Generous, consistent gutters so NOTHING touches the screen edge. */
  .shell { padding-left: 22px; padding-right: 22px; }
  /* room for the fixed bottom toolbar so it never covers content */
  body { padding-bottom: 84px; }

  /* ---- Topbar ------------------------------------------------- */
  .topbar .row { height: 56px; }
  .lockup { gap: 11px; }
  .lockup vlote-mark { width: 28px; height: 28px; }
  .lockup .bar { height: 26px; }
  .lockup .wordmark { font-size: 18px; }
  .lockup .tag { font-size: 8px; letter-spacing: .16em; }

  /* ---- Jump rail → single swipeable strip, NOT sticky --------- */
  /* (sticky + wrapping ate ~40% of the screen and overlapped boards) */
  .rail { position: static; }
  .rail .inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding: 11px 0;
  }
  .rail .inner::-webkit-scrollbar { display: none; }
  .rail a { flex: 0 0 auto; white-space: nowrap; padding: 8px 14px; }
  .rail .spacer { display: none; }
  .rail .toggle-all { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }

  /* ---- Page head / section intro → airy ----------------------- */
  .page-head { padding-top: 30px; padding-bottom: 6px; }
  .page-head h1 { font-size: clamp(30px, 9vw, 40px); margin-top: 14px; }
  .page-head p { font-size: 15px; line-height: 1.65; margin-top: 16px; }
  .section-intro { padding-top: 28px; padding-bottom: 6px; }
  .section-intro .sec-title { font-size: 23px; }
  .section-intro p { font-size: 14px; margin-top: 12px; }
  .group { padding: 6px 0; }

  /* ---- Platform header → clean, tappable, two-line ------------ */
  /* DOM order: no · title · size · count · chev.
     margin-left:auto on the chevron fills line 1, pushing the
     size+count meta onto a tidy second line. */
  .platform { scroll-margin-top: 72px; border-top-width: 1px; }
  .plat-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 12px;
    padding: 22px 0 18px;
  }
  .plat-head .ph-no { order: 0; }
  .plat-head .ph-title { order: 1; font-size: 23px; line-height: 1.12; }
  .plat-head .chev { order: 2; margin: 0 0 0 auto; width: 12px; height: 12px; }
  .plat-head .ph-size { order: 3; }
  .plat-head .ph-count { order: 4; margin-left: 0; }
  .plat-head .ph-count::before { content: "·"; margin-right: 8px; color: var(--mocha); }
  .plat-desc { font-size: 14px; margin: 2px 0 18px; }

  /* ---- Galleries → single column, generous gaps --------------- */
  .gallery, .gallery.col, .gallery.group {
    display: flex; flex-direction: column;
    gap: 40px; align-items: stretch;
    padding-bottom: 12px;
  }
  .board { width: 100%; margin: 0; }

  /* ---- Board caption → title line + spacious button row ------- */
  .board-cap {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 9px 12px; margin-bottom: 13px;
  }
  .board-cap .bc-dir { font-size: 16px; }
  .board-cap .bc-meta { font-size: 9.5px; }
  .board-cap .bc-focus { margin-left: auto; }
  /* download + print buttons get their own full-width row */
  .board-cap .bc-dlwrap { flex-basis: 100%; margin-left: 0; gap: 8px; }
  .board-cap .bc-dl { padding: 9px 15px; font-size: 10px; }
  .board-cap .bc-focus { padding: 9px 15px; font-size: 10px; }

  .holder { max-width: 100%; box-shadow: 0 12px 34px rgba(50,44,40,.16); }

  /* ---- Floating toolbar → compact, centred pill --------------- */
  .hub-toolbar {
    left: 12px; right: 12px; bottom: 12px; transform: none;
    border-radius: 16px; padding: 8px; gap: 7px;
    justify-content: center;
  }
  .hub-toolbar .ht-brand { display: none; }
  .hub-toolbar .ht-btn { flex: 0 0 auto; padding: 11px 16px; font-size: 10px; }

  /* ---- index.html: hero + nav cards --------------------------- */
  .hero { padding: 34px 0 28px; }
  .hero vlote-seal { width: 128px; height: 128px; margin-bottom: 22px; }
  .hero h1 { font-size: clamp(32px, 10vw, 48px); }
  .hero p { font-size: 15px; margin-top: 20px; }
  .hero .cta { flex-direction: column; align-items: stretch; gap: 11px; }
  .hero .cta .btn { width: 100%; }
  .cards { grid-template-columns: 1fr; gap: 14px; background: none; border: 0; margin: 26px 0 12px; }
  .card { min-height: auto; padding: 28px 24px 26px; border: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
  .card h2 { font-size: 26px; }
  .glance { padding: 34px 0 12px; }
  .glance-grid { grid-template-columns: 1fr; gap: 14px; background: none; border: 0; }
  .panel { border: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); }

  /* ---- Brand Guide: stack sections, readable swatches --------- */
  .section { padding: 30px 0; }
  .section .sec-head { flex-wrap: wrap; gap: 6px 14px; margin-bottom: 22px; }
  .section .sec-title { font-size: 24px; }
  .swatches { grid-template-columns: repeat(2, 1fr); }
}

/* Very small phones */
@media (max-width: 380px) {
  .shell { padding-left: 18px; padding-right: 18px; }
  .rail a { font-size: 9px; padding: 7px 11px; }
  .plat-head .ph-title { font-size: 21px; }
  .board-cap .bc-dir { font-size: 15px; }
}