.gallery-page {
  --gallery-frame: #303629;
}
.gallery-page main { background: var(--paper); }
.gallery-page .nav a[aria-current="page"] {
  color: var(--rust);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .38em;
}

.gallery-hero {
  background: radial-gradient(ellipse at 16% 9%, #f6f0e3, transparent 72%), linear-gradient(165deg, #ece1cc, #d9caac);
}
.gallery-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.7rem);
  padding-block: clamp(8.25rem, 11vw, 10.3rem) clamp(2.5rem, 6vw, 5rem);
}
.gallery-intro { grid-area: 1 / 2; }
.gallery-intro h1 {
  margin-block: .16em .13em;
  font-size: clamp(4.4rem, 8.3vw, 8.5rem);
  line-height: .84;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: wrap;
}
.gallery-intro > p:not(.eyebrow) { max-width: 43ch; color: var(--soft-ink); font-size: clamp(1rem, 1.45vw, 1.16rem); }
.gallery-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem 1.15rem;
  margin-top: 1.4rem;
}
.gallery-actions .text-link { color: var(--ink); }
.gallery-photo { display: block; position: relative; border-radius: 4px; }
.gallery-photo img { border-radius: inherit; }
.gallery-photo .expand { width: 40px; height: 40px; right: 11px; bottom: 11px; }
.gallery-photo:hover .expand { transform: scale(1.09); }
.gallery-cover-group { grid-area: 1 / 1; min-width: 0; }
.gallery-cover {
  min-width: 0;
  padding: .5rem .5rem 0;
  border: 1px solid #5c5d4b;
  border-radius: 5px;
  background: var(--gallery-frame);
  color: var(--cream);
  box-shadow: .5rem .5rem 0 #a48f6e65;
}
.gallery-cover figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  padding: .78rem .45rem;
  letter-spacing: .09em;
}
.gallery-cover figcaption > span:first-child { display: grid; gap: .18rem; }
.gallery-cover figcaption strong { font-size: .83rem; letter-spacing: .11em; }
.gallery-award-mark { padding: .42rem .55rem; border: 1px solid #cbb28b9e; border-radius: 3px; color: #f0d6af; }

.gallery-angles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: .55rem;
  margin: .72rem 0 0;
  padding: 0;
  list-style: none;
}
.gallery-angle {
  display: grid;
  grid-template-columns: 2.8rem minmax(0, 1fr);
  align-items: center;
  gap: .45rem;
  min-height: 46px;
  padding: .24rem .4rem .24rem .24rem;
  border: 1px solid #b6a489;
  border-radius: 4px;
  color: var(--ink);
  background: #f3ecde;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.28;
}
.gallery-angle img { width: 2.8rem; height: 2.65rem; object-fit: contain; background: #e2d8c6; border-radius: 2px; }
.gallery-angle > span { display: flex; align-items: center; gap: .32rem; }
.gallery-angle svg { flex: 0 0 13px; width: 13px; height: 13px; }
.gallery-angle:hover { background: #fff7e8; }
.gallery-cover-group > .gallery-angles { width: fit-content; margin-top: 1rem; }

.gallery-customers { padding-block: clamp(3rem, 6vw, 5.8rem); }
.gallery-customer-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, .93fr) minmax(0, .84fr);
  grid-template-areas: "ledge wall base" "ledge duo duo";
  align-items: start;
  gap: clamp(1.2rem, 2.7vw, 2.45rem);
  margin-top: clamp(1.4rem, 3.8vw, 2.8rem);
}
.gallery-ledge { grid-area: ledge; }
.gallery-wall { grid-area: wall; }
.gallery-base { grid-area: base; }
.gallery-duo { grid-area: duo; }
.gallery-customer-layout .gallery-photo { outline: 1px solid #b7a68e73; }
.gallery-caption {
  padding-top: .75rem;
  color: var(--soft-ink);
  font: 400 .95rem/1.5 var(--body);
  letter-spacing: normal;
  text-transform: none;
}
.gallery-caption h3 { color: var(--ink); font-size: clamp(1.8rem, 2.8vw, 2.65rem); line-height: .98; text-wrap: wrap; }
.gallery-caption h3 + p { margin-top: .35rem; }
.gallery-inset {
  position: relative;
  display: block;
  margin-top: 1rem;
  border-radius: 4px;
  overflow: hidden;
}
.gallery-inset img { aspect-ratio: 2.4; object-fit: cover; object-position: center 66%; }
.gallery-inset span {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 36px;
  padding: .48rem .62rem;
  color: var(--cream);
  background: var(--forest);
  font-size: .79rem;
  font-weight: 700;
}
.gallery-inset svg { width: 16px; height: 16px; }
.gallery-duo {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(.55rem, 1.5vw, 1.15rem);
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: #e9dfcc;
}
.gallery-duo .gallery-caption { padding-top: 0; }
.gallery-next { margin-top: clamp(.9rem, 2.4vw, 1.6rem); color: var(--rust); }
.gallery-collection { margin-top: clamp(2rem, 5vw, 4.2rem); padding-top: clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--rule); }
.gallery-collection-heading h3 { font-size: clamp(2.15rem, 4vw, 3.4rem); line-height: 1; text-wrap: wrap; }
.gallery-collection-heading p { margin-top: .35rem; color: var(--soft-ink); }
.gallery-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.15rem, 2.5vw, 2rem) clamp(.65rem, 2.1vw, 1.65rem);
  margin-top: clamp(1.15rem, 2.6vw, 1.8rem);
}
.gallery-collection-grid img { aspect-ratio: 4 / 5; object-fit: contain; background: #ded6c5; }
.gallery-collection-grid figcaption { padding-top: .52rem; color: var(--ink); font-size: .72rem; letter-spacing: .085em; }

.gallery-show { background: var(--forest); color: var(--cream); }
.gallery-show-inner { padding-block: clamp(2.7rem, 5.5vw, 5.4rem); }
.gallery-show .index, .gallery-show .gallery-caption .eyebrow, .gallery-waterfowl .eyebrow, .gallery-show-feature .eyebrow { color: var(--sand); }
.gallery-show .section-heading > p:not(.eyebrow), .gallery-show .gallery-caption, .gallery-waterfowl-copy > p:not(.eyebrow), .gallery-show-feature-copy > p:not(.eyebrow) { color: #e2ddcf; }
.gallery-show .gallery-caption h3 { color: var(--cream); }
.gallery-show-row {
  display: grid;
  grid-template-columns: minmax(0, .89fr) minmax(0, 1.05fr) minmax(0, 1.16fr);
  align-items: start;
  gap: clamp(1rem, 2.6vw, 2.45rem);
  margin-top: clamp(1.3rem, 3.2vw, 2.3rem);
}
.gallery-show-row .gallery-photo { border: 1px solid #b6a68480; }
.gallery-show .gallery-angle { background: #343e30; color: var(--cream); border-color: #b6a68480; }
.gallery-show .gallery-angle:hover { background: #46503e; }
.gallery-show .gallery-angle img { background: #232a20; }
.gallery-caption .eyebrow { margin-bottom: .35rem; font-size: .65rem; letter-spacing: .09em; }
.gallery-show-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  align-items: center;
  gap: clamp(1.4rem, 6vw, 5rem);
  margin-top: clamp(2rem, 4.5vw, 4.2rem);
  padding-top: clamp(1.35rem, 4vw, 3.5rem);
  border-top: 1px solid #b6a68480;
}
.gallery-show-feature > figure { width: min(100%, 24rem); justify-self: center; }
.gallery-show-feature-copy > p:not(.eyebrow) { max-width: 46ch; }
.gallery-show-feature-copy h3 { margin: .3rem 0 .5rem; font-size: clamp(2.55rem, 5.3vw, 5rem); line-height: .96; text-wrap: wrap; }
.gallery-show-feature .gallery-angles { max-width: 26rem; margin-top: 1rem; }
.gallery-waterfowl {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(1.3rem, 5vw, 4.5rem);
  margin-top: clamp(2rem, 4.5vw, 4.2rem);
  padding: clamp(.75rem, 2.1vw, 1.6rem);
  border: 1px solid #bdab866b;
  border-radius: 5px;
  background: #ffffff07;
}
.gallery-waterfowl-copy { padding: clamp(.25rem, 2vw, 1.6rem); }
.gallery-waterfowl-copy h3 { margin: .28rem 0 .5rem; font-size: clamp(2.55rem, 5.3vw, 5rem); line-height: .96; text-wrap: wrap; }
.gallery-waterfowl-copy > p:not(.eyebrow) { max-width: 43ch; }
.gallery-waterfowl .text-link { margin-top: .55rem; color: var(--sand); }
.gallery-workbench { background: #e4e3d4; }
.gallery-workbench-inner { padding-block: clamp(2.8rem, 6vw, 5.5rem); }
.gallery-workbench .gallery-collection-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gallery-workbench .gallery-collection-grid img { background: #d6d7c9; }
.gallery-page .commission::before {
  background: linear-gradient(180deg, #e4e3d4, #e4e3d400 clamp(5rem, 11vw, 9rem), #1a211800 68%, var(--footer-bg)),
    linear-gradient(90deg, #19211768, #19211722),
    url("../assets/photos/ozark-river-habitat.webp") center 69% / cover no-repeat;
}

.gallery-dialog { width: min(62rem, calc(100% - 24px)); max-height: calc(100dvh - 24px); }
.gallery-dialog form { justify-content: space-between; align-items: center; gap: .5rem; }
.gallery-dialog form > button { margin-left: auto; }
.gallery-dialog-controls:not([hidden]) { display: flex; align-items: center; gap: .55rem; }
.gallery-dialog-controls button { display: grid; place-items: center; }
.gallery-dialog-controls svg { width: 21px; height: 21px; }
.gallery-dialog-controls [data-photo-previous] svg { transform: rotate(180deg); }
.gallery-dialog-controls output { min-width: 4.25rem; text-align: center; color: var(--cream); font-size: .85rem; }
.gallery-dialog figure > img { width: 100%; height: min(67svh, 680px); object-fit: scale-down; }

@media (max-width: 900px) {
  .gallery-customer-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "ledge wall" "base duo";
  }
  .gallery-duo { display: block; }
  .gallery-duo .gallery-caption { padding: .7rem .15rem .25rem; }
  .gallery-workbench .gallery-collection-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .gallery-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-block: clamp(7.6rem, 25vw, 8.8rem) 2.35rem;
  }
  .gallery-intro { grid-area: 1 / 1; }
  .gallery-cover-group { grid-area: 2 / 1; }
  .gallery-cover { margin-right: .36rem; box-shadow: .36rem .36rem 0 #a48f6e65; }
  .gallery-intro h1 { font-size: clamp(3.45rem, 12vw, 6rem); }
  .gallery-actions { gap: .28rem .8rem; margin-top: 1rem; }
  .gallery-cover figcaption { font-size: .63rem; }
  .gallery-customer-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ledge" "wall" "base" "duo"; }
  .gallery-show-row, .gallery-show-feature, .gallery-waterfowl { grid-template-columns: minmax(0, 1fr); }
  .gallery-collection-grid, .gallery-workbench .gallery-collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-show-row { gap: 1.5rem; }
  .gallery-waterfowl-copy { padding: .35rem .35rem 0; }
}