/* Local composition study: shared proportions across the archive. */
:root{--archive-margin:clamp(24px,3vw,72px);--archive-top:clamp(24px,2.2vw,52px);--archive-type:clamp(14px,.95vw,18px)}
header{left:var(--archive-margin);right:var(--archive-margin);top:var(--archive-top);justify-content:flex-start;align-items:center;gap:clamp(40px,4vw,88px)}
header .artist-name{flex:none;font-size:clamp(18px,1.3vw,24px)}
header .wordmark{width:6.556em;height:1.11em}
header .wordmark img{width:7.485em;left:-.461em;top:-.456em}
header nav{width:auto;gap:clamp(22px,2vw,40px)}
header nav a,header nav a[aria-current]{font-size:var(--archive-type)!important;line-height:1.4;padding:10px 0;color:#626262}
header nav a[aria-current],header nav a:hover{color:#292929}
header #shuffle{position:static;flex:none;margin-left:0;width:48px;height:44px;padding:5px;color:#626262}
header #shuffle svg{width:38px;height:32px}
body.info-page main{padding:clamp(170px,13vw,280px) var(--archive-margin) 80px}
body.info-page main p{font-size:clamp(18px,1.25vw,24px);max-width:32em;line-height:1.55}
body.info-page .contact-links{margin-top:28px;gap:22px}
@media(max-width:700px){
 header{gap:14px 24px;flex-wrap:wrap;align-items:center}
 header .artist-name{width:100%;font-size:18px}
 header nav{gap:20px;flex:1;width:auto}
 header nav a,header nav a[aria-current]{font-size:13px!important;padding:8px 0}
 header #shuffle{width:36px;height:36px;padding:2px}
 header #shuffle svg{width:30px;height:26px}
 body.info-page main{padding-top:160px}
 body.info-page main p{font-size:18px;max-width:28em}
 body:has(#field) #field{inset:132px 12px 32px}
}
@media(max-width:700px){
 header nav{flex:none;width:calc(100% - 42px);gap:18px}
 header #shuffle{position:absolute;right:0;top:34px;margin:0}
}

header .artist-name{font-family:Helvetica,Arial,sans-serif;font-weight:400;letter-spacing:-.025em;mix-blend-mode:normal}
#shuffle{right:var(--archive-margin);bottom:28px}
#photo-reader{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:7;display:flex;align-items:center;gap:24px;white-space:nowrap}
#photo-reader[hidden]{display:none}
#photo-reader button{border:0;background:none;color:#555;font:13px Helvetica,Arial,sans-serif;padding:12px;cursor:pointer}
#photo-reader button:hover{color:#222}
#photo-reader button:disabled{opacity:.25;cursor:default}
@media(max-width:700px){body:has(#field) #field{inset:108px 12px 100px}#photo-reader{bottom:18px;gap:14px}}

/* Keep sequential movement together; returning is a separate action. */
#photo-reader{flex-direction:column;gap:2px;bottom:20px}
.photo-reader-arrows{display:flex;align-items:center;gap:20px}
#photo-reader .photo-reader-arrows button{display:grid;place-items:center;width:56px;height:48px;padding:8px}
.photo-reader-arrows svg{width:32px;height:24px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
#photo-reader #photo-back{font-size:12px;line-height:1.4;padding:8px 14px;color:#666}
#photo-reader #photo-back:hover{color:#222}
@media(max-width:700px){#photo-reader{bottom:10px;gap:0}.photo-reader-arrows{gap:24px}}

/* A pair of arrows, followed by the familiar new-sequence control. */
#photo-reader{flex-direction:row;gap:30px;bottom:24px}
#photo-reader #reader-shuffle{width:56px;height:48px;display:grid;place-items:center;padding:7px}
#reader-shuffle svg{width:40px;height:34px;fill:none;stroke:currentColor;stroke-width:1}
#reader-shuffle:disabled{opacity:.45}
@media(max-width:700px){#photo-reader{bottom:16px;gap:24px}}

/* One consistent lower-right position in both viewing states. */
#shuffle,#reader-shuffle{position:fixed;right:var(--archive-margin);bottom:24px;width:84px;height:76px;padding:10px;display:grid;place-items:center;border:0;background:none;color:#555;cursor:pointer;z-index:8}
#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:58px;height:48px;fill:none;stroke:currentColor;stroke-width:1}
#reader-shuffle:focus-visible{outline:1px solid #777;outline-offset:2px}
#photo-reader{gap:0}
@media(max-width:700px){#shuffle,#reader-shuffle{right:16px;bottom:16px;width:64px;height:60px;padding:8px}#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:46px;height:40px}}

/* Shared navigation proportions; generation stays in its established corner. */
#shuffle,#reader-shuffle{width:64px;height:56px;padding:8px;bottom:24px}
#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:40px;height:34px;stroke-width:1.3;stroke-linejoin:round}
#photo-reader .photo-reader-arrows button{position:relative;width:56px;height:56px;padding:12px;color:#555}
.photo-reader-arrows{gap:12px}
#photo-reader #photo-back{padding:12px}
#photo-reader button:focus-visible,#shuffle:focus-visible,#reader-shuffle:focus-visible{outline:1px solid #777;outline-offset:2px}
button[data-hint]::after{content:attr(data-hint);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font:12px/1.4 Helvetica,Arial,sans-serif;white-space:nowrap;color:#444;opacity:0;pointer-events:none;transition:opacity 160ms ease}
#shuffle::after,#reader-shuffle::after{left:auto;right:0;transform:none}
button[data-hint]:focus-visible::after{opacity:1}
@media(hover:hover){button[data-hint]:hover::after{opacity:1;transition-delay:300ms}#shuffle:hover,#reader-shuffle:hover{color:#222}}
@media(max-width:700px){#photo-reader,#shuffle,#reader-shuffle{bottom:16px}.photo-reader-arrows{gap:0}#photo-reader .photo-reader-arrows button{width:44px;height:56px;padding:8px}#shuffle,#reader-shuffle{right:16px;width:56px}}
@media(prefers-reduced-motion:reduce){button[data-hint]::after{transition:none}}

/* An open context around one fixed print distinguishes generation from overview. */
#shuffle,#reader-shuffle{width:84px;height:72px;padding:10px;color:#444}
#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:60px;height:50px;stroke-width:1.3;overflow:visible}
.sequence-symbol .sequence-neighbor{transform-box:view-box;transform-origin:24px 20px;opacity:.8}
#reader-shuffle{color:#333}
@media(max-width:700px){#shuffle,#reader-shuffle{width:68px;height:64px;padding:8px}#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:50px;height:42px}}

/* Seven distinct prints with enough space and scale to read their movement. */
#shuffle,#reader-shuffle{width:104px;height:88px;padding:10px}
#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:80px;height:65px;stroke-width:1.25;stroke-linejoin:miter}
@media(max-width:700px){#shuffle,#reader-shuffle{width:78px;height:74px;padding:8px;right:12px}#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:62px;height:51px}}

/* Returning opens a stable group; generating changes its relationships. */
.return-symbol{overflow:visible}
.return-symbol rect{transition:transform 500ms cubic-bezier(.25,0,.15,1)}
#photo-back:focus-visible .return-left{transform:translateX(-2px)}
#photo-back:focus-visible .return-right{transform:translateX(2px)}
@media(hover:hover){#photo-back:hover .return-left{transform:translateX(-2px)}#photo-back:hover .return-right{transform:translateX(2px)}}
@media(prefers-reduced-motion:reduce){.return-symbol rect{transition:none}}

/* In the reader, the heavier central print is the photograph being retained. */
#reader-shuffle .sequence-symbol .retained-frame{stroke-width:2.2;fill:#c4c4c4}

/* A map of the actual arrangement needs a wider, quiet footprint. */
#shuffle,#reader-shuffle{width:216px;height:124px}
#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:192px;height:108px;stroke-width:1}
@media(max-width:700px){#shuffle,#reader-shuffle{width:100px;height:76px}#shuffle .sequence-symbol,#reader-shuffle .sequence-symbol{width:84px;height:60px}}
@media(max-width:380px){#photo-reader{left:calc(50% - 24px)}}

/* The reader map navigates; regeneration is a separate, explicit action. */
#reader-shuffle{height:auto;display:flex;flex-direction:column;gap:6px;cursor:default}
#reader-shuffle .sequence-symbol rect{cursor:pointer;pointer-events:all;transition:stroke 150ms ease;stroke:#777}
#reader-shuffle .sequence-symbol rect:hover,#reader-shuffle .sequence-symbol rect:focus{stroke:#111;outline:none;stroke-width:2}
#reader-shuffle .sequence-symbol .retained-frame{stroke:#333}
#reader-regenerate{border:0;background:none;padding:10px 12px;color:#555;font:12px/1.4 Helvetica,Arial,sans-serif;cursor:pointer}
#reader-regenerate:hover{color:#111}
#reader-regenerate:focus-visible{outline:1px solid #777;outline-offset:2px}
#reader-regenerate:disabled{opacity:.4;cursor:default}
@media(max-width:700px){#reader-regenerate{font-size:11px;padding:8px 0;white-space:nowrap}#reader-shuffle{gap:0}}

/* Generation belongs to its own corner; the map remains solely for navigation. */
#shuffle,#reader-regenerate{position:fixed;left:var(--archive-margin);right:auto;bottom:24px;width:100px;height:84px;padding:10px;display:grid;place-items:center;background:none;border:0;color:#555;cursor:pointer;z-index:8}
#shuffle .sequence-symbol,#reader-regenerate .sequence-symbol{width:76px;height:62px;fill:none;stroke:currentColor;stroke-width:1.2;overflow:visible}
#reader-shuffle{right:var(--archive-margin);left:auto}
@media(max-width:700px){#shuffle,#reader-regenerate{left:12px;bottom:16px;width:64px;height:64px;padding:6px}#shuffle .sequence-symbol,#reader-regenerate .sequence-symbol{width:52px;height:44px}#reader-shuffle{right:12px}#photo-reader{left:calc(50% - 12px)}}

/* One compact reader cluster: map above, two secondary actions below. */
#photo-reader .photo-reader-arrows #photo-previous,#photo-reader .photo-reader-arrows #photo-next{display:none}
#reader-shuffle{bottom:66px;padding:6px 10px}
#photo-reader{left:auto;right:calc(var(--archive-margin) + 108px);bottom:20px;transform:none}
#photo-reader .photo-reader-arrows #photo-back{width:44px;height:40px;padding:10px}
#photo-reader #photo-back svg{width:24px;height:20px}
#reader-regenerate{left:auto;right:calc(var(--archive-margin) + 64px);bottom:20px;width:44px;height:40px;padding:9px}
#reader-regenerate .sequence-symbol{width:26px;height:22px}
@media(max-width:700px){
 #reader-shuffle{right:12px;bottom:60px;width:120px}
 #reader-shuffle .sequence-symbol{width:104px;height:60px}
 #photo-reader{left:auto;right:72px;bottom:16px}
 #reader-regenerate{left:auto;right:28px;bottom:16px;width:44px;height:40px;padding:9px}
 #reader-regenerate .sequence-symbol{width:26px;height:22px}
}

#reader-regenerate .regenerate-symbol{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform 450ms ease}
@media(hover:hover){#reader-regenerate:hover .regenerate-symbol{transform:rotate(25deg)}}
#reader-regenerate:focus-visible .regenerate-symbol{transform:rotate(25deg)}
@media(prefers-reduced-motion:reduce){#reader-regenerate .regenerate-symbol{transition:none}}

#shuffle[hidden]{display:none!important}

#shuffle{left:auto;right:var(--archive-margin);bottom:24px;width:44px;height:44px;padding:11px}
#shuffle .overview-refresh-symbol{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:700px){#shuffle{left:auto;right:20px;bottom:20px;width:44px;height:44px}}

/* Mobile reader keeps the close and regenerate actions, without the map. */
@media(max-width:700px){
 #reader-shuffle{display:none!important}
 #shuffle,#reader-regenerate{right:20px;bottom:max(16px,env(safe-area-inset-bottom));width:56px;height:56px;padding:12px}
 #shuffle .overview-refresh-symbol,#reader-regenerate .regenerate-symbol{width:32px;height:32px}
 #photo-reader{right:84px;bottom:max(24px,env(safe-area-inset-bottom))}
}