.moment-section .section-inner { max-width:1500px; }
.moment-gallery .fa-rotate-left { --icon:url("../images/icons/rotate-ccw.svg"); }
.moment-gallery .fa-expand { --icon:url("../images/icons/maximize.svg"); }
.moment-gallery .fa-play { --icon:url("../images/icons/play.svg"); }
.moment-viewer .fa-times, .moment-gallery .fa-times { --icon:url("../images/icons/x.svg"); }
.moment-viewer .fa-chevron-left { --icon:url("../images/icons/chevron-left.svg"); }
.moment-viewer .fa-chevron-right { --icon:url("../images/icons/chevron-right.svg"); }
.moment-gallery { position:relative; color:var(--navy); }
.moment-gate { position:absolute; inset:0; z-index:2; display:grid; place-items:center; background:color-mix(in srgb, var(--white) 62%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); touch-action:pan-y pinch-zoom; }
.moment-gate .button { --button-outline:currentColor; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.moment-gate[hidden] { display:none; }
.moment-gallery.is-ready:not(.is-exploring) .moment-viewport { overflow:hidden; cursor:auto; touch-action:pan-y pinch-zoom; }
.moment-gallery.is-ready:not(.is-exploring) .moment-board { pointer-events:none; }
.moment-board { position:relative; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:32px; align-items:center; }
.moment-tile { position:relative; min-width:0; margin:0; }
.moment-tile a { display:block; position:relative; color:inherit; }
.moment-tile img { display:block; width:100%; height:auto; border-radius:0; }
.moment-tile figcaption { margin-top:12px; font-size:var(--type-small); color:var(--muted); }
.moment-tile a:focus-visible { outline:2px solid currentColor; outline-offset:8px; }
.moment-film { position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:24px; text-shadow:0 1px 10px #000; pointer-events:none; }
.moment-gallery.is-ready .moment-viewport { overflow:auto; cursor:grab; scrollbar-width:thin; scrollbar-color:var(--button-outline) transparent; touch-action:pan-x pan-y pinch-zoom; }
.moment-gallery.is-ready .moment-board { width:max-content; grid-template-columns:repeat(5, 480px); grid-auto-rows:440px; padding:52px 80px 80px; gap:24px 32px; box-sizing:border-box; transform-origin:0 0; }
.moment-gallery.is-zooming .moment-board { will-change:transform; pointer-events:none; }
.moment-gallery.is-zooming .moment-viewport { overflow:hidden; }
.moment-gallery.is-ready .moment-tile { width:100%; justify-self:center; }
.moment-gallery.is-ready .moment-tile:nth-child(3n+2) { width:96%; align-self:end; }
.moment-gallery.is-ready .moment-tile:nth-child(4n+3) { width:88%; align-self:start; }
.moment-gallery.is-ready .moment-tile--portrait { max-width:280px; }
.moment-gallery.is-ready .moment-tile img { max-height:420px; object-fit:contain; }
.moment-gallery.is-ready .moment-tile figcaption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.moment-gallery.is-ready .moment-tile a { cursor:zoom-in; }
.moment-gallery.is-ready { width:min(100%, 1280px); margin-inline:auto; height:min(72svh, 680px, calc(100svh - var(--site-header-height, 76px) - 32px)); min-height:240px; box-sizing:border-box; border:1px solid var(--button-outline); border-radius:8px; display:grid; grid-template-rows:minmax(0, 1fr) auto; overflow:clip; scroll-margin-top:calc(var(--site-header-height, 76px) + 16px); }
.moment-gallery.is-ready .moment-viewport { height:auto; min-height:0; overscroll-behavior-x:contain; }
.moment-gallery.is-ready .moment-tile a::after {
    content:""; position:absolute; inset:-12px; pointer-events:none;
    background:
        linear-gradient(currentColor, currentColor) left top / 20px 1px,
        linear-gradient(currentColor, currentColor) left top / 1px 20px,
        linear-gradient(currentColor, currentColor) right top / 20px 1px,
        linear-gradient(currentColor, currentColor) right top / 1px 20px,
        linear-gradient(currentColor, currentColor) left bottom / 20px 1px,
        linear-gradient(currentColor, currentColor) left bottom / 1px 20px,
        linear-gradient(currentColor, currentColor) right bottom / 20px 1px,
        linear-gradient(currentColor, currentColor) right bottom / 1px 20px;
    background-repeat:no-repeat; opacity:0; transform:scale(1.025);
    transition:opacity .25s ease, transform .35s ease;
}
.moment-gallery.is-exploring .moment-tile.is-discovered a::after { opacity:.3; transform:none; }
.moment-gallery.is-ready .moment-tile a:focus-visible::after { opacity:1; transform:none; }
@media (hover:hover) {
    .moment-gallery.is-ready .moment-tile a:hover::after { opacity:1; transform:none; }
    .moment-gallery.is-ready .is-dragging .moment-tile a::after { opacity:0; }
}
.moment-viewport.is-dragging, .moment-viewport.is-dragging a { cursor:grabbing !important; user-select:none; }
.moment-toolbar { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:12px 16px; border-top:1px solid var(--button-outline); background:var(--white); }
.moment-toolbar[hidden] { display:none; }
.moment-total { min-width:0; font-size:var(--type-small); line-height:1.35; font-variant-numeric:tabular-nums; color:var(--navy); }
.moment-actions { display:flex; flex-shrink:0; align-items:center; gap:8px; }
.moment-viewer { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:24px; border:0; box-sizing:border-box; background:var(--white); color:var(--navy); }
.moment-viewer[open] { display:grid; grid-template-rows:auto minmax(0, 1fr) auto 76px; gap:16px; }
.moment-viewer::backdrop { background:rgba(0,0,0,.7); }
.moment-viewer-top { display:flex; align-items:center; justify-content:space-between; font-size:var(--type-small); font-variant-numeric:tabular-nums; }
.moment-stage { position:relative; display:grid; grid-template-columns:48px minmax(0, 1fr) 48px; align-items:center; gap:24px; min-height:0; }
.moment-stage .button { width:48px; padding:0; }
.moment-media { display:flex; justify-content:center; align-items:center; height:100%; min-height:0; overflow:hidden; touch-action:pan-y pinch-zoom; }
.moment-media img, .moment-media video { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; border-radius:0; }
.moment-caption { margin:0; text-align:center; font-size:var(--type-small); }
.moment-thumbnails { position:relative; display:flex; justify-content:flex-start; gap:10px; overflow-x:auto; scrollbar-width:thin; align-items:center; padding:4px; }
.moment-thumbnail { flex:0 0 64px; height:60px; padding:0; border:0; background:transparent; opacity:.45; cursor:pointer; transition:opacity .2s; }
.moment-thumbnail img { width:100%; height:100%; object-fit:contain; display:block; border-radius:0; }
.moment-thumbnail[aria-current="true"], .moment-thumbnail:hover { opacity:1; }
.moment-thumbnail[aria-current="true"] { outline:1px solid currentColor; outline-offset:3px; }
.moment-thumbnail:focus-visible { outline:2px solid currentColor; outline-offset:3px; opacity:1; }
@media (max-width:700px) {
    .moment-gallery.is-ready { height:min(66svh, calc(100svh - var(--site-header-height, 76px) - 32px)); }
    .moment-toolbar { padding:10px 12px; gap:8px; }
    .moment-actions .moment-action-label { display:none; }
    .moment-board { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
    .moment-gallery.is-ready .moment-board { grid-template-columns:repeat(5, 340px); grid-auto-rows:360px; gap:20px 26px; padding:40px 48px 60px; }
    .moment-gallery.is-ready .moment-tile--portrait { max-width:225px; }
    .moment-gallery.is-ready .moment-tile img { max-height:340px; }
    .moment-viewer { padding:16px; padding-top:max(16px, env(safe-area-inset-top)); padding-bottom:max(16px, env(safe-area-inset-bottom)); }
    .moment-viewer[open] { grid-template-rows:auto minmax(0,1fr) auto 66px; gap:12px; }
    .moment-stage { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 44px; gap:12px; }
    .moment-media { grid-column:1 / -1; grid-row:1; }
    .moment-stage .button { grid-row:2; width:44px; min-height:44px; }
    .moment-previous { justify-self:end; }
    .moment-next { justify-self:start; }
    .moment-thumbnail { flex-basis:52px; height:50px; }
}
@media (prefers-reduced-motion:reduce) {
    .moment-thumbnail, .moment-gallery.is-ready .moment-tile a::after { transition:none; }
}