/* ============================================================
   STONIE STUDIO — mobile.css  (the "mobile layer")
   ------------------------------------------------------------
   Loaded AFTER styles.css. Same design language, tuned for touch
   and small screens. Pairs with the IS_MOBILE guards in main.js,
   which disable the cursor-driven heavy effects (particle loop,
   space invaders, scrubbed circle-reveal, hero scroll-jack).
   Breakpoint mirrors the JS: max-width 768px.
   ============================================================ */

@media (max-width: 768px) {

  /* Header: nav is hidden on mobile, so drop the 3-col grid and just push the
     brand left / the burger group hard-right. */
  .header {
    display: flex;
    justify-content: space-between;
  }

  /* ---- HERO -------------------------------------------------
     Mobile KEEPS the desktop scroll choreography (the wordmark splits
     apart + the image reveals as you scroll). We only make the particle
     logo full-bleed and size the (nowrap) wordmark to fit at rest. ---- */
  .hero { padding: 0; }                                /* full-bleed: logo reaches the screen edges */
  .hero__name { font-size: clamp(2.25rem, 11.5vw, 3.5rem); }

  /* About / Studio on mobile: the panel FLOWS at full height (no pin) so the
     photo + bio + stats never crop. setupAboutReveal's mobile branch SCRUBS the
     clip-path circle (via GSAP) to the scroll position → the cream panel blooms
     in as you scroll out of the Gallery. The stage background MUST stay
     transparent (NOT cream) or the bloom is cream-on-cream and invisible — that
     was the old "not working" bug. margin-top gives a little gap after the
     Gallery so the bloom is its own moment. */
  .reveal-stage { height: auto; margin-top: clamp(4rem, 15vh, 9rem); z-index: auto; background: transparent; }
  .reveal-stage__pin { position: static; height: auto; overflow: visible; }
  .reveal-stage__panel {
    position: static;
    min-height: auto;
    pointer-events: auto;
    padding: clamp(3rem, 8vh, 4.5rem) 1.5rem;
  }
  /* Start hidden behind a 0-radius circle (gated on html.js so a no-JS visitor
     still sees the full panel). GSAP scrubs the radius open — NO CSS transition
     here (it would fight the per-frame scrub). */
  html.js .reveal-stage__panel {
    clip-path: circle(0% at 50% 100%);
    -webkit-clip-path: circle(0% at 50% 100%);
    will-change: clip-path;
  }

  /* Order on mobile: TITLE → IMAGE → COPY → STATS, all centred. about__body uses
     display:contents so its children join the flex column and can be re-ordered
     around the photo (which lives in a separate .about__media wrapper). */
  .about__grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.25rem, 5vw, 2rem);
    text-align: center;
  }
  .about__body { display: contents; }
  .about__lead   { order: 1; line-height: 1; margin-bottom: 0; }
  .about__media  { order: 2; display: block; }
  .about__portrait { max-width: min(260px, 64vw); margin: 0 auto; }
  .about__text   { order: 3; font-size: 0.98rem; line-height: 1.7; margin: 0 auto; }
  .about__stats  { order: 4; justify-content: center; }
  .hero__tagline { letter-spacing: 0.12em; }

  /* Section titles read bigger on mobile (they felt small for headings) */
  .section-head__title,
  .section-head__title--sm,
  .about__lead {
    font-size: clamp(3rem, 13.5vw, 4.8rem);
    line-height: 0.98;
  }

  /* Big project / work-page titles — mobile scale (hover kerning kept from styles.css) */
  .proj__title, .workpage__title { font-size: clamp(2.7rem, 13.5vw, 4.5rem); }
  .about__stats { gap: 2.5rem; }

  /* ---- GALLERY (mobile): same stacked-poster scroll (sticky stack lives in
     base CSS now). Show 12 posters (hide the last 2), SW-width tiles, and a
     thinner even sliver so all 12 stack within the narrow viewport. ---- */
  .gallery-strip { --sliver: 13px; }
  .gstrip__item { flex: 0 0 58vw; aspect-ratio: 4 / 5; }
  .gstrip__item:nth-child(n + 13) { display: none; }   /* 14 → 12 on mobile */

  /* ---- SELECTED WORK → two opposite-sweeping rows (JS adds .montage--rows
     and the .sw-row / .sw-row__track wrappers). Fixes the old absolute-montage
     overflow/clip and delivers the auto-scroll layout. ---- */
  .montage--rows {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    max-width: none;
    width: 100%;
    margin: 1.5rem 0 0;
    overflow: hidden;                 /* rows clip; tracks translate inside */
  }
  .sw-row { overflow: hidden; }
  .sw-row__track {
    display: flex;
    gap: 0.8rem;
    width: max-content;
    will-change: transform;
  }
  .montage--rows .tile {
    position: relative;
    top: auto; left: auto;
    flex: 0 0 58vw;
    width: 58vw;
    aspect-ratio: 4 / 5;
    z-index: auto;
    transform: none;
    border-radius: 4px;
    overflow: hidden;
  }
  /* show the base image; captions pinned inside the tile */
  .montage--rows .tile__cap {
    position: absolute;
    left: 0.6rem; bottom: 0.6rem;
    opacity: 1;
    transform: none;
  }
}