/* ============================================================
   Domus — Our Work archive  [domus_work_archive]
   Figma: "Our Work" 383:432 (desktop 1440) and 802:2424 (mobile 375).

   Head: title 32/28 caps (−0.02em) with the count [24] 15/28 raised beside it · intro 18/22 on the right (688 wide,
   from 688/1376) · under it the filters: "View All Our Work" 16.9 underlined + the three categories as cards
   162×203 (115:144) with a 15% multiply veil and their name in white 16.9/16.9 at 9 / 9, 12 apart, right-aligned.
   Mobile: intro under the title; "All Work" 14/17 underlined, cards 83×104 with the name 14/17 in black under them.
   Label "ALL WORK" (13 caps; the chosen category's name when filtered) 34 above the works.

   Works (desktop, 1376): the design's five rows repeat every ten works —
     duo  680×470 + 680×364 · trio 3 × 448×470 · mid 680×470 in the 2nd column · ends 448×470 in the 1st and 3rd
     · duo mirrored 680×364 + 680×470; rows 230 apart (scales with the width); caption 13 caps 6 under:
     year · name (centred) · category. Hover: "VIEW PROJECT ↗" 20 caps in white follows the cursor over the photo.
   Mobile: two full-width 343×237, then two centred 267×280, repeating; caption: year, then name over category.
   Closing text 26/28 (−0.02em), 497 wide from 498/1376, 230 under the works.
   ============================================================ */

.dm-wa {
	position: relative;
	width: 100%;
	color: #000;
	font-family: var(--dm-font, 'CF ModGrotesk'), 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}
.dm-wa *, .dm-wa *::before, .dm-wa *::after { box-sizing: border-box; }
.elementor-widget:has(> .elementor-widget-container > .elementor-shortcode > .dm-wa),
.elementor-widget:has(> .elementor-shortcode > .dm-wa) { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
.dm-wa p, .dm-wa h1 { margin: 0; padding: 0; color: inherit; font-family: inherit; font-weight: 400; }
.dm-wa a, .dm-wa a:hover, .dm-wa a:visited, .dm-wa a:focus { color: inherit !important; text-decoration: none !important; }
.dm-wa button,
.dm-wa button:hover,
.dm-wa button:focus,
.dm-wa button:active {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit !important;
	letter-spacing: inherit !important;
	text-transform: none !important;
	min-height: 0 !important;
	min-width: 0 !important;
	cursor: pointer;
	outline: none;
}
.dm-wa button:focus-visible, .dm-wa a:focus-visible { outline: 1px solid currentColor !important; outline-offset: 3px; }

/* ---------- Head ---------- */
.dm-wa__head { display: flex; justify-content: space-between; gap: 32px; }
.dm-wa .dm-wa__title { flex: none; font-size: 32px; line-height: 28px; letter-spacing: -.02em; text-transform: uppercase; }
.dm-wa__title-word { display: block; }
.dm-wa__title-last { white-space: nowrap; }
.dm-wa__count { position: relative; top: -5px; margin-left: 6px; font-size: 15px; line-height: 28px; letter-spacing: -.02em; vertical-align: top; }
.dm-wa__side { width: 50%; }
.dm-wa .dm-wa__intro { font-size: 18px; line-height: 22px; }

.dm-wa .dm-wa__filters { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 12px; margin-top: 71px; }
.dm-wa .dm-wa__all { position: relative; display: inline-block !important; flex: none; width: auto !important; white-space: nowrap; }
/* every state, or the button reset's :hover / :focus (more specific) swaps the font and the cards move */
.dm-wa button.dm-wa__all,
.dm-wa button.dm-wa__all:hover,
.dm-wa button.dm-wa__all:focus,
.dm-wa button.dm-wa__all:active { margin-right: auto !important; font-family: inherit !important; font-size: 16.9px !important; line-height: 17px !important; letter-spacing: 0 !important; }
.dm-wa__all::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.dm-wa__all.is-active::after { transform: none; }
@media (hover: hover) { .dm-wa__all:hover::after { transform: none; } }
.dm-wa__all-m { display: none; }

.dm-wa__cat { position: relative; display: block !important; flex: 0 0 23.54%; aspect-ratio: 115 / 144; overflow: hidden; text-align: left; transition: opacity .4s ease; }
.dm-wa__cat img { position: absolute; inset: 0; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.dm-wa__cat::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); mix-blend-mode: multiply; pointer-events: none; }
.dm-wa__cat-name { position: absolute; z-index: 1; left: 9px; bottom: 9px; max-width: 70%; color: #fff; font-size: 16.9px; line-height: 16.9px; }
@media (hover: hover) { .dm-wa__cat:hover img { transform: scale(1.04); } }
/* a category chosen: the others step back */
.dm-wa.is-filtered .dm-wa__cat:not(.is-active) { opacity: .35; }
@media (hover: hover) { .dm-wa.is-filtered .dm-wa__cat:not(.is-active):hover { opacity: .7; } }

/* ---------- Works ---------- */
.dm-wa .dm-wa__label { display: flex; align-items: center; gap: 3px; margin-top: 96px; font-size: 13px; line-height: 1; text-transform: uppercase; }
.dm-wa__label svg { display: block; flex: none; width: 9px; height: 9px; }
.dm-wa__label span { text-box: trim-both cap alphabetic; }
.dm-wa__grid { margin-top: 34px; transition: opacity .35s ease; }
.dm-wa__grid.is-swapping { opacity: 0; }
.dm-wa__row { display: flex; align-items: flex-start; gap: 1.16%; margin-top: 16.72%; } /* 230 / 1376 */
.dm-wa__row:first-child { margin-top: 0; }
.dm-wa__row--mid > .dm-wa__card { margin-left: 33.72%; } /* on the card, so its 680 stays 49.42% of the full row */
.dm-wa__row--ends { justify-content: space-between; }

.dm-wa__card { display: block; flex: none; }
.dm-wa__media { position: relative; display: block; overflow: hidden; background: #eee; }
.dm-wa__media img { position: absolute; inset: 0; display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .dm-wa__card:hover .dm-wa__media img { transform: scale(1.03); } }
.dm-wa__card[data-s="w"] { width: 49.42%; }       /* 680 */
.dm-wa__card[data-s="w"] .dm-wa__media { aspect-ratio: 680 / 470; }
.dm-wa__card[data-s="ws"] { width: 49.42%; }      /* 680 × 364 */
.dm-wa__card[data-s="ws"] .dm-wa__media { aspect-ratio: 680 / 364; }
.dm-wa__card[data-s="n"] { width: 32.56%; }       /* 448 */
.dm-wa__card[data-s="n"] .dm-wa__media { aspect-ratio: 448 / 470; }
/* name centred while there is room (wide cards), the three spread out on the narrow ones — as in the design */
.dm-wa__cap { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); gap: 12px; margin-top: 6px; font-size: 13px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.dm-wa__cap > :nth-child(2) { text-align: center; }
.dm-wa__cap > :nth-child(3) { text-align: right; }

/* "VIEW PROJECT ↗" follows the mouse over the photos: the shared assets/cursor.js (data-cursor-*) */

/* entrance: fade in and rise, once, as each work comes onto the screen (archive.js adds .is-in) */
html.dm-js .dm-wa__card { transition: opacity 1.4s ease, transform 1.8s cubic-bezier(.16, 1, .3, 1); }
html.dm-js .dm-wa__card:not(.is-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
html.dm-js .dm-wa__row > .dm-wa__card:nth-child(2) { transition-delay: .12s; }
html.dm-js .dm-wa__row > .dm-wa__card:nth-child(3) { transition-delay: .24s; }

.dm-wa .dm-wa__outro { width: 36.12%; margin: 16.72% 0 0 36.19%; font-size: 26px; line-height: 28px; letter-spacing: -.02em; }
.dm-wa__empty { margin-top: 34px; font-size: 14px; opacity: .6; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.dm-wa__head { display: block; }
	.dm-wa__side { width: auto; margin-top: 14px; }
	.dm-wa .dm-wa__intro { font-size: 16px; line-height: 19px; }
	.dm-wa .dm-wa__filters { align-items: flex-start; gap: 12px; margin-top: 16px; } /* one line: All Work at the left, the cards beside it */
	.dm-wa button.dm-wa__all,
	.dm-wa button.dm-wa__all:hover,
	.dm-wa button.dm-wa__all:focus,
	.dm-wa button.dm-wa__all:active { font-size: 14px !important; line-height: 17px !important; }
	.dm-wa__all-d { display: none; }
	.dm-wa__all-m { display: inline; }
	.dm-wa .dm-wa__cat { flex: 0 1 83px; min-width: 0; aspect-ratio: auto; overflow: visible; } /* narrower screens: they shrink, never wrap */
	.dm-wa__cat-img { position: relative; display: block; width: 100%; aspect-ratio: 83 / 104; overflow: hidden; }
	.dm-wa__cat::after { inset: 0 0 auto 0; height: auto; aspect-ratio: 83 / 104; }
	.dm-wa__cat-name { position: static; display: block; max-width: none; margin-top: 5px; color: #000; font-size: 14px; line-height: 17px; }
	.dm-wa .dm-wa__label { margin-top: 75px; }
	.dm-wa__grid { display: flex; flex-direction: column; gap: 40px; margin-top: 30px; }
	.dm-wa__row { display: contents; }
	.dm-wa .dm-wa__card { width: 100% !important; margin-left: 0 !important; transition-delay: 0s !important; }
	.dm-wa .dm-wa__card .dm-wa__media { aspect-ratio: 343 / 237 !important; }
	.dm-wa .dm-wa__card[data-m="c"] { width: 77.8% !important; align-self: center; }  /* 267 of 343 */
	.dm-wa .dm-wa__card[data-m="c"] .dm-wa__media { aspect-ratio: 267 / 280 !important; }
	.dm-wa__cap { grid-template-columns: 40px 1fr; gap: 1px 0; margin-top: 8px; white-space: normal; }
	.dm-wa__cap > :nth-child(1) { grid-row: 1 / 3; }
	.dm-wa__cap > :nth-child(2), .dm-wa__cap > :nth-child(3) { text-align: left; }
	.dm-wa .dm-wa__outro { width: auto; margin: 66px 0 0; }
}
@media (min-width: 768px) {
	.dm-wa__cat-img { position: absolute; inset: 0; display: block; }
}

@media (prefers-reduced-motion: reduce) { html.dm-js .dm-wa__card { opacity: 1 !important; transform: none !important; transition: none; } }