/* Three-space mobile visual calibration
   Based on real 2026-09-01 phone captures.
   Keep each room's personality, but lock the first-screen rhythm. */
@media (max-width: 720px) {
  /* Same horizontal canvas and top baseline after the shared header. */
  html[data-ny-design='v1'] :where(.workshop-story-hero, .digital-gallery-hero, .attic-hero) {
    padding-top: 48px !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
  }

  /* Digital's own hero layout adds extra vertical breathing room.
     Pull only its copy block upward so the eyebrow visually shares the
     same baseline as Workshop and Attic without changing the dark artwork. */
  html[data-ny-design='v1'] .digital-gallery-hero {
    padding-top: 48px !important;
  }

  html[data-ny-design='v1'] .digital-gallery-hero .digital-hero-copy {
    transform: translateY(-62px);
    margin-bottom: -62px !important;
  }

  /* Attic was visually closest to the header; give it the same optical breathing room. */
  html[data-ny-design='v1'] .attic-hero {
    padding-top: 50px !important;
  }

  /* One typography ruler for all three opening statements. */
  html[data-ny-design='v1'] :where(.workshop-story-copy, .digital-hero-copy, .attic-hero-copy) .eyebrow {
    margin-bottom: 20px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }

  html[data-ny-design='v1'] :where(.workshop-story-copy, .digital-hero-copy, .attic-hero-copy) h1,
  html[data-ny-design='v1'] .studio-space .digital-gallery-hero h1,
  html[data-ny-design='v1'] .workshop-story-copy h1 {
    margin-bottom: 24px !important;
    font-size: 40px !important;
    line-height: 1.36 !important;
  }

  html[data-ny-design='v1'] :where(.workshop-story-copy, .digital-hero-copy, .attic-hero-copy) > p:not(.eyebrow) {
    margin-bottom: 24px !important;
    font-size: 16px !important;
    line-height: 1.78 !important;
  }

  /* Attic has no two-button action row, so normalize its date chip as the next rhythm item. */
  html[data-ny-design='v1'] .attic-hero-copy :where(.attic-date, .attic-date-chip, time) {
    margin-top: 0 !important;
  }

  /* Keep the first content/image transition equally calm. */
  html[data-ny-design='v1'] :where(.workshop-story-actions, .digital-hero-actions) {
    margin-bottom: 22px !important;
  }
}