/* Directory selection is local to a card; projects open in an opaque viewport viewer. */
html.work-document{scrollbar-gutter:stable;overflow-anchor:none;overflow-y:scroll}
html.work-document:has(.work-viewer-open){overflow-y:hidden}
.work-page{background:#f5f4ef;height:auto}
.work-directory{padding:46px 0 90px}
.directory-viewport{position:relative;container-type:inline-size}
.work-directory-list{display:block;overflow-anchor:none}
.directory-row{--cover-width:min(800px,54cqw,calc(100cqw - clamp(110px,14cqw,180px) - 72px));--meta-width:clamp(110px,14cqw,180px);--panel-height:calc(var(--cover-width)/var(--cover-ratio));margin:0 0 calc(var(--cover-width) * .035);scroll-margin-top:calc(var(--nav-height) + 30px)}
.directory-track{display:flex;gap:24px;align-items:center;width:100%;padding:0 24px 0 max(18px,calc((100% - var(--cover-width))/2 - var(--meta-width) - 24px));height:auto;min-height:0;overflow:visible}
.directory-meta{flex:0 0 var(--meta-width);text-align:right;padding-top:3px;min-width:0}
.directory-meta h2{font-size:14px;font-weight:400;line-height:1.4;overflow-wrap:anywhere}
.directory-meta p{font-size:11px;color:#777;margin-top:5px;line-height:1.4;overflow-wrap:anywhere}
.directory-meta small{display:block;font-size:9px;color:#888;margin-top:6px}
.directory-cover{flex:0 0 var(--cover-width);width:var(--cover-width);height:var(--panel-height);position:relative;padding:0;border:0;background:#f5f4ef;border-radius:0;overflow:hidden;cursor:pointer;transform:none}
.directory-cover:hover:not(:disabled){background:#f5f4ef}
.directory-cover img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top}
.directory-row.is-selected .directory-cover{z-index:2}
.directory-row.is-near .directory-cover{z-index:1}
.directory-cover:focus-visible{outline:2px solid #333;outline-offset:5px}
.directory-extra,.directory-meta-actions{display:none!important}
.directory-image-fallback{display:grid;place-items:center;height:100%;padding:16px;color:#777;font-size:12px}
.work-page .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.work-page.work-viewer-open{overflow:hidden}
.work-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#f5f4ef;color:#111;overflow:hidden}
.work-viewer::backdrop{background:#f5f4ef}
.viewer-stage{position:absolute;inset:0;overflow:hidden}
.viewer-rail{display:flex;width:100%;height:100%;transition:transform 320ms cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.viewer-slide{flex:0 0 100%;width:100%;height:100%;margin:0;position:relative;display:grid;place-items:center}
.viewer-slide img{display:block;width:100%;height:100%;object-fit:contain}
.viewer-fallback{font-size:14px;color:#777}
.work-viewer button{position:absolute;z-index:2;border:0;background:#f5f4efde;color:#111;line-height:1;cursor:pointer;padding:12px;min-width:48px;min-height:48px}
.work-viewer button:hover:not(:disabled){background:#f5f4ef}
.viewer-back{top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));font-size:32px}
.viewer-prev,.viewer-next{top:50%;transform:translateY(-50%);font-size:40px}
.viewer-prev{left:12px}.viewer-next{right:12px}
.work-viewer button:disabled{opacity:.15;cursor:default}
.viewer-count{position:absolute;right:24px;bottom:max(20px,env(safe-area-inset-bottom));font-size:11px;padding:7px 10px;background:#f5f4efde}
@media(max-width:600px){.work-directory{padding-top:30px}.directory-row{--cover-width:calc(100cqw - 106px);--meta-width:64px}.directory-track{gap:12px;padding-left:15px;padding-right:15px}.directory-meta h2{font-size:12px}.viewer-back{left:12px;top:12px}.viewer-prev,.viewer-next{min-width:40px;padding:8px}}
@media(prefers-reduced-motion:reduce){.directory-cover,.viewer-rail{transition:none}}

.viewer-rail.is-opening{transition:none}

.directory-scale-shell{position:relative;overflow:clip}
.directory-scale-shell>.work-directory-list{position:absolute;inset:0 0 auto;transform-origin:50% 0}

/* Shared cover flight lives inside the native dialog so it remains in the top layer. */
.work-viewer.is-morphing,.work-viewer.is-morphing::backdrop{background:transparent}
.work-viewer.is-morphing .viewer-rail{visibility:hidden}
.viewer-morph-image{position:fixed;z-index:1;display:block;max-width:none;max-height:none;object-fit:contain;transform-origin:0 0;pointer-events:none}
.viewer-morph-veil{position:fixed;inset:0;background:#f5f4ef;pointer-events:none}
.viewer-prev,.viewer-next,.viewer-count{transition:opacity 160ms ease}
.work-viewer.is-morphing .viewer-prev,.work-viewer.is-morphing .viewer-next,.work-viewer.is-morphing .viewer-count{opacity:0}
@media(prefers-reduced-motion:reduce){.viewer-prev,.viewer-next,.viewer-count{transition:none}}

/* Content-only layout frame: fixed 16:9 contain on desktop and mobile. */
.viewer-custom-slide{container-type:size}
.viewer-layout-frame{position:relative;width:min(100cqw,177.777778cqh);height:min(100cqh,56.25cqw);max-width:100%;max-height:100%;overflow:hidden}
.viewer-slide>.viewer-transition-source{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}

.viewer-rail.is-wheel-preview{transition:transform 180ms ease-out}
@media(prefers-reduced-motion:reduce){.viewer-rail.is-wheel-preview{transition:none}}

.work-viewer .viewer-fullscreen{top:max(18px,env(safe-area-inset-top));right:max(18px,env(safe-area-inset-right));font-size:32px}

.work-viewer .project-bottom-links{position:absolute;z-index:3;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:space-between;width:min(520px,calc(100% - 180px));gap:16px;padding:8px 16px;background:#f5f4efd9}
.project-bottom-links a{font:400 10px/1.4 Arial,sans-serif;letter-spacing:.12em;color:#333;text-decoration:none;white-space:nowrap}
.project-bottom-links a:hover{text-decoration:underline;text-underline-offset:4px}
.project-bottom-links a:focus-visible{outline:1px solid currentColor;outline-offset:5px}
@media(max-width:600px){.work-viewer .project-bottom-links{width:calc(100% - 32px);gap:12px;bottom:max(12px,env(safe-area-inset-bottom))}.work-viewer .viewer-count{bottom:58px}}

/* Phones read the project as a continuous article; desktop keeps the slide rail. */
@media(max-width:768px),(pointer:coarse) and (max-height:600px){
 .work-viewer{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding-top:76px}
 .work-viewer .viewer-stage{position:relative;inset:auto;overflow:visible}
 .work-viewer .viewer-rail,.work-viewer .viewer-rail.is-wheel-preview{display:block;height:auto;transform:none!important;transition:none;touch-action:pan-y;cursor:auto}
 .work-viewer .viewer-slide{display:block;width:100%;height:auto;margin:0 0 calc(var(--cover-width) * .035);scroll-margin-top:76px}
 .work-viewer .viewer-slide>img:not(.viewer-transition-source){width:100%;height:auto;object-fit:contain}
 .work-viewer .viewer-custom-slide{container-type:normal}
 .work-viewer .viewer-layout-frame{width:100%;height:auto;max-height:none;overflow:visible}
 .work-viewer .layout-surface{height:auto;display:flex;flex-direction:column;gap:20px;padding:0 20px;background:#f5f4ef}
 .work-viewer .layout-block{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;overflow:hidden;flex:none}
 .work-viewer .layout-text{font-size:17px!important;line-height:1.8!important;text-align:left!important;color:#222!important;overflow:visible;padding:8px 0}
 .work-viewer .layout-block>img:not(.layout-video-fallback),.work-viewer .layout-block>video{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;transform:none!important;object-fit:contain}
 .work-viewer .viewer-prev,.work-viewer .viewer-next,.work-viewer .viewer-count{display:none}
 .work-viewer .viewer-back,.work-viewer .viewer-fullscreen{position:fixed;top:max(12px,env(safe-area-inset-top));z-index:5}
 .work-viewer .project-bottom-links{position:relative;inset:auto;transform:none;width:calc(100% - 40px);max-width:520px;margin:32px auto 0;padding:20px 0 max(24px,env(safe-area-inset-bottom));background:none;justify-content:space-between}
}

.viewer-reading-copy{display:none}
@media(max-width:768px),(pointer:coarse) and (max-height:600px){.viewer-reading-copy{display:block;padding:24px 20px 4px;color:#222}.viewer-reading-copy h2{font-size:24px;font-weight:400;line-height:1.4;margin-bottom:16px}.viewer-reading-copy p{font-size:17px;line-height:1.8;white-space:pre-wrap}.viewer-reading-copy small{display:block;font-size:12px;line-height:1.6;margin-top:16px;color:#777}.viewer-reading-copy:empty{display:none}}

/* Quiet desktop paging controls; keep their generous click target. */
.work-viewer .viewer-prev,.work-viewer .viewer-next{background:transparent;border:0;box-shadow:none;font-size:30px;font-weight:300;opacity:.24;color:#fff;mix-blend-mode:difference}
.work-viewer .viewer-prev:hover:not(:disabled),.work-viewer .viewer-next:hover:not(:disabled){background:transparent;opacity:.8}
.work-viewer .viewer-prev:focus-visible,.work-viewer .viewer-next:focus-visible{opacity:1}
.work-viewer .viewer-prev:disabled,.work-viewer .viewer-next:disabled{opacity:0;pointer-events:none}
.work-viewer.is-morphing .viewer-prev,.work-viewer.is-morphing .viewer-next{opacity:0}

.work-viewer.is-morphing .viewer-back,.work-viewer.is-morphing .viewer-fullscreen,.work-viewer.is-morphing .project-bottom-links{opacity:0;pointer-events:none}


/* Every desktop page shares the same centered 16:9 content bounds. */
.viewer-cover-slide{container-type:size}
.viewer-cover-frame{display:grid;grid-template-columns:minmax(0,16fr) minmax(0,68fr) minmax(0,16fr);grid-template-rows:minmax(0,1fr);gap:clamp(24px,2.3vw,54px);width:min(100cqw,177.777778cqh);height:min(100cqh,56.25cqw);padding:24px 2.7%;position:relative;overflow:hidden;background:#f5f4ef;align-items:start;box-sizing:border-box}
.viewer-cover-copy{height:auto;max-height:100%;align-self:center;min-height:0;overflow-y:auto;text-align:right;color:#111}
.project-information-mark{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin:0 0 22px auto;background:#080808;color:#fff;font:400 16px/1 Arial,sans-serif;letter-spacing:-1px}
.viewer-cover-copy h1{font:700 clamp(20px,1.35vw,28px)/1.25 Arial,sans-serif;letter-spacing:0;margin:0 0 12px;overflow-wrap:anywhere}
.viewer-cover-copy .project-information-location{font:400 clamp(12px,.95vw,16px)/1.4 Arial,sans-serif;color:#808080;text-transform:uppercase;margin:0}
.project-information-facts{margin:56px 0 0;display:grid;gap:19px;text-align:right}
.project-information-facts div{margin:0}
.project-information-facts dt{font:400 11px/1.3 Arial,sans-serif;color:#888;text-transform:uppercase}
.project-information-facts dd{font:400 13px/1.35 Arial,sans-serif;color:#111;margin:2px 0 0;text-transform:uppercase;overflow-wrap:anywhere}
.viewer-cover-frame>img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;align-self:start}
.viewer-cover-description{padding:0;overflow-y:auto;max-height:100%;min-height:0;align-self:start;text-align:left;color:#111;overscroll-behavior:contain}
.viewer-cover-description p{font:400 clamp(12px,.78vw,15px)/1.25 Arial,sans-serif;white-space:pre-wrap;margin:0}
.directory-meta h2{font-size:clamp(16px,1.35vw,24px);line-height:1.25;font-weight:700;letter-spacing:0}
.directory-meta .project-information-location{text-transform:uppercase;margin-top:3px;font-size:12px;color:#808080}
.directory-meta .project-information-mark{display:none}
.directory-meta .project-information-facts{margin-top:12px;gap:5px}
.directory-meta .project-information-facts dd{margin-top:0;line-height:1.15}
.work-viewer .viewer-cover-copy,.work-viewer .viewer-cover-description{animation:none}
@keyframes cover-copy-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.work-viewer:not(.is-morphing) .viewer-cover-copy,.work-viewer:not(.is-morphing) .viewer-cover-description{animation:none}}
.viewer-cover-frame{container-type:inline-size;gap:2.3cqw;padding:1.667cqw 2.7cqw}
.viewer-cover-copy .project-information-mark{width:3.2cqw;height:3.2cqw;font-size:1.1cqw;margin-bottom:1.5cqw}
.viewer-cover-copy h1{font-size:1.8cqw;margin-bottom:.35cqw}
.viewer-cover-copy .project-information-location{font-size:1cqw}
.viewer-cover-copy .project-information-facts{margin-top:.8cqw;gap:.35cqw}
.viewer-cover-copy .project-information-facts dt{font-size:.76cqw}
.viewer-cover-copy .project-information-facts dd{font-size:.9cqw}
.viewer-cover-description p{font-size:1cqw}
@media(max-width:768px),(pointer:coarse) and (max-height:600px){
 .work-viewer .viewer-cover-slide{container-type:normal}
 .work-viewer .viewer-cover-frame{display:flex;flex-direction:column;width:100%;height:auto;overflow:visible;padding:0;gap:0}
 .work-viewer .viewer-cover-copy{padding:20px;height:auto;max-height:none;overflow:visible;text-align:right;align-self:stretch}
 .work-viewer .project-information-mark{margin-left:0}
 .work-viewer .viewer-cover-copy h1{font-size:32px}
 .work-viewer .viewer-cover-copy .project-information-location{font-size:14px}
 .work-viewer .project-information-facts{grid-template-columns:1fr 1fr;text-align:right;margin:12px 0 8px;gap:6px}
 .work-viewer .viewer-cover-frame>img{height:auto;max-height:none}
 .work-viewer .viewer-cover-description{padding:24px 20px;overflow:visible;max-height:none}
 .work-viewer .viewer-cover-description p{font-size:17px;line-height:1.8}
}
@media(max-width:600px){
 .directory-meta h2{font-size:13px}
 .directory-meta .project-information-mark{width:30px;height:30px;font-size:11px;margin-bottom:12px}
 .directory-meta .project-information-location{font-size:10px}
 .directory-meta .project-information-facts{margin-top:10px;gap:4px}
 .directory-meta .project-information-facts dt{font-size:8px}
 .directory-meta .project-information-facts dd{font-size:10px}
}

@media(max-width:768px),(pointer:coarse) and (max-height:600px){.work-viewer .viewer-cover-copy .project-information-mark{width:46px;height:46px;font-size:16px;margin-bottom:22px}.work-viewer .viewer-cover-copy .project-information-facts{margin-top:12px;gap:6px}.work-viewer .viewer-cover-copy .project-information-facts dt{font-size:11px}.work-viewer .viewer-cover-copy .project-information-facts dd{font-size:13px}}

.viewer-cover-media{position:relative;width:100%;height:auto;min-height:0;overflow:hidden;align-self:stretch}.viewer-cover-media>img{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;max-width:none;max-height:none}
@media(max-width:768px),(pointer:coarse) and (max-height:600px){.work-viewer .viewer-cover-media{height:auto;flex:none}.work-viewer .viewer-cover-media>img{height:100%}.work-viewer .viewer-cover-media.is-cropped>img{height:100%}}

.directory-meta .project-information-mark,.viewer-cover-copy .project-information-mark{display:none}

.viewer-morph-part{position:fixed!important;margin:0!important;transform-origin:0 0!important;pointer-events:none!important;z-index:1;box-sizing:border-box}

.directory-meta .project-information-facts dt,.viewer-cover-copy .project-information-facts dt{line-height:1.15}
.viewer-cover-copy .project-information-facts dd{margin-top:0;line-height:1.15}

/* Lower the introduction while retaining its independent overflow area. */
@media(min-width:769px){.work-viewer .viewer-cover-description{margin-top:4cqw;max-height:calc(100% - 4cqw)}}
.intro-is-typing{position:relative}
.intro-typing-ink{position:absolute;inset:0;white-space:pre-wrap;pointer-events:none}
.intro-typing-ink::after{content:"▏";display:inline;color:currentColor;animation:intro-caret 700ms step-end infinite}
@keyframes intro-caret{50%{opacity:0}}
@media(prefers-reduced-motion:reduce){.intro-typing-ink::after{animation:none}}

.work-viewer .viewer-cover-description p{font-size:.85cqw;line-height:1.45}
@media(max-width:768px){.work-viewer .viewer-cover-description p{font-size:14px;line-height:1.65}}

/* Keep data hydration out of the page entrance. The banner stays independent. */
.work-page #main{transition:opacity 500ms ease}
.work-content-pending .work-page #main{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.work-page #main{transition:none}}