/* ═══════════════════════════════════════════════════════════
   SARAF · MOBILE LAYER

   Loaded LAST on every page, after home-v2.css and the
   per-page stylesheet. That ordering is the whole point: the
   page stylesheets set section padding after home-v2.css, and
   a media query carries no extra specificity — so corrections
   written anywhere earlier silently lose. Everything that has
   to override page CSS at small widths belongs in here.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   MOBILE VERTICAL RHYTHM

   Section padding across the site is written as
   clamp(Npx, Xvh, Mpx). vh resolves against the VIEWPORT
   HEIGHT, so a 956px-tall phone lands at or near the top of
   every clamp — 96px to 172px of padding at BOTH ends of
   every section. On desktop that framing sits around wide,
   dense content and reads as poise. On a 440px column of
   stacked, single-file content it reads as a broken page
   with holes in it.

   The fix is to stop deriving vertical rhythm from viewport
   height on small screens and set it in absolute terms.
   Sections that deliberately open flush (0 top padding,
   because their own header supplies the space) keep that —
   only their closing padding is brought in.
   ═══════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Home */
  .manifesto, .rings, .workshop, .record,
  .herbarium, .collections, .joinery,
  /* About */
  .about-founder, .about-arc, .about-grain, .about-credo,
  /* Capabilities */
  .cap-plant, .cap-process, .cap-tooling, .cap-hand,
  .cap-capacity, .cap-sedex, .cap-discipline,
  /* Request */
  .rq-form-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .cities { padding-top: 64px; }

  /* These open flush by design — close them in only */
  .sus-forest, .sus-air, .sus-loop, .sus-hands,
  .sus-sun, .sus-ledger,
  .cat-index, .cat-notes,
  .ed-plates, .rv-access {
    padding-bottom: 64px;
  }

  /* The closing panel repeats on every page and was the worst
     offender at 172px top and bottom */
  .close { padding-top: 72px; padding-bottom: 72px; }

  /* Heroes: a fixed 100vh floor leaves a tall empty stage under
     short stacked content. Let them take the height they need. */
  .about-hero, .cap-hero { min-height: 0; }
  .about-hero, .cap-hero, .sus-hero, .cat-hero, .ed-hero, .rq-intro {
    padding-top: 104px;      /* clears the fixed header */
    padding-bottom: 64px;
  }
}

/* 480, not 430: an iPhone 16 Pro Max reports 440px CSS width, so a
   430px breakpoint misses the largest phones entirely — exactly the
   device this was reported on. */
@media (max-width: 480px) {
  .manifesto, .rings, .workshop, .record,
  .herbarium, .collections, .joinery,
  .about-founder, .about-arc, .about-grain, .about-credo,
  .cap-plant, .cap-process, .cap-tooling, .cap-hand,
  .cap-capacity, .cap-sedex, .cap-discipline,
  .rq-form-section {
    padding-top: 52px;
    padding-bottom: 52px;
  }
  .cities { padding-top: 52px; }
  .sus-forest, .sus-air, .sus-loop, .sus-hands,
  .sus-sun, .sus-ledger,
  .cat-index, .cat-notes,
  .ed-plates, .rv-access { padding-bottom: 52px; }
  .close { padding-top: 60px; padding-bottom: 60px; }
  .about-hero, .cap-hero, .sus-hero, .cat-hero, .ed-hero, .rq-intro {
    padding-top: 96px;
    padding-bottom: 52px;
  }
}

/* ═══════════════════════════════════════════════
   NARROW-COLUMN CORRECTIONS
   Grids that keep both tracks alive on a phone and starve
   the text side. Each was measured, not guessed.
═══════════════════════════════════════════════ */

/* Home timeline: a fixed 100px year column plus a 30px gap left the
   entry text 130px wide at 320px — four or five words a line. Put the
   year above its entry instead. */
@media (max-width: 560px) {
  .ring-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-left: 14px;
  }
  .ring-year { font-size: 22px; }
}

/* The 92px play button is sized for a full-width desktop film. In a
   16:9 box on a phone the video is only ~200px tall, so the button
   reached down into the caption and sat on top of the label. */
@media (max-width: 700px) {
  .wm-play { width: 64px; height: 64px; }
  .wm-play svg { width: 20px; height: 20px; margin-left: 3px; }
  .wm-video-caption { left: 16px; bottom: 14px; gap: 4px; }
  .wm-video-label { font-size: 11px; letter-spacing: 0.18em; }
  .wm-video-sub { font-size: 12.5px; }
}

/* With the hero figures set smaller, three now fit on a phone row and the
   fourth drops alone underneath — a 3 + 1 wrap that reads as a mistake.
   Pin them to a balanced 2 x 2 instead. */
@media (max-width: 620px) {
  .hero-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 20px;
  }
}