/* A compact visual index in the existing right-hand page gutter. */
.project-dock{position:fixed;z-index:18;right:7px;top:50%;transform:translateY(-50%);width:72px;isolation:isolate}
.project-dock[hidden]{display:none}
.project-jump-list{position:relative;display:flex;flex-direction:column;gap:5px;max-height:calc(100svh - 190px);overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:none;overscroll-behavior:contain;background:#080808e6;border:1px solid #ffffff1f;border-radius:5px;box-shadow:0 6px 24px #0005}
.project-jump-list::-webkit-scrollbar{display:none}
.project-jump{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;min-height:40px;outline-offset:1px}
.project-jump img{display:block;width:54px;height:36px;object-fit:cover;border:1px solid #ffffff30;border-radius:2px;filter:grayscale(.8) brightness(.65);transition:filter .25s,border-color .25s,transform .25s;transform-origin:right center}
.project-jump[aria-current] img{filter:grayscale(0) brightness(1);border-color:#d5b98d;box-shadow:0 0 0 1px #d5b98d44}
.project-jump:is(:hover,:focus-visible) img{filter:grayscale(0) brightness(1.15);transform:scale(1.15);border-color:#ead1a8}
.project-dock-toggle{display:none}
body:has(#gallery[open]) .project-dock{display:none}
@media(min-width:768px) and (max-width:1023px){.works.wrap{padding-right:88px}}
@media(max-width:767px){
 .project-dock{right:6px;width:52px;display:flex;align-items:flex-end;flex-direction:column;gap:7px}
 .project-dock-toggle{display:block;align-self:flex-end;writing-mode:vertical-rl;background:#10100ff2;border:1px solid #8f7653;border-radius:3px;color:#d5b98d;padding:13px 10px;min-width:40px;min-height:92px;font:10px/1.3 'Space Grotesk',sans-serif;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 4px 20px #0006}
 .project-dock-toggle[aria-expanded="true"]{writing-mode:horizontal-tb;min-height:40px;width:52px;padding:9px 3px;font-size:8px}
 .project-jump-list{display:none;max-height:55svh;width:52px;padding:4px;gap:2px}
 .project-dock.is-open .project-jump-list{display:flex}
 .project-jump{min-height:44px}
 .project-jump img{width:42px;height:32px}
}
@media(prefers-reduced-motion:reduce){.project-jump img{transition:none}.project-jump:is(:hover,:focus-visible) img{transform:none}}
/* Full image and title sit beside the hovered thumbnail, following the pointer. */
.project-hover-card{position:fixed;z-index:30;pointer-events:none;width:260px;max-width:calc(100vw - 90px);padding:7px;background:#10100ff7;border:1px solid #a0875a88;border-radius:4px;box-shadow:0 12px 44px #000b;animation:project-preview-in .16s ease-out}
.project-hover-card[hidden]{display:none}
.project-hover-card>img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px}
.project-hover-card>div{display:flex;flex-direction:column;gap:5px;padding:12px 9px 8px}
.project-hover-card small{font:10px/1.3 'Space Grotesk',sans-serif;letter-spacing:.18em;color:#d5b98d}
.project-hover-card strong{font:400 22px/1.15 'Playfair Display',serif;color:#f2ece3}
body:has(#gallery[open]) .project-hover-card{display:none}
@keyframes project-preview-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
@media(max-width:767px){.project-hover-card{width:220px}}
@media(prefers-reduced-motion:reduce){.project-hover-card{animation:none}}