.viewer {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px); grid-template-rows: minmax(0, 1fr) auto;
}
.vw__stage { grid-column: 1; grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: clamp(10px, 1.4vw, 18px); padding: clamp(20px, 3vw, 48px); min-height: 0; min-width: 0; touch-action: pan-y; }
.vw__stage .lv { flex: none; }

.vw__views { flex: none; display: flex; gap: 8px; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 4px 10px; }
.vw__views::-webkit-scrollbar { display: none; }
.vw__view { position: relative; flex: none; }

.vw__view img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: opacity .3s var(--ease-ui); }
.vw__view::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--ease-plot);
}
.vw__view:focus-visible img { opacity: .78; }
@media (hover: hover) { .vw__view:hover img { opacity: .78; } }
.vw__view[aria-pressed="true"] img { opacity: 1; }
.vw__view[aria-pressed="true"]::after { transform: scaleX(1); }
.vw__view:focus-visible { outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .vw__view { cursor: var(--cur-open); }
  .vw__view[aria-pressed="true"] { cursor: default; }
}
@media (forced-colors: active) { .vw__view[aria-pressed="true"]::after { background: CanvasText; } }
.vw__tb { grid-column: 2; grid-row: 1 / 3; border-left: 1px solid var(--rule-2); display: flex; flex-direction: column; overflow-y: auto; }
.vw__dl { display: grid; grid-template-columns: 1fr 1fr; }
.vw__dl > .vw__cell { grid-column: 1 / -1; }
.vw__dl > .vw__cell--half { grid-column: auto; }
.vw__dl > .vw__cell--half + .vw__cell--half { border-left: 1px solid var(--rule-2); }

.vw__dl > .vw__cell--half.is-whole { grid-column: 1 / -1; border-left: 0; }
.vw__cell { padding: 14px 18px 16px; border-bottom: 1px solid var(--rule-2); }
.vw__k { display: block; color: var(--fg2); margin-bottom: 8px; }
.vw__v { font-weight: 300; font-size: var(--t-small); line-height: var(--lh-text); }
.vw__cell--head { padding-top: 22px; }
.vw__client { font-weight: 500; font-size: var(--t-subhead); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); }
.vw__proj { font-size: var(--t-body); line-height: var(--lh-body); margin-top: 10px; }

.vw__story { font-weight: 300; font-size: var(--t-body); line-height: var(--lh-body); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); max-width: 34em; text-wrap: pretty; }
.vw__div { font-weight: 300; font-size: var(--t-label); line-height: var(--lh-text); letter-spacing: var(--tr-label); text-transform: uppercase; }
.vw__fill { flex: 1; }
.vw__sheet { display: flex; justify-content: flex-end; align-items: flex-end; border-bottom: 0; }
.vw__sheet .mark { width: 22px; }
.vw__bar { grid-column: 1; grid-row: 2; display: flex; border-top: 1px solid var(--rule-2); min-height: 64px; }
.vw__btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 44px; padding: 0 22px; border-right: 1px solid var(--rule-2); transition: background-color .2s var(--ease-ui), color .2s var(--ease-ui); }
@media (hover: hover) { .vw__btn:hover { text-decoration: underline 1px var(--accent); text-underline-offset: .3em; } }
.vw__btn:focus-visible { outline-offset: -5px; }
.vw__count { display: flex; align-items: center; padding: 0 22px; border-right: 1px solid var(--rule-2); }
.arr--l { transform: rotate(180deg); }

.vw__close { border-right: 0; margin-left: auto; border-left: 1px solid var(--rule-2); }

html.js:not(.rm) .viewer.is-anim { animation: vwIn .16s var(--ease-ui) both; }
html.js:not(.rm) .viewer.is-anim .vw__tb, html.js:not(.rm) .viewer.is-anim .vw__bar, html.js:not(.rm) .viewer.is-anim .vw__views { animation: vwIn .38s var(--ease-light) .08s both; }
.viewer.is-out { pointer-events: none; }
@keyframes vwIn { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1023px) {
  .viewer { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; }
  .vw__tb { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--rule-2); max-height: 34vh; }
  .vw__bar { grid-row: 3; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .vw__fill, .vw__sheet { display: none; }
}
@media (max-width: 640px) {
  .vw__bar { min-height: 56px; }
  .vw__btn, .vw__count { padding: 0 13px; }
  .vw__close .lbl, .vw__btn .arr { display: none; }
  .vw__count { padding: 0 10px; }
}

@media (max-width: 640px) and (min-height: 481px) {
  .viewer { grid-template-rows: auto minmax(0, 1fr) auto; }
  .vw__tb { max-height: none; }
  .vw__stage { padding: 16px 16px 12px; }
}

@media (min-width: 641px) and (max-width: 1023px) and (orientation: portrait) { .vw__tb { max-height: 44vh; } }

.vw__tb.is-more { -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }

.vw__tb:focus-visible { outline-offset: -3px; }
@media (max-height: 480px) {
  .viewer { grid-template-columns: minmax(0, 1fr) minmax(200px, 38vw); grid-template-rows: minmax(0, 1fr) auto; }
  .vw__tb { grid-column: 2; grid-row: 1 / 3; max-height: none; border-top: 0; border-left: 1px solid var(--rule-2); }
  .vw__bar { grid-row: 2; min-height: 44px; }
  .vw__stage { padding: 10px; }
  .vw__cell { padding: 8px 12px 10px; }
}
.vw__count { white-space: nowrap; }

@media (max-width: 1023px) {
  .vw__bar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
@media (max-height: 480px) {
  .vw__bar { padding-right: 0; }
  .vw__stage { padding-left: max(10px, env(safe-area-inset-left, 0px)); }

  .vw__cell { padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
  .vw__cell--half:not(.is-whole) { padding-right: 12px; }
  .vw__cell--half + .vw__cell--half { padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
}

@media (max-height: 480px) and (max-width: 479px) {
  .vw__tb { grid-row: 1; }
  .vw__bar { grid-column: 1 / -1; }
}