/* The full-image selection and the existing archive are two views of the work. */
.work-mode-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 0 20px}
.work-selection-label{display:flex;flex-direction:column;gap:7px}
.work-selection-label>span{font-size:10px;letter-spacing:.16em;font-weight:600;text-transform:uppercase;color:var(--muted)}
.work-selection-label>p{font-size:12px;margin:0;color:var(--muted)}
.work-mode-switch{display:flex;align-items:center;flex:none;gap:4px;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--bg)}
.work-mode-switch button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 17px;border:0;border-radius:100px;background:transparent;color:var(--muted);font:inherit;font-size:12px;white-space:nowrap;transition:color 200ms,background-color 200ms}
.work-mode-switch button .icon{width:16px;height:16px}
.work-mode-switch button[aria-pressed="true"]{color:var(--green-ink);background:var(--green)}
.work-mode-switch button:hover:not([aria-pressed="true"]){background:color-mix(in srgb,var(--text) 7%,transparent);color:var(--text)}
.work-mode-switch button:focus-visible,.showcase-page:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.work-archive-count{font-size:10px;opacity:.7;font-variant-numeric:tabular-nums}
.showcase-viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;direction:ltr;border-radius:18px}
.showcase-viewport::-webkit-scrollbar{display:none}
.showcase-track{display:flex;direction:ltr}
.showcase-card{position:relative;isolation:isolate;flex:0 0 100%;min-width:0;display:block;height:clamp(380px,calc(100svh - 270px),760px);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;color:#fff;background:#151715;border-radius:18px}
.showcase-card::after{position:absolute;content:"";inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#080a0824,transparent 40%,#080a0859 62%,#080a08f2 100%)}
.showcase-image-backdrop{position:absolute;inset:-25px;z-index:-3;width:calc(100% + 50px);height:calc(100% + 50px);object-fit:cover;filter:blur(30px);opacity:.42;pointer-events:none}
.showcase-artwork{position:absolute;inset:0;z-index:-2;display:flex;align-items:center;justify-content:center;padding:0}
.showcase-image{width:100%;height:100%;object-fit:cover;object-position:var(--showcase-focus,50% 50%);filter:drop-shadow(0 16px 30px #0003);transition:transform 700ms var(--ease)}
.showcase-card:hover .showcase-image{transform:scale(1.025)}
.showcase-topline{position:absolute;top:28px;inset-inline:32px;display:flex;justify-content:space-between;align-items:center;gap:18px;font-size:11px;text-shadow:0 1px 10px #0008}
.showcase-tag{display:inline-flex;align-items:center;gap:9px}
.showcase-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px color-mix(in srgb,var(--teal) 55%,transparent)}
.showcase-copy{position:absolute;inset-inline:32px;bottom:28px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px;direction:inherit}
.showcase-copy h3{margin:0 0 8px;font-family:var(--font-display,inherit);font-weight:500;font-size:clamp(34px,3.5vw,68px);letter-spacing:-.04em;line-height:1.05;overflow-wrap:anywhere}
.showcase-copy p{margin:0;max-width:42ch;font-size:14px;line-height:1.6;color:#ffffffb8}
.showcase-open{display:flex;align-items:center;gap:12px;font-size:12px;white-space:nowrap}
.showcase-open>.icon{width:48px;height:48px;padding:15px;border:1px solid #ffffff45;border-radius:50%;transition:transform 350ms var(--ease),background-color 200ms,color 200ms}
.showcase-card:hover .showcase-open>.icon{background:var(--green);color:var(--green-ink);border-color:var(--green);transform:rotate(45deg)}
.showcase-card:focus-visible{outline:3px solid var(--green);outline-offset:-5px}
.showcase-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:14px 0 10px;direction:ltr}
.showcase-pagination{display:flex;gap:1px;align-items:center}
.showcase-page{position:relative;display:grid;place-items:center;width:35px;height:44px;border:0;background:none;color:var(--muted);font:inherit;font-size:11px;font-variant-numeric:tabular-nums}
.showcase-page::after{content:"";position:absolute;bottom:5px;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:0;transition:opacity 200ms}
.showcase-page[aria-pressed="true"]{color:var(--action)}
.showcase-page[aria-pressed="true"]::after{opacity:1}
.showcase-controls{display:flex;align-items:center;gap:8px}
.showcase-counter{font-size:11px;font-variant-numeric:tabular-nums;color:var(--muted);margin-inline-end:9px}
.showcase-controls .icon-button{width:40px;height:40px;flex:none;background:transparent}
.showcase-controls .icon-button:disabled{opacity:.3;cursor:default}
.showcase-browse{min-height:44px;display:inline-flex;align-items:center;gap:10px;padding:0;border:0;color:var(--text);background:none;font:inherit;font-size:12px}
.showcase-browse .icon{width:15px;height:15px}
.showcase-browse:hover{color:var(--action)}
.showcase-progress{height:1px;background:var(--line);overflow:hidden}
.showcase-progress>span{height:100%;display:block;width:100%;transform-origin:left;transform:scaleX(var(--showcase-progress,0));background:var(--teal)}
.showcase-hint{font-size:10px;color:var(--muted);margin:11px 0 0;text-align:start;line-height:1.5}
.work-presentation-stage.is-pinned .showcase-viewport{overflow:hidden;scroll-snap-type:none}
.work-presentation-stage.is-pinned{display:flex;flex-direction:column;height:calc(100svh - 110px);min-height:0;will-change:transform}
/* Fill the pinned scene on tall screens while keeping its controls in view. */
.work-presentation-stage.is-pinned .work-mode-bar{flex:none}
.work-presentation-stage.is-pinned .project-showcase{display:flex;flex-direction:column;flex:1;min-height:0}
.work-presentation-stage.is-pinned .showcase-viewport{flex:1;min-height:0}
.work-presentation-stage.is-pinned .showcase-track,.work-presentation-stage.is-pinned .showcase-card{height:100%}
.work-presentation-stage.is-pinned :is(.showcase-footer,.showcase-progress,.showcase-hint){flex:none}
html[dir="rtl"] .showcase-copy,html[dir="rtl"] .showcase-topline{direction:rtl;text-align:right}
html[dir="rtl"] .showcase-copy h3{font-family:var(--arabic-display,inherit);letter-spacing:0;line-height:1.25}
@media(max-width:1100px){.work-mode-bar{gap:16px}.showcase-card{height:clamp(390px,65svh,680px)}.showcase-open>span{display:none}.showcase-artwork{padding:0}.showcase-copy{inset-inline:26px}.showcase-copy h3{font-size:38px}.showcase-topline{inset-inline:26px}}
@media(max-width:700px){
  .work-mode-bar{align-items:stretch;flex-direction:column;gap:15px;padding-bottom:18px}
  .work-selection-label{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .work-selection-label>span{font-size:9px;letter-spacing:.12em}.work-selection-label>p{font-size:10px;text-align:end;max-width:18ch;line-height:1.5}
  .work-mode-switch{width:100%;padding:4px}.work-mode-switch button{flex:1;min-height:44px;font-size:12px;padding-inline:12px}
  .showcase-viewport,.showcase-card{border-radius:13px}.showcase-card{height:clamp(370px,52svh,460px)}
  .showcase-artwork{padding:0}.showcase-topline{top:22px;inset-inline:20px;font-size:10px}
  .showcase-copy{inset-inline:20px;bottom:25px;gap:10px}.showcase-copy h3{font-size:34px;line-height:1.12}.showcase-copy p{font-size:12px;max-width:25ch}
  .showcase-open>.icon{width:44px;height:44px;padding:13px;flex:none}
  .showcase-footer{display:grid;grid-template-columns:1fr auto;gap:0 8px;padding:10px 0 6px}
  .showcase-pagination{gap:0}.showcase-page{width:30px;height:44px}.showcase-counter{font-size:10px;margin-inline-end:3px}
  .showcase-controls{gap:5px}.showcase-controls .icon-button{width:44px;height:44px}
  .showcase-browse{grid-column:1/-1;justify-content:space-between;direction:inherit;min-height:44px;font-size:12px}
  .showcase-hint{font-size:10px;margin-top:10px}
}
@media(max-width:360px){.showcase-footer{gap:0 4px}.showcase-page{width:25px}.showcase-counter{display:none}.showcase-copy h3{font-size:30px}.showcase-card{height:400px}}
@media(prefers-reduced-motion:reduce){.showcase-viewport{scroll-snap-type:none}.showcase-image,.showcase-open>.icon{transition:none}.showcase-card:hover .showcase-image{transform:none}}

.showcase-card[data-image-fit="contain"] .showcase-image{object-fit:contain}
@media(max-width:700px){.showcase-image{object-position:var(--showcase-mobile-focus,50% 50%)}}