/* Person drawer and image viewer */
.scrim { position: fixed; inset: 0; z-index: 60; background: rgba(25, 25, 24, .45); opacity: 0; transition: opacity .3s; }
.scrim.on { opacity: 1; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 70; width: 560px; max-width: 100%; background: var(--bg); display: flex; flex-direction: column; transform: translateX(100%); visibility: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), visibility 0s .35s; box-shadow: -24px 0 48px rgba(0,0,0,.08); }
.drawer.on { transform: none; visibility: visible; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.dr-bar { flex: none; height: 65px; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s-l); border-bottom: 1px solid var(--line); }
.dr-bar .lbl, .dr-sec h3 { font: 500 var(--fs-label)/16px var(--font-text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.dr-ctrl { display: flex; gap: var(--s-xs); }
.dr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-l); }
.dr-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-l); align-items: start; }
.dr-head .ph { aspect-ratio: 3 / 4; background: var(--placeholder); overflow: hidden; }
.dr-head .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.dr-head h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; }
.dr-head .ua { font-size: var(--fs-small); color: var(--ink-2); margin-top: 6px; }
.dr-head .y { font-size: 20px; margin-top: var(--s-s); }
.dr-head .r { font-size: var(--fs-small); color: var(--ink-2); margin-top: 6px; }
.dr-sec { margin-top: var(--s-2xl); }
.dr-sec h3 { margin-bottom: var(--s-s); }
.dr-sec .facts li { grid-template-columns: 88px 1fr; }
.dr-sec .facts b { font-size: var(--fs-small); }
.bio { font-size: var(--fs-body); line-height: 28px; }
.works { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-l) var(--s-m); }
.works .zoom { display: block; width: 100%; aspect-ratio: 3 / 4; background: var(--placeholder); overflow: hidden; cursor: zoom-in; }
.works img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.works .zoom:hover img { transform: scale(1.04); }
.works figcaption { font-size: var(--fs-caption); line-height: 18px; color: var(--ink-2); margin-top: var(--s-xs); }
.dr-sec .links { margin-top: 0; }
.sources { margin-top: var(--s-2xl); padding-top: var(--s-m); border-top: 1px solid var(--line); font-size: var(--fs-caption); line-height: 18px; color: var(--ink-3); }

.lb { position: fixed; inset: 0; z-index: 90; background: rgba(15, 15, 14, .96); color: #fff; display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
.lb.on { opacity: 1; visibility: visible; transition: opacity .25s; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: var(--s-m) var(--s-l); font-size: var(--fs-small); color: var(--inv-text-2); }
.lb-stage { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: var(--s-m); padding: 0 var(--s-l); min-height: 0; }
/* passe-partout: a mid-grey mat that separates both dark and light images from the black backdrop.
   Its width (--mat) is set in main.js from the image's size on screen: relatively wider for small works. */
.lb-mat { --mat: 32px; justify-self: center; align-self: center; max-width: 100%; padding: var(--mat); background: var(--mat-grey); box-shadow: 0 18px 50px rgba(0, 0, 0, .5); transition: opacity .2s; }
.lb-mat.loading { opacity: 0; }
.lb-mat img { display: block; max-width: 100%; max-height: calc(100vh - 170px - 2 * var(--mat)); width: auto; height: auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .22); }
.lb-cap { padding: var(--s-m) var(--s-l) var(--s-l); text-align: center; font-size: var(--fs-small); color: var(--inv-text-2); max-width: 900px; margin: 0 auto; }

/* Project drawer: square cover instead of a portrait, and a link to the project's own site */
.dr-head.proj .ph { aspect-ratio: 1; }
.dr-head.proj .ph img { object-position: 50% 50%; }
.dr-link { display: inline-block; margin-top: var(--s-m); font: 500 var(--fs-small)/1.4 var(--font-text); color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dr-link:hover { color: var(--accent); }
.dr-sec .bio + .bio { margin-top: var(--s-s); }