/* Hallmark · shape: Portfolio Grid · genre: editorial · theme: brand · redesign: full · scope: app · job: hire · nav: edge-aligned · footer: colophon · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: hierarchy, made the gallery title and controls readable without competing with the garments */
/* Hallmark · answered F20 · The final gallery row preserves the supplied series grouping; inventing or hiding an artwork to fill it would change the collection. */
/* Hallmark · waive 78 · gallery captions annotate individual works · compact titles belong under the images in an image archive */
:root{--gallery-edge:max(var(--gutter),calc((100% - var(--container))/2));--color-grid:#e8e8e0}
.gallery-header{height:80px;margin-inline:var(--gallery-edge);display:flex;align-items:center;justify-content:space-between;gap:var(--space-row);border-bottom:1px solid var(--line);position:relative;z-index:3;background:var(--paper);color:var(--ink)}.gallery-brand img{width:200px;height:32px}.gallery-edition{color:var(--muted);margin-right:auto;font-size:13px}.back-home{display:flex;align-items:center;min-height:48px;font-size:14px}.back-home:hover{color:var(--green)}
.gallery-heading{position:relative;margin-inline:var(--gallery-edge);padding-block:var(--space-row);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-row);z-index:2;pointer-events:none}.gallery-heading h1{font-size:clamp(36px,4.5vw,64px);line-height:1.2}.heading-note{font-size:14px;color:var(--muted)}
.gallery-toolbar{position:relative;margin-inline:var(--gallery-edge);display:flex;align-items:center;gap:var(--space-row);padding-bottom:var(--space-sm);border-bottom:1px solid var(--line);z-index:3;background:var(--paper);color:var(--ink)}.category-controls,.view-controls{display:flex;align-items:center;gap:var(--space-lg)}.category-controls button{font-size:14px;min-height:48px;padding:var(--space-sm) 0;display:flex;gap:var(--space-xs);align-items:center;border-bottom:2px solid var(--color-clear)}.category-controls small{font-size:12px;color:var(--muted)}.category-controls button[aria-pressed=true]{border-bottom-color:var(--ink)}.category-controls button:hover{color:var(--green)}.series-control{margin-left:auto}.series-control select{font-size:14px;min-height:48px;border:1px solid var(--muted);padding:var(--space-xs) var(--space-sm);max-width:260px;background:var(--paper);color:var(--ink);cursor:pointer}.view-controls{gap:var(--space-2xs);border-left:1px solid var(--line);padding-left:var(--space-lg)}.view-controls button{min-height:48px;padding:var(--space-sm) var(--space-md);font-size:14px}.view-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.view-controls button:not([aria-pressed=true]):hover{background:var(--color-paper-2)}
body:not(.is-grid){height:100dvh;overflow-y:clip;overflow-x:clip}.space-stage{position:absolute;top:268px;bottom:172px;left:var(--gallery-edge);width:calc(100% - var(--gallery-edge)*2);touch-action:none;cursor:grab}.space-stage:active{cursor:grabbing}.space-stage:focus-visible{outline:2px solid var(--green);outline-offset:4px}.space-stage.is-hovering{cursor:pointer}#gallery-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}.stage-mark{display:none}.space-hint{position:absolute;bottom:var(--space-xs);left:0;width:100%;max-width:none;text-align:center;font-size:13px;color:var(--muted);pointer-events:none}
.gallery-footer{position:fixed;bottom:0;left:var(--gallery-edge);right:var(--gallery-edge);z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-md) var(--space-row);padding:var(--space-lg) 0;border-top:1px solid var(--line);background:var(--paper);color:var(--ink)}.current-work h2{font-family:var(--sans);font-size:23px;font-weight:500;line-height:1.3;margin-block:var(--space-xs)}.current-work>span,.current-work .eyebrow{font-size:13px;color:var(--muted)}.gallery-navigation{display:flex;align-items:center;gap:var(--space-md)}.arrow-button{width:64px;min-height:48px;border:1px solid var(--line);font-size:13px;line-height:1.3;padding:var(--space-xs)}.arrow-button:hover:not(:disabled){background:var(--lime);border-color:var(--lime);color:var(--ink)}#image-position{font-size:13px;min-width:72px;text-align:center}.open-image{min-height:48px;margin-left:var(--space-lg);border-bottom:1px solid var(--ink);font-size:14px;padding:var(--space-sm) 0}.position-control{display:flex;align-items:center;width:100%;max-width:460px;height:24px}#position-slider{width:100%;height:24px;margin:0;appearance:none;background:var(--color-clear);cursor:pointer}#position-slider::-webkit-slider-runnable-track{height:2px;background:var(--line)}#position-slider::-webkit-slider-thumb{appearance:none;width:40px;height:10px;margin-top:calc(-1 * var(--space-2xs));background:var(--ink);border-radius:0}#position-slider::-moz-range-track{height:2px;background:var(--line)}#position-slider::-moz-range-thumb{width:40px;height:8px;border:0;border-radius:0;background:var(--ink)}.gallery-colophon{font-size:12px;text-align:right;color:var(--muted)}
.image-grid{margin-inline:var(--gallery-edge);padding-block:var(--space-row) var(--space-2xl);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-panel) var(--space-row)}.grid-card{min-width:0}.grid-image{display:block;width:100%;padding:0;overflow:clip;background:var(--color-grid);aspect-ratio:3/4;position:relative}.grid-image img{width:100%;height:100%;object-fit:cover}.grid-image:after{content:'查看';position:absolute;right:var(--space-md);bottom:var(--space-md);width:48px;height:48px;background:var(--paper);color:var(--ink);display:grid;place-items:center;font-size:12px}.grid-image:hover:after,.grid-image:focus-visible:after{background:var(--lime)}.grid-label{display:flex;gap:var(--space-md);justify-content:space-between;margin-top:var(--space-md)}.grid-label h2{font-family:var(--sans);font-size:18px;font-weight:500;line-height:1.5;letter-spacing:normal}.grid-label p{font-size:13px;color:var(--muted);margin-top:var(--space-xs)}.grid-label>.mono{font-size:12px;color:var(--muted);padding-top:var(--space-2xs)}.is-grid .gallery-footer{position:relative;left:auto;right:auto;margin-inline:var(--gallery-edge)}.is-grid .current-work,.is-grid .gallery-navigation,.is-grid .position-control{display:none}.is-grid .gallery-colophon{grid-column:1/-1;text-align:left}.gallery-notice{margin:var(--space-lg) var(--gallery-edge) 0;font-size:14px;color:var(--muted)}.no-script{padding:var(--space-xl) var(--gallery-edge)}.no-script a{text-decoration:underline}
.image-open .gallery-header,.image-open .gallery-heading,.image-open .gallery-toolbar,.image-open .gallery-footer,.image-open .space-hint{visibility:hidden}.image-open{overflow-y:clip!important;overflow-x:clip}#image-viewer{position:fixed;inset:0;margin:0;width:100%;height:100dvh;max-width:none;max-height:none;border:0;padding:0;background:var(--color-clear);color:var(--ink);overflow:clip}#image-viewer::backdrop{background:var(--color-clear)}.viewer-header{position:absolute;left:var(--gallery-edge);right:var(--gallery-edge);top:0;height:72px;display:flex;justify-content:space-between;align-items:center}.viewer-header>.mono{color:var(--muted);font-size:13px}.close-viewer{display:flex;gap:var(--space-md);align-items:center;min-height:48px;padding:var(--space-sm);font-size:14px}.close-viewer>span{font-size:28px;line-height:1}.viewer-stage{position:absolute;inset:80px var(--gallery-edge) 152px;display:flex;align-items:center;justify-content:center}.viewer-stage>img{display:block;width:100%;height:100%;object-fit:contain}.viewer-footer{position:absolute;left:var(--gallery-edge);right:var(--gallery-edge);bottom:0;min-height:136px;display:flex;gap:var(--space-row);align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:var(--space-lg) 0;background:var(--paper);color:var(--ink)}.viewer-footer h2{font-family:var(--sans);font-size:24px;font-weight:500;line-height:1.3;margin-block:var(--space-xs)}.viewer-footer .eyebrow{font-size:13px;color:var(--muted)}.viewer-footer p:last-child{font-size:14px;color:var(--muted);max-width:680px}.viewer-navigation{display:flex;gap:var(--space-sm);flex-shrink:0}#image-error{position:absolute;background:var(--paper);color:var(--ink);padding:var(--space-lg);text-align:center;font-size:14px}#retry-image{text-decoration:underline;min-height:48px}.is-grid.image-open #image-viewer{background:var(--paper);color:var(--ink)}
@media(max-width:1000px){.gallery-edition{display:none}.gallery-toolbar{gap:var(--space-md)}.category-controls{gap:var(--space-md)}.series-control select{max-width:200px}.view-controls{padding-left:var(--space-md)}.image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gallery-navigation{gap:var(--space-xs)}.open-image{margin-left:var(--space-xs)}}
@media(max-width:680px){.gallery-header{height:68px;gap:var(--space-md)}.gallery-brand img{width:160px;height:auto}.back-home{font-size:13px}.gallery-heading{padding-block:var(--space-lg)}.gallery-heading h1{font-size:34px}.heading-note{display:none}.gallery-toolbar{gap:var(--space-xs);flex-wrap:wrap;padding-bottom:var(--space-sm)}.category-controls{gap:var(--space-md);flex:1}.category-controls button{font-size:13px;min-height:44px;gap:var(--space-2xs)}.category-controls small{font-size:11px}.view-controls{padding:0;border:0;gap:0}.view-controls button{font-size:13px;padding:var(--space-xs);min-height:44px}.series-control{order:3;width:100%;margin-top:var(--space-xs)}.series-control select{font-size:16px;width:100%;max-width:none;height:44px;min-height:44px}.space-stage{top:280px;bottom:232px}.space-hint{font-size:12px}.gallery-footer{padding-block:var(--space-md);gap:var(--space-sm);grid-template-columns:minmax(0,1fr) auto}.current-work{grid-column:1/-1}.current-work h2{font-size:19px}.current-work .eyebrow,.current-work>span{font-size:12px}.gallery-navigation{grid-column:1/-1;gap:var(--space-xs)}.arrow-button{width:56px;min-height:44px;font-size:12px}.open-image{margin-left:auto;font-size:13px;min-height:44px}.gallery-colophon{font-size:11px}.position-control{max-width:120px;height:24px}#image-position{font-size:12px;min-width:60px}.image-grid{padding-top:var(--space-lg);gap:var(--space-row) var(--space-md)}.grid-label{gap:var(--space-xs);margin-top:var(--space-sm)}.grid-label h2{font-size:14px}.grid-label p{font-size:12px}.grid-label>.mono{display:none}.grid-image:after{width:36px;height:36px;font-size:11px;right:var(--space-xs);bottom:var(--space-xs)}.viewer-header{height:64px}.viewer-header>.mono{font-size:12px}.viewer-stage{inset:68px var(--space-sm) 208px}.viewer-footer{min-height:192px;padding-block:var(--space-md);gap:var(--space-md);align-items:flex-start}.viewer-footer h2{font-size:20px}.viewer-footer .eyebrow{font-size:12px}.viewer-footer p:last-child{font-size:13px;line-height:1.7}.viewer-navigation{flex-direction:column;gap:var(--space-xs)}.close-viewer{font-size:13px}.is-grid .gallery-footer{padding-block:var(--space-lg)}}
@media(max-height:740px){body:not(.is-grid) .gallery-heading{padding-block:var(--space-sm)}body:not(.is-grid) .gallery-heading h1{font-size:30px}.gallery-footer{gap:var(--space-xs);padding-block:var(--space-sm)}body:not(.is-grid) .gallery-colophon{display:none}body:not(.is-grid) .current-work>span{display:none}.viewer-footer{padding-block:var(--space-sm)}}
@media(max-height:540px){body:not(.is-grid) .gallery-heading{display:none}body:not(.is-grid) .gallery-header{height:52px}.gallery-footer .position-control{display:none}.viewer-stage{bottom:128px}.viewer-footer{min-height:112px}.viewer-footer p:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}