/* The project viewer is a room for the artwork, not a small pop-up. */
dialog[open]{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:clamp(12px,1.6vw,24px);overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) clamp(220px,21vw,300px);grid-template-rows:auto auto auto minmax(0,1fr);column-gap:clamp(12px,1.5vw,24px);background:#191513}
dialog::backdrop{background:#0b0913f0}
.viewer-head{grid-column:1/-1;align-items:start}
.viewer-head h2{font-size:clamp(1.5rem,3.1vw,3rem)}
#viewer-description{grid-column:1/-1;margin:4px 0 12px;color:#e8d7bf;font-size:clamp(.75rem,1vw,.92rem)}
dialog figure{grid-column:1;grid-row:3/5;display:grid;grid-template-rows:minmax(0,1fr) auto;min-height:0;margin:0}
.photo-stage{position:relative;min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;border:1px solid #655343;border-radius:8px;background:radial-gradient(ellipse at 50% 45%,#332922 0%,#141114 72%)}
.photo-stage img,dialog:has(.asset-browser:not([hidden])) .photo-stage img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;display:block;background:transparent;border-radius:0;cursor:zoom-in}
dialog figcaption{align-items:center;min-height:31px;padding-top:8px;color:#ead8bc}
dialog figcaption a{white-space:nowrap}
#focus-image{position:absolute;right:13px;top:13px;z-index:3;display:flex;align-items:center;gap:7px;min-height:39px;padding:8px 11px;border:1px solid #f5d6a7a8;border-radius:5px;background:#211812db;color:#fff4df;font-size:.76rem;font-weight:800;backdrop-filter:blur(8px)}
#focus-image:hover{background:#ffc35c;color:#211812}
.viewer-controls{grid-column:2;grid-row:3;align-self:start;min-width:0;display:grid;grid-template-columns:36px minmax(0,1fr) 36px;gap:5px;padding:9px;border:1px solid #5a4739;border-radius:8px;background:#2b211d}
.viewer-controls #shots{min-width:0;gap:6px;padding:2px;scrollbar-width:thin}
.viewer-controls #shots .view-tile{flex-basis:106px}
.viewer-controls #shots .view-tile img{height:68px}
.viewer-controls>button{align-self:center;min-width:0;min-height:42px}
.asset-browser{grid-column:2;grid-row:4;display:flex;flex-direction:column;min-height:0;margin:10px 0 0;padding:10px;border:1px solid #5a4739;border-radius:8px;background:#2b211d}
.asset-browser-heading{display:block;flex:0 0 auto}
.asset-browser-heading>div{justify-content:space-between}
.asset-browser-nav{margin-top:8px}
.asset-browser-nav button{flex:1;padding:7px 4px}
.asset-rail{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;overflow:auto;align-content:start;padding:2px 3px 8px}
.asset-tile{min-width:0;flex:none}
.asset-tile img{height:80px}
dialog.photo-focus[open]{display:block;padding:0}
dialog.photo-focus .viewer-head,dialog.photo-focus #viewer-description,dialog.photo-focus .asset-browser,dialog.photo-focus figcaption{display:none}
dialog.photo-focus figure{display:block;width:100%;height:100%;margin:0}
dialog.photo-focus .photo-stage{width:100%;height:100%;border:0;border-radius:0}
dialog.photo-focus #viewer-image{cursor:zoom-out}
dialog.photo-focus #focus-image{position:fixed;top:16px;right:16px}
dialog.photo-focus .viewer-controls{position:fixed;z-index:4;bottom:14px;left:50%;width:min(800px,calc(100vw - 24px));transform:translateX(-50%);background:#211917e8;backdrop-filter:blur(12px)}
#photo-burst{position:absolute;inset:0;z-index:2;pointer-events:none}
#photo-burst i{position:absolute;left:50%;top:48%;font-style:normal;font-size:clamp(18px,3.5vw,42px);color:#ffe19a;opacity:0;text-shadow:0 0 10px #fcb65b}
#photo-burst i:nth-child(1){--dx:-155px;--dy:-115px}
#photo-burst i:nth-child(2){--dx:125px;--dy:-130px}
#photo-burst i:nth-child(3){--dx:-205px;--dy:25px}
#photo-burst i:nth-child(4){--dx:180px;--dy:40px}
#photo-burst i:nth-child(5){--dx:-72px;--dy:130px}
#photo-burst i:nth-child(6){--dx:88px;--dy:135px}
#photo-burst:before{content:"";position:absolute;left:50%;top:48%;width:min(32vw,280px);aspect-ratio:1;border:2px solid #ffdc96;border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.55);box-shadow:0 0 40px #ffc35c66}

@media(max-width:760px){
 dialog[open]{display:flex;flex-direction:column;overflow:auto;padding:12px;gap:0}
 .viewer-head{flex:0 0 auto}.viewer-head h2{font-size:clamp(1.6rem,6vw,2.5rem)}
 #viewer-description{flex:0 0 auto;margin:4px 0 9px}
 dialog figure{display:block;flex:0 0 auto}
 .photo-stage{height:min(67dvh,660px)}
 dialog:has(.asset-browser:not([hidden])) .photo-stage img{height:100%}
 .viewer-controls{display:flex;flex:0 0 auto;margin-top:8px}
 .viewer-controls #shots .view-tile{flex-basis:92px}
 .asset-browser{flex:0 0 auto;margin-top:8px}
 .asset-browser-heading{display:flex}
 .asset-browser-nav{margin-top:0}
 .asset-rail{display:flex;max-height:none;overflow-x:auto;overflow-y:hidden}
 .asset-tile{flex:0 0 90px}
 .asset-tile img{height:64px}
 dialog.photo-focus[open]{overflow:hidden}
 dialog.photo-focus .viewer-controls{margin:0}
}
@media(max-width:490px){#focus-image span{display:none}.photo-stage{height:65dvh}.viewer-controls #shots .view-tile img{height:49px}.asset-browser-heading{display:block}.asset-browser-nav{margin-top:8px}}

@media(hover:hover) and (pointer:fine){
 html:not(.still) .mast nav a,html:not(.still) footer a,html:not(.still) .archive-link{display:inline-block;transition:transform 180ms var(--ease),color 180ms var(--ease)}
 html:not(.still) .mast nav a:hover,html:not(.still) footer a:hover,html:not(.still) .archive-link:hover{transform:translateY(-3px);color:var(--amber)}
 html:not(.still) :is(.cta,.ghost,.filters button,.motion,.hero-foot button,.asset-browser-nav button,.viewer-head button,.viewer-controls>button,#focus-image){transition:transform 180ms var(--ease),background-color 180ms var(--ease),color 180ms var(--ease)}
 html:not(.still) :is(.cta,.ghost,.filters button,.motion,.hero-foot button,.asset-browser-nav button,.viewer-head button,.viewer-controls>button,#focus-image):hover{transform:translateY(-3px)}
 html:not(.still) .viewer-head button:hover{transform:rotate(90deg) scale(1.1);background:var(--amber);color:#20170e}
 html:not(.still) .project-card-copy strong{display:inline-block;transition:transform 220ms var(--ease)}
 html:not(.still) .project-card:hover .project-card-copy strong{transform:translateX(6px)}
 html:not(.still) .project-card:hover .project-card-arrow{transform:translate(4px,-4px) rotate(30deg) scale(1.12)}
 html:not(.still) .viewer-controls #shots .view-tile:hover{transform:translateY(-4px) scale(1.025)}
 html:not(.still) .asset-tile:hover{transform:translateY(-4px) scale(1.035)}
 html:not(.still) .project-card-art:before{content:"";position:absolute;z-index:1;inset:-20%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,#fff7df19 50%,transparent 58%);transform:translateX(-115%);animation:card-gleam 13s linear infinite;animation-delay:calc(var(--order,0) * -1.15s)}
}
@media(prefers-reduced-motion:no-preference){
 html:not(.still) .hero-art{animation:hero-breathe 14s ease-in-out infinite alternate}
 html:not(.still) .hero h1 em{display:inline-block;animation:title-glow 6s ease-in-out infinite alternate}
 html:not(.still) #photo-burst.play i{animation:star-fly 620ms var(--ease) both}
 html:not(.still) #photo-burst.play i:nth-child(2){animation-delay:35ms}
 html:not(.still) #photo-burst.play i:nth-child(3){animation-delay:70ms}
 html:not(.still) #photo-burst.play i:nth-child(4){animation-delay:25ms}
 html:not(.still) #photo-burst.play i:nth-child(5){animation-delay:60ms}
 html:not(.still) #photo-burst.play i:nth-child(6){animation-delay:45ms}
 html:not(.still) #photo-burst.play:before{animation:burst-ring 620ms var(--ease) both}
 @keyframes hero-breathe{from{transform:scale(1)}to{transform:scale(1.025)}}
 @keyframes title-glow{from{filter:drop-shadow(0 0 0 #ffc35c00)}to{filter:drop-shadow(0 0 16px #ffc35c7a)}}
 @keyframes card-gleam{0%,73%{transform:translateX(-115%)}93%,100%{transform:translateX(115%)}}
 @keyframes star-fly{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-35deg)}22%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.25) rotate(70deg)}}
 @keyframes burst-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}28%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.38)}}
}
html.still :is(.project-card,.project-card-art img,.project-card-arrow,.asset-tile,.view-tile,.postcard-inner){animation:none!important;transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){#photo-burst{display:none}:is(.project-card,.project-card-art img,.project-card-arrow,.asset-tile,.view-tile,.postcard-inner){animation:none!important;transition:none!important;transform:none!important}}