/*
 * ANPS Agency: work.css (Work archive /work/, handle `anps-work`, also an editor style)
 * Ported from design/design/html/work-desktop.html and work-mobile.html.
 * Chips (.opts/.opt/.cnt) and the sticky .fbar come from base.css.
 */

/* ----------------------------------------------------------------- hero -- */

.work-hero {
	padding-top: 96px;
	background: var(--py);
}

.work-hero-in {
	padding-top: 88px;
	padding-bottom: 80px;
}

.work-hero-head {
	align-items: end;
	margin-top: 72px;
}

.work-hero-head h1 {
	grid-column: 1 / span 7;
}

.work-hero-dek {
	grid-column: 8 / span 5;
}

.work-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: 24px;
	margin-top: 88px;
}

.work-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}

.work-stat:first-child {
	border-top-color: var(--ink);
}

.work-stat-k {
	margin: 0;
	font-size: 15px;
	color: var(--ink2);
}

/* ----------------------------------------------------------- filter bar -- */

.work-bar-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: 84px;
}

/* The design's chips are <button>s, which do not inherit the page letter-spacing. */
.work-bar .opt {
	letter-spacing: normal;
}

.work-shown {
	margin: 0;
	font-size: 15px;
	color: var(--ink2);
	white-space: nowrap;
}

/* ------------------------------------------------------------- projects -- */

.work-list {
	background: var(--paper);
}

.work-list-in {
	padding-top: 24px;
	padding-bottom: 120px;
}

.proj {
	align-items: center;
	padding: 72px 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: 84px;
	animation: upIn 0.7s var(--out) both;
}

.proj[hidden],
.work-empty[hidden] {
	display: none;
}

.ptile {
	grid-column: 1 / span 6;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(420px, 32vw, 600px);
	padding: 32px;
	border-radius: 2px;
	overflow: hidden;
}

.ptile svg {
	width: 100%;
	height: 100%;
}

.pbody {
	grid-column: 8 / span 5;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.proj-flip .pbody {
	grid-row: 1;
	grid-column: 1 / span 5;
}

.proj-flip .ptile {
	grid-row: 1;
	grid-column: 7 / span 6;
}

.phead {
	display: flex;
	align-items: center;
	gap: 16px;
}

.pnum {
	font-size: 16px;
	font-weight: 500;
}

.kind {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 3px;
	font-size: 14px;
	font-weight: 500;
}

.kind.own {
	background: var(--yfill);
	color: var(--ink);
}

.kind.nda,
.kind.client {
	background: var(--dark);
	color: var(--cream);
}

.built,
.proj .tags {
	margin: 0;
	padding: 0;
	list-style: none;
}

.built {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 24px;
}

.built li {
	padding: 12px 0;
	border-top: 1px solid var(--line);
	font-size: 16px;
	line-height: 1.4;
}

.proj .tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pfoot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
}

.fact {
	margin: 0;
	font-size: clamp(44px, 3.4vw, 64px);
	line-height: 1;
	letter-spacing: -0.045em;
}

.fact-l {
	font-weight: 500;
}

.tl .ext {
	margin-left: -8px;
}

.work-empty {
	padding: 80px 0;
	color: var(--ink2);
}

/* ------------------------------------------------------------- NDA band -- */

.work-nda {
	background: var(--black);
	color: var(--cream);
}

.work-nda-in {
	align-items: end;
	padding-top: 144px;
	padding-bottom: 144px;
}

.work-nda-head {
	grid-column: 1 / span 7;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.work-nda-body {
	grid-column: 8 / span 5;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.work-nda-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.work-nda-list li {
	padding: 14px 0;
	border-top: 1px solid var(--lined);
	font-size: 18px;
	line-height: 1.45;
}

.work-nda-list li:last-child {
	border-bottom: 1px solid var(--lined);
}

.work-nda-cta {
	align-self: flex-start;
}

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
	.work-hero-head h1,
	.work-hero-dek {
		grid-column: 1 / -1;
	}

	.work-hero-dek {
		margin-top: 24px;
	}

	.work-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}

	.proj,
	.proj-flip {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}

	.ptile {
		height: auto;
	}

	.ptile svg {
		height: auto;
	}

	.work-nda-head,
	.work-nda-body {
		grid-column: 1 / -1;
	}

	.work-nda-body {
		margin-top: 40px;
	}
}

@media (max-width: 600px) {
	/* Hero */
	.work-hero {
		padding-top: 72px;
	}

	.work-hero-in {
		display: flex;
		flex-direction: column;
		gap: 20px;
		padding-top: 32px;
		padding-bottom: 40px;
	}

	.work-hero-head {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		margin-top: 0;
	}

	.work-hero-dek,
	.work-nda-body .p28 {
		margin-top: 0;
		font-size: 18px;
		line-height: 1.35;
		letter-spacing: -0.01em;
	}

	.work-stats {
		gap: 16px;
		margin-top: 8px;
	}

	.work-stat {
		gap: 0;
		padding-top: 10px;
	}

	/* The design's label is an inline span in a 16px line box. */
	.work-stat-k {
		font-size: 13px;
		line-height: 20px;
	}

	.work-stat-v {
		font-size: 17px;
		line-height: 1.45;
		letter-spacing: -0.01em;
	}

	/* Filter bar: chips scroll sideways, the count stays for screen readers only. */
	.work-bar-in {
		display: block;
		height: auto;
		padding: 0;
	}

	.work-bar .opt {
		gap: 8px;
		padding: 0 14px;
	}

	.work-bar .opt .cnt {
		font-size: 12px;
	}

	.work-shown {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	/* Projects */
	.work-list-in {
		padding-top: 8px;
		padding-bottom: 56px;
	}

	.proj,
	.proj-flip {
		gap: 16px;
		padding: 32px 0 40px;
		border-top: 0;
		border-bottom: 1px solid var(--line);
		scroll-margin-top: 69px;
		animation-duration: 0.6s;
	}

	.ptile {
		padding: 10px;
	}

	.ptile svg {
		display: block;
	}

	.ptile .stl {
		font-size: 16px;
	}

	.ptile .stlw {
		font-size: 17px;
	}

	.ptile .pk {
		stroke-width: 4;
	}

	.pbody {
		gap: 16px;
	}

	.phead {
		gap: 12px;
	}

	.pnum {
		font-size: 14px;
	}

	.kind {
		gap: 6px;
		padding: 5px 8px;
		font-size: 13px;
	}

	.pbody .d2 {
		font-size: 32px;
	}

	.pdek {
		font-size: 17px;
		line-height: 1.4;
		letter-spacing: -0.01em;
	}

	.built {
		display: block;
	}

	.built li {
		padding: 10px 0;
		font-size: 15px;
	}

	/* The mobile design lists the first four items. */
	.built li:nth-child(n+5) {
		display: none;
	}

	.pfoot {
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding-top: 12px;
		border-top: 0;
	}

	.pfact {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.fact {
		font-size: 40px;
		line-height: 1.05;
	}

	.proj .tl {
		padding: 12px 0 7px;
		font-size: 15px;
	}

	/* NDA band */
	.work-nda-in {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 22px;
		padding-top: 64px;
		padding-bottom: 64px;
	}

	.work-nda-head,
	.work-nda-body {
		gap: 22px;
		margin-top: 0;
	}

	.work-nda .d1 {
		font-size: 40px;
	}

	.work-nda-list {
		display: none;
	}

	.work-nda-cta {
		align-self: stretch;
	}
}