/* Workshop case studies: preserved prose, photographic sequences and detail viewer. */
.work-story{max-width:1440px;padding:0 6%;margin:0 auto 100px;counter-reset:work-step;font-size:16px;line-height:1.85}
.work-story .story-passage{margin:0}
.story-step{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:6%;align-items:start;padding:58px 0;border-top:1px solid var(--line);counter-increment:work-step}
.story-step::before{content:counter(work-step,decimal-leading-zero);position:absolute;top:15px;left:0;color:var(--accent);font:11px/1.4 Arial,sans-serif;letter-spacing:2px}
.story-step:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.story-step:nth-child(even)>.story-copy{grid-column:2;grid-row:1}.story-step:nth-child(even)>.story-photos{grid-column:1;grid-row:1}
.story-copy{min-width:0;max-width:62ch;color:#d4d1c8}
.story-paragraph{margin:0 0 1.3em}.story-paragraph:last-child{margin-bottom:0}.story-paragraph>br{display:none}
.story-photos{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.story-photos[data-count="1"]{grid-template-columns:1fr;position:sticky;top:30px}
.story-photos>br{display:none}.story-photo{position:relative;display:block;width:100%;padding:0;border:1px solid #434139;background:#1a1b17;cursor:zoom-in;overflow:hidden}
.work-story .story-photos img{display:block;width:100%;height:auto;max-height:700px;object-fit:contain;margin:0;background:#1a1b17;transition:filter .25s}
.story-photos:not([data-count="1"]) img{aspect-ratio:4/3;max-height:420px}
.story-photo::after{content:'↗';position:absolute;bottom:12px;right:12px;width:30px;height:30px;display:grid;place-items:center;color:#eeeae0;background:#131412c9;border:1px solid #ddd4;opacity:0;transition:opacity .2s}
.story-photo:hover::after,.story-photo:focus-visible::after{opacity:1}.story-photo:hover img{filter:brightness(1.07)}
.story-step.story-visual{grid-template-columns:1fr}.story-visual>.story-copy{display:none}.story-step.story-visual>.story-photos{grid-column:1;grid-row:1;position:static;max-width:100%}
.story-step.story-text-only{display:block}.story-text-only .story-copy{max-width:76ch;margin:auto}.story-text-only .story-photos{display:none}
.work-story .story-prose{max-width:76ch;margin:0 auto 40px}
.work-story a:not(:has(img)){text-underline-offset:5px}.story-text-only a{display:inline-block;padding:7px 0}
.work-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:56px 70px;border:0;color:#eeeae0;background:#10110ff5;overflow:hidden}
.work-lightbox::backdrop{background:#080908e8}.work-lightbox[open]{display:grid;place-items:center}.work-lightbox figure{margin:0;display:grid;grid-template-rows:minmax(0,1fr) 28px;gap:12px;height:100%;width:100%;min-height:0}.work-lightbox figure img{width:100%;height:100%;object-fit:contain;min-height:0}.work-lightbox figcaption{text-align:center;font:11px/28px Arial,sans-serif;letter-spacing:2px;color:var(--accent)}
.work-lightbox>button{position:absolute;border:1px solid #7777;background:#1b1c18;color:#eeeae0;width:44px;height:44px;font:24px Arial;cursor:pointer;z-index:1}.photo-close{right:18px;top:14px}.photo-prev{left:14px;top:50%}.photo-next{right:14px;top:50%}.photo-open{overflow:hidden}
@media(max-width:900px){.story-step,.story-step:nth-child(even){gap:5%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.work-story{font-size:15px}}
@media(max-width:650px){.story-step,.story-step:nth-child(even){display:flex;flex-direction:column;gap:24px;padding:50px 0 34px}.story-copy,.story-photos{width:100%}.story-step:nth-child(even)>.story-copy{order:0}.story-photos[data-count="1"]{position:static}.work-story{padding:0 6%;font-size:16px;line-height:1.8}.story-photos{gap:8px}.work-lightbox{padding:60px 12px 70px}.photo-prev,.photo-next{top:auto;bottom:16px}.photo-prev{left:calc(50% - 58px)}.photo-next{right:calc(50% - 58px)}}
@media(prefers-reduced-motion:reduce){.story-photo::after,.work-story .story-photos img{transition:none}}

.story-navigation::before{content:none}.story-navigation .story-copy{max-width:none;margin:0}.story-navigation .story-paragraph{display:flex;gap:16px;flex-wrap:wrap}.work-story .story-navigation a{padding:13px 22px;border:1px solid #746347;color:var(--accent);text-decoration:none;font-size:13px;background:#1b1c18}.story-navigation a:hover{background:#302a20}
