@import url("style.css");

.gallery-page .site-header {
  position: relative;
}

.gallery-page .brand {
  width: clamp(155px, 15vw, 230px);
}

.gallery-main {
  padding: clamp(80px, 10vw, 165px) var(--pad) 120px;
}

.gallery-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
  gap: clamp(40px, 9vw, 140px);
  align-items: end;
  margin-bottom: clamp(70px, 9vw, 140px);
}

.gallery-heading h1 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(60px, 10vw, 158px);
  line-height: .82;
  letter-spacing: -.075em;
  text-transform: uppercase;
  text-shadow: var(--emboss-shadow);
}

.gallery-introduction {
  margin: 0 0 6px;
  color: var(--muted);
  font-family: "Iowan Old Style", Baskerville, Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 1.6vw, 25px);
  font-style: italic;
  line-height: 1.5;
}

.artwork-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(26px, 4vw, 68px) clamp(18px, 2.6vw, 42px);
}

.artwork-card {
  grid-column: span 6;
  margin: 0;
}

.artwork-card:nth-child(3n + 1) { grid-column: span 7; }
.artwork-card:nth-child(3n + 2) { grid-column: span 5; }

.artwork-open {
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--ink);
  border: 0;
  cursor: zoom-in;
}

.artwork-open img {
  width: 100%;
  height: auto;
  transition: transform 650ms cubic-bezier(.2,.7,.2,1), opacity 300ms ease;
}

.artwork-open:hover img,
.artwork-open:focus-visible img { transform: scale(1.018) rotate(.18deg); opacity: .94; }


.gallery-empty {
  padding: 70px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.gallery-footer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 110px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.art-viewer {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 50px;
  color: white;
  background: rgba(16,18,20,.96);
  border: 0;
}

.art-viewer::backdrop { background: rgba(16,18,20,.84); }
.art-viewer figure { display: grid; place-items: center; height: 100%; margin: 0; }
.art-viewer img { max-width: 100%; max-height: calc(100vh - 110px); object-fit: contain; }
.viewer-close { position: fixed; z-index: 2; top: 20px; right: 24px; padding: 10px; color: white; background: transparent; border: 0; font-size: 28px; cursor: pointer; }

@media (max-width: 800px) {
  .gallery-page .site-header { align-items: center; }
  .gallery-heading { grid-template-columns: 1fr; }
  .artwork-card,
  .artwork-card:nth-child(n) { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .gallery-page .site-header { flex-direction: column; gap: 28px; }
  .gallery-page .brand { align-self: flex-start; }
  .gallery-page nav { align-self: stretch; grid-template-columns: repeat(3, auto); }
  .gallery-main { padding-top: 70px; }
  .art-viewer { padding: 20px; }
}

.viewer-prev,
.viewer-next {
  position: fixed;
  z-index: 2;
  top: 50%;
  width: 52px;
  height: 72px;
  padding: 0;
  color: white;
  background: rgba(255,255,255,.08);
  border: 0;
  font-size: 48px;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
}
.viewer-prev { left: 18px; }
.viewer-next { right: 18px; }
.viewer-prev:hover,
.viewer-next:hover { background: rgba(255,255,255,.16); }

@media (max-width: 600px) {
  .viewer-prev, .viewer-next { width: 42px; height: 60px; font-size: 38px; }
  .viewer-prev { left: 6px; }
  .viewer-next { right: 6px; }
}


/* Persistent quick navigation */
.floating-nav {
  position: fixed;
  z-index: 40;
  right: clamp(14px, 2.2vw, 34px);
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 6px;
  background: rgba(20, 21, 23, .88);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.floating-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  color: #fff;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.floating-nav a:hover,
.floating-nav a:focus-visible {
  color: #17181a;
  background: var(--accent, #f47a20);
  transform: translateY(-1px);
}

.floating-nav__top span {
  margin-left: 7px;
  font-size: 13px;
}

@media (max-width: 520px) {
  .floating-nav {
    right: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100% - 24px);
    justify-content: stretch;
    transform: translateX(50%);
  }
  .floating-nav a { flex: 1; padding-inline: 10px; }
}