/* Reports: an archive shelf of covers with a CSS-only filter */
.ei.reports { padding: var(--ei-sec) 0; background: var(--ei-paper); }
.ei .reports__head { max-width: 760px; margin-bottom: 36px; }

.ei .reports__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; padding-bottom: 28px; border-bottom: 1.5px solid var(--ei-ink); }
.ei .reports__chips label { position: relative; display: inline-flex; cursor: pointer; }
.ei .reports__chips input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.ei .reports__chips span { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px; border-radius: 999px; background: #fff;
	box-shadow: inset 0 0 0 1px var(--ei-line); font-size: 15px; font-weight: 600; transition: background-color .15s, color .15s; }
.ei .reports__chips i { font: 400 16px/1 var(--ei-display); font-style: normal; color: var(--ei-muted); }
.ei .reports__chips input:checked + span { background: var(--ei-lapis); color: var(--ei-light); box-shadow: none; }
.ei .reports__chips input:checked + span i { color: var(--ei-gold-2); }
.ei .reports__chips input:focus-visible + span { outline: 3px solid var(--ei-amber); outline-offset: 2px; }

/* filter: hide the reports that don't match the checked chip */
.ei.reports:has(input[value="annual"]:checked) .rep:not([data-cat="annual"]),
.ei.reports:has(input[value="exhibition"]:checked) .rep:not([data-cat="exhibition"]),
.ei.reports:has(input[value="guide"]:checked) .rep:not([data-cat="guide"]) { display: none; }

.ei .reports__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ei .rep { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: start; padding: 22px; background: #fff; border-radius: 6px;
	box-shadow: 0 0 0 1px var(--ei-line); transition: box-shadow .2s; }
.ei .rep:hover { box-shadow: 0 0 0 2px var(--ei-amber); }
.ei .rep__cover { position: relative; aspect-ratio: 3 / 4; background: var(--ei-lapis); border-radius: 2px 4px 4px 2px; overflow: hidden;
	box-shadow: 0 14px 22px -12px rgba(16, 26, 63, .55), inset 4px 0 0 rgba(255, 255, 255, .18); display: grid; place-items: center; }
.ei .rep__cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent); }
.ei .rep__cover img { width: 100%; height: 100%; object-fit: cover; }
.ei .rep__star { width: 46%; fill: none; stroke: var(--ei-gold-2); stroke-width: .05; }
.ei .rep__body { display: flex; flex-direction: column; gap: 6px; min-height: 100%; }
.ei .rep__d { font-size: 13.5px; font-weight: 600; color: var(--ei-gold-dark); }
.ei .rep__t { font: 400 23px/1.2 var(--ei-display); text-wrap: pretty; }
.ei .rep__x { color: var(--ei-muted); font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ei .rep__dl { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
	background: var(--ei-lapis); color: var(--ei-light); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.ei .rep__x + .rep__dl, .ei .rep__t + .rep__dl { margin-top: 14px; }
.ei .rep__dl::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.8 7 9.3l3.5-3.5M2 12.5h10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1v8M3.5 5.8 7 9.3l3.5-3.5M2 12.5h10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.ei .rep__dl:hover { background: var(--ei-amber); color: var(--ei-ink); }
.ei .rep__none { margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--ei-muted); }

@media (max-width: 1020px) {
	.ei .reports__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
	.ei.reports { padding: 72px 0; }
	.ei .reports__chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--ei-gut)); padding-inline: var(--ei-gut); scrollbar-width: none; }
	.ei .reports__chips::-webkit-scrollbar { display: none; }
	.ei .reports__chips label { flex: none; }
	.ei .rep { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px; }
	.ei .rep__t { font-size: 20px; }
	.ei .rep__x { -webkit-line-clamp: 3; font-size: 14.5px; }
}
