/* Portfolio previews and the image-only document viewer. */
.portfolio-gallery h1{font-size:clamp(36px,5vw,60px);margin-bottom:24px}
.portfolio-gallery .document-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;align-items:start}
@media(max-width:960px){.portfolio-gallery .document-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-gallery .document-grid{grid-template-columns:1fr}}
.document-preview{position:relative;min-height:0;aspect-ratio:4/3;background:#e9e2d0}
.document-preview img{width:100%;height:100%;object-fit:contain;padding:20px 20px 48px;transition:transform .2s}
.document-preview:hover img{transform:scale(1.025)}
.document-preview-caption{position:absolute;bottom:0;left:0;right:0;padding:10px 16px;background:#d9d2c0;color:#343d2c;font-size:12px;display:flex;justify-content:space-between;gap:12px}
.document-preview-failed::before{content:'Превью временно недоступно';padding:20px;color:#505846;text-align:center}
.document-preview-failed img{display:none}
.document-viewer{background:var(--deep);color:var(--ink);border:1px solid var(--line);padding:0;max-width:1100px;width:calc(100% - 32px);margin:auto}
dialog.document-viewer{max-height:calc(100dvh - 32px);overflow:hidden}
dialog.document-viewer::backdrop{background:rgba(10,16,10,.86);backdrop-filter:blur(4px)}
body.document-viewer-open{overflow:hidden}
.document-viewer-shell{height:min(88dvh,960px);display:grid;grid-template-rows:auto auto minmax(0,1fr) auto}
.document-viewer-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 20px;border-bottom:1px solid var(--line)}
.document-viewer .document-viewer-title{font:400 24px/1.3 var(--serif);letter-spacing:-.02em;margin:0;overflow-wrap:anywhere;max-height:20dvh;overflow:auto}
.document-viewer-close{flex:none;font-size:30px;line-height:1;width:44px;height:44px;border:1px solid var(--line);color:var(--ink);background:transparent}
.document-viewer-close:hover{background:var(--pale)}
.document-viewer-back{font-size:12px;flex:none}
.document-viewer-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 20px;border-bottom:1px solid var(--line)}
.document-viewer-paging,.document-viewer-zoom{display:flex;align-items:center;gap:8px}
.document-viewer-toolbar button{background:var(--paper);color:var(--ink);border:1px solid var(--line);min-width:40px;min-height:40px;padding:7px 10px;font-size:15px;line-height:1.4}
.document-viewer-toolbar button:hover{background:var(--pale)}
.document-viewer-toolbar [data-viewer-fit]{font-size:12px;min-width:100px}
.document-viewer-toolbar [data-viewer-counter]{font-size:12px;min-width:115px;text-align:center}
.document-viewer-stage{overflow:auto;overscroll-behavior:contain;padding:16px;background:#192016;min-height:0;text-align:center;outline-offset:-4px}
.document-viewer-stage img{display:block;margin:0 auto;max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 4px 24px #0005;user-select:none;-webkit-user-drag:none}
.document-viewer-stage img.viewer-sized{max-width:none;max-height:none;height:auto}
.document-viewer-feedback{padding:0 20px;font-size:12px;color:var(--muted)}
.document-viewer-feedback p{margin:0}
.document-viewer-feedback p:not(:empty){padding:10px 0}
.document-viewer-feedback [data-viewer-retry]{margin:0 0 12px}
.document-viewer [hidden]{display:none!important}
.document-viewer-heading{grid-row:1}.document-viewer-toolbar{grid-row:2}.document-viewer-stage{grid-row:3}.document-viewer-feedback{grid-row:4}
.document-viewer-page{margin:40px auto}
.document-fallback-navigation{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;padding:20px}
@media(max-width:600px){
  dialog.document-viewer{width:100%;height:100dvh;max-height:100dvh;border:0}
  dialog .document-viewer-shell{height:100dvh}
  .document-viewer-heading{padding:12px;gap:12px}
  .document-viewer .document-viewer-title{font-size:20px}
  .document-viewer-toolbar{padding:8px 12px;flex-wrap:wrap;justify-content:center;gap:8px 16px}
  .document-viewer-stage{padding:12px}
  .document-viewer-page{width:calc(100% - 24px);margin:24px auto}
  .document-preview img{padding:12px 12px 44px}
}
@media(prefers-reduced-motion:reduce){.document-preview img{transition:none}}