.project-gallery { max-width: 1050px; margin: 0 auto; }
.project-gallery-stage {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    background: #112630;
    overflow: hidden;
    border-radius: 8px;
    touch-action: pan-y pinch-zoom;
}
.project-gallery-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.project-gallery-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.project-gallery-controls button {
    min-height: 44px;
    padding: 6px 12px;
    border: 1px solid #c9d0d3;
    border-radius: 5px;
    background: #fff;
    color: #112630;
    font: inherit;
    cursor: pointer;
}
.project-gallery-controls button[aria-disabled="true"] { opacity: .5; cursor: default; }
.project-gallery-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.project-gallery-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 10px; }
.project-gallery-thumbnail {
    flex: 0 0 clamp(76px, 13vw, 116px);
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
}
.project-gallery-thumbnail[aria-current="true"] { border-color: #c91931; }
.project-gallery-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-gallery button:focus-visible { outline: 2px solid #112630; outline-offset: 2px; }

.project-gallery-heading { display:flex; align-items:center; gap:clamp(12px, 4vw, 32px); flex-wrap:wrap; margin:16px 0; }
.project-gallery-heading h1 { margin:0; }
.project-gallery-logo { width:auto; max-width:min(180px, 48vw); max-height:65px; object-fit:contain; }
button.project-gallery-stage { width:100%; border:0; padding:0; cursor:zoom-in; }
.project-gallery-subtitle { margin: 18px 0 8px; }
.project-gallery-description { max-width: 76ch; margin: 0 0 24px; line-height: 1.65; }
.project-gallery-viewer {
    position: fixed;
    inset: 0;
    box-sizing: border-box;
    width: min(1120px, calc(100% - clamp(36px, 10vw, 160px)));
    height: min(760px, calc(100dvh - clamp(80px, 16vh, 160px)));
    max-width: none;
    max-height: none;
    padding: 0;
    margin: auto;
    border: 1px solid #ffffff38;
    border-radius: 14px;
    background: #111820;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 20px 75px #0009;
}
.project-gallery-viewer::backdrop { background: rgb(9 18 25 / 70%); }
.project-gallery-viewer-stage {
    position: absolute;
    inset: clamp(10px, 2.2vw, 26px);
    display: grid;
    place-items: center;
    touch-action: pan-y pinch-zoom;
}
.project-gallery-viewer-stage img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    user-select: none;
}
.project-gallery-viewer button {
    position:absolute; z-index:1; display:grid; place-items:center; width:44px; height:44px;
    border:1px solid #ffffff65; border-radius:50%; color:#fff; background:#050607b8; font:inherit;
    font-size:24px; cursor:pointer; padding:0;
}
.project-gallery-viewer button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.project-gallery-viewer button[aria-disabled="true"] { opacity:.35; cursor:default; }
.project-gallery-viewer-close { top: max(12px, env(safe-area-inset-top)); right:max(12px, env(safe-area-inset-right)); }
.project-gallery-viewer-prev { left:max(12px, env(safe-area-inset-left)); top:50%; transform:translateY(-50%); }
.project-gallery-viewer-next { right:max(12px, env(safe-area-inset-right)); top:50%; transform:translateY(-50%); }