/* ===================================================================
   GALLERY PAGE — polaroid grid + PhotoSwipe theming
   Used by doors-of-brooklyn.html and inflation-of-brooklyn.html
=================================================================== */

.gallery-hero{
  text-align:center;
  padding: 40px 0 28px;
  max-width: 760px;
  margin: 0 auto;
}
.gallery-hero .eyebrow{
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--umber);
  margin-bottom: 12px;
}
.gallery-hero h1{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -.005em;
  margin: 0 0 18px;
}
.gallery-hero h1 em{
  font-style: italic;
  color: var(--umber-deep);
}
.gallery-hero .sub{
  font-family: var(--f-body);
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 auto;
}
.gallery-hero .backlink{
  display: inline-block;
  margin-top: 22px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--umber);
  text-decoration: none;
  border-bottom: 1px solid rgba(140,90,44,.35);
  padding-bottom: 2px;
}
.gallery-hero .backlink:hover{ color: var(--umber-deep); border-color: var(--umber-deep) }

/* --- masonry-ish photo grid --- */
.photo-grid{
  column-count: 1;
  column-gap: 22px;
  padding: 28px 0 60px;
}
@media (min-width: 680px){ .photo-grid{ column-count: 2 } }
@media (min-width: 1060px){ .photo-grid{ column-count: 3 } }

.photo-grid a.tile{
  display: block;
  break-inside: avoid;
  margin: 0 0 22px;
  padding: 10px 10px 34px;
  background: var(--card);
  border: 1px solid var(--card-edge);
  box-shadow:
    0 1px 0 rgba(26,21,16,.04),
    0 22px 34px -26px rgba(26,21,16,.35);
  transition: transform .25s ease, box-shadow .25s ease;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.photo-grid a.tile:nth-child(6n+1){ transform: rotate(-.45deg) }
.photo-grid a.tile:nth-child(6n+2){ transform: rotate(.55deg) }
.photo-grid a.tile:nth-child(6n+3){ transform: rotate(-.3deg) }
.photo-grid a.tile:nth-child(6n+4){ transform: rotate(.25deg) }
.photo-grid a.tile:nth-child(6n+5){ transform: rotate(-.7deg) }
.photo-grid a.tile:nth-child(6n)  { transform: rotate(.4deg) }
.photo-grid a.tile:hover{
  transform: rotate(0) translateY(-3px);
  box-shadow:
    0 1px 0 rgba(26,21,16,.04),
    0 30px 42px -26px rgba(26,21,16,.45);
  z-index: 2;
}
.photo-grid a.tile img{
  width: 100%;
  height: auto;
  display: block;
  background: var(--paper-warm);
}

/* --- PhotoSwipe theming overrides — cream palette --- */
.pswp{
  --pswp-bg: #1a1510;
  --pswp-placeholder-bg: #2a2218;
  --pswp-icon-color: #f0e6cb;
  --pswp-icon-color-secondary: #1a1510;
  --pswp-icon-stroke-color: #1a1510;
  --pswp-icon-stroke-width: 1;
  --pswp-error-text-color: #d9cba4;
}
.pswp__bg{ background: rgba(26,21,16,.94) !important }
.pswp__counter{
  font-family: var(--f-mono);
  font-size: 13px !important;
  letter-spacing: .14em;
  color: rgba(240,230,203,.7) !important;
  opacity: 1 !important;
}