.case-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}.case-nav a{font-size:13px;text-decoration:none;padding:10px 16px;border:1px solid var(--line);border-radius:100px}.case-nav a:hover{background:var(--fg);color:var(--inverse)}.case-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)}.case-summary dt{font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}.case-summary dd{margin:8px 0 0;font-size:15px}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:32px}.case-story p{margin:0}.case-story h3{font-size:16px;margin:0 0 12px}.screen-pair{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px}.screen-pair.mobile-pair{grid-template-columns:1fr 1fr;max-width:800px;margin:auto}.screen{margin:0;min-width:0;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.screen>a{display:block;max-height:700px;overflow:auto;background:white;border-radius:8px}.screen img{display:block;width:100%;height:auto}.screen.mobile>a{max-width:320px;margin:auto}.screen figcaption{font-size:12px;color:var(--muted);margin-top:16px;display:flex;justify-content:space-between;gap:8px}.screen-caption{font-size:13px;color:var(--muted);margin-top:16px}.case-heading{display:flex;justify-content:space-between;align-items:baseline;gap:24px}.case-heading>span{font-size:12px;color:var(--muted);white-space:nowrap}.case-story strong{font-weight:600}.case-end{display:flex;align-items:center;justify-content:space-between;gap:32px}.case-end p{max-width:600px}.case-hero .intro{max-width:800px}.case-hero h1{max-width:900px}.case-hero{padding-bottom:64px}.case-section{scroll-margin-top:120px}.case-section h2{max-width:900px}.case-kicker{font-size:13px;color:var(--muted)}@media(max-width:760px){.case-story,.screen-pair{grid-template-columns:1fr;gap:24px}.case-summary{grid-template-columns:1fr;gap:24px;margin-top:32px}.screen{padding:16px}.screen>a{max-height:560px}.case-heading{align-items:flex-start}.case-heading>span{display:none}.case-end{display:block}.screen-pair.mobile-pair{gap:8px}.mobile-pair .screen{padding:8px}.mobile-pair figcaption{font-size:11px}.case-story{gap:16px}}
.image-popup{width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;padding:32px;border:0;background:transparent;overflow:hidden;color:var(--fg)}.image-popup::backdrop{background:rgba(0,0,0,.78)}.image-popup[open]{display:flex;align-items:center;justify-content:center}.image-popup-panel{display:flex;flex-direction:column;max-height:100%;width:min(1280px,100%);min-height:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 24px 80px #0005}.image-popup-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}.image-popup-header span{font-size:13px}.image-popup-header button{font:inherit;white-space:nowrap;border:1px solid var(--line);border-radius:100px;min-height:44px;padding:8px 16px;background:var(--surface);color:var(--fg);cursor:pointer}.image-popup-body{overflow:auto;overscroll-behavior:contain;min-height:0;background:#fff}.image-popup-body img{display:block;max-width:100%;width:auto;height:auto;margin:auto}.screen>a{cursor:zoom-in}@media(max-width:760px){.image-popup{padding:8px}.image-popup-panel{border-radius:12px}.image-popup-header{padding:8px 12px}.image-popup-header span{font-size:12px}}

/* Static previews; inspect the complete design in the dialog. */
.screen>a{height:480px;max-height:none;overflow:hidden;position:relative}.screen>a::after{content:"";position:absolute;inset:auto 0 0;height:64px;background:linear-gradient(transparent,#ffffffd9);pointer-events:none}.screen.mobile>a{height:480px}.screen figcaption>a{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:100px;text-decoration:none;white-space:nowrap;color:var(--fg);font-size:12px;cursor:zoom-in}.screen figcaption{align-items:center}.screen figcaption>a:hover{background:var(--fg);color:var(--inverse)}@media(max-width:760px){.screen>a,.screen.mobile>a{height:360px}.screen-pair.mobile-pair{grid-template-columns:1fr}.mobile-pair .screen{padding:16px}.screen figcaption{flex-wrap:wrap}}

/* Compact case layout and a complete lead presentation. */
.case-hero{padding-block:48px}.case-hero h1{margin-block:16px 24px}.case-hero .intro{margin-block:0 24px}.case-nav{margin-top:24px}.case-section{padding-block:48px}.case-story{gap:32px;margin-bottom:24px}.case-lead-image{margin-bottom:32px}.screen-cover{padding:16px}.screen-cover>a{height:auto;max-height:none;overflow:hidden}.screen-cover>a::after{display:none}.screen-cover img{width:100%;height:auto}.case-section h2{margin-bottom:24px}@media(max-width:760px){.case-hero{padding-block:32px}.case-section{padding-block:32px}.case-story{gap:16px}.screen-cover{padding:8px}.case-lead-image{margin-bottom:16px}}

/* Compact galleries and a fitted image viewer. */
.design-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.design-gallery .screen{padding:12px}.design-gallery .screen>a{height:280px}.design-gallery .screen figcaption{gap:8px;flex-wrap:wrap}.design-gallery .screen figcaption>a{min-height:36px;padding:6px 10px}.screen svg{display:block;width:100%;height:auto}.image-popup-panel{height:min(920px,calc(100dvh - 64px));max-height:100%;width:min(1440px,100%)}.image-popup-header{flex-wrap:wrap}.image-popup-actions{display:flex;gap:8px;flex-shrink:0;align-items:center}.image-popup-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0;padding:16px;background:var(--project-bg)}.image-popup-body .popup-media{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;margin:0}.is-zoomed .image-popup-body{display:block;overflow:auto}.is-zoomed .popup-media{width:100%;height:auto;max-height:none}.image-popup-header button[hidden]{display:none}@media(max-width:760px){.design-gallery{grid-template-columns:1fr 1fr}.design-gallery .screen>a{height:240px}.image-popup-panel{height:calc(100dvh - 16px)}.image-popup-header>span{width:100%;font-size:12px}.image-popup-actions{width:100%;justify-content:space-between}.image-popup-actions button{padding:6px 10px}.image-popup-body{padding:8px}}@media(max-width:420px){.design-gallery{grid-template-columns:1fr}.design-gallery .screen>a{height:340px}}
.design-gallery{margin-top:24px}.design-gallery .screen>a svg{height:100%;width:100%}.design-gallery .screen>a::after{display:none}
.case-tools{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;font-size:14px}.case-tools>span{color:var(--muted);font-size:12px}.case-tools p{margin:0}

/* Photography archive: natural image height prevents blank space below photos. */
.archive-work .design-gallery .screen>a:has(img[src*="photography-"]){height:auto;max-height:none;overflow:visible}
.archive-work .design-gallery .screen>a:has(img[src*="photography-"]) img{display:block;width:100%;height:auto}

/* Universal DSM: rounded original screenshots and accessible enlarge actions. */
.screen{border-radius:18px;overflow:hidden}.screen>a{border-radius:14px;overflow:hidden}.screen img{border-radius:inherit}.screen figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px}.screen figcaption>a{margin-left:auto;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;white-space:nowrap}.screen figcaption>a:hover{background:var(--fg);color:var(--inverse)}.case-nav a[aria-current="true"]{background:var(--fg);color:var(--inverse);border-color:var(--fg)}.case-nav a{background:var(--surface);color:var(--fg);border-radius:999px}.case-nav a:focus-visible,.screen figcaption>a:focus-visible{outline:3px solid var(--fg);outline-offset:3px}@media(max-width:760px){.screen{border-radius:14px}.screen>a{border-radius:10px}.screen figcaption{flex-wrap:wrap}}

/* DSM Image Viewer v2 — uses existing --surface, --fg and --line tokens. */
.image-popup-panel{width:min(760px,100%);height:auto;max-height:100%;min-height:0}
.image-popup-header{flex-wrap:nowrap;border-bottom:0;padding:16px 16px 12px}
.image-popup-header span{flex:1;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.image-popup-header button{flex:none}
.image-popup-body{display:block;height:min(490px,60dvh);flex:0 1 auto;margin:0 16px;padding:0;border:1px solid var(--line);overflow:auto;touch-action:pan-x pan-y pinch-zoom;scrollbar-gutter:stable}
.image-popup-body .popup-media{display:block;margin:0 auto;max-width:none;max-height:none;height:auto;object-fit:contain}
.image-popup-footer{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;align-items:center}
.image-popup-footer button{min-height:44px;min-width:44px;padding:8px 12px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:8px;font:inherit;cursor:pointer}
.image-popup-footer button:disabled{opacity:.45;cursor:not-allowed}
.image-popup-percent{font-size:13px;min-width:48px;text-align:center;color:var(--fg)}
.image-popup :is(button,.image-popup-body):focus-visible{outline:3px solid var(--fg);outline-offset:2px}
@media(max-width:760px){.image-popup-header{padding:12px}.image-popup-body{margin:0 12px;height:min(490px,58dvh)}.image-popup-footer{padding:12px;gap:8px}}

/* Case study viewer guidance: shared across NL and EN without changing navigation. */
.case-viewer-hint{font-size:13px;color:var(--muted);margin:16px 0 0;max-width:65ch}


/* Case Study Template v1.0 — shared responsive layout; reuses existing DSM tokens. */
.case-template{--case-content-width:76rem;--case-reading-width:56rem}
.case-template .case-hero,.case-template .case-section,.case-template .case-end{min-width:0}
.case-template .case-hero .intro,.case-template .case-section>p{max-width:var(--case-reading-width)}
.case-template .case-section{display:flex;flex-direction:column;gap:24px;min-width:0}
.case-template .case-section>h2,.case-template .case-section>.eyebrow{margin-bottom:0}
.case-template .case-story{min-width:0}
.case-template .screen-pair,.case-template .screen{min-width:0}
.case-template .screen img{max-width:100%;height:auto}
.case-template .case-nav a:focus-visible,.case-template .screen a:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media(max-width:834px){.case-template .case-story{grid-template-columns:1fr;gap:20px}.case-template .case-section{gap:20px}}
@media(max-width:390px){.case-template .case-section{gap:16px}.case-template .case-nav{gap:8px}.case-template .case-nav a{min-height:44px;display:inline-flex;align-items:center}}


/* Long concept artwork must scroll within the viewer at every viewport. */
.image-popup .image-popup-panel{min-height:0;max-height:calc(100dvh - 16px)}
.image-popup .image-popup-body{display:block;flex:1 1 auto;height:auto;min-height:120px;max-height:none;overflow-x:auto;overflow-y:scroll;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;align-items:initial;justify-content:initial}
.image-popup .image-popup-body .popup-media{display:block;width:100%;max-width:none;max-height:none;height:auto;object-fit:initial}

/* Keep the scroll viewport constrained on narrow screens, including at 300% zoom. */
@media(max-width:760px){.image-popup .image-popup-panel{height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);display:flex;flex-direction:column;overflow:hidden}.image-popup .image-popup-body{flex:1 1 0;min-height:0;overflow:auto}.image-popup .image-popup-footer,.image-popup .image-popup-header{flex-shrink:0}}

/* Scroll affordance is visible on hover before the first scroll, including on macOS. */
.image-popup .image-popup-panel{position:relative}
.image-popup-scroll-track{position:absolute;right:18px;width:6px;border-radius:999px;background:color-mix(in srgb,var(--fg) 10%,transparent);pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:2}
.image-popup-scroll-thumb{width:100%;border-radius:999px;background:color-mix(in srgb,var(--fg) 55%,var(--surface));will-change:transform}
.image-popup-panel:hover .image-popup-scroll-track.has-overflow,.image-popup-panel:focus-within .image-popup-scroll-track.has-overflow{opacity:1}
@media(hover:none){.image-popup-scroll-track.has-overflow{opacity:.7}}
@media(max-width:760px){.image-popup-scroll-track{right:14px}}
@media(prefers-reduced-motion:reduce){.image-popup-scroll-track{transition:none}}

/* Single scrollbar: the hover affordance replaces, rather than duplicates, the native track. */
.image-popup .image-popup-body{scrollbar-width:none;-ms-overflow-style:none}
.image-popup .image-popup-body::-webkit-scrollbar{display:none;width:0;height:0}