/* Only the original-board gallery; existing chapter typography and media tokens apply. */
.portfolio-boards { display: grid; gap: var(--space-32); }
.portfolio-board { min-width: 0; margin: 0; }
.portfolio-board__open { display: block; cursor: zoom-in; }
.portfolio-board__open img { display: block; width: 100%; height: auto; }
.portfolio-board figcaption { display: flex; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-8); color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); font-variant-numeric: tabular-nums; }
.portfolio-board__zoom { color: var(--color-link); opacity: 0; transform: translateY(3px); letter-spacing: .05em; transition: opacity var(--duration-feedback) var(--ease-feedback), transform var(--duration-feedback) var(--ease-feedback); }
.portfolio-board:hover .portfolio-board__zoom, .portfolio-board:focus-within .portfolio-board__zoom { opacity: 1; transform: none; }
.remote-viewer.board-viewer { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; max-width: none; max-height: none; padding: var(--space-24); border: 0; border-radius: 0; box-shadow: none; }
.board-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto; gap: var(--space-12); }
.board-viewer .remote-viewer__header { align-items: start; flex-wrap: nowrap; gap: var(--space-16); margin: 0; }
.board-viewer .remote-viewer__header h4 { font-size: var(--project-type-module); }
.board-viewer .remote-viewer__close { flex-shrink: 0; min-height: var(--control-size); padding: 0; border: 0; background: none; color: var(--ink); }
.board-viewer .remote-viewer__scroll { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; touch-action: none; user-select: none; cursor: zoom-in; }
.board-viewer .remote-viewer__scroll[data-zoomed] { cursor: grab; }
.board-viewer .remote-viewer__scroll[data-dragging] { cursor: grabbing; }
.board-viewer .remote-viewer__scroll > img { position: absolute; left: 50%; top: 50%; display: block; width: var(--board-fit-width, 0px); height: var(--board-fit-height, 0px); max-width: none; max-height: none; margin: 0; object-fit: contain; pointer-events: none; transform-origin: center; transform: translate(calc(-50% + var(--board-pan-x, 0px)), calc(-50% + var(--board-pan-y, 0px))) scale(var(--board-zoom, 1)); }
.board-viewer [data-zoom-animated] > img { transition: transform 180ms var(--ease-feedback); }
.board-viewer__toolbar { display: grid; grid-template-columns: var(--control-size) minmax(0, 1fr) var(--control-size); align-items: center; gap: var(--space-12); }
.board-viewer__zoom-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-8); min-width: 0; }
.board-viewer__toolbar button { min-width: var(--control-size); min-height: var(--control-size); padding: var(--space-8); border: 0; background: none; color: var(--color-link); font-size: var(--project-type-small); }
.board-viewer__toolbar .board-viewer__step { font-size: var(--font-h3); }
.board-viewer__toolbar button:disabled { opacity: .4; cursor: default; }
.board-viewer__scale { min-width: 4em; text-align: center; color: var(--muted); font-size: var(--project-type-small); font-variant-numeric: tabular-nums; }
.board-viewer__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-12); min-height: 1.65em; margin: 0; color: var(--muted); font-size: var(--project-type-small); line-height: var(--leading-small); }
.board-viewer__status p { margin: 0; }
.board-viewer__retry { padding: 0; border: 0; border-bottom: var(--border-subtle); background: none; color: var(--color-link); font-size: inherit; }
.board-viewer .remote-viewer__hint { margin: 0; }
@media (max-width: 760px) { .portfolio-boards { gap: var(--space-24); } .remote-viewer.board-viewer { padding: var(--space-16); } }
@media (max-height: 520px) { .remote-viewer.board-viewer { padding: var(--space-12); } .board-viewer[open] { gap: var(--space-8); } .board-viewer .remote-viewer__hint { display: none; } }
@media (hover: none) { .portfolio-board__zoom { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .portfolio-board__zoom, .board-viewer [data-zoom-animated] > img { transition: none; } }