/* One frame for every medium; padding is independent of its aspect ratio. */
:root{--viewer-pad:clamp(24px,2.2vw,32px);--viewer-chrome:136px}
.asset-frame{padding:var(--viewer-pad);min-height:0;clip-path:none;background:#0c0d0c;border:1px solid #303730;overflow:hidden}
.media-sheet{display:block;position:relative;flex:none;aspect-ratio:var(--media-ratio);width:min(100%,var(--native-width),calc(max(80px,calc(var(--viewer-available,calc(100svh - 152px)) - var(--viewer-chrome) - var(--viewer-pad)*2))*var(--media-ratio)));max-width:100%;min-width:0;background:transparent}
.media-sheet[data-matte=light]{background:#e4e4df}
.asset-frame .media-sheet img,.asset-frame .media-sheet video{display:block;width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;background:transparent;filter:none!important;image-rendering:auto;border-radius:0}
.asset-frame .media-sheet video{background:#000}
.asset{margin-bottom:48px;scroll-margin-top:20px}
.asset figcaption{align-items:baseline;min-height:20px;margin-bottom:12px;gap:16px}
.asset figcaption>.micro{line-height:1.6}
.asset-type{font-size:9px!important;letter-spacing:.03em;flex-shrink:0;color:#909d8e!important}
.asset-actions{display:flex;align-items:center;flex-wrap:wrap;gap:0 24px;margin-top:8px;min-height:44px;font:10px/1.4 var(--mono);color:#b7c2b1}
.asset-actions button,.asset-actions .asset-original{font:inherit;text-transform:uppercase;letter-spacing:.02em;min-height:44px;margin:0;padding:12px 0;display:inline-flex;align-items:center}
.asset-actions .asset-original{margin-left:auto;color:#95a18f}
.asset-actions button:hover,.asset-actions a:hover{color:#edf1e9;text-decoration:underline;text-underline-offset:5px}
.media-error{font:12px/1.6 var(--mono);color:#e5ccba;padding:12px 0}.media-error a{text-decoration:underline}
.identity-film .asset{margin:0}.identity-film .asset-node{display:none}
.feature-media,.project-thumb{background:#0c0d0c}
.feature-media{padding:24px}
.feature-media img,.feature-media video{width:100%;height:100%;max-height:100%;object-fit:contain;background:transparent}
.project-thumb{padding:8px;display:grid;place-items:center}
.project-thumb img{width:100%;height:100%;min-height:0;object-fit:contain}
.feature-media img[data-matte=light],.project-thumb img[data-matte=light]{background:#e4e4df}

/* Fit and native-size inspection keep the original colors and pixels. */
#media-viewer{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;color:var(--white);background:#080908;overflow:hidden}
#media-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
#media-viewer::backdrop{background:#080908}
.viewer-toolbar{display:flex;align-items:center;gap:24px;min-width:0;padding:12px clamp(16px,3vw,48px);min-height:68px;border-bottom:1px solid #343c32;background:#080908;font:11px/1.5 var(--mono)}
.viewer-toolbar h2{font:400 12px/1.5 var(--mono);flex:1;min-width:0;overflow-wrap:anywhere}
.viewer-toolbar button,.viewer-toolbar a{font:inherit;min-height:44px;padding:10px 0;white-space:nowrap;flex-shrink:0}
.viewer-toolbar footer{border:0}.viewer-toolbar:last-child{border-top:1px solid #343c32;border-bottom:0;min-height:56px;padding-block:6px;color:#aebba5}
.viewer-position{flex:1;font-size:10px}.viewer-toolbar button:hover,.viewer-toolbar a:hover{color:#d7e9c5;text-decoration:underline;text-underline-offset:5px}
.viewer-viewport{min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain;position:relative;scrollbar-color:#5d6857 #111410}
.viewer-surface{box-sizing:content-box;position:relative;padding:32px;min-width:calc(100% - 64px);min-height:calc(100% - 64px);display:grid;place-items:center}
.viewer-surface img{display:block;max-width:none;max-height:none;object-fit:contain;filter:none;image-rendering:auto;flex:none}
.viewer-surface img[data-matte=light]{background:#e4e4df}
#media-viewer[data-actual=true] .viewer-viewport{cursor:grab}#media-viewer[data-dragging=true] .viewer-viewport{cursor:grabbing;user-select:none}
@media(max-width:759px){
 :root{--viewer-pad:16px}
 .project-page{display:block;padding:24px 20px 48px}
 .project-intro,.asset-tree{display:block}.project-intro{position:static;margin:0 0 32px}
 .project-heading{margin-bottom:20px}.project-context{margin:0;padding:0;border:0}
 .project-context h2{font-size:16px}.project-context .intro-description{font-size:14px;line-height:1.7;margin-top:10px}
 .asset-jumps{margin:20px 0 0;display:grid;grid-template-columns:1fr;border-top:0;border-left:1px solid #46513f;padding:0}
 .asset-jumps a{min-height:40px;padding:10px 12px;font-size:10px}
 .asset-tree{margin:0;padding-left:16px;border-left:1px solid var(--rail)}
 .asset,.asset:first-child{padding:0;border:0;margin:0 0 36px}
 .asset-node{left:-23px}.asset figcaption{gap:12px;margin-bottom:10px}.asset figcaption>.micro{font-size:10px}
 .asset-type{font-size:8px!important}.asset-actions{gap:0 16px;font-size:9px}
 .feature-media{padding:16px}.project-thumb{padding:6px}
 .identity-film .asset{margin:0}
 .viewer-toolbar{gap:16px;min-height:64px;padding:8px 16px;flex-wrap:wrap}
 .viewer-toolbar h2{flex-basis:100%;font-size:11px}.viewer-toolbar [data-viewer-close]{margin-left:auto}
 .viewer-toolbar:last-child{min-height:52px;gap:16px}.viewer-position{font-size:9px}
 .viewer-surface{padding:16px;min-width:calc(100% - 32px);min-height:calc(100% - 32px)}
}
@media(max-height:560px){
 body[data-page=project],body[data-page=contact]{grid-template-rows:56px minmax(0,1fr) 48px}
 body[data-page=project] .site-header,body[data-page=contact] .site-header{height:56px}
 body[data-page=project] .site-controls,body[data-page=contact] .site-controls{height:48px}
 body[data-page=project],body[data-page=contact]{--viewer-pad:12px;--viewer-chrome:96px}
 .asset{scroll-margin-top:8px}.asset figcaption{margin-bottom:8px}.asset-actions{margin-top:4px}
 .viewer-toolbar{min-height:44px;padding-block:0}.viewer-toolbar h2{flex-basis:auto}.viewer-toolbar:last-child{min-height:44px}
 .viewer-surface{padding:12px;min-width:calc(100% - 24px);min-height:calc(100% - 24px)}
}
@media(prefers-reduced-motion:reduce){.viewer-viewport{scroll-behavior:auto}}