/* All projects in one grid; the selected case opens below its row. */
#main:focus,#project-title:focus{outline:none}
.skip-link:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap;padding:0}
.works-section{max-width:1800px;margin:auto;padding:90px 5.2vw 100px;scroll-margin-top:30px}
.works-heading{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:44px}
.works-heading h2{font-size:clamp(2.5rem,4.25vw,4.6rem);text-transform:uppercase;line-height:1.05;letter-spacing:-.03em;font-weight:650;margin:0 0 16px}
.works-caption{margin:0;color:#8f9496;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.6}
.work-filters{display:flex;gap:12px;flex:none}
.work-filters button{min-width:65px;min-height:44px;padding:11px 20px;background:none;border:1px solid #ffffff3b;border-radius:4px;color:#afb4b6;font-size:.8125rem;text-transform:uppercase;transition:background .2s,color .2s}
.work-filters button[aria-pressed=true]{background:#f0f0ed;color:#161719;border-color:#f0f0ed}
.work-filters button:hover{border-color:#d5d5d2}
.works-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 26px}
.work-card{display:block;width:100%;text-align:left;padding:0;border:0;background:transparent;min-width:0;align-self:start}
.work-frame{display:block;position:relative;aspect-ratio:4/3;overflow:hidden;border:1px solid #ffffff1f;background:#111213}
.work-frame>img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:transform .4s ease,filter .3s ease}
.work-card[aria-expanded=true] .work-frame>img,.work-card:focus-visible .work-frame>img{filter:grayscale(0)}
.work-card[aria-expanded=true] .work-frame{border-color:#d2d6d7}
.corner{position:absolute;width:15px;height:15px;border-color:#c8cdce;border-style:solid;border-width:0;z-index:2;pointer-events:none}
.tl{left:0;top:0;border-width:2px 0 0 2px}.tr{right:0;top:0;border-width:2px 2px 0 0}.bl{left:0;bottom:0;border-width:0 0 2px 2px}.br{right:0;bottom:0;border-width:0 2px 2px 0}
.work-open{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:16px;padding:11px 14px;border:1px solid #ffffff45;border-radius:3px;background:#141516db;backdrop-filter:blur(8px);text-transform:uppercase;font-size:.625rem;letter-spacing:.05em;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.work-open>span{font-size:17px}
.work-card:hover .work-open,.work-card:focus-visible .work-open{opacity:1;transform:none}
.work-meta{display:flex;align-items:flex-start;gap:12px;margin-top:18px;min-height:44px}
.work-number{font-size:1.65rem;font-weight:600;letter-spacing:-.05em;color:#efefec;flex:none;line-height:1.3}
.work-titles{display:block;flex:1;min-width:0;padding-top:3px}
.work-name{display:block;font-family:Consolas,monospace;font-size:.8125rem;font-weight:450;text-transform:uppercase;color:#d9ddde;line-height:1.5;overflow-wrap:anywhere}
.work-human-name{display:block;margin-top:5px;font-size:.6875rem;color:#858c90;line-height:1.55}
.work-arrow{margin-left:auto;border:1px solid #ffffff3b;width:38px;height:38px;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:4px;flex:none;transition:background .2s}
.work-card:hover .work-arrow,.work-card[aria-expanded=true] .work-arrow{background:#e6e8e4;color:#111}
.work-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-left:57px}
.work-tags>span{border:1px solid #ffffff2d;padding:4px 8px;border-radius:3px;color:#91979b;font-size:.625rem;letter-spacing:.03em;text-transform:uppercase}
.works-bottom{display:flex;align-items:center;gap:28px;margin-top:42px}
.works-rule{height:1px;background:#ffffff23;flex:1}
.works-bottom p{color:#8f9699;font-size:.6875rem;text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;margin:0}
.project-view{grid-column:1/-1;border-top:1px solid #ffffff2a;padding:24px 0 32px;scroll-margin-top:28px;min-width:0}
.case-toolbar{display:flex;align-items:center;gap:24px;margin-bottom:24px}
.case-back{background:none;border:0;padding:10px 0;display:flex;align-items:center;gap:14px;text-transform:uppercase;color:#c4c8ca;font-size:.75rem;min-height:44px}
.case-back>span{font-size:22px}.case-back:hover{color:#fff}
.case-demo{font-size:.6875rem;color:#838b8f;letter-spacing:.04em;text-transform:uppercase;margin:0}
.case-layout{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(260px,1fr);gap:48px;align-items:center}
.case-figure{min-width:0;margin:0}
.case-image-stage{aspect-ratio:4/3;position:relative;overflow:hidden;background:#111213;border:1px solid #ffffff16}
.case-image-viewport{position:absolute;inset:0;overflow:hidden;scrollbar-width:thin;scrollbar-color:#6a7377 #111213}
.case-image-viewport>img{display:block;width:100%;height:100%;object-fit:contain;max-width:none;user-select:none}
.case-image-viewport.is-zoomed{overflow:auto;cursor:grab;overscroll-behavior:contain}
.case-image-viewport.is-zoomed>img{width:auto;height:auto;object-fit:initial}
.case-image-viewport.is-dragging{cursor:grabbing}
.case-image-viewport:focus-visible{outline:2px solid #c9d0d2;outline-offset:-3px}
.case-image-topline{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;pointer-events:none}
#project-view-label{padding:11px 14px;background:#111213c9;border:1px solid #ffffff25;backdrop-filter:blur(8px);border-radius:3px;font-size:.6875rem;color:#d0d5d6;letter-spacing:.05em;text-transform:uppercase;line-height:1.5}
.case-zoom{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;background:#111213d9;border:1px solid #ffffff3b;border-radius:3px;color:#d1d6d7;pointer-events:auto;backdrop-filter:blur(8px)}
.case-zoom span{font:11px Consolas,monospace;letter-spacing:.02em}
.case-zoom:hover,.case-zoom[aria-pressed=true]{color:#fff;border-color:#c9d0d2}
.case-details{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;justify-content:center;padding:10px;max-width:calc(100% - 20px);background:#111213cc;backdrop-filter:blur(10px);border:1px solid #ffffff25;border-radius:4px}
.case-detail{display:block;width:64px;flex:none;border:1px solid #ffffff35;border-radius:2px;overflow:hidden;background:#111213;padding:0;aspect-ratio:4/3}
.case-detail>img{display:block;width:100%;height:100%;object-fit:contain;filter:grayscale(1);transition:filter .3s ease}
.case-detail:hover,.case-detail[aria-pressed=true]{border-color:#ecf0ef}
.case-detail:hover>img,.case-detail[aria-pressed=true]>img{filter:grayscale(0)}
.case-description{border-left:1px solid #ffffff24;padding:28px 0 28px 40px;min-width:0}
.case-index{font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:#a9b2b5;margin:0 0 22px;line-height:1.6}
.case-description h3{font-family:Consolas,monospace;font-size:clamp(1.25rem,1.8vw,2rem);text-transform:uppercase;line-height:1.4;letter-spacing:-.02em;font-weight:500;margin:0 0 10px;overflow-wrap:anywhere}
.case-human-name{font-size:.9375rem;color:#858f94;line-height:1.6;margin:0 0 26px}
.case-copy{font-size:.9375rem;line-height:1.7;color:#9da7ac;margin:0 0 28px}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;padding-top:22px;border-top:1px solid #ffffff24}
.case-tags span{font-size:.6875rem;letter-spacing:.03em;padding:6px 9px;border:1px solid #ffffff2e;border-radius:3px;text-transform:uppercase;color:#c7cdcf}
.case-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:54px;margin-top:34px;padding:15px 18px;border:1px solid #b5bcbc;border-radius:4px;text-transform:uppercase;text-decoration:none;font-size:.75rem;letter-spacing:.04em;transition:background .2s}
.case-cta>span{font-size:20px}.case-cta:hover{background:#ffffff08}
.site-footer{max-width:1800px;margin:auto;border-top:1px solid #ffffff22;display:flex;align-items:center;gap:30px;padding:35px 5.2vw;color:#909699}
.footer-name{font-size:1.0625rem;font-weight:600;color:#d9dedf;text-decoration:none;white-space:nowrap}
.site-footer p{font-size:.75rem;margin:0}.site-footer>div{margin-left:auto;display:flex;flex-wrap:wrap;gap:24px}
.site-footer>div>a{font-size:.75rem;text-decoration:none;white-space:nowrap}.site-footer a:hover{color:#fff}
@media(hover:hover){.work-card:hover .work-frame>img{filter:grayscale(0);transform:scale(1.035)}}
@media(max-width:1100px){.works-grid{gap:30px 18px}.work-meta{gap:8px}.work-number{font-size:1.4rem}.work-name{font-size:.75rem}.work-arrow{width:34px;height:34px}.work-tags{padding-left:47px}.case-layout{gap:28px;grid-template-columns:minmax(0,1.65fr) minmax(250px,1fr)}.case-description{padding-left:26px}.case-detail{width:52px}.case-details{gap:6px;padding:8px}}
@media(max-width:800px){.works-section{padding:55px 24px 65px;scroll-margin-top:20px}.works-heading{align-items:flex-start;flex-direction:column;gap:24px;margin-bottom:28px}.works-heading h2{font-size:2.5rem;margin-bottom:12px}.works-caption{font-size:.6875rem}.work-filters{gap:9px}.work-filters button{font-size:.75rem;min-width:64px}.works-grid{grid-template-columns:1fr;gap:34px}.work-name{font-size:.8125rem}.work-number{font-size:1.65rem}.work-arrow{width:40px;height:40px}.work-tags{padding-left:57px}.work-open{display:none}.works-bottom{gap:20px;margin-top:32px}.project-view{padding:20px 0;scroll-margin-top:22px}.case-toolbar{gap:12px 20px;flex-wrap:wrap}.case-layout{grid-template-columns:1fr;gap:25px}.case-description{border-left:0;border-top:1px solid #ffffff25;padding:25px 0 0}.case-description h3{font-size:1.35rem}.case-index{margin-bottom:18px}.case-copy{font-size:.875rem;max-width:520px;margin-bottom:22px}.case-tags{padding-top:18px}.case-cta{max-width:360px;margin-top:24px}.case-image-topline{top:10px;left:10px;right:10px;gap:10px}#project-view-label{padding:9px 10px;font-size:.5625rem}.case-zoom{padding:8px;min-height:38px}.case-zoom span{font-size:10px}.case-detail{width:42px}.case-details{bottom:10px;gap:6px;padding:7px}.site-footer{padding:28px 24px;flex-wrap:wrap;gap:14px 22px}.site-footer p{font-size:.625rem}.site-footer>div{width:100%;margin:10px 0 0;gap:20px}.site-footer>div>a{font-size:.6875rem}}
@media(min-width:601px) and (max-width:800px){.works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.work-tags{padding-left:0}.work-name{font-size:.75rem}.case-detail{width:60px}}
@media(max-width:360px){.works-section{padding-left:18px;padding-right:18px}.case-detail{width:36px}.case-details{gap:5px;padding:6px}.work-tags{padding-left:0}.site-footer{padding-left:18px;padding-right:18px}}
@media(prefers-reduced-motion:reduce){.work-frame>img,.work-open,.case-detail>img{transition:none}}

/* Overlay controls sit directly on the image, without backing panels. */
#project-view-label{padding:4px 0;background:none;border:0;backdrop-filter:none;border-radius:0;text-shadow:0 1px 3px #111213}
.case-zoom{width:44px;min-height:44px;padding:9px;background:none;border:0;backdrop-filter:none;border-radius:0;color:#d1d6d7}
.case-details{padding:0;background:none;border:0;backdrop-filter:none;border-radius:0;opacity:.45;transition:opacity .25s ease}
.case-details:hover,.case-details:focus-within{opacity:1}
.case-detail{background:none}
@media(prefers-reduced-motion:reduce){.case-details{transition:none}}