.gallery{position:relative;z-index:2;max-width:1440px;margin:0 auto;padding:clamp(3rem,5vw,6rem) clamp(1.25rem,3vw,4rem) clamp(5rem,7vw,10rem);min-height:78dvh;display:flex;flex-direction:column;align-items:center;gap:clamp(4rem,10dvh,10rem)}.piece{display:flex;flex-direction:column;align-items:center;max-width:100%;opacity:0;animation:rise 1.6s cubic-bezier(.25,1,.5,1) forwards;animation-delay:calc(.4s + var(--i, 0) * .35s);will-change:opacity,transform}@keyframes rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.piece figure{display:flex;flex-direction:column;align-items:center;width:100%}@supports (animation-timeline: view()){.placard-story{transition:none;animation:story-fade linear both;animation-timeline:view();animation-range:contain 10% contain 40%}.piece:has(.frame.vigil) .placard-story{animation-range:contain 40% contain 70%}.piece:has(.frame.annunciation) .placard-story{animation-range:contain 10% contain 40%}@keyframes story-fade{0%{opacity:0}to{opacity:1}}}@media (prefers-reduced-motion: reduce){.piece{animation:none;opacity:1}.placard-story{transition:none;opacity:1;animation:none}}.frame{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;text-align:left;position:relative;background:linear-gradient(135deg,#4a3220,#2a1a0e 30%,#1a0f06 55%,#2a1a0e 75%,#3d2a1b);padding:14px;box-shadow:0 32px 50px -22px #0000008c,0 16px 28px -8px #00000059,inset 0 1px #ffd28c2e,inset 0 -2px 4px #0006,inset 2px 0 3px #0000004d,inset -2px 0 3px #0000004d;border-radius:2px;cursor:zoom-in;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.frame:focus{outline:none}.frame:focus-visible{outline:2px solid var(--gold);outline-offset:-4px}@media (hover: none) and (pointer: coarse){.frame:focus-visible{outline:none}}.frame:before{content:"";position:absolute;top:9px;right:9px;bottom:9px;left:9px;border:1.5px solid var(--gold);box-shadow:inset 0 0 0 1px #0006,0 0 0 1px #0006;pointer-events:none;z-index:3}.canvas{position:relative;overflow:hidden;width:var(--painting-long);height:auto;max-width:100%;display:block}.frame.vigil .canvas{aspect-ratio:4 / 3}.frame.annunciation .canvas{aspect-ratio:3 / 4;width:calc(var(--painting-long) * 3 / 4);height:auto}.canvas img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .5s ease;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}html.js .canvas img{opacity:0}html.js .canvas img.loaded{opacity:1}.placard{margin-top:2.2rem;text-align:center;max-width:320px}.placard-title{font-family:Italiana,serif;font-size:1.5rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;margin-bottom:.7rem}.placard-meta{font-style:italic;font-size:.75rem;color:var(--text-soft);letter-spacing:.03em}.placard-story{font-size:1rem;color:var(--text-soft);margin-top:1.4rem;line-height:1.65;overflow:hidden;min-height:0;opacity:1;transition:opacity .5s ease .2s}html.observe .placard-story{opacity:0}html.observe .piece.active .placard-story{opacity:1}