.selected-work{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.5fr);gap:6vw;margin-top:90px;position:relative}
.selected-sidebar{position:sticky;top:18svh;align-self:start;padding:28px 0;min-height:440px}
.selected-context[hidden]{display:none}
.selected-count{font:11px monospace;color:#c3ac93;letter-spacing:.12em}
.selected-context h3{font:600 clamp(34px,4.4vw,68px)/1.05 Poppins,Arial;letter-spacing:-.055em;margin:50px 0 22px}
.selected-context p{font:16px/1.6 Arial;color:#c9bdad;max-width:320px;margin:0 0 24px}
.selected-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 42px}
.selected-tags span{font:11px Arial;border:1px solid #c3ac9340;padding:7px 10px;border-radius:30px;color:#dfccb5}
.selected-link{color:#f9eddb;text-decoration:none;font:12px monospace;border-bottom:1px solid #c57847;padding-bottom:8px;display:inline-block}
.selected-cards{display:grid;gap:32px;min-width:0}
.selected-card{display:block;color:inherit;text-decoration:none;scroll-margin-top:15svh}
.selected-cover{overflow:hidden;border-radius:10px;background:#eee9df;aspect-ratio:1.15;position:relative}
.selected-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.selected-card:hover img{transform:scale(1.025)}
.selected-card[data-project="fountain"] img{object-position:center top}
.selected-card figcaption{display:flex;justify-content:space-between;align-items:center;padding:16px 0 24px;border-bottom:1px solid #c3ac9333;font:13px Arial;color:#c9bdad}
.selected-card figure{margin:0}.selected-card figcaption b{font-weight:400;color:#f9eddb}.selected-card figcaption i{font-style:normal;color:#c57847}
.selected-mobile-copy{display:none}.selected-all{display:block;margin:40px 0 0;text-align:right;color:#dfccb5;font:12px monospace}
@media(max-width:700px){.selected-work{display:block;margin-top:48px}.selected-sidebar{display:none}.selected-cards{gap:32px}.selected-cover{aspect-ratio:1.15}.selected-mobile-copy{display:block;color:#c9bdad;font:14px/1.6 Arial;margin:14px 0}.selected-card figcaption{padding-bottom:14px}.selected-all{text-align:left}}
@media(prefers-reduced-motion:reduce){.selected-cover img{transition:none}.selected-card:hover img{transform:none}}

/* Focus follows the scroll; only the project artwork is dimmed. */
.selected-cover{opacity:1;transition:opacity .5s cubic-bezier(.22,1,.36,1)}
.has-focus .selected-card:not(.is-active) .selected-cover{opacity:.34}
.selected-card:focus-visible .selected-cover{opacity:1}
.selected-context{transition:opacity .18s ease,transform .18s ease;opacity:1;transform:none}
.selected-context.is-leaving{opacity:0;transform:translateY(-10px);pointer-events:none}
.selected-context.revealed:not(.is-leaving){animation:projectContextIn .5s cubic-bezier(.22,1,.36,1) both}
.selected-context.revealed .reveal-word{animation-duration:.65s;animation-delay:calc(var(--n)*.025s)}
@keyframes projectContextIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.selected-cover,.selected-context{transition:none}.selected-context.is-leaving{transform:none}.selected-context.revealed{animation:none}}

/* Scroll-controlled cinema backdrop, shared with the following section. */
:root{background:var(--page-bg,#151410)}
.selected-card figure{position:relative;overflow:hidden;border-radius:10px}
.selected-card figcaption{position:absolute;inset:auto 0 0;z-index:1;min-height:110px;align-items:flex-end;padding:48px 24px 22px;border:0;background:linear-gradient(transparent,rgba(0,0,0,.78));color:#eee5d8;opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.selected-card figcaption b{color:#fff1d7}.selected-card figcaption i{color:#e1af82}
.selected-card:hover figcaption,.selected-card:focus-visible figcaption{opacity:1;transform:none}
@media(hover:none){.selected-card figcaption{opacity:1;transform:none}}
@media(max-width:700px){.selected-card figcaption{padding:40px 16px 16px;font-size:11px;gap:12px}}
@media(prefers-reduced-motion:reduce){.selected-card figcaption{transition:none;transform:none}}

/* The frame responds to scroll focus; the artwork follows the pointer inside it. */
.selected-card figure{transform:scale(.985);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.selected-card.is-active figure{transform:scale(1)}
.selected-cover img,.selected-card:hover img{transform:translate3d(var(--mouse-x,0px),var(--mouse-y,0px),0) scale(1.04);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.selected-cover.is-tracking img{transition-duration:.35s}
@media(hover:none),(prefers-reduced-motion:reduce){.selected-cover img,.selected-card:hover img{transform:none}}
@media(prefers-reduced-motion:reduce){.selected-card figure{transform:none;transition:none}}

/* Give the sticky project information three distinct vertical anchors. */
@media(min-width:701px){
 .selected-sidebar{top:8svh;padding:0;min-height:0;height:84svh;max-height:900px}
 .selected-context{height:100%;display:flex;flex-direction:column;align-items:flex-start;padding:24px 0}
 .selected-count{flex:none}
 .selected-context h3{margin-top:auto;padding-top:32px}
 .selected-tags{margin-bottom:auto}
 .selected-link{flex:none;margin-top:40px}
}
@media(min-width:701px) and (max-height:600px){
 .selected-sidebar{top:4svh;height:92svh}
 .selected-context{padding:12px 0}
 .selected-context h3{font-size:34px;margin-bottom:14px;padding-top:16px}
 .selected-context p{font-size:14px;margin-bottom:16px}
 .selected-link{margin-top:20px}
}
/* Match the link hit area to its label so the cursor can hug it. */
.selected-all{width:max-content;max-width:100%;margin-left:auto;padding:8px 0}
@media(max-width:700px){.selected-all{margin-left:0}}

.selected-link{display:inline-flex;align-items:center;gap:.65em;line-height:1.4}.project-link-arrow{display:block;width:1em;height:1em;flex:none}