/* ---------- phone layout (loaded after site.css) ---------- */
.grid>*,.pb>*,.head>*{min-width:0}
html,body{overflow-x:clip}
.hero{position:relative}
.swipe-hint{display:none}
.more-btn{display:none}
@media(max-width:700px){
  .sec{padding:52px 0}
  .h2{font-size:clamp(34px,10vw,48px)}
  .lede{font-size:16px}
  .hr{margin:36px 0}
  /* swipe rails: long card grids become one row you flick through */
  .rail{display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:80%;gap:12px!important;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-left:calc(-1*var(--pad));margin-right:calc(-1*var(--pad));padding:0 var(--pad) 6px;scroll-padding:0 var(--pad)}
  .rail::-webkit-scrollbar{display:none}
  .rail>*{scroll-snap-align:start}
  .rail.narrow{grid-auto-columns:46%}
  .rail.wide{grid-auto-columns:88%}
  .mgrid.rail{border:0}
  .mgrid.rail .mcell{border:1px solid #444;aspect-ratio:auto;min-height:230px}
  .swipe-hint{display:flex;align-items:center;gap:8px;font:700 11px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;opacity:.6;margin:0 0 12px}
  .swipe-hint i{font-style:normal;font-size:14px}
  /* show-more clamps */
  .clamp>.over{display:none!important}
  .more-btn{display:block;width:100%;margin-top:14px;padding:14px;border:2px solid currentColor;background:transparent;color:inherit;
    font:700 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  .more-btn[hidden]{display:none}
  /* downloads table: tidy rows */
  .tblwrap table{font-size:14px}
  /* post builder: preview stays on screen while you work the controls */
  .pb{gap:16px}
  .pb-stage{position:sticky;top:56px;z-index:5;padding:10px}
  .pb-stage canvas{max-height:38vh}
  .pb-stage .row{display:none}
  #posters .pb-stage{padding:12px}
  .vmaker .pb-stage{position:sticky;top:56px;z-index:5}
  .vmaker .pb-stage canvas{max-height:40vh}
  .pb-ctrl{gap:16px}
  .chip{padding:8px 11px}
  /* tee: front and back side by side */
  .td-stage>*{min-width:0}
  #welcome img[src*="safe-space"]{max-height:46vh;object-fit:cover}
  .mtoggle{bottom:10px;right:10px;padding:7px 8px;font-size:10px}
}
/* the photo choice at the top of the post builder */
.pb-start{display:grid;gap:10px;padding:16px;border:2px solid var(--gold);background:rgba(254,207,10,.08)}
.pb-start .big{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:var(--gold);color:#000;font:800 15px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;border:0}
.pb-start .or{font-size:13px;opacity:.75;text-align:center}
.pb-start .or a{color:inherit}