/*
 * Anthology: the wall of marks. Measurements come from the Figma frame "Frame 181"
 * (15px around the wall, half tiles 862 x 820), with Phillip's changes of 2026-10-31:
 * 6px between tiles and 3px corners. Every tile is as tall as a half tile; phones get 4:3.
 * On desktop the wall sits in the right panel, next to the project list, like Info.
 */

/* ---------- Page: the right panel turns white, like the Figma frame ---------- */

body.fuss-an {
	--cs-page: #fff;
}

.an {
	container-type: inline-size;
	padding: 15px;
	color: var(--an-ink, #121117);
}

/* ---------- Tiles ---------- */

.anGrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: calc((100cqw - 6px) / 2 * 820 / 862);
	gap: 6px;
}

.anTile {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0;
	box-sizing: border-box;
	overflow: hidden;
	background: #fafbf7;
	border: 1px solid #e7e9e0;
	border-radius: 3px;
}

.anTile.is-full {
	grid-column: 1 / -1;
}

/* The name's capitals start 35px inside the tile (30px on full-width tiles), as in Figma. */
.anName {
	position: absolute;
	top: 28px;
	left: 34px;
	margin: 0;
	font-family: "Faktum";
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.2px;
	white-space: nowrap;
	opacity: .75;
}

.anTile.is-full .anName {
	top: 23px;
	left: 29px;
}

/* The logo's width is a share of the whole tile, border included. */
.anMark {
	display: block;
	flex: 0 0 auto;
	width: calc((100% + 2px) * var(--an-size, .5));
	max-width: none;
	height: auto;
}

/* ---------- Tablet and phone: the tiles are the panels, under the usual top bar ---------- */

@media only screen and (max-width: 1023px) {
	.fuss-an #container {
		border: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}

	.an {
		padding: 0;
	}
}

/* ---------- Phone: one column, every tile 4:3 ---------- */

@media only screen and (max-width: 767px) {
	.anGrid {
		grid-template-columns: minmax(0, 1fr);
		grid-auto-rows: auto;
	}

	.anTile,
	.anTile.is-full {
		grid-column: auto;
		aspect-ratio: 4 / 3;
	}

	.anName,
	.anTile.is-full .anName {
		top: 14px;
		left: 17px;
		font-size: 15px;
		letter-spacing: -0.15px;
	}
}