/* Bonefall — один лист на обе страницы. Ни одной внешней загрузки: страница
   должна открываться с любого хостинга и из локальной папки одинаково. */
:root {
	--bg: #0d0c0f;
	--panel: #17151a;
	--line: #2a2630;
	--ink: #ddd6cc;
	--mute: #8d8579;
	--gold: #c9a24a;
	--blood: #b8503c;
	--serif: Georgia, "Times New Roman", "Noto Serif", serif;
	--sans: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 16px/1.65 var(--sans);
	-webkit-text-size-adjust: 100%;
}
.wrap { max-width: 860px; margin: 0 auto; padding: 0 20px; }
a { color: var(--gold); }
a:hover { color: #e6bf6b; }

/* язык */
.langs {
	display: flex; gap: 6px; justify-content: flex-end;
	padding: 14px 0 0; flex-wrap: wrap;
}
.langs button {
	background: transparent; color: var(--mute);
	border: 1px solid var(--line); border-radius: 4px;
	padding: 5px 11px; font: 13px/1 var(--sans); cursor: pointer;
}
.langs button:hover { color: var(--ink); border-color: #3d3746; }
.langs button[aria-pressed="true"] { color: var(--bg); background: var(--gold); border-color: var(--gold); }

/* шапка */
header { text-align: center; padding: 18px 0 4px; }
header .sub {
	font-family: var(--serif); font-size: clamp(17px, 3.4vw, 21px);
	color: var(--ink); margin: 4px 0 0;
}
header .by { color: var(--mute); font-size: 13px; margin-top: 10px; }

.hero {
	margin: 22px 0 6px; border: 1px solid var(--line); border-radius: 8px;
	overflow: hidden; background: #000;
}
/* Плакат рисовался под экран телефона - он высокий. На телефоне это и нужно:
   во всю ширину он ложится почти ровно в один экран. На мониторе тот же
   плакат встал бы башней и утопил всё остальное, поэтому там из него берётся
   полоса с заголовком и героями - середина, где всё и происходит. */
.hero { display: flex; justify-content: center; background: #08070a; }
.hero img { display: block; width: 100%; height: 460px; object-fit: cover; object-position: 50% 50%; }
@media (max-width: 620px) {
	/* Нижняя пятая часть плаката - пустая земля: она дорисовывалась, чтобы
	   заставка накрывала любой телефон. На странице это просто дыра, и её
	   отрезаем сверху вниз, оставляя композицию целой. */
	.hero img { height: auto; aspect-ratio: 900 / 1500; object-position: 50% 32%; }
}

h2 {
	font-family: var(--serif); font-weight: normal;
	font-size: clamp(20px, 4vw, 26px);
	margin: 40px 0 12px; padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
}
h3 { font-family: var(--serif); font-weight: normal; font-size: 18px; margin: 26px 0 6px; }
p { margin: 0 0 14px; }
.lead { font-family: var(--serif); font-size: clamp(18px, 3.6vw, 22px); line-height: 1.5; }
ul { padding-left: 20px; margin: 0 0 14px; }
li { margin-bottom: 7px; }
.mute { color: var(--mute); }
small { color: var(--mute); font-size: 13px; }

/* снимки */
.shots {
	display: flex; gap: 12px; overflow-x: auto; padding: 4px 0 14px;
	scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.shots img {
	flex: 0 0 auto; width: 210px; height: auto; border-radius: 8px;
	border: 1px solid var(--line); scroll-snap-align: center;
}

/* карточки-ссылки на площадки */
.where { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .where { grid-template-columns: 1fr; } }
.card {
	border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px;
	background: var(--panel);
}
.card b { font-family: var(--serif); font-weight: normal; font-size: 18px; display: block; }
.card span { color: var(--mute); font-size: 14px; }

.box {
	border: 1px solid var(--line); border-left: 3px solid var(--gold);
	background: var(--panel); border-radius: 0 8px 8px 0;
	padding: 14px 18px; margin: 0 0 16px;
}

footer {
	margin: 56px 0 0; padding: 22px 0 34px;
	border-top: 1px solid var(--line); color: var(--mute); font-size: 14px;
	display: flex; gap: 8px 20px; flex-wrap: wrap; justify-content: space-between;
}

[data-l] { display: none; }
[data-l].on { display: block; }
li[data-l].on { display: list-item; }
span[data-l].on, b[data-l].on, a[data-l].on { display: inline; }