/* The HTML document keeps its own canvas; only its outer frame is scaled. */
select{width:100%;padding:12px;border-radius:8px;background:#10162a;color:var(--text);border:1px solid #8695c54d;font:inherit;min-width:0}
.artwork{position:relative;isolation:isolate}
.artwork iframe{position:absolute;left:50%;top:50%;width:1100px;height:800px;max-width:none;flex:none;transform-origin:center;transform:translate(-50%,-50%);border:0}
.artwork img.artwork-blur{position:absolute;inset:-8%;width:116%;height:116%;max-width:none;object-fit:cover;filter:blur(32px) brightness(.65) saturate(1.25);opacity:.8;z-index:-1;pointer-events:none}
.artwork img.artwork-original{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 20px #00000025)}
/* Individual translate/scale animate independently from pointer parallax. */
.nebula.one{animation:violet-drift 17s ease-in-out infinite alternate}
.nebula.two{animation:cyan-drift 21s ease-in-out infinite alternate}
.cosmos::after{content:'';position:absolute;width:65vw;height:65vw;left:5%;bottom:-50vw;border-radius:50%;background:radial-gradient(circle,#bb3bdb50,transparent 65%);filter:blur(60px);animation:rose-drift 19s ease-in-out infinite alternate;pointer-events:none}
@keyframes violet-drift{from{translate:-3vw 0;scale:.95;opacity:.3}to{translate:14vw 8vh;scale:1.18;opacity:.6}}
@keyframes cyan-drift{from{translate:0 -5vh;scale:1;opacity:.3}to{translate:-12vw 12vh;scale:1.25;opacity:.58}}
@keyframes rose-drift{from{translate:0 0;opacity:.3}to{translate:25vw -12vh;opacity:.7}}
@media(prefers-reduced-motion:reduce){.nebula.one,.nebula.two,.cosmos::after{animation:none}}

/* One full-width postcard per slide; give the content most of the screen. */
main.gallery{max-width:1920px;padding:24px 24px 28px}
.gallery .intro{margin-bottom:20px}
.gallery .intro h1{font-size:clamp(30px,3.3vw,48px)}
.gallery .eyebrow{margin-bottom:12px}
.gallery .day-badge{padding:16px 24px}
.gallery .gallery-bar{margin-bottom:14px}
.gallery .slider>.card{flex:0 0 100%;min-width:0}
.gallery .slider::after{display:none}
.gallery .artwork{height:clamp(640px,85vh,1100px)}
.gallery .caption{padding:14px 14px 18px}
footer nav{display:flex;font-size:14px;gap:20px}
@media(max-width:800px){
  main.gallery{padding:20px 12px 24px}
  .gallery .artwork{height:clamp(440px,78vh,850px)}
  .gallery .day-badge{padding:12px 16px}
}
@media(max-width:540px){
  .gallery .artwork{height:clamp(350px,70vh,650px)}
  .gallery .caption{padding:12px 8px 16px}
  footer{flex-wrap:wrap}
}

/* Compact previews open an interactive, viewport-sized dialog. */
.gallery .slider>.card{flex-basis:72%;position:relative}
.gallery .slider::after{display:block;content:'';flex:0 0 calc(28% - 24px)}
.gallery .slider:has(.card:only-child)::after{display:none}
.gallery .artwork{height:clamp(320px,52vh,560px)}
.open-card{position:absolute;inset:0;z-index:5;border:0;border-radius:inherit;background:transparent;color:var(--text);cursor:zoom-in;width:100%;text-align:right}
.open-card span{position:absolute;right:24px;top:24px;padding:9px 14px;background:#10162ae6;border:1px solid #ffffff35;border-radius:24px;font-size:14px;box-shadow:0 4px 18px #0004}
.open-card:hover span,.open-card:focus-visible span{background:var(--accent);color:#071423}
.gallery .artwork iframe{pointer-events:none}
body.viewer-open{overflow:hidden}
.card-viewer{position:fixed;inset:0;margin:0;width:100%;height:100%;height:100dvh;max-width:none;max-height:none;padding:0;border:0;background:#080d1b;color:var(--text);overflow:hidden}
.card-viewer[open]{display:flex;flex-direction:column}
.card-viewer::backdrop{background:#050713eF}
.viewer-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;padding-top:max(12px,env(safe-area-inset-top));background:#10162a;border-bottom:1px solid #ffffff24;flex-shrink:0}
.viewer-toolbar h2{margin:0;font-size:16px;font-weight:500;overflow-wrap:anywhere;min-width:0}
#close-viewer{flex-shrink:0;padding:10px 18px;border:1px solid #ffffff50;border-radius:10px;background:#e5fff7;color:#0a1730;font-weight:600;min-height:44px}
#close-viewer span{font-size:12px;opacity:.65;margin-left:12px}
.viewer-content{flex:1;min-height:0;position:relative;overflow:auto;display:flex;align-items:center;justify-content:center}
.viewer-content>iframe{width:100%;height:100%;border:0;background:white;display:block}
.viewer-content>img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:800px){.gallery .slider>.card{flex-basis:88%}.gallery .slider::after{flex-basis:calc(12% - 24px)}.gallery .artwork{height:clamp(300px,48vh,460px)}}
@media(max-width:540px){.gallery .slider>.card{flex-basis:94%}.gallery .slider::after{flex-basis:calc(6% - 24px)}.open-card span{top:16px;right:16px;font-size:12px}.viewer-toolbar{padding:10px 12px}.viewer-toolbar h2{font-size:14px}#close-viewer{padding:10px 12px}#close-viewer span{display:none}}

.gallery .slider>.card{flex:0 0 min(100%,var(--preview-width,680px))}
.gallery .slider:has(.card:only-child)>.card{flex-basis:min(100%,var(--preview-width,680px))}
.gallery .slider::after{flex:0 0 var(--end-space,0px)}
.gallery .slider{padding-bottom:42px}
.award-badge{position:absolute;bottom:-23px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;display:flex;align-items:center;gap:12px;min-width:210px;padding:10px 23px;border-radius:14px;border:1px solid #ffe39d;box-shadow:0 8px 28px #0008,inset 0 1px 0 #ffffff85;background:linear-gradient(120deg,#fff0b5,#d7a542);color:#392605}
.award-badge strong{display:block;font-size:20px;line-height:1.1;letter-spacing:.4px}.award-badge div>span{font-size:11px;letter-spacing:1px}.award-medal{font-size:30px;line-height:1}
.award-2{background:linear-gradient(120deg,#e7f3ff,#9aafca);border-color:#d7eaff;color:#20364d}
.award-3{background:linear-gradient(120deg,#f6d1b4,#c68a62);border-color:#f6c6a1;color:#492a17}
.gallery .card:has(.award-badge) .caption{padding-bottom:35px}
.admin-card{flex-wrap:wrap;scroll-margin-top:24px}
.card-management{flex:0 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.order-form,.award-form{display:flex;align-items:center;gap:8px}.award-form{flex:1;min-width:220px}.award-form select{flex:1;width:auto}.order-form button{padding:9px 16px}.award-form button{padding:10px 12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.edit-card{flex:0 0 100%;border-top:1px solid var(--line);padding-top:12px}
.edit-card summary{cursor:pointer;color:var(--accent);font-size:14px;padding:8px 0}
.edit-card summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.edit-card form{padding-bottom:6px}