/* ==========================================================================
   Modals (native <dialog>). Item modal: media left / information right (Figma 1440x900, backdrop 99.75% black).
   Reel modal: Vimeo player 1299x731 over a 68% black backdrop.
   ========================================================================== */
html.ps-modal-open { overflow: hidden; }
.ps-modal { box-sizing: border-box; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; overflow: hidden; }
.ps-modal::backdrop { background: rgba(0, 0, 0, 0.9975); }
.ps-modal--reel::backdrop { background: rgba(0, 0, 0, 0.68); }
.ps-modal__surface { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 72px var(--ps-gutter) 40px; overflow: auto; overscroll-behavior: contain; }
.ps-modal__close { position: absolute; top: 16px; right: clamp(8px, 2.5vw, 32px); z-index: 3; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: #fff; font: 400 32px/48px 'Inter', sans-serif; cursor: pointer; }

.ps-modal__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; width: min(1257px, 100%); margin: auto; }
.ps-modal__media { position: relative; aspect-ratio: 964 / 533; background: #d9d9d9; overflow: hidden; }
.ps-modal__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ps-modal__media iframe, .ps-modal__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ps-modal__info { font-family: var(--ps-font-body); font-size: 12px; line-height: 15px; color: #fff; }
.ps-modal__info p { margin: 0; }
.ps-modal__title { margin: 0 0 6px; font-weight: 700; font-size: 20px; line-height: 24px; color: #fff; }
.ps-modal__line { font-weight: 500; font-size: 13px; line-height: 16px; color: #bababa; }
.ps-modal__desc { margin-top: 14px; }
.ps-modal__desc p { margin: 0 0 12px; }
.ps-modal__year { margin-top: 14px; }
.ps-modal__project { margin-top: 18px; }
.ps-modal__project a { color: #fff; text-decoration: none; }
.ps-modal__project a:hover { text-decoration: underline; }
.ps-modal__controls { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-modal__nav { display: flex; align-items: center; gap: 4px; }
.ps-modal__swap { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #1d1b20; cursor: pointer; }
.ps-modal__swap:hover, .ps-modal__swap:focus-visible { color: #fff; }
.ps-modal__swap--prev .ps-icon { transform: rotate(180deg); }
.ps-modal__swap .ps-icon { width: 11px; height: 14px; }
.ps-modal__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 500 13px/1 'Inter', sans-serif; color: #fff; text-decoration: none; }
.ps-modal__all .ps-icon { width: 20px; height: 20px; color: #1e1e1e; }
.ps-modal__all:hover .ps-icon, .ps-modal__all:focus-visible .ps-icon { color: #fff; }

.ps-modal--reel .ps-modal__player { position: relative; width: min(1299px, 100%); aspect-ratio: 1299 / 731; background: #d9d9d9; }

/* Desktop composition: media 964 | information 248, controls under the media. */
@media (min-width: 900px) {
	.ps-modal__grid { grid-template-columns: minmax(0, 964fr) minmax(0, 248px); grid-template-areas: "media info" "controls info"; column-gap: clamp(32px, 3.5vw, 45px); row-gap: 14px; }
	.ps-modal__media { grid-area: media; }
	.ps-modal__info { grid-area: info; align-self: center; }
	.ps-modal__controls { grid-area: controls; }
}

.ps-modal--illustration[open] { animation: ps-modal-fade 0.2s ease-out; }
@keyframes ps-modal-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ps-modal--illustration[open] { animation: none; } }