/* One complete portfolio image at a time, over the shared studio. */
#works { --book-height:510px; --sans:var(--headline-font); font:400 16px/1.5 var(--sans); padding-top:var(--dock-bottom-clearance,97px); padding-bottom:var(--dock-bottom-clearance,97px); padding-left:max(clamp(8px,1vw,20px),env(safe-area-inset-left)); padding-right:max(clamp(8px,1vw,20px),env(safe-area-inset-right)); }
#works * { box-sizing:border-box; }
#works a { color:inherit; text-decoration:none; }
#works button { color:inherit; font:inherit; background:none; border:0; cursor:pointer; }
#works a:focus-visible, #works button:focus-visible, #works [tabindex]:focus-visible { outline:none; }
#works .works-content { width:100%; max-width:none; height:100%; min-width:0; min-height:0; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
#works .reader { display:grid; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
#works .book-viewport { grid-row:1; display:grid; width:100%; height:100%; min-width:0; min-height:0; max-width:100%; padding:0; place-items:center; grid-template-columns:minmax(0,1fr); }
#works .book { position:relative; width:min(100%,calc(var(--book-height)*var(--book-ratio,1.5))); height:auto; min-width:0; min-height:0; max-width:100%; aspect-ratio:var(--book-ratio,1.5); isolation:isolate; background:transparent; touch-action:pan-y pinch-zoom; -webkit-user-select:none; user-select:none; }
#works .spread { position:relative; width:100%; height:100%; min-width:0; min-height:0; }
#works .page { position:relative; display:flex; flex-direction:column; width:100%; height:100%; min-width:0; min-height:0; padding:0; background:transparent; }
#works .page > * { min-width:0; }
#works .project-render { display:flex; flex:1; flex-direction:column; min-width:0; min-height:0; margin:0; }
#works .project-render-frame { position:relative; flex:1; min-width:0; min-height:0; aspect-ratio:var(--image-ratio,var(--book-ratio,1.5)); }
#works .project-render img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
#works .reader-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* Only the temporary slide scene clips horizontal motion; focus targets remain visible. */
#works .book[data-sliding] > .spread { visibility:hidden; pointer-events:none; }
#works .slide-scene { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
#works .slide-track { position:absolute; inset:0; width:100%; height:100%; will-change:transform; }
#works .slide-panel { position:absolute; inset:0; width:100%; height:100%; }
#works .slide-panel > .page { width:100%; height:100%; }
#works .slide-scene .work-image-trigger { pointer-events:none; }
#works .book[data-dragging], #works .book[data-dragging] * { cursor:grabbing; }

#works .work-image-trigger { cursor:zoom-in; -webkit-tap-highlight-color:transparent; }
#works .work-image-trigger:focus-visible { outline:none; }
#works .book[aria-busy="true"] .work-image-trigger { cursor:progress; }
#works .book[data-browser-zoomed] { touch-action:auto; }

/* All complete source images remain available when JavaScript is unavailable. */
#works .fallback-spread { display:grid; grid-template-columns:minmax(0,1fr); min-width:0; min-height:0; margin:20px 8px; background:transparent; }
#works .fallback-spread .page { height:auto; }
#works .fallback-spread .project-render-frame, #works .reader:not([data-ready]) .project-render-frame { flex:none; aspect-ratio:var(--image-ratio,1.5); }
#works.portfolio-flow { height:auto; min-height:100dvh; overflow:visible; }
#works.portfolio-flow .works-content, #works.portfolio-flow .reader { height:auto; }
#works.portfolio-flow .book-viewport { height:auto; }

@media (max-width:720px) {
  #works { --book-height:420px; }
  #works .fallback-spread { margin:16px 3px; }
}
@media (prefers-reduced-motion:reduce) {
  #works * { scroll-behavior:auto!important; }
}


/* Genuine Tab navigation uses a tonal cue; image actions retain their normal colors. */
html[data-portfolio-tab-focus] #works .book:focus .project-render,
html[data-portfolio-tab-focus] #works .work-image-trigger:focus { filter:brightness(.86); }

/* Page-edge chevrons retain the approved smoked faces and comfortable hit areas. */
#works .book .page-edge { position:absolute; top:50%; z-index:5; display:grid; place-items:center; width:44px; min-width:44px; height:68px; min-height:44px; margin:0; padding:0; border:0; border-radius:var(--control-radius); background:transparent; box-shadow:none; color:var(--control-ink); font:inherit; line-height:1; opacity:1; transform:translateY(-50%); transition:opacity 140ms ease; -webkit-tap-highlight-color:transparent; isolation:isolate; --control-inline-inset:8px; }
#works .book .page-edge::before { content:''; position:absolute; z-index:-1; top:50%; left:var(--control-inline-inset); right:var(--control-inline-inset); height:var(--control-height); transform:translateY(-50%); pointer-events:none; border:1px solid var(--control-border); border-radius:var(--control-radius); background:var(--control-surface); box-shadow:var(--control-shadow); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
#works .book .page-edge-previous { left:0; }
#works .book .page-edge-next { right:0; }
#works .book .page-edge svg { display:block; width:12px; height:18px; flex:none; pointer-events:none; }
#works .book .page-edge:focus-visible { opacity:1; outline:none; }
#works .book .page-edge:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible)::before { background:var(--control-hover); }
#works .book .page-edge:disabled, #works .book .page-edge[aria-disabled="true"] { opacity:.18; cursor:default; }
#works .book[data-dragging] .page-edge { opacity:0; pointer-events:none; }
@media (hover:hover) and (pointer:fine) {
  #works .book .page-edge { opacity:0; }
  #works .book:hover .page-edge:not(:disabled):not([aria-disabled="true"]) { opacity:1; }
  #works .book .page-edge:not(:disabled):not([aria-disabled="true"]):is(:hover,:focus-visible) { opacity:1; }
  #works .book[data-dragging] .page-edge { opacity:0; }
}
@media (prefers-reduced-motion:reduce) {
  #works .book .page-edge { transition:none; }
}
@media (forced-colors:active) {
  #works .book .page-edge { color:ButtonText; background:transparent; opacity:1!important; }
  #works .book .page-edge:disabled, #works .book .page-edge[aria-disabled="true"] { color:GrayText; opacity:1; }
  #works .book .page-edge::before { -webkit-backdrop-filter:none; backdrop-filter:none; }
}

@media (forced-colors:active) {
  #works .book .page-edge:focus-visible { color:HighlightText; forced-color-adjust:none; }
  #works .book .page-edge:not(:disabled):not([aria-disabled="true"]):focus-visible::before { background:Highlight; border-color:Highlight; }
}