*, *::before, *::after {margin:0;padding:0;box-sizing:border-box}
html,body {background:#000}
body {-webkit-font-smoothing:antialiased}
.gallery-container {
  min-height: 100svh;
  background: radial-gradient(ellipse at center, #141414, #030303 75%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.gallery-container * {
  box-sizing: border-box;
}

.gallery-container picture {
  display: contents;
}

.gallery-container .frame-outer {
  padding: 18px;
  background: #0a0a0a;
  border: 1px solid #262626;
  box-shadow: 0 30px 70px #000, inset 0 1px 0 #383838;
}

.gallery-container .matboard {
  padding: 32px;
  background: #f2f2ec;
  border: 4px solid #e3e3dd;
  box-shadow: inset 0 3px 16px #0002;
}

.gallery-container .artwork-img {
  display: block;
  height: calc(100svh - 158px);
  width: auto;
  max-width: calc(100vw - 158px);
  object-fit: contain;
  box-shadow: 0 8px 20px #0005;
}

/* Phones use the entire visible screen; tablets retain the gallery frame. */
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .gallery-container {
    padding: 0;
    height: 100svh;
    background: #000;
    overflow: hidden;
  }

  .gallery-container .frame-outer,
  .gallery-container .matboard {
    display: contents;
  }

  .gallery-container .artwork-img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    box-shadow: none;
  }
}
.gallery-wordmark {
  position: fixed;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.65em;
  max-width: calc(100vw - 40px);
  color: #f2f2ec;
  font-family: "Courier New", Courier, monospace;
  font-size: clamp(12px, 3.25vw, 16px);
  line-height: 1.3;
  opacity: 0.94;
  filter: blur(0.15px);
  pointer-events: none;
}

.gallery-wordmark-cursor {
  color: #931b25;
}

.gallery-wordmark-brand {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: 4.14em;
  height: 1.27206em;
  background: linear-gradient(to right, currentColor 78.2%, transparent 78.2%);
  -webkit-mask: url('assets/lima-reference-mask.png') center / contain no-repeat;
  mask: url('assets/lima-reference-mask.png') center / contain no-repeat;
}

.gallery-wordmark-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #931b25;
  clip-path: inset(0 0 0 78.2%);
}

.gallery-wordmark-phrase {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.05em;
  transform: translateY(4px);
  font-weight: 700;
}

.gallery-wordmark-typing {
  display: inline-block;
  width: 0;
  overflow: hidden;
  animation: gallery-type 1.7s steps(17, end) 0.8s forwards;
}

.gallery-wordmark-cursor {
  animation: gallery-cursor 1s step-end infinite;
}

@keyframes gallery-type {
  to { width: 17ch; }
}

@keyframes gallery-cursor {
  50% { opacity: 0; }
}

@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .gallery-wordmark { color: #171715; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-wordmark-typing { width: 17ch; animation: none; }
  .gallery-wordmark-cursor,
  .gallery-wordmark-brand::after { animation: none; }
}