.portfolio-intro h1{max-width:760px}
.portfolio-intro .split{align-items:end}
.portfolio-intro .button{margin-top:20px}
.portfolio-collection-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);gap:60px;align-items:end;margin-bottom:34px}
.portfolio-collection-head h2{max-width:720px;margin-bottom:0}
.portfolio-collection-head>p{max-width:620px;margin:0;color:var(--muted)}
.portfolio-carousel{overflow:hidden;border:1px solid #2e3439;background:#0b0e11;color:#fff;box-shadow:var(--shadow)}
.portfolio-stage{position:relative;display:grid;place-items:center;height:clamp(500px,68vw,760px);overflow:hidden;background:#080a0c;touch-action:pan-y;user-select:none}
.portfolio-collection-portrait .portfolio-collection-head{max-width:900px}
.portfolio-portrait{width:min(760px,100%);margin-inline:auto}
.portfolio-slide{position:absolute;inset:0;display:grid;place-items:center;margin:0}
.portfolio-slide[hidden]{display:none}
.portfolio-slide picture{display:grid;width:100%;height:100%;place-items:center}
.portfolio-slide img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.portfolio-portrait .portfolio-slide img{width:auto;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.portfolio-landscape .portfolio-slide img{width:100%;height:100%;object-fit:contain}
.portfolio-nav,.portfolio-expand,.portfolio-lightbox-head button{border:1px solid rgba(255,255,255,.45);background:rgba(7,9,11,.78);color:#fff;backdrop-filter:blur(8px);cursor:pointer;transition:background-color 180ms ease,border-color 180ms ease,transform 180ms ease}
.portfolio-nav{position:absolute;z-index:3;top:50%;display:grid;width:52px;height:52px;padding:0;place-items:center;border-radius:50%;font-size:23px;transform:translateY(-50%)}
.portfolio-prev{left:18px}.portfolio-next{right:18px}
.portfolio-nav:hover,.portfolio-nav:focus-visible,.portfolio-expand:hover,.portfolio-expand:focus-visible,.portfolio-lightbox-head button:hover,.portfolio-lightbox-head button:focus-visible{border-color:var(--gold);background:#11161a;color:#ffd15a}
.portfolio-nav:hover,.portfolio-nav:focus-visible{transform:translateY(-50%) scale(1.06)}
.portfolio-expand{position:absolute;z-index:3;top:18px;right:18px;display:flex;min-height:44px;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:700}
.portfolio-expand span{font-size:19px;line-height:1}
.portfolio-toolbar{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;min-height:72px;padding:12px 22px;border-top:1px solid #2d3338}
.portfolio-counter,.portfolio-hint{margin:0;color:#c6cbd0;font-size:13px;white-space:nowrap}
.portfolio-counter{font-variant-numeric:tabular-nums}
.portfolio-dots{display:flex;justify-content:center;gap:7px;align-items:center}
.portfolio-dots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#596168;cursor:pointer;transition:width 180ms ease,background-color 180ms ease}
.portfolio-dots button[aria-current="true"]{width:22px;border-radius:999px;background:var(--gold)}
.portfolio-dots button:focus-visible{outline:2px solid #fff;outline-offset:4px}
.portfolio-carousel:not(.carousel-ready) .portfolio-nav,.portfolio-carousel:not(.carousel-ready) .portfolio-expand,.portfolio-carousel:not(.carousel-ready) .portfolio-toolbar{visibility:hidden}
.portfolio-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050709;color:#fff}
.portfolio-lightbox::backdrop{background:rgba(0,0,0,.94)}
.portfolio-lightbox-shell{display:grid;height:100%;grid-template-rows:68px minmax(0,1fr) 48px}
.portfolio-lightbox-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 18px;border-bottom:1px solid #252b30}
.portfolio-lightbox-head p,.portfolio-lightbox-counter{margin:0}
.portfolio-lightbox-head p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-heading);font-size:20px}
.portfolio-lightbox-head button{display:grid;width:44px;height:44px;padding:0;place-items:center;border-radius:50%;font-size:28px;line-height:1}
.portfolio-lightbox-stage{position:relative;display:grid;min-height:0;place-items:center;overflow:hidden}
.portfolio-lightbox-stage picture{position:absolute;inset:0;display:grid;width:100%;height:100%;min-width:0;min-height:0;place-items:center;overflow:hidden}
.portfolio-lightbox-stage img{display:block;width:auto;height:auto;max-width:calc(100vw - 24px);max-height:calc(100dvh - 116px);object-fit:contain;object-position:center}
.portfolio-lightbox-counter{display:grid;place-items:center;border-top:1px solid #252b30;color:#c6cbd0;font-size:13px;font-variant-numeric:tabular-nums}
body.portfolio-lightbox-open{overflow:hidden}

@media(min-width:761px){
.portfolio-portrait .portfolio-stage{height:clamp(560px,68vw,720px)}
}

@media(max-width:900px){
.portfolio-collection-head{grid-template-columns:1fr;gap:16px;margin-bottom:24px}
.portfolio-collection-portrait .portfolio-collection-head{max-width:none}
}

@media(max-width:760px){
.portfolio-stage{height:auto;min-height:0}
.portfolio-landscape .portfolio-stage{aspect-ratio:16/9}
.portfolio-portrait .portfolio-stage{aspect-ratio:920/1303}
.portfolio-nav{width:44px;height:44px;font-size:20px}
.portfolio-prev{left:10px}.portfolio-next{right:10px}
.portfolio-expand{top:10px;right:10px;min-height:42px;padding:8px 11px}
.portfolio-toolbar{grid-template-columns:auto 1fr;gap:12px;min-height:66px;padding:10px 14px}
.portfolio-hint{display:none}
.portfolio-dots{justify-content:flex-end;gap:5px}
.portfolio-dots button{width:6px;height:6px}
.portfolio-dots button[aria-current="true"]{width:16px}
.portfolio-lightbox-shell{grid-template-rows:60px minmax(0,1fr) 42px}
.portfolio-lightbox-head{padding:8px 12px}
.portfolio-lightbox-head p{font-size:17px}
.portfolio-lightbox-stage img{max-height:calc(100dvh - 102px)}
.portfolio-lightbox-stage .portfolio-prev{left:8px}
.portfolio-lightbox-stage .portfolio-next{right:8px}
}

@media(prefers-reduced-motion:reduce){
.portfolio-nav,.portfolio-expand,.portfolio-lightbox-head button,.portfolio-dots button{transition:none}
}