.case-page>.case-snippets{max-width:780px}.case-page>.case-snippets>h2{max-width:580px;margin:0 auto 24px;color:var(--quiet)}.case-work-gallery{display:grid;gap:40px}.case-work-gallery figure{margin:0;min-width:0}.case-work-open{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}.case-work-open img{display:block;width:100%;height:auto}.case-work-gallery figcaption{max-width:580px;margin:12px auto 0;font-size:12px;line-height:1.65;text-align:center}.case-work-viewer{width:calc(100vw - 40px);max-width:1400px;height:calc(100dvh - 40px);max-height:none;border:1px solid #ddd;padding:16px;background:#fff;color:#333}.case-work-viewer[open]{display:flex;flex-direction:column;gap:16px}.case-work-viewer::backdrop{background:#000b;backdrop-filter:blur(8px)}.case-work-toolbar{display:flex;align-items:center;gap:12px}.case-work-toolbar p{flex:1;min-width:0;font:inherit}.case-work-toolbar button{font:inherit;color:inherit;padding:8px;border:0;background:none;cursor:pointer}.case-work-viewer>img{min-height:0;flex:1;width:100%;object-fit:contain}.case-work-modal-open{overflow:hidden}html[data-theme="dark"] .case-work-viewer{background:#161616;color:#ddd;border-color:#444}@media(max-width:620px){.case-work-gallery{gap:32px}.case-work-viewer{width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:8px}.case-work-toolbar{gap:4px}.case-work-toolbar p{font-size:12px}.case-work-gallery figcaption{font-size:12px}}

.case-work-open.case-work-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:#fff;padding:16px}.case-work-pair img{min-width:0}.case-work-pair-viewer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;flex:1;min-height:0;background:#fff;padding:16px}.case-work-pair-viewer img{display:block;width:100%;height:100%;min-height:0;object-fit:contain}.case-work-viewer.is-pair>img{display:none}@media(max-width:620px){.case-work-open.case-work-pair,.case-work-pair-viewer{gap:8px;padding:8px}}
/* Two images per row on every gallery (One per row via the testing console). Phones always stack one per row. */
@media(min-width:621px){html:not([data-gallery-layout="single"]) .case-page .case-work-gallery{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px;align-items:start}html:not([data-gallery-layout="single"]) .case-page .case-work-gallery>figure:last-child:nth-child(odd){grid-column:1/-1}html:not([data-gallery-layout="single"]) .case-page .case-work-gallery figcaption{margin-top:8px}}
/* White images on the page: same treatments, quieter (no drop shadow, no tint). */
html[data-image-edge="hairline"] .case-work-gallery .case-work-open img,html[data-image-edge="card"] .case-work-gallery .case-work-open img{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
html[data-image-edge="card"] .case-work-gallery .case-work-open img{border-radius:8px}
html[data-image-edge="mat"] .case-work-gallery .case-work-open img{box-sizing:border-box;padding:8px;background:#f3f3f3;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
html[data-theme="dark"][data-image-edge="hairline"] .case-work-gallery .case-work-open img,html[data-theme="dark"][data-image-edge="card"] .case-work-gallery .case-work-open img{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
html[data-theme="dark"][data-image-edge="mat"] .case-work-gallery .case-work-open img{background:#2a2a2a;box-shadow:0 0 0 1px rgba(255,255,255,.08)}
/* Masonry: in two-up mode, figures stack in independent columns (no row gaps). Very wide images (or .is-wide) span both columns; .is-narrow keeps one column. */
@media(min-width:621px){
.case-work-gallery.is-masonry,.art-gallery.is-masonry,.exploration-stream.is-masonry{grid-auto-rows:4px;row-gap:0!important;grid-auto-flow:row dense;align-items:start}
html .is-masonry.is-masonry figure:last-child:nth-child(odd):not(.is-wide):not(.is-auto-wide){grid-column:auto}
.is-masonry figure:is(.is-wide,.is-auto-wide):not(.is-narrow){grid-column:1/-1}
}

/* UI Exploration stream: on two-column screens the sections dissolve into one grid (they stay in the DOM for the scroll rail). */
.case-page>.exploration-stream{max-width:780px;margin:64px auto 0}
.exploration-stream>.exploration-section{max-width:none;margin:64px 0 0}
.exploration-stream>.exploration-section:first-child{margin-top:0}
@media(min-width:621px){
html:not([data-gallery-layout="single"]) .exploration-stream{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:32px;align-items:start}
html:not([data-gallery-layout="single"]) .exploration-stream>.exploration-section,html:not([data-gallery-layout="single"]) .exploration-stream .case-work-gallery{display:contents}
}