.portfolio-jump-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.portfolio-jump-links a { display:flex; align-items:center; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:999px; font-size:11px; color:#bec8d8; }
.portfolio-jump-links a:hover { background:#16243b; color:#fff; }
.portfolio-view-hint { color:var(--muted); font-size:11px; line-height:1.8; margin-top:24px; }
.portfolio-gallery { display:flex; flex-direction:column; gap:30px; padding-bottom:70px; }
.portfolio-group { scroll-margin-top:112px; display:flex; flex-direction:column; gap:18px; }
.portfolio-artwork { width:100%; background:#000; border:0; padding:0; border-radius:18px; overflow:hidden; cursor:zoom-in; }
.portfolio-artwork img { width:100%; height:auto; display:block; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.artwork-viewer { position:fixed; inset:16px; width:calc(100vw - 32px); height:calc(100dvh - 32px); max-width:none; max-height:none; margin:0; padding:0; border:1px solid var(--line); border-radius:24px; background:#080a11; color:var(--paper); }
.artwork-viewer::backdrop { background:rgba(0,0,0,.86); backdrop-filter:blur(8px); }
.artwork-toolbar { display:flex; align-items:center; gap:12px; padding:12px 18px; border-bottom:1px solid var(--line); min-height:70px; }
.artwork-toolbar p { margin-right:auto; color:#b7c2d4; font-size:12px; line-height:1.5; }
.artwork-toolbar button { display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:999px; padding:8px 16px; background:#17243a; color:#fff; font-size:12px; cursor:pointer; }
.artwork-canvas { height:calc(100% - 70px); overflow:auto; overscroll-behavior:contain; padding:16px; text-align:center; }
.artwork-canvas img { display:block; margin-inline:auto; width:auto; height:auto; max-width:none; max-height:none; transition:width .24s cubic-bezier(.2,.7,.3,1); }
.artwork-zoom-controls { display:flex; align-items:center; gap:6px; }
.artwork-zoom-controls button { min-width:44px; padding-inline:10px; }
.artwork-zoom-controls [data-artwork-zoom-level] { min-width:54px; font-variant-numeric:tabular-nums; }
.artwork-toolbar button:disabled { opacity:.35; cursor:default; }
html.artwork-open { overflow:hidden; }
@media(max-width:600px) {
 .portfolio-gallery { gap:18px; padding-bottom:40px; }
 .portfolio-group { gap:12px; }
 .portfolio-artwork { border-radius:12px; }
 .portfolio-jump-links { gap:6px; }
 .portfolio-jump-links a { font-size:10px; padding:8px 12px; }
 .artwork-viewer { inset:8px; width:calc(100vw - 16px); height:calc(100dvh - 16px); border-radius:18px; }
 .artwork-toolbar { padding:10px; gap:8px; }
 .artwork-toolbar button { font-size:11px; padding:8px 12px; }
 .artwork-toolbar p { font-size:10px; }
 .artwork-canvas { padding:8px; }
}