/* LUNOREM v1.3 — P1 OUR STORY full-bleed film; P5 four art works remain side by side.
   The user-supplied ultrawide film is displayed edge-to-edge, with no feathered mask,
   color veil, border, or floating rectangle. Fonts/colors/other layout remain unchanged. */

/* The existing editorial heading & copy keep their established inset and max-width.
   This one media element reaches all the way to both viewport edges. */
.theme-shop .story-video.media-placeholder {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100vw;
  max-width: none;
  margin: clamp(58px,7.5vw,108px) 0 42px calc(50% - 50vw);
  padding: 0;
  aspect-ratio: 256 / 109; /* original film: 2560 x 1090 ≈ 21:9 */
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #ded7cd;
}
.theme-shop .story-video > .story-video__poster,
.theme-shop .story-video > .story-video__player {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
.theme-shop .story-video > .story-video__player { opacity: 0; transition: opacity .45s ease; }
.theme-shop .story-video > .story-video__player.is-ready { opacity: 1; }
.theme-shop .story-video > figcaption {
  position: absolute;
  left: clamp(28px,8vw,150px);
  bottom: 14px;
  padding: 0;
  margin: 0;
  font: 400 10.5px/1.7 var(--type-ui);
  letter-spacing: .18em;
  text-shadow: 0 1px 12px rgba(0,0,0,.58);
  color: #fff9f3;
  pointer-events: none;
}
.theme-shop .story-video > figcaption span { padding: 0 .5em; }
/* The native ultrawide frame is also preserved on small screens. */
@media (max-width: 620px) {
  .theme-shop .story-video.media-placeholder { aspect-ratio: 256 / 109; margin-top: 45px; }
  .theme-shop .story-video > figcaption { bottom: 8px; font-size: 9px; letter-spacing:.06em; }
}
/* Four distinct works side-by-side; readable descriptions and uncropped product order. */
.theme-shop .flagship-page .art-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(15px, 2.2vw, 30px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 75px);
}
.theme-shop .flagship-page .art-card { min-width: 0; }
.theme-shop .flagship-page .art-card__image { aspect-ratio: 3 / 4; }
.theme-shop .flagship-page .art-card__image img { width: 100%; height: 100%; object-fit: cover; }
.theme-shop .flagship-page .art-card h3 {
  font-size: clamp(20px, 1.72vw, 26px);
  line-height: 1.55;
  margin-top: 7px;
}
.theme-shop .flagship-page .art-card .art-card__meta,
.theme-shop .flagship-page .art-card .art-card__description {
  font-size: 13.5px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}
.theme-shop .flagship-page .art-card__index { font-size: 10.5px; letter-spacing: .055em; }

/* Keep all four in a single swipeable row at tablet/mobile widths: not two-by-two.
   The image must remain large enough to examine its details for the ARG. */
@media (max-width: 1099px) {
  .theme-shop .flagship-page .art-gallery {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: clamp(245px, 37vw, 380px);
    gap: clamp(14px, 2.5vw, 25px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    padding: 1px 0 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(103,89,79,.36) transparent;
  }
  .theme-shop .flagship-page .art-card { scroll-snap-align: start; }
}
@media (max-width: 620px) {
  .theme-shop .flagship-page .art-gallery { grid-auto-columns: minmax(245px, 79vw); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-shop .story-video > .story-video__player { display: none !important; }
  .theme-shop .story-video > .story-video__poster { display: block; }
}