.project-viewer{border:2px solid var(--ink);border-radius:12px;overflow:hidden;background:#171719;box-shadow:6px 6px 0 var(--ink);margin-bottom:24px}.project-photo{display:block;width:100%;padding:16px;border:0;background:transparent;cursor:zoom-in;touch-action:pan-y}.project-photo img{display:block;width:100%;height:560px;object-fit:contain}.project-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;background:var(--paper,#fffdf8);border-top:2px solid var(--ink)}.project-bar button{width:48px;height:48px;flex-shrink:0;border:2px solid var(--ink);border-radius:50%;background:var(--red);color:white;font-size:30px;cursor:pointer}.project-caption{text-align:center}.project-caption h3{font-size:1.3rem;margin:4px 0}.project-caption span{font-size:.75rem}.gallery{display:flex;overflow-x:auto;gap:14px;padding:4px 6px 14px;scroll-snap-type:x mandatory}.gallery .gitem{flex:0 0 calc((100% - 70px)/6);aspect-ratio:3/4;scroll-snap-align:start}.gallery .gitem.hide{display:none}.gallery .gitem.selected{outline:3px solid var(--red);outline-offset:2px}.gallery .gitem .gcap{transform:none}.gallery .gitem .gtitle{font-size:.75rem}.gitem:focus-visible,.project-bar button:focus-visible,.project-photo:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.lightbox:not(.open){visibility:hidden}.lightbox.open{visibility:visible}.lightbox-nav{z-index:2}.lightbox-close{z-index:3}@media(max-width:820px){.gallery .gitem{flex-basis:calc((100% - 42px)/4)}.project-photo img{height:480px}}@media(max-width:560px){.project-photo{padding:8px}.project-photo img{height:410px;height: min(110vw,60svh)}.project-bar{padding:12px;gap:8px}.project-caption h3{font-size:1rem}.project-bar button{width:42px;height:42px}.gallery{gap:10px}.gallery .gitem{flex-basis:calc((100% - 20px)/3)}.gallery .gitem .gtitle{font-size:.68rem}.lightbox-nav{display:block;top:45%;background:rgba(10,10,12,.8)}.lightbox-nav.prev{left:0}.lightbox-nav.next{right:0}.lightbox{padding:20px}.lightbox img{max-height:70svh;object-fit:contain}}
/* Comic book frame: halftone paper, ink borders and offset panels. */
.project-viewer{border:3px solid var(--ink);border-radius:4px;box-shadow:8px 8px 0 var(--ink);overflow:visible;background:#fff6d9}
.project-photo{position:relative;isolation:isolate;overflow:hidden;padding:28px;background-color:#f5ce55;background-image:radial-gradient(#28221d33 1.2px,transparent 1.2px),repeating-conic-gradient(from 8deg at 50% 52%,transparent 0deg 13deg,#fff5cf99 13deg 22deg);background-size:7px 7px,100% 100%;border-bottom:3px solid var(--ink)}
.project-photo:before,.project-photo:after{content:'';position:absolute;z-index:-1;background:var(--red);border:3px solid var(--ink);width:120px;height:30px;transform:rotate(-35deg);left:-34px;top:8px}
.project-photo:after{left:auto;top:auto;right:-34px;bottom:8px;transform:rotate(-35deg)}
.project-photo img{width:auto;max-width:100%;height:560px;margin:auto;border:4px solid var(--ink);background:#fffdf8;box-shadow:7px 7px 0 #211c18;object-fit:contain}
.project-bar{position:relative;border-top:0;background:#fffdf3;padding:20px 24px}
.project-caption h3{font-weight:800;line-height:1.25}.project-caption>span:first-child{display:inline-block;background:var(--gold);border:2px solid var(--ink);padding:3px 12px;transform:rotate(-2deg);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.project-caption>span:last-child{display:block;margin-top:7px}.project-bar button{box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}.project-bar button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}.project-bar button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.gallery .gitem{border-radius:3px;border-width:3px}.gallery .gitem .gcap{background:#fff6db;border-top:2px solid var(--ink);padding:7px 8px;position:relative;inset:auto;min-height:64px}.gallery .gitem{aspect-ratio:auto;display:flex;flex-direction:column}.gallery .gitem.hide{display:none}.gallery .gitem img{height:auto;aspect-ratio:3/4;object-fit:cover}.gallery .gitem .gtitle{color:var(--ink)}.gallery .gitem .gtag{font-size:.5rem;margin-bottom:3px}.gallery .gitem.selected{outline-offset:3px}
@media(max-width:820px){.project-photo img{height:480px;max-height:60svh}}
@media(max-width:560px){.project-viewer{box-shadow:5px 5px 0 var(--ink)}.project-photo{padding:20px 16px}.project-photo img{height:auto;width:auto;max-height:58svh;max-width:100%;box-shadow:4px 4px 0 var(--ink);border-width:3px}.project-bar{padding:14px 10px}.project-caption{min-width:0}.project-caption h3{font-size:.95rem}.project-caption>span:first-child{font-size:.6rem;padding:2px 7px}.gallery .gitem .gcap{padding:6px;min-height:80px}.gallery .gitem .gtitle{font-size:.65rem}}

.project-viewer.project-portrait{max-width:650px;margin-left:auto;margin-right:auto}.project-portrait .project-photo{background:#e9e6dd;background-image:radial-gradient(#1a160f12 1px,transparent 1px);background-size:8px 8px;padding:18px}.project-portrait .project-photo:before,.project-portrait .project-photo:after{display:none}.project-portrait .project-photo img{width:100%;height:630px;object-fit:contain;border:0;box-shadow:none;background:transparent}.gallery .gitem[data-title="Balrog"] img{object-fit:contain;background:#e9e6dd}@media(max-width:560px){.project-portrait .project-photo{padding:12px}.project-portrait .project-photo img{height:min(140vw,68svh)}}