/* Catalogue covers alone use 16:9. Playback and project galleries use real dimensions. */
body[data-page="/projects/"] .project-image{aspect-ratio:16/9;overflow:hidden}
body[data-page="/projects/"] .project-image>img{width:100%;height:100%;object-fit:cover;object-position:var(--cover-x,50%) var(--cover-y,50%);transform:scale(var(--cover-zoom,1));transform-origin:var(--cover-x,50%) var(--cover-y,50%)}
body[data-page="/projects/"] .project-trigger:hover .project-image>img{transform:scale(calc(var(--cover-zoom,1)*1.025))}
.media-gallery{margin-top:45px}
.media-tile{display:block;flex:none;max-width:100%;width:min(420px,100%);min-width:0;color:inherit;text-decoration:none}
.media-preview{display:block;position:relative;overflow:hidden;background:var(--charcoal);width:100%}
.media-preview img{display:block;width:100%;height:100%;object-fit:cover;transition:opacity .25s}
.media-tile:hover img{opacity:.9}.media-tile:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.media-play{position:absolute;inset:0;display:grid;place-content:center;color:#fff;font-size:32px;text-shadow:0 1px 12px #000;pointer-events:none}
.media-caption{display:flex;justify-content:space-between;gap:12px;padding-top:9px;font-size:9px;line-height:1.5;color:var(--muted);letter-spacing:.025em;min-width:0}
.media-caption>span:first-child{overflow-wrap:anywhere}
.project-dialog{width:min(1100px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:auto}
.dialog-media{position:relative;display:flex;align-items:center;justify-content:center;margin:16px auto 0;max-width:calc(100% - 32px);background:transparent;flex:none}
.dialog-media :is(img,video){display:block;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;background:transparent}
.dialog-media :is(img,video)[hidden]{display:none}
.dialog-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;border-bottom:1px solid var(--line)}
.dialog-pagination button{min-width:44px;min-height:44px;font-size:20px}.dialog-pagination button:disabled{opacity:.25;cursor:default}
#media-counter{font-size:10px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.media-error{position:absolute;inset:auto 12px 12px;font-size:12px;background:var(--paper);padding:12px;color:var(--ink)}.media-error[hidden]{display:none}
@media(max-width:700px){.media-gallery{gap:10px;margin-top:30px}.media-caption{font-size:8px;padding-top:7px}.media-play{font-size:26px}.dialog-media{margin-top:12px}.dialog-copy{padding:20px}.dialog-copy h2{font-size:26px}}
/* Stable editorial column templates, sized from each material's native ratio. */
.media-gallery{--media-gap:clamp(10px,1.25vw,16px);display:block;gap:var(--media-gap);width:100%;max-width:none;min-width:0;margin-inline:auto;container-type:inline-size}
.editorial-band{display:grid;gap:var(--media-gap);align-items:start;width:100%;min-width:0}
.editorial-band+.editorial-band{margin-top:var(--media-gap)}
.media-column{display:flex;flex-direction:column;gap:var(--media-gap);min-width:0}
.media-column .media-tile{width:100%;max-width:none}
.single-media-band{display:flex;justify-content:center}
.media-preview img{object-fit:contain}
.case-facts p:last-child{text-transform:uppercase}
.project-dialog{opacity:0;transform:translateY(8px) scale(.99);transition:opacity 230ms ease,transform 230ms ease}
.project-dialog.is-open{opacity:1;transform:translateY(0) scale(1)}
.project-dialog::backdrop{opacity:0;transition:opacity 230ms ease}
.project-dialog.is-open::backdrop{opacity:1}

@media(prefers-reduced-motion:reduce){.project-dialog,.project-dialog::backdrop{transition:none;transform:none}}

/* Project metadata keeps separators outside the keyboard-accessible links. */
.metadata-links{display:flex;flex-wrap:wrap;align-items:baseline;gap:.65em;max-width:100%}
.metadata-links>a{min-width:0;overflow-wrap:anywhere;color:inherit;text-decoration:none}
.metadata-links>a:hover{text-decoration:underline;text-underline-offset:.25em}
.metadata-links>a:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.metadata-links>span{color:var(--muted)}
.active-project-filters{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 24px}
.active-project-filters[hidden]{display:none}
.active-project-filters button,.empty-state button{font:inherit;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0;cursor:pointer}

/* The same native-ratio viewer has two content modes. */
.project-dialog [hidden]{display:none!important}
.project-dialog[data-mode="media"] .dialog-top{justify-content:flex-end}
.project-dialog[data-mode="media"] .dialog-copy{padding:12px 20px 20px}
.project-dialog[data-mode="media"] .dialog-copy h2{font-size:clamp(16px,1.6vw,22px);font-weight:400;line-height:1.4;letter-spacing:0;margin:0 0 8px}
.project-dialog[data-mode="media"] .dialog-copy p{font-size:12px;line-height:1.6;margin:0;color:var(--muted);white-space:pre-line}
.media-preview{overflow:hidden}

/* Directional material transitions keep a stable viewing frame. */
.project-dialog[data-mode="media"] .dialog-copy{overflow:auto;overscroll-behavior:contain}
.project-dialog[data-mode="media"] .dialog-media{overflow:hidden}