.folio__open{display:block;width:100%;height:100%;cursor:zoom-in}
.folio__open:focus-visible{outline:3px solid var(--consult-yellow);outline-offset:-3px}
.folio-flow figcaption{pointer-events:none}
html.portfolio-viewer-open{overflow:hidden;scrollbar-gutter:stable}

.portfolio-viewer{position:fixed;inset:0;width:100%;max-width:none;height:100%;
  height:100dvh;max-height:none;margin:0;padding:0;border:0;
  background:rgba(10,8,7,.97);color:var(--paper);overflow:hidden}
.portfolio-viewer:not([open]){display:none}
.portfolio-viewer[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.portfolio-viewer::backdrop{background:rgba(0,0,0,.88)}
.portfolio-viewer__bar{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(1rem,3vw,2.5rem)}
.portfolio-viewer__caption{font-family:var(--jp);font-size:clamp(.95rem,2vw,1.25rem)}
.portfolio-viewer__button{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:.6rem 1rem;border:1px solid rgba(239,231,216,.35);
  border-radius:4px;background:#201915;color:var(--paper);cursor:pointer;flex-shrink:0;
  font-size:.875rem;line-height:1.3}
.portfolio-viewer__button:hover{background:#382b21}
.portfolio-viewer__button:disabled{opacity:.3;cursor:default}
.portfolio-viewer__button:focus-visible,.portfolio-viewer__image:focus-visible{
  outline:2px solid var(--consult-yellow);outline-offset:3px}
.portfolio-viewer__stage{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;
  display:flex;align-items:center;justify-content:center;
  padding:.25rem clamp(.8rem,3vw,2.5rem);text-align:center;touch-action:pan-x pan-y pinch-zoom}
.portfolio-viewer__image{display:block;width:auto;height:auto;max-width:100%;max-height:100%;
  aspect-ratio:var(--photo-ratio);object-fit:contain;margin:0 auto;cursor:zoom-in}
.portfolio-viewer.is-zoomed .portfolio-viewer__stage{display:block}
.portfolio-viewer.is-zoomed .portfolio-viewer__image{width:var(--photo-width);height:auto;
  max-width:none;max-height:none;cursor:zoom-out}
.portfolio-viewer__footer{justify-content:center;flex-wrap:wrap;gap:.65rem;
  padding-bottom:max(1rem,env(safe-area-inset-bottom))}
.portfolio-viewer__counter{min-width:4rem;text-align:center;font-size:.82rem;
  font-variant-numeric:tabular-nums;color:var(--paper-dim)}
@media(max-width:600px){
  .portfolio-viewer__bar{gap:.75rem;padding:.75rem}
  .portfolio-viewer__footer{gap:.4rem;padding-bottom:max(.75rem,env(safe-area-inset-bottom))}
  .portfolio-viewer__button{padding:.55rem .7rem;font-size:.8rem}
  .portfolio-viewer__counter{min-width:3rem}
}