/* QMD · media for the about section. Tokens only from styles.css (--canvas, --canvas-2, --hairline, --ink, --ink-muted, --ink-dim, --signal, --mono, --display, --gutter). */
.about-media { grid-column: 1 / -1; margin-top: 48px; padding-top: 28px; border-top: 1px dashed var(--hairline); }

/* Section heads: a numbered label on the left, a note on the right. */
.media-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; color: var(--ink-muted); margin-bottom: 22px; }
.media-head i { font-style: normal; color: var(--signal); margin-right: 10px; }
.media-head-note { color: var(--ink-dim); }
.media-head-team { margin-top: 56px; padding-top: 24px; border-top: 1px dashed var(--hairline); }

/* Editorial grid: 12 columns, wide 3:2 frames beside tall 3:4 frames so each row closes on one baseline. */
.media-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 32px 20px; }
.media-item { margin: 0; min-width: 0; display: grid; gap: 0; align-content: start; }
.span-8 { grid-column: span 8; }
.span-4 { grid-column: span 4; }

/* Frame: 12px radius, placeholder underneath, darkroom grade on the picture, no shadows. */
.frame { position: relative; overflow: hidden; border-radius: 12px; background-color: var(--canvas-2); background-size: cover; background-position: center; isolation: isolate; }
.frame-wide { aspect-ratio: 3 / 2; }
.frame-tall { aspect-ratio: 3 / 4; }
.frame-portrait { aspect-ratio: 4 / 5; }
.frame img, .frame video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.6) contrast(1.04) brightness(0.82); transition: filter 0.5s ease; }
.frame-portrait img { object-position: 50% 20%; }
.frame::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--canvas); opacity: 0.22; transition: opacity 0.5s ease; }
.frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; border: 1px solid var(--hairline); }
@media (hover: hover) {
  .media-item:hover .frame::after, .team-item:hover .frame::after { opacity: 0.08; }
  .media-item:hover .frame img, .team-item:hover .frame img { filter: saturate(0.75) contrast(1.02) brightness(0.92); }
}

/* Captions: mono, hairline dashed rule, number in dim ink. */
.media-item figcaption { display: flex; align-items: baseline; gap: 14px; padding: 12px 0 0; margin-top: 12px; border-top: 1px dashed var(--hairline); color: var(--ink-muted); }
.media-item figcaption i { font-style: normal; color: var(--ink-dim); }
.media-item figcaption em { font-style: normal; margin-left: auto; color: var(--ink-dim); white-space: nowrap; }

/* Loop: washed like the stills; poster only where WebM is unsupported. */
.media-loop { background: var(--canvas-2); }

/* Team row: portraits 4:5, name in display face, role in mono. */
.team { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
.team-item { min-width: 0; display: grid; gap: 6px; align-content: start; }
.team-item .frame { margin-bottom: 10px; }
.team-name { font-size: 17px; font-weight: 500; color: var(--ink); padding-top: 12px; border-top: 1px dashed var(--hairline); }
.team-role { color: var(--ink-dim); }

@media (max-width: 1150px) {
  .media-grid { gap: 28px 16px; }
  .team { gap: 28px 16px; }
}
@media (max-width: 760px) {
  .about-media { margin-top: 32px; padding-top: 22px; }
  .media-grid { gap: 22px 12px; }
  .span-8, .span-4 { grid-column: span 12; }
  .frame-wide, .frame-tall { aspect-ratio: 4 / 3; }
  .frame-loop { aspect-ratio: 3 / 4; }
  .media-item figcaption { gap: 10px; padding-top: 10px; margin-top: 10px; }
  .media-item figcaption em { display: none; }
  .media-head-team { margin-top: 40px; }
  .team { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .team-name { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .frame img, .frame video, .frame::after { transition: none; }
}

/* Blurred 24px placeholders (generated by tools in media-inventory.md). One class per image; CSP has no unsafe-inline so these live here, not in style attributes. */
.ph-portrait-01 { background-image: url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAACwBACdASoYABIAPrVKoEonJCMhqA1Q4BaJQBWEEngrqSLTQiolH2VADPoZpCKoAN9FsZu6W1OitnUmk+oxlDAwjvTfxf9SMXG5zg6aaneyVvywQ2jkJXkWHiGAOSWijfpb783YFPHvHs5BByWmDzUUDwdz99GQ/D0nh9nqRYAAAA=="); }
.ph-portrait-02 { background-image: url("data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAAAQBQCdASoYACAAPrVOnkunJCKhqA1Q4BaJYwCsAEXfZebMK7teqLqauDAasoH3Q958AP7qkUmNxWkotucmuK4RgTKLoGpekvSuRPu2Pw4XhxOHRVVJrB44PfnPGfSTvwYJJJdjnxYXmJY3IsUeBM26VTVv6H7O90+8tek6ZR11wslyutQuabLMAAA="); }
.ph-portrait-03 { background-image: url("data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAADQBQCdASoYACAAPqFCnEmmJCMhN/qoAMAUCWUAuyFMAuqvv7/rgzgyG2zgCC5tcDhVf+CR6aAAAP703SYyei1VEIS/yGis2tQhKCcJoFXr8PQdmjJh64wVDOLpCPJxeJHvBkAT0zoS1siObeddUM0d5EbtU/GxqaMRwSiGbdtJq9H533wOiaLUrdDsWc5NyAVA9cUF+9Sy1KqE1v2CPweYJOAvjiz8AAA="); }
.ph-logo-green { background-image: url("data:image/webp;base64,UklGRmQAAABXRUJQVlA4IFgAAAAQBACdASoYAA4APrVKnkmnJCKhMAgA4BaJZgCdAB6R93+TkmG2ClsgAAD+9DLbIq1buLgJWFbWCZB1yFkg9wvmpuajxW7SqgIPdVvf5aAarTT3cA9V0AAA"); }

/* Bench photos with instruments (owner photos, 2026-10). */
.ph-bench-electric-01 { background-image: url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBQCdASoYABIAPu1mpk2ppaMiMBgMATAdiWUAygAQ1eSi4OIe3n8bPVuS6mJxaWlLQAD8f7KmLP2vLStE9Pq6bo9nYHgsGO214OHlZU2MGoJAoZlBLHdUApSzAZyTJN0KvGbOz7kTQOx+Pb2ApFHTaFpD8g3dAKqX7zpngqwTmlL1AAA="); }
.ph-cabinet-reagents-01 { background-image: url("data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAAAwBQCdASoSABgAPu1srVEppaQiqAqpMB2JZQAALj50ZWcGylQzTHSdWtFbC4gSt0UIgAD+1JEriK5rrpec0l3Dlq9K2wyVp6UMdHuVTnv6q7gew/T4Hx9CTHn30Xf36SiIstIJralyNcDsVp20vXor1b4BsRNHiSyvkZlw7js8M1XJ9ld6HEuAs8S34NDkO/EX6pG4EsK7fsYQvihDQqCt7dIdusUAAAA="); }
.ph-hood-weights-01 { background-image: url("data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAADQBACdASoYABIAPu1qrlCppaQiqAqpMB2JZwAAIfkcKbyVTVMYviPL63dAjRJOAAD9ugpedXOOXADWGwaJevtOW0DFiYo7MiXveC48JcLzOU0KPOoFSutzoejPl/RGhk6TvUzNyveyWwzpktuNpq4+E5KwmtMzOonu6WVyDBleP6/mMN3D6DdgAAA="); }
.ph-bench-balance-01 { background-image: url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAADQBACdASoSABgAPu1mp02ppiOiMBgMATAdiUAZxwI/lX0WjNBYkoSkvTA2HWiwyAD6lcogZdUDIb2/YFyo46QNs2ZmIMCLuThoLyyC9sruM3DKi9/E/bs+iva9tk9n2giB/NjOMvBQoCh5eQli+NTWn6Cl+PCL0RgdoaUTUV2WI1DOAAA="); }
.ph-bench-weights-optics-01 { background-image: url("data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAABQBQCdASoYABIAPu1qrVCppaQiqAqpMB2JZQDDrBEdmRIYndl6AXtPYaCHjebTPRi637AA957KKN1tJ1b4XnY5PjXEfTOgXoNtfNhAZk6/U32y47M1CQrPPo8hzNiVkJki3h9iAen3y0oB9hvBIHt/+4qNXy5udQUatSF8E/AdXF0BXwOi60cmJjMRQAAA"); }
.ph-bench-pc-01 { background-image: url("data:image/webp;base64,UklGRoQAAABXRUJQVlA4IHgAAABwBACdASoSABgAPuVgpU2pJaOiMAwBIByJZQC7AA1KropkeV2CkHxpZI7JgADZxZUADtJ/8sYXU/Ul5co/dipyTsH1I0oRNfcvJGp61u2mZu8hXIuXHxVKXSiMPKlNoz+YV8/1KWt+753t6MexRwPPV1UDSjJAAAA="); }
.ph-bench-water-01 { background-image: url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAwBQCdASoYABIAPu1qr1AppaSiqAqpMB2JZQDH5A9qavOAsfffsJp2/GVLiClQvsvVAAD7HEaaEjOlCK/nKjkCxQbyyaSWbr0xSk3wABfW67VggtUCB/DtFu4BsmYjjrC15VASLafdOTLUKQ9yVS0r9jJBaw7pHygHbEHnOUDt8QPRy3qS9ixB8AAAAA=="); }

/* Tour stops (JS-rendered). */
.ph-tour-window { background-image: url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAADQBACdASoYABIAPuVgpk2pJaOiMAwBIByJZQC/7BuDitRj2Huxp+SEqEo8+D4xgADUh59LujUn8HAl5+cI6xmlCTBwuzB4nXT+H+42Wj6y/Od0EJh4EwCNgh4u1gH67wbIx2Q5HKwgZGqu+nnwqNkgAAA="); }
.ph-tour-electric { background-image: url("data:image/webp;base64,UklGRpIAAABXRUJQVlA4IIYAAABQBQCdASoYABIAPu1kpk4ppaMiMBgMATAdiWUAygAQ1eRoTZ5ecMgQ84ZTR27QcQGN3cgA/H+ypiz9ry0rRPT6um6PZ2B4LDA/FM92SqnH+/NS2kEO3f359AHXKfZyLyd7eZ1JrpnWyKwtm2uIAf6aX8UR6jYqwalmCFxPWlVbpishbkAAAA=="); }
.ph-tour-hood-weights { background-image: url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAADwBACdASoYABIAPu1qrVEppaQiqAqpMB2JZwAAIhLQUL6qXbEilCTj7AOTN8EY0gAA/boKXnVzjlwA1hsGVRg1JSwHiqA5oexLT/Sj2uzHaqFQuNlhzQ1oQMLG3ylyhrgp0kvIytTaCo6QsQhFPlVDp7PpqwmvEwVeE/pgO003nmWOVTJV7fwjRzjgAA=="); }
.ph-tour-hood-case { background-image: url("data:image/webp;base64,UklGRrIAAABXRUJQVlA4IKYAAAAwBQCdASoYABIAPu1qrFCppaQiqAqpMB2JZwDKAAyCmvoBZcmPuMnRToygU4YtHdaUwADiWTnb1uCIm2QsX00g/tNq0dXg4/2xv7Zk65+AjWl41yphA1ftAC7wMwml6V+0N5wIAKNAX61YSdKMQvrBtrikvfWC1LLUWJ0wfVgEV85qt3WWeMBmIcbFVyLjZHL0SDrG8E7jkWEZ1Cldnx1r7HVfvZgA"); }
.ph-tour-hood-gas { background-image: url("data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAAAQBQCdASoYABIAPu1orlCppaQiqAqpMB2JZwC84AsYKX/DnnHcshYqwwxlIjuItOwAAMyRdhOBmJtjzwT23jjQ4ExAz1ClFioPtqNieA5jqrLrd51To3E8HRpkm7NzbH2P5Qu+tzdvqX4X3Jjfz729CIuHyJTtg9S+v0q0x00adwVTP1YA/S7qwSUCgAAA"); }
.ph-tour-balance { background-image: url("data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAADwBACdASoYABIAPu1qrlCppaQiqAqpMB2JZwDKB3gANL05pJoH3IFFBJzfkIwlZ4AA9Cb7BlemjX7ROJjKiIsXMw2F15wAhfb/ffU2zSEVmeiSYUkQtU0pgPjxX4/gBDv6BNV/joA5JQvrFU+dWTtJqi3NCygH1ZkIo9Y1dHDsTKFVXPep4nKK5I3cKAAA"); }
.ph-tour-optics { background-image: url("data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAADwBACdASoYABIAPu1qrVCppaQiqAqpMB2JZQDA3BDVKL3O6VPN1xUATSh16HlLMAAA95uoYLqCtMLr2V/Co/MicYEUwkvH47cKU38y8jdSuhhW0IbACKXlh7VjNde5ojTjWpS+hCXZ4HolkcE6AOgyg2jhrTlxL8ua1RCdU34w74XNKYFtdaORX6JSsvpUAAA="); }
.ph-tour-water { background-image: url("data:image/webp;base64,UklGRpgAAABXRUJQVlA4IIwAAAAwBQCdASoYABIAPu1qr1CppaSiqAqpMB2JZQDH5A9qUF6l9R2IeEkpFftlZWUjvccZAAD7HEaaEjRtlVd4/Gm02iZ/I7C+OkUat8VUYi6HrjsptJttYdWwI5ixqA/aVAVLcMsph3Ve1fMo3rro/of8vvaD3DYDi2YUAVKrY48PqvxRTYz6uQZbAAAAAA=="); }
.ph-tour-pc { background-image: url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABQBACdASoYABIAPuFeqU2opSQiMAwBEBwJZwDDcBjyL2y/cA4Z6nMNm5eQAM2+SzdoZRmGhEYTnbr5nhGfDMi5FCGifheRKNwv/xv2SZMMDcqwOJ6TEjhOEirBsnKUTJ2f4g2UFjJtKoXywZs4cfLolLn0dFGt4sMnnk5sdn8AAA=="); }
.ph-tour-cabinet { background-image: url("data:image/webp;base64,UklGRrQAAABXRUJQVlA4IKgAAAAwBQCdASoSABgAPu1srVEppaQiqAqpMB2JZQAALj50ZWcGylQzTHSdWtFbC4gSt0UIgAD+1JEriK5rrpec0l3Dlq9K2wyVp6UMdHuVTnv6q7gew/T4Hx9CTHn30Xf36SiIstIJralyNcDsVp20vXor1b4BsRNHiSyvkZlw7js8M1XJ9ld6HEuAs8S34NDkO/EX6pG4EsK7fsYQvihDQqCt7dIdusUAAAA="); }
.ph-clip-hall { background-image: url("data:image/webp;base64,UklGRnIAAABXRUJQVlA4IGYAAACQAwCdASoNABgAPu1iqU2ppaOiMAgBMB2JYwC7ABtwYtggI8SQAP6NHt1JwgIrjKn1Ujr4UxJxdpM2y4RFPcEXQXKm9gRLa+hlLfNbnGV8YKXGe/jfuR9uAcefnFaAceqXpGGMlAA="); }
.ph-clip-hoods { background-image: url("data:image/webp;base64,UklGRngAAABXRUJQVlA4IGwAAAAQBACdASoNABgAPu1iqk4ppaQiMAgBMB2JZQDE2BeavMHFNwmsAAwRgADOE2G4c8Axz3oQDb72MY9GrRrIG+9V9cQfQIUydjawpQT5SPHCtjFtlPPBayF9lbxUIEeczKhk4DNxq+FTaqgAAAA="); }
.ph-clip-benches { background-image: url("data:image/webp;base64,UklGRnAAAABXRUJQVlA4IGQAAAAQBACdASoNABgAPu1iqk2ppaQiMAgBMB2JZQC+SCBj7LZf594zioq8AAD+YOQYqsHFSCJJfhRR7a2crSdkEIbnb4SijjhYTHQ1s95cnyzv0CXKW0qdZIumL2by4rd1RX/lQAAA"); }
.ph-clip-exit { background-image: url("data:image/webp;base64,UklGRmYAAABXRUJQVlA4IFoAAADQAwCdASoNABgAPu1iqk2ppaQiMAgBMB2JZwAAQaBHA2xH4YYDEAAA/pmlFq+QsOX0QbJhQuRJA4mlvrRN8xaKNanv0l2KtbmAdP80KPifn9Pj6Y7eBVsAAAA="); }