/* One short preview row; the album grows inside the dialog. */
.gathering-gallery{margin-top:36px;padding-top:22px;border-top:1px solid var(--cal-line)}
#gathering-gallery{scroll-margin-top:160px}
.menu-navigation>.menu-direct-link{position:relative;display:block;text-align:center;padding:25px 48px;border-bottom:1px solid #d7d5ce;font:400 20px/1.6 KampoSans,Arial,sans-serif;letter-spacing:.1em;color:inherit}
.menu-direct-link>span{position:absolute;right:18px;top:50%;transform:translateY(-50%);color:#747c76;font-size:20px}
@media(max-width:620px){.menu-navigation>.menu-direct-link{font-size:18px;padding-block:23px}}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.gallery-heading h3{margin:0;font:400 22px/1.4 Kampo,serif;color:var(--cal-ink)}
.gallery-all{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;color:var(--cal-soft)}
.gallery-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;list-style:none;margin:0;padding:3px}
.gallery-strip li{min-width:0}
.gallery-strip li[hidden],.gallery-strip>li:nth-child(n+4){display:none}
.gallery-strip a{display:block;color:var(--cal-soft)}
.gallery-thumb{position:relative;display:block;overflow:hidden;background:var(--cal-light);outline:1px solid rgb(0 0 0 / .1);outline-offset:-1px}
.gallery-thumb img{display:block;width:100%;height:clamp(180px,16vw,220px);object-fit:cover;object-position:center;transition:opacity 150ms ease-out}
.gallery-thumb>svg{position:absolute;right:12px;bottom:12px;width:32px;height:32px;padding:6px;color:#fff;background:rgb(0 0 0 / .42);border-radius:50%}

.gallery-strip a:hover{text-decoration:none}
.gallery-strip a:hover .gallery-thumb img{opacity:.88}
.gallery-strip a:focus-visible{outline:3px solid var(--cal-accent);outline-offset:2px}
@media(max-width:700px){
 #gathering-gallery{scroll-margin-top:116px}
 .gathering-gallery{margin-top:26px;padding-top:16px}
 .gallery-heading{margin-bottom:10px}
 .gallery-heading h3{font-size:20px}
 .gallery-strip{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:3px;padding-bottom:9px}
 .gallery-strip li{flex:0 0 82%;scroll-snap-align:start}
 .gallery-thumb img{height:180px}
}

html.gallery-is-open,html.gallery-is-open body{overflow:hidden}
.photo-dialog{position:fixed;inset:0;width:min(1120px,calc(100% - 40px));height:min(840px,calc(100dvh - 48px));max-width:none;max-height:none;margin:auto;padding:0;border:1px solid rgb(255 255 255 / .16);border-radius:12px;overflow:hidden;background:#202525;color:#f6f5ef;box-shadow:0 24px 80px rgb(0 0 0 / .25);opacity:0;transform:translateY(8px);transition:opacity 180ms ease-out,transform 180ms ease-out}
.photo-dialog[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;opacity:1;transform:none}
.photo-dialog::backdrop{background:rgb(16 23 23 / .65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:1;transition:opacity 180ms ease-out}
@starting-style{.photo-dialog[open]{opacity:0;transform:translateY(8px)}.photo-dialog[open]::backdrop{opacity:0}}
.photo-dialog[open].is-closing{opacity:0;transform:translateY(4px);transition-duration:140ms}
.photo-dialog[open].is-closing::backdrop{opacity:0;transition-duration:140ms}
.photo-dialog-header{display:flex;align-items:center;gap:18px;padding:12px 18px 12px 26px;min-width:0}
.photo-dialog-header h2{margin:0;font:400 20px/1.5 Kampo,serif}
.photo-count{margin-left:auto;font:400 14px/1.5 KampoSans,Arial,sans-serif;font-variant-numeric:tabular-nums;color:#c8d0ce}
.photo-control{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;padding:10px;border:1px solid rgb(255 255 255 / .22);border-radius:50%;background:rgb(255 255 255 / .06);color:inherit;transition:background-color 150ms ease-out,transform 150ms ease-out}
.photo-control svg{display:block;width:24px;height:24px}
.photo-control[aria-disabled=true]{color:#788380;border-color:rgb(255 255 255 / .08);background:transparent;cursor:default}
.photo-control:not([aria-disabled=true]):hover{background:rgb(255 255 255 / .16)}
.photo-control:not([aria-disabled=true]):active,.photo-state button:active{transform:scale(.96)}
.photo-dialog :focus-visible{outline:2px solid #fff;outline-offset:3px}
.photo-stage{position:relative;display:grid;place-items:center;min-height:0;background:#161b1b;touch-action:pan-y pinch-zoom}
.photo-stage img{width:100%;height:100%;min-height:0;max-height:100%;object-fit:contain;outline:1px solid rgb(255 255 255 / .1);outline-offset:-1px}
.photo-stage img[hidden],.photo-state[hidden],.photo-state button[hidden]{display:none}
.photo-state{padding:24px;text-align:center;color:#d0d8d5;font-size:14px}
.photo-state p{margin:0 0 14px}
.photo-state button{min-height:44px;padding:8px 18px;border:1px solid rgb(255 255 255 / .4);border-radius:6px;background:transparent;color:inherit;font:inherit;transition:background-color 150ms ease-out,transform 150ms ease-out}
.photo-state button:hover{background:rgb(255 255 255 / .1)}
.photo-dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px}

@media(max-width:700px){
 .photo-dialog{width:calc(100% - 20px);height:calc(100dvh - 32px);border-radius:10px}
 .photo-dialog-header{gap:10px;padding:10px 12px 10px 16px}
 .photo-dialog-header h2{font-size:18px}
 .photo-dialog-footer{gap:12px;padding:14px 12px max(14px,env(safe-area-inset-bottom))}

}
@media(prefers-reduced-motion:reduce){
 .gallery-thumb img,.photo-dialog,.photo-dialog::backdrop,.photo-control,.photo-state button{transition:none}
 .photo-dialog[open],.photo-dialog[open].is-closing,.photo-control:not([aria-disabled=true]):active,.photo-state button:active{transform:none}
}
