/* Photographic opening; keeps the existing motion entrance's transforms. */
.expanded-atelier .line-hero[data-hero-gallery] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto;
  grid-template-areas: 'heading' 'stage' 'controls' 'caption';
  align-items: stretch;
  align-content: start;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: #161513;
}
.expanded-atelier:not([data-direction]) [data-hero-gallery] .hero-heading,
.expanded-atelier:not([data-direction]) [data-hero-gallery] .hero-content { margin: 0; }
.expanded-atelier [data-hero-gallery] .hero-heading {
  grid-area: heading;
  position: relative;
  inset: auto;
  align-self: start;
  max-width: none;
  padding: 28px 6% 22px;
  color: #faf5ed;
  pointer-events: none;
  z-index: 3;
}
.expanded-atelier [data-hero-gallery] .hero-heading h1 {
  margin: 0;
  max-width: none;
  font-family:var(--font-brand);
  font-weight: 400;
  font-size: clamp(40px, 11.5vw, 62px);
  letter-spacing: -.045em;
  line-height: 1.05;
}
.expanded-atelier [data-hero-gallery] .hero-photo {
  grid-area: stage;
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  margin: 0;
  padding: 0;
  align-self: stretch;
  overflow: hidden;
  background: #161513;
  touch-action: pan-y pinch-zoom;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-slide.is-active { opacity: 1; z-index: 1; }
.expanded-atelier [data-hero-gallery] .hero-photo .hero-gallery-slide img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  filter: none;
  mask-image: none;
  -webkit-mask-image: none;
  transform-origin: center;
}
.expanded-atelier [data-hero-gallery] [data-hero-name="Materia Botanica"] img { filter: brightness(1.12); }
.expanded-atelier [data-hero-gallery] .hero-release { margin: 16px 0 0; font:16px/1.5 var(--font-brand); }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls {
  grid-area: controls;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 18px max(6%, env(safe-area-inset-right)) 22px max(6%, env(safe-area-inset-left));
  color: #faf5ed;
  z-index: 4;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-controls[hidden] { display: none; }
.expanded-atelier [data-hero-gallery] .hero-gallery-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-count {
  color: #e2d3c2;
  font:10px/1.4 var(--font-brand);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-track { grid-column: 1 / -1; display: flex; gap: 5px; }
.expanded-atelier [data-hero-gallery] .hero-gallery-track span { flex: 1; height: 2px; background: #faf5ed40; }
.expanded-atelier [data-hero-gallery] .hero-gallery-track .is-current { background: #faf5ed; }
.expanded-atelier [data-hero-gallery] .hero-gallery-navigation { display: flex; align-items: center; gap: 2px; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 9px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color .2s ease-out, border-color .2s ease-out;
}
.expanded-atelier [data-hero-gallery] .hero-gallery-controls svg { display: block; width: 22px; height: 22px; pointer-events: none; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls button[hidden] { display: none; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls button:hover { background: #faf5ed14; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls button:active { background: #faf5ed29; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls button:focus-visible { outline: 2px solid #faf5ed; outline-offset: 3px; }
.expanded-atelier [data-hero-gallery] .hero-gallery-controls [data-hero-pause] { margin-left: 6px; border-color: #faf5ed66; }
.expanded-atelier [data-hero-gallery] [data-hero-current] { margin: 0; font:16px/1.25 var(--font-brand); text-align: left; }
.expanded-atelier [data-hero-gallery] .hero-content {
  grid-area: caption;
  position: static;
  max-width: none;
  padding: 22px 6%;
  margin: 0;
  background: #faf5ed;
  color: #49352d;
}
.expanded-atelier [data-hero-gallery] .hero-content > p { max-width: 66ch; margin: 0; font:15px/1.6 var(--font-brand); }
.expanded-atelier [data-hero-gallery] .hero-content > .hero-edition { max-width: 36ch; font:24px/1.35 var(--font-brand); }
.expanded-atelier [data-hero-gallery] .hero-content > .hero-preorder { margin-top: 18px; }
.hero-gallery-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 761px) {
  .expanded-atelier .line-hero[data-hero-gallery] {
    grid-template-rows: minmax(480px, 78svh) auto;
    grid-template-areas: 'stage' 'caption';
  }
  .expanded-atelier [data-hero-gallery] .hero-heading { grid-area: stage; padding: 36px 4%; text-shadow: 0 2px 18px #0005; }
  .expanded-atelier [data-hero-gallery] .hero-heading h1 { font-size: clamp(52px, 6vw, 90px); }
  .expanded-atelier [data-hero-gallery] .hero-photo { height: 100%; aspect-ratio: auto; }
  .expanded-atelier [data-hero-gallery] .hero-photo .hero-gallery-slide img { object-fit: cover; object-position: center 55%; }
  .expanded-atelier [data-hero-gallery] .hero-photo::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 160px;
    background: linear-gradient(transparent, #16100be6);
    pointer-events: none;
    z-index: 3;
  }
  .expanded-atelier [data-hero-gallery] .hero-gallery-controls {
    grid-area: stage;
    align-self: end;
    justify-self: end;
    width: min(410px, 92%);
    margin: 0 4% 28px;
    padding: 0;
    gap: 28px;
  }
  .expanded-atelier [data-hero-gallery] [data-hero-current] { font-size: 18px; }
  .expanded-atelier [data-hero-gallery] .hero-content { display: grid; grid-template-columns: 1fr 1.2fr; align-items: start; gap: 8%; padding: 30px 4%; }
  .expanded-atelier [data-hero-gallery] .hero-content > p { font-size: 16px; }
  .expanded-atelier [data-hero-gallery] .hero-content > .hero-edition { font-size: 26px; }
  .expanded-atelier [data-hero-gallery] .hero-content > .hero-preorder { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .expanded-atelier .line-hero[data-hero-gallery] { grid-template-rows: minmax(480px, 62svh) auto; }
  .expanded-atelier [data-hero-gallery] .hero-photo .hero-gallery-slide img { object-fit: contain; object-position: center bottom; }
}
@media (prefers-reduced-motion: reduce) {
  .expanded-atelier [data-hero-gallery] .hero-gallery-slide { animation: none !important; transition: none !important; }
  .expanded-atelier [data-hero-gallery] .hero-gallery-controls button { transition: none; }
}