/* v1.1.16 — public Gallery on the landing's dark look (needs landing.css for vars, type and the iPhone frame) */
body.ut-atelier-gallery-page { background: var(--bg); color: var(--text); }
.ug { max-width: 1600px; margin: 0 auto; padding: clamp(4rem, 9vh, 7rem) clamp(1.25rem, 5vw, 6rem) clamp(4rem, 8vh, 6rem); }
.ug-head { text-align: center; margin-bottom: 1.4rem; }
.ug-title { font-family: var(--serif); font-weight: 300; font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.01em; line-height: 1.05; }
.ug-content > p:not(.ut-pg-empty) {
  max-width: 40rem; margin: 0 auto clamp(3rem, 7vh, 5rem); text-align: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--muted);
}

/* the wall */
.ug-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 42vw), 1fr));
  gap: clamp(2.6rem, 5vw, 4.5rem) clamp(1.2rem, 3.5vw, 3.2rem);
  justify-items: center;
}
.ug-item { width: 100%; max-width: 300px; display: flex; flex-direction: column; align-items: center; }
.ug-open {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; color: inherit;
  cursor: zoom-in; -webkit-tap-highlight-color: transparent;
}
.ug-phone.iphone { --pw: 100%; width: 100%; transition: transform .6s var(--ease), filter .6s var(--ease); }
.ug-phone .ip-screen { cursor: inherit; }
.ug-phone .ip-body, .ug-phone .ip-glass, .ug-phone .ip-btn, .ug-phone .ip-island { transition: opacity .55s var(--ease); }
.ug-phone .ip-screen { transition: transform .55s var(--ease), clip-path .55s var(--ease), border-radius .55s var(--ease); }

/* hover / keyboard focus: the frame fades away and the clean, uncropped image lifts out */
@media (hover: hover) {
  .ug-open:hover .ug-phone { transform: translateY(-10px) scale(1.035); filter: drop-shadow(0 34px 44px rgba(0,0,0,0.8)); }
  .ug-open:hover .ip-btn, .ug-open:hover .ip-island { opacity: 0; }
  .ug-open:hover .ip-screen { transform: scale(1.06); border-radius: 0; -webkit-clip-path: inset(0 round 0); clip-path: inset(0 round 0); }
}
.ug-open:focus-visible { outline: none; }
.ug-open:focus-visible .ug-phone { transform: translateY(-10px) scale(1.035); }
.ug-open:focus-visible .ip-btn, .ug-open:focus-visible .ip-island { opacity: 0; }
.ug-open:focus-visible .ip-screen { transform: scale(1.06); border-radius: 0; -webkit-clip-path: inset(0 round 0); clip-path: inset(0 round 0); outline: 1px solid #bdbdbd; outline-offset: 6px; }

.ug-cap { margin-top: 1.3rem; text-align: center; display: grid; gap: 0.3rem; }
.ug-style { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.15; color: var(--text); }
.ug-style.style-name--rose { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.ug-style.style-name--tachyon { font-size: clamp(0.95rem, 1.2vw, 1.15rem); }
.ug-subject { font-family: var(--serif); font-weight: 500; font-size: 1.1rem; letter-spacing: 0.02em; color: #bdbdbd; }

/* empty state: one quiet, empty frame (copy to come from Daniel via [ut_atelier_gallery empty="…"]) */
.ug-empty { display: grid; justify-items: center; gap: 1.5rem; padding: 1rem 0 2rem; }
.ug-empty-phone { width: min(220px, 50vw); opacity: 0.35; }
.ug-empty-phone .ip-screen { background: #0c0c0f; }
.ug-empty-line { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--muted); text-align: center; }

/* lightbox: the clean image, object-fit: contain, never cropped */
.ug-lightbox {
  margin: 0; padding: 0; border: 0; background: rgba(4,4,5,0.96); color: var(--text);
  width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden;
}
.ug-lightbox::backdrop { background: rgba(4,4,5,0.9); }
.ug-lightbox[open] { display: grid; place-items: center; }
.ug-lb-fig { margin: 0; display: grid; justify-items: center; gap: 0.9rem; max-width: 100vw; }
.ug-lb-img { display: block; width: auto; height: auto; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 6rem); object-fit: contain; border-radius: 0; }
.ug-lb-cap { font-family: var(--serif); font-size: 1.15rem; color: #bdbdbd; letter-spacing: 0.02em; text-align: center; }
.ug-lb-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(20,20,24,0.7); color: var(--text); border: 1px solid rgba(242,239,232,0.2); border-radius: 50%; cursor: pointer;
}
.ug-lb-close:focus-visible { outline: 1px solid #bdbdbd; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .ug-phone.iphone, .ug-phone .ip-body, .ug-phone .ip-glass, .ug-phone .ip-btn, .ug-phone .ip-island, .ug-phone .ip-screen { transition: none; }
}
.ug-phone .ip-lock { transition: opacity .55s var(--ease); }
@media (hover: hover) { .ug-open:hover .ip-lock { opacity: 0; } }
.ug-open:focus-visible .ip-lock { opacity: 0; }
/* the Gallery's phone is built from spans (inside a <button>), so make the frame block-level */
.ug-phone.iphone, .ug-phone span { display: block; }
/* hover/focus: the clean image grows over its own frame (frame hidden beneath it, art uncropped) */
.ug-phone .ip-glass, .ug-phone .ip-body { overflow: visible; }