/* Mobile A3: Full plates. Adapted from mobile-a.css + mobile-a3.css.
   Loaded only on the home page; desktop keeps its existing composition. */
@media (min-width: 641px) {
  .rail-track { display: contents; }
  [data-rail-copy] { display: none; }
}
@media (max-width: 640px) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  .site-header { height: 68px; }
  .site-header > .brand { font-size: 20px; }
  .site-header > .mobile-navigation { display: none; }
  .mobile-book {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 9px 15px;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    border-color: rgb(142 49 41 / 45%);
  }
  .mobile-book .arrow { width: 22px; }
  .cover { min-height: 0; height: calc(100svh - 68px); max-height: none; }
  .cover-image {
    top: auto; bottom: 19.5svh; left: 18%; right: 8%;
    width: auto; height: 48svh; z-index: 1;
  }
  .cover-lockup { top: auto; bottom: 11svh; left: 7%; z-index: 2; mix-blend-mode: multiply; }
  .cover-title { font-size: clamp(64px, 17vw, 100px); line-height: .94; color: var(--accent); }
  .cover-title span + span { margin-left: 14%; }
  .cover-tagline { margin: 14px 0 0 2px; font-size: 19px; color: var(--ink); }
  .cover-caption { display: none; }
  .cover-image, .room-photo, .about-portrait, .edit-photo, .closing-story figure {
    background: var(--paper); isolation: isolate;
  }
  /* Keep the A3 text clear of the full-width moving photographs. */
  .photo-depth { --photo-depth-limit: 16px; }
  .section .eyebrow { display: flex; align-items: center; gap: 12px; }
  .section .eyebrow::before { content: ''; width: 34px; height: 1px; background: var(--accent); }
  .atelier { padding: 120px 0 96px; }
  .atelier h2 { font-size: 30px; letter-spacing: -.02em; }
  .atelier-note { margin-left: 0; margin-top: 30px; }
  .atelier-copy { max-width: none; }

  .atelier-rooms {
    display: block; position: static; width: 100vw; margin-inline: 0;
    padding: 0 0 clamp(64px, 16vw, 96px);
    overflow-x: auto; scrollbar-width: none;
  }
  .atelier-rooms::-webkit-scrollbar { display: none; }
  .rail-track { display: flex; align-items: center; gap: 5vw; width: max-content; padding-left: 5vw; padding-right: 5vw; }
  .atelier-rooms[data-gallery-ready] { overflow: hidden; }
  .atelier-rooms[data-gallery-ready] .rail-track {
    animation: atelier-drift 27s linear infinite paused;
  }
  .atelier-rooms[data-gallery-running='true'] .rail-track { animation-play-state: running; }
  /* Only a real hover intent pauses the rail. A phone tap fires :active and
     :focus-within at once, which used to stop the rail on every touch. */
  @media (hover: hover) and (pointer: fine) {
    .atelier-rooms .rail-track:hover,
    .atelier-rooms:focus-within .rail-track { animation-play-state: paused; }
  }
  @keyframes atelier-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-175vw, 0, 0); }
  }
  .atelier-rooms .room,
  .atelier-rooms .room:first-child,
  .atelier-rooms .room:last-child {
    position: static; flex: none; width: auto; margin: 0; padding: 0;
    --photo-depth-limit: 0px;
  }
  .atelier-rooms .room:nth-child(odd) .room-photo { width: 76vw; aspect-ratio: 4 / 5; }
  .atelier-rooms .room:nth-child(even) .room-photo { width: 89vw; aspect-ratio: 5 / 4; }
  .atelier-rooms .room-caption,
  .atelier-rooms .room:last-child .room-caption { margin-top: 12px; padding: 0; text-align: left; font-size: 11px; }

  .about { display: block; padding: 116px 0 124px; }
  .about-portrait { width: 100vw; margin-left: calc(-1 * var(--gutter)); aspect-ratio: 1 / 1; }
  .about-name { position: relative; z-index: 2; margin: 34px 0 0; width: auto; text-align: left; mix-blend-mode: normal; }
  .about-name .eyebrow { justify-content: flex-start; }
  .about-name h2 { margin-top: 14px; font-size: 44px; color: var(--ink); }
  .about-copy { padding-top: 26px; max-width: none; }
  .about-facts li { padding: 12px 0; }
  .treatment-edit { display: block; padding: 130px 0 0; }
  .edit-photo { width: 100vw; margin-left: calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; }
  .edit-menu { margin-left: 0; }
  [data-text-treatment='clear'] .edit-menu h2 {
    position: relative; z-index: 2; margin: 34px 0 28px; padding: 0;
    font-size: 46px; text-align: left; mix-blend-mode: normal;
  }
  .treatment-links a { font-size: 21px; padding-block: 17px; }
  .treatment-lede { font-size: 14px; max-width: 34ch; }
  [data-text-treatment='clear'] .closing-story { display: block; margin-top: 150px; padding: 0; }
  [data-text-treatment='clear'] .closing-story h2 { font-size: 52px; text-align: left; padding: 0; mix-blend-mode: normal; }
  [data-text-treatment='clear'] .closing-story figure { width: 100vw; margin: 34px 0 0 calc(-1 * var(--gutter)); aspect-ratio: 4 / 5; }
  .appointments { padding-top: 140px; padding-bottom: 110px; }
  .appointment-action { margin-left: 0; }
  .appointment-meta { gap: 8px 18px; }
  .site-footer { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .atelier-rooms[data-gallery-ready] { overflow-x: auto; }
  .atelier-rooms[data-gallery-ready] .rail-track { animation: none; }
  [data-rail-copy] { display: none; }
}