/* =========================================================
   АРХИВ — по макету Figma «HP», фрейм archive/
   Подключается вместе с project.css (шрифты, подвал).
   ========================================================= */

body {
	background: #141414;
	color: #fff;
}

/* Шапка: белый логотип на тёмном */
.archive-header {
	display: flex;
	justify-content: center;
	padding: var(--gutter);
}

.archive-header a {
	display: block;
	line-height: 0;
}

.archive-header img {
	width: 257px;
	height: 50px;
}

/* Три колонки 1 : 4 : 1, список в средней */
.archive {
	display: grid;
	grid-template-columns: minmax(0, 0.25fr) minmax(0, 1fr) minmax(0, 0.25fr);
	padding: var(--gutter) var(--gutter) 200px;
	font-size: 20px;
}

.archive__body {
	grid-column: 2;
	display: flex;
	flex-direction: column;
	gap: 50px;
}

.archive a {
	color: #fff;
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	text-decoration-thickness: 0.3px;
	text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
	/* линия полупрозрачная: 40% цвета текста */
}

.archive a:hover {
	color: rgba(255, 255, 255, 0.6);
}

.archive__source {
	margin: 0;
}

/* Год слева, работы справа */
.archive__year {
	display: flex;
	align-items: flex-start;
	gap: 80px;
}

.archive__year h2 {
	flex: none;
	margin: 0;
	font-size: inherit;
	font-weight: 300;
	line-height: normal;
	color: rgba(255, 255, 255, 0.2);
	font-variant-numeric: tabular-nums;
	/* цифры одной ширины — ссылки встают ровно */
}

.archive__year ul {
	flex: 1;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1.2;
}

.archive__year li+li {
	margin-top: 14px;
}

/* Подвал на тёмном фоне */
.project-footer {
	color: #fff;
}

/* --- Телефоны --- */
@media (max-width: 760px) {
	.archive {
		grid-template-columns: 1fr;
		padding-bottom: 100px;
		font-size: 18px;
	}

	.archive__body {
		grid-column: 1;
		gap: 40px;
	}

	.archive__year {
		gap: 24px;
	}

	.archive__source a {
		word-break: break-all;
	}

	.archive-header img {
		width: 180px;
		height: auto;
	}
}

/* Текст для поисковиков и экранных дикторов, на экране не виден */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}