/* Photo album */
html { scrollbar-gutter:stable }
.photo-album {
  margin-top:24px;
  padding:26px;
  background:#fffdf7;
  border:1px solid #e8e4d7;
  border-radius:20px;
  box-shadow:0 12px 32px #193c2b08
}
.album-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:20px
}
.album-heading h2 {
  margin:0;
  color:#123d31;
  font:600 clamp(25px,3vw,32px)/1.2 'Playfair Display',Georgia,serif
}
.album-total {
  flex-shrink:0;
  padding:5px 13px;
  border:1px solid #1d514124;
  border-radius:999px;
  background:#1d51410c;
  color:#1d5141;
  font-size:12px;
  font-weight:600
}
.album-lead {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:14px;
  margin-bottom:14px
}
.album-lead > :first-child { grid-row:span 2 }
.album-lead > :not(:first-child) { aspect-ratio:4/3 }
.album-tiles {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}
.album-tiles > .album-photo { aspect-ratio:4/3 }
.album-photo {
  position:relative;
  display:block;
  min-width:0;
  overflow:hidden;
  border-radius:12px;
  background:#e7e6db;
  box-shadow:0 3px 10px #14251e10;
  cursor:zoom-in;
  -webkit-tap-highlight-color:transparent
}
.album-photo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease
}
.album-photo:focus-visible {
  outline:3px solid #b89952;
  outline-offset:4px
}
.album-zoom {
  opacity:.72;
  position:absolute;
  right:10px;
  bottom:10px;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  color:#123d31;
  background:#fffdf7eb;
  box-shadow:0 2px 9px #102a2225;
  pointer-events:none;
  transition:background .2s ease
}
.album-help {
  margin:18px 0 0;
  color:#59645c;
  font-size:12px;
  text-align:center
}
@media (hover:hover) {
  .album-photo:hover img { transform:scale(1.035) }
  .album-photo:hover .album-zoom { background:#fffdf7 }
}
.album-lightbox {
  position:fixed;
  inset:0;
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  max-height:none;
  margin:0;
  padding:20px max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));
  border:0;
  background:#0d211bf7;
  color:#fffdf7;
  overscroll-behavior:contain
}
.album-lightbox[open] {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:16px
}
.album-lightbox::backdrop { background:#0d211b }
.album-lightbox-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.album-lightbox-title { font:500 18px 'Playfair Display',Georgia,serif }
.album-lightbox-button {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  padding:0;
  border:1px solid #fffdf733;
  border-radius:50%;
  background:#fffdf710;
  color:#fffdf7;
  font:400 29px/1 Arial,sans-serif;
  cursor:pointer;
  touch-action:manipulation
}
.album-lightbox-button:hover { background:#fffdf72b }
.album-lightbox-button:focus-visible { outline:3px solid #b89952; outline-offset:3px }
.album-lightbox-button:disabled { opacity:.35; cursor:default }
.album-lightbox-viewer {
  position:relative;
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  align-items:center;
  gap:20px;
  min-height:0;
  min-width:0;
  touch-action:pan-y pinch-zoom
}
.album-lightbox-image {
  display:block;
  width:100%;
  height:100%;
  max-height:100%;
  min-height:0;
  min-width:0;
  object-fit:contain;
  border-radius:6px;
  transition:opacity .15s ease;
  user-select:none;
  -webkit-user-select:none
}
.album-lightbox-image.is-loading { opacity:.45 }
.album-lightbox-counter {
  margin:0;
  color:#e8ece4;
  text-align:center;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em
}
.album-lightbox-error {
  position:absolute;
  inset:40% 60px auto;
  padding:14px;
  text-align:center;
  background:#0d211b
}
@media (max-width:900px) {
  .album-tiles { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:620px) {
  .photo-album { padding:14px; margin-top:18px; border-radius:16px }
  .album-heading { gap:10px; margin-bottom:16px }
  .album-total { padding:4px 10px; font-size:11px }
  .album-lead { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:10px }
  .album-lead > :first-child { grid-column:1/-1; grid-row:auto; aspect-ratio:4/3 }
  .album-tiles { gap:10px }
  .album-photo { border-radius:9px }
  .album-help { font-size:11px; margin-top:14px }
  .album-lightbox { padding-top:max(12px,env(safe-area-inset-top)); padding-bottom:max(16px,env(safe-area-inset-bottom)) }
  .album-lightbox[open] { gap:12px }
  .album-lightbox-title { font-size:16px }
  .album-lightbox-viewer { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 44px; gap:12px }
  .album-lightbox-image { grid-column:1; grid-row:1 }
  .album-lightbox-viewer > button { grid-column:1; grid-row:2; z-index:1 }
  .album-lightbox-viewer > button:first-child { justify-self:start }
  .album-lightbox-viewer > button[data-album-next] { justify-self:end }
  .album-lightbox-error { inset:40% 0 auto }
}
@media (prefers-reduced-motion:reduce) {
  .album-photo img,.album-zoom,.album-lightbox-image { transition:none }
}
/* Three portrait photographs of the riding club. */
.album-portraits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px
}
.album-portraits > .album-photo { aspect-ratio:3/4 }
.album-portraits .album-photo img { object-position:center 55% }
@media (max-width:620px) {
  .album-portraits { grid-template-columns:minmax(0,1fr); gap:14px }
}

.album-portraits.album-inline { margin-top:24px }