/* Original Figma compositions, in one column at the existing gallery width. */
.gallery-collection{display:flex;flex-direction:column;gap:24px}
.gallery-frame{position:relative;container-type:inline-size;width:100%;margin:0;overflow:hidden;isolation:isolate;background:#edecea;aspect-ratio:1968/1058;border-radius:10px}
.gallery-frame--arcade{aspect-ratio:1968/1146}
.arcade-character{position:absolute;left:16%;bottom:12%;width:16%;aspect-ratio:481/567;padding:0;border:0;background:none;cursor:pointer;touch-action:manipulation;z-index:1}
.arcade-character img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none;mask:url("assets/gallery/time-invaders-character/silhouette.svg") center/100% 100% no-repeat}
.arcade-character img[hidden]{display:none}
.arcade-character:focus-visible{outline:2px solid #f3d922;outline-offset:6px;border-radius:45%}
.gallery-frame>img{display:block;width:100%;height:100%;object-fit:contain}
.gallery-frame figcaption{position:absolute;inset:auto 0 0;padding:30px 22px 18px;background:linear-gradient(transparent,rgba(237,236,234,.96));color:#282828;font-size:14px;line-height:1.4;opacity:0;transition:opacity .2s;pointer-events:none}
.gallery-frame:hover figcaption,.gallery-frame:focus-visible figcaption,.gallery-frame:focus-within figcaption{opacity:1}
.gallery-frame:focus-visible{outline:2px solid var(--fg);outline-offset:4px}
.gallery-frame--loop{aspect-ratio:1968/1057.3502;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.gallery-frame--loop[data-dragging="true"]{cursor:grabbing}
.gallery-loop-set img{-webkit-user-drag:none}
.gallery-loop-track{position:absolute;top:9.33775%;left:-1.711367%;display:flex;width:max-content;animation:gallery-drift 95s linear infinite;will-change:transform;filter:drop-shadow(0 12px 10px #00000018)}
.gallery-loop-set{flex:none;box-sizing:border-box;width:145.604675cqw;padding-right:.609756cqw}
.gallery-loop-set img{display:block;width:100%;height:auto;max-width:none}
.gallery-frame--loop:hover .gallery-loop-track,.gallery-frame--loop:focus-within .gallery-loop-track,.gallery-frame--loop[data-paused="true"] .gallery-loop-track,.gallery-frame--loop[data-dragging="true"] .gallery-loop-track{animation-play-state:paused}
.gallery-motion{position:absolute;right:14px;bottom:10px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #00000014;border-radius:50%;background:#ffffffd9;color:#333;cursor:pointer;z-index:2}
.gallery-motion:hover{background:#fff}.gallery-motion:focus-visible{outline:2px solid #333;outline-offset:3px}
:root[data-theme=dark] .gallery-frame{background:var(--soft)}
:root[data-theme=dark] .gallery-frame figcaption{background:linear-gradient(transparent,var(--soft));color:var(--fg)}
:root[data-theme=dark] .gallery-motion{background:var(--surface);border-color:var(--line);color:var(--fg)}
:root[data-theme=dark] .gallery-motion:hover{background:var(--soft)}
:root[data-theme=dark] .gallery-motion:focus-visible{outline-color:var(--fg)}
.gallery-motion svg{width:14px;height:14px;fill:currentColor}.gallery-motion .motion-play{display:none}
.gallery-frame[data-paused="true"] .motion-pause{display:none}.gallery-frame[data-paused="true"] .motion-play{display:block}
@keyframes gallery-drift{to{transform:translateX(-50%)}}
@media(max-width:600px){.gallery-collection{gap:14px}.gallery-frame{border-radius:7px}.gallery-frame figcaption{font-size:12px;padding:24px 12px 12px}.gallery-motion{right:8px;bottom:6px;width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.gallery-loop-track{animation:none;will-change:auto}.gallery-motion{display:none}.gallery-frame figcaption{transition:none}}
/* A neutral display surface in both themes, matching the gallery paper. */
.gallery-frame--forest,:root[data-theme=dark] .gallery-frame--forest{aspect-ratio:1968/1058;background:#edecea;--fg:#282828;color-scheme:light}
.forest-filter{position:absolute;pointer-events:none}
.forest-viewport{position:absolute;inset:3% 0 17%;display:flex;justify-content:center;align-items:center}
.forest-viewport canvas,.forest-poster{height:100%;width:auto;max-width:96%;object-fit:contain;filter:url(#forest-neutral-paper)}
.forest-poster{position:absolute}
.forest-poster[hidden]{display:none}
.forest-controls{position:absolute;left:25%;right:25%;bottom:6%;color:var(--fg);z-index:3}
.forest-controls input{display:block;width:100%;height:44px;margin:0;cursor:ew-resize;accent-color:var(--fg);touch-action:none;outline:none}
.forest-controls input:focus,.forest-controls input:focus-visible{outline:none;box-shadow:none}
.forest-controls input:focus-visible:not([data-pointer-focus])::-webkit-slider-thumb{transform:scale(1.2)}
.forest-controls input:focus-visible:not([data-pointer-focus])::-moz-range-thumb{transform:scale(1.2)}
@media(max-width:600px){.gallery-frame--forest,:root[data-theme=dark] .gallery-frame--forest{aspect-ratio:1/1.1}.forest-viewport{inset:4% 0 24%}.forest-controls{left:12%;right:12%;bottom:7%}}

.gallery-frame--flowers{aspect-ratio:1968/1348}

/* Reveal the complete caption over the artwork, as with the original gallery. */
.gallery-frame--described { aspect-ratio: auto; }
.gallery-artwork { position: relative; aspect-ratio: 1968/1058; }
.gallery-frame--arcade .gallery-artwork { aspect-ratio: 1968/1146; }
.gallery-artwork > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-frame--described figcaption { display: grid; gap: 8px; z-index: 2; max-height: 100%; overflow-y: auto; background: linear-gradient(transparent,rgba(237,236,234,.98) 30%); }
.gallery-frame--described:is(:hover,:focus-visible,:focus-within) figcaption { pointer-events: auto; }
.gallery-description { max-width: none; margin: 0; font: inherit; color: inherit; }
.gallery-video-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; justify-self: start; color: inherit; text-decoration: none; }
.gallery-video-link > span,button.gallery-video-link { text-decoration: underline; text-underline-offset: 4px; }
.gallery-video-link .icon { width: 16px; height: 16px; }
.gallery-video-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:root[data-theme=dark] .gallery-frame--described figcaption { background: linear-gradient(transparent,var(--soft) 30%); }

.gallery-frame--forest.gallery-frame--described,
:root[data-theme=dark] .gallery-frame--forest.gallery-frame--described { aspect-ratio: auto; }
@media(max-width:600px) { .gallery-frame--forest .gallery-artwork { aspect-ratio: 1/1.1; } }

/* Reserve the slider's entire touch target; scrubbing clears the illustration. */
.gallery-frame--forest figcaption { bottom: calc(6% + 56px); max-height: calc(94% - 56px); }
:root[data-theme=dark] .gallery-frame--forest figcaption { background: linear-gradient(transparent,rgba(237,236,234,.98) 30%); color: #282828; }
.gallery-frame--forest:has(.forest-controls:hover):not(:has(figcaption:focus-within)) figcaption,
.gallery-frame--forest:has(input:focus-visible:not([data-pointer-focus])) figcaption,
.gallery-frame--forest[data-scrubbing] figcaption { opacity: 0; pointer-events: none; }
@media(max-width:600px) { .gallery-frame--forest figcaption { bottom: calc(7% + 56px); max-height: calc(93% - 56px); } }

/* Touch opens the same information below the artwork, with room for long copy. */
@media(hover:none) {
  .gallery-frame--described figcaption { position: static; display: none; max-height: none; padding: 0 12px 16px; background: none; }
  .gallery-frame--described:is(:hover,:focus-within) figcaption { display: grid; opacity: 1; }
  :root[data-theme=dark] .gallery-frame--described figcaption { background: none; }
  .gallery-frame--forest:has(.forest-controls:hover):not(:has(figcaption:focus-within)) figcaption,
  .gallery-frame--forest:has(.forest-controls:focus-within) figcaption,
  .gallery-frame--forest[data-scrubbing] figcaption { display: none; }
}

.gallery-frame--flowers .gallery-artwork { aspect-ratio: 1968/1348; }
.gallery-frame--described figcaption > span { font-weight: 500; }
.gallery-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
button.gallery-video-link { appearance: none; border: 0; padding: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.gallery-actions .gallery-video-link { display: inline-flex; align-items: center; min-height: 44px; }
.gallery-video-dialog { width: 800px; }
.gallery-video-dialog h2 { font-size: var(--text-title); line-height: 1.4; letter-spacing: -.4px; font-weight: 500; padding-top: 4px; }
.gallery-video-dialog .icon-button { width: 36px; height: 36px; flex: none; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); transition: none; }
.gallery-video-dialog .icon-button .icon { width: 20px; height: 20px; stroke-width: 2; }
.gallery-video-dialog .icon-button:is(:hover,:focus-visible) { color: var(--fg); background: var(--soft); }
#flow-up-dialog video { display: block; width: 100%; max-height: 70dvh; aspect-ratio: 16/9; object-fit: contain; margin-top: 20px; background: #111; border-radius: 8px; }