.gallery-hero {padding: 42px 0 49px; background: linear-gradient(120deg,#edf8ff,#dff1ff); border-bottom: 1px solid var(--line)}
.gallery-back {display: inline-block; margin-bottom: 19px; color: #07578c; font-weight: 750; font-size: 14px}
.gallery-back:hover,.gallery-link:hover {text-decoration: underline}
.gallery-hero h1 {margin: 0 0 12px; font-size: clamp(38px,6vw,64px)}
.gallery-hero .wrap > p:last-child,.field-copy p {color: var(--muted)}
.gallery-content {padding-top: 43px}
.gallery-list-heading {font-size: clamp(25px,4vw,35px); margin-bottom: 17px}
.gallery-index {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; margin-bottom: 43px}
.gallery-index-card {display: flex; align-items: center; gap: 12px; min-width: 0; padding: 9px; background: #fff; border: 1px solid var(--line); border-radius: 16px}
.gallery-index-card:hover {border-color: #83b8df; background: #f5fbff}
.gallery-index-card img {width: 29%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: #eaf6ff}
.gallery-index-card h2 {font-size: 17px; margin: 4px 0; line-height: 1.3}
.gallery-type,.gallery-link {color: #07578c; font-size: 12px; font-weight: 800}
.field-cases {display: grid; gap: 14px}
.field-case {padding: 23px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 92px}
.field-case:target {border-color: #7db5e0; box-shadow: 0 0 0 2px #d8efff}
.field-copy h3 {margin: 5px 0 9px; font-size: clamp(21px,3.4vw,30px)}
.field-copy .source {margin-top: 9px}
.field-details {margin-top: 15px; border-top: 1px solid var(--line)}
.field-details summary {width: fit-content; padding: 12px 4px 3px; color: #07578c; font-weight: 800; cursor: pointer}
.field-details summary:focus-visible,.photo-dialog button:focus-visible {outline: 3px solid #0674c8; outline-offset: 3px}
.photo-album h4 {margin: 15px 0 9px; color: #173d61; font-size: 16px}
.field-photos {display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px}
.field-photo {display: block; border-radius: 9px; overflow: hidden; background: #edf4fa}
.field-photo img {width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover}
.photo-dialog {width: min(920px,calc(100% - 28px)); max-height: calc(100% - 24px); padding: 0; color: #fff; background: #10273d; border: 0; border-radius: 15px}
.photo-dialog::backdrop {background: #051325d9}
.photo-dialog-inner {display: grid; justify-items: center; padding: 42px 12px 10px}
.photo-dialog img {display: block; width: auto; max-width: 100%; height: auto; max-height: 73dvh; object-fit: contain}
.photo-dialog button {min-width: 40px; min-height: 36px; border-radius: 9px; border: 1px solid #7395b1; background: #183e61; color: #fff; cursor: pointer}
.photo-dialog button:disabled {opacity: .45; cursor: default}
.photo-close {position: absolute; top: 5px; right: 7px; font-size: 24px; line-height: 1}
.photo-dialog-nav {display: flex; justify-content: center; gap: 14px; align-items: center; padding-top: 8px; font-size: 14px}
@media (max-width: 900px) {
  .gallery-index {grid-template-columns: repeat(2,minmax(0,1fr))}
  .field-photos {grid-template-columns: repeat(4,minmax(0,1fr))}
}
@media (max-width: 560px) {
  .gallery-hero {padding: 24px 0 31px}
  .gallery-content {padding-top: 29px}
  .gallery-index {grid-template-columns: 1fr; margin-bottom: 32px}
  .gallery-index-card img {width: 66px}
  .field-case {padding: 16px; scroll-margin-top: 75px}
  .field-photos {grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px}
}