.archive-filters {
  grid-template-columns: minmax(170px, 1.3fr) 96px 96px auto;
  max-width: 760px;
  margin: 16px 0 12px;
  padding: 8px 10px;
  gap: 8px;
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--surface-muted) 84%, var(--surface)), var(--surface-muted))
}

.archive-filters label {
  gap: 3px;
  font-size: 8px;
  letter-spacing: .08em
}

.archive-filters select {
  min-height: 34px;
  padding: 7px 26px 7px 9px;
  border-radius: 8px;
  font-size: 12px
}

.archive-filters .button {
  min-height: 34px;
  padding: 0 13px;
  align-self: end;
  font-size: 9px
}

.archive-toolbar {
  margin: 10px 0 15px;
  padding: 0 0 13px;
  font-size: 12px
}

.archive-session__header {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  padding: 10px 14px
}

.archive-session__header>div:nth-child(2) {
  display: flex;
  flex: 1;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 3px 9px;
  min-width: 0
}

.session-icon {
  width: 31px;
  height: 31px;
  border-radius: 9px
}

.session-icon svg {
  width: 18px;
  height: 18px
}

.session-date {
  font-size: 8px
}

.archive-session h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15
}

.archive-session__header p {
  font-size: 11px;
  white-space: nowrap
}

.session-actions {
  margin-left: auto
}

.session-review-trigger {
  padding: 6px 8px;
  font-size: 8px
}

.review-published {
  width: 21px;
  height: 21px;
  font-size: 12px
}

.gallery-wrap {
  padding-top: 12px
}

.gallery-card {
  transition: flex-basis .24s var(--ease), transform .24s var(--ease), filter .24s var(--ease)
}

.gallery-card:has(.gallery-selector input:checked) {
  transform: scale(1.045);
  filter: saturate(1.08);
  z-index: 5
}

.gallery-card:has(.gallery-selector input:checked) .gallery-photo {
  border-color: color-mix(in srgb, var(--wine) 70%, #ffd77c);
  background: linear-gradient(135deg, #d27638, #ffcd72 28%, #fff2cc 55%, #b84645);
  box-shadow: 0 0 0 3px color-mix(in srgb, #f0a73d 55%, var(--wine)), 0 0 26px rgba(196, 102, 40, .46), 10px 12px 0 color-mix(in srgb, var(--surface-muted) 65%, var(--wine))
}

.gallery-card:has(.gallery-selector input:checked) .gallery-selector {
  font-weight: 700;
  color: #fff7c6
}

.gallery-card.is-wheel-active {
  flex-basis: 250px;
  z-index: 4;
  filter: saturate(1.08)
}

.gallery-card.is-wheel-active .gallery-photo {
  transform: translateY(-4px);
  box-shadow: 10px 12px 0 color-mix(in srgb, var(--surface-muted) 80%, var(--wine))
}

.gallery-scroll {
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #312f29 0 2deg, #e6dccd 2deg 10deg);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--line), 0 8px 17px rgba(48, 42, 33, .17);
  color: var(--surface);
  font-size: 0;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease)
}

.gallery-scroll::before {
  display: grid;
  place-items: center;
  content: '‹';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 28%, #6e6960, #262522 66%);
  color: #f7f2e9;
  font: 400 22px/1 var(--sans);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .2)
}

.gallery-scroll--next::before {
  content: '›'
}

.gallery-scroll:hover {
  transform: translateY(-50%) rotate(22deg);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--wine) 55%, var(--line)), 0 10px 20px rgba(48, 42, 33, .24)
}

.photo-viewer figure {
  width: min(90vw, 1220px);
  height: auto;
  max-height: calc(100vh - 82px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(54, 50, 44, .96), rgba(17, 17, 16, .98));
  box-shadow: 0 0 0 7px rgba(238, 227, 209, .13), 0 28px 90px rgba(0, 0, 0, .58)
}

.photo-viewer img {
  max-height: calc(100vh - 150px);
  border: 5px solid #eee3d1;
  border-radius: 15px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45)
}

.photo-viewer figcaption {
  margin: 10px 0 1px;
  color: #f4e9d9
}

.viewer-nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #e6dccd 0 2deg, #37342f 2deg 10deg);
  font-size: 0
}

.viewer-nav::after {
  display: grid;
  place-items: center;
  content: '‹';
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: #292724;
  color: #fff;
  font: 400 24px/1 var(--sans)
}

.viewer-nav--next::after {
  content: '›'
}

.viewer-nav:hover {
  transform: rotate(24deg) scale(1.06)
}

@media(max-width:760px) {
  .archive-filters {
    grid-template-columns: 1fr 1fr;
    max-width: none
  }

  .archive-filters .button {
    grid-column: auto
  }

  .archive-session__header {
    align-items: flex-start
  }

  .archive-session__header>div:nth-child(2) {
    display: grid;
    gap: 1px
  }

  .archive-session__header p {
    white-space: normal
  }

  .gallery-card.is-wheel-active {
    flex-basis: 190px
  }

  .photo-viewer figure {
    width: calc(100vw - 36px);
    padding: 8px;
    border-radius: 17px
  }

  .photo-viewer img {
    border-width: 3px;
    border-radius: 11px
  }

  .viewer-nav {
    width: 40px;
    height: 40px
  }
}

@media(max-width:430px) {
  .archive-filters {
    grid-template-columns: 1fr
  }

  .archive-filters .button {
    grid-column: auto
  }

  .archive-session__header {
    padding: 9px 10px
  }

  .archive-session h3 {
    font-size: 16px
  }

  .gallery-card.is-wheel-active {
    flex-basis: 168px
  }
}