/* Netwar. Оформление внешних страниц.

   Правила набора, а не пояснения к ним: обоснование лежит отдельно
   и наружу не отдаётся. Здесь — только то, что нужно, чтобы править
   этот файл и не сломать конструкцию.

   Имена классов английские: лист уходит по HTTP, и читать его будет
   не только русский. Комментарии остаются русскими — свод объясняет
   систему, комментарий объясняет строку. */

:root {
	--back:    #1A1A1A;
	--slab:    #232323;
	--line:    #2E2E2E;
	--edge:    #3D3D3D;
	--text:    #C0C0C0;
	--quiet:   #8A8A8A;
	--white:   #FFFFFF;
	--gold:    #FFC42E;

	--prose:   "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
	--machine: Tahoma, Verdana, "DejaVu Sans", sans-serif;
}

* { box-sizing: border-box }

html { -webkit-text-size-adjust: 100%; color-scheme: dark }

body {
	margin: 0;
	background: var(--back);
	color: var(--text);
	font: 15px/27px var(--prose);
	-webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--back) }

p { margin: 0 0 18px 0 }
p:last-child { margin-bottom: 0 }

a { color: var(--gold); text-decoration: none }
a:hover { text-decoration: underline }

/* Обводка при ходьбе с клавиатуры. Мышью её не видно. */
a:focus-visible, [tabindex]:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.wrap { width: 920px; margin: 0 auto; padding: 0 30px }

/* Ссылка в обход шапки: первое, что берёт клавиша Tab, и единственное,
   что при этом видно. Экранный диктор читает её вслух. */
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--gold);
	color: var(--back);
	padding: 12px 20px;
	font: 13px var(--machine);
	z-index: 10;
}

.skip:focus { left: 0 }

/* ---- Шапка ---------------------------------------------------------- */

.header { border-bottom: 1px solid var(--line) }

.header .wrap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-top: 27px;
	padding-bottom: 23px;
}

.mark {
	font: 600 16px var(--prose);
	letter-spacing: .34em;
	color: var(--white);
}

.header .right { font: 12px var(--machine); color: var(--quiet) }

/* ---- Начало ---------------------------------------------------------- */

/* Объявление набрано во всю ширину и выровнено по левому краю страницы.
   Ось начинается ниже, вместе с разделами: сперва говорят, потом чертят. */

.opening .wrap { padding-top: 112px }

.eyebrow {
	font: 11px var(--machine);
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 32px;
}

h1 {
	margin: 0;
	font: 300 72px/1.05 var(--prose);
	letter-spacing: -.028em;
	color: var(--white);
	max-width: 820px;
}

h1 .second { color: #979797 }

.lead {
	margin: 36px 0 0 0;
	max-width: 640px;
	font-size: 19px;
	line-height: 32px;
}

/* Цоколь. Три числа золотом, подписи тихо: на них смотрят вторым взглядом. */
.plinth {
	display: flex;
	margin-top: 64px;
	border-top: 1px solid var(--edge);
}

.plinth > div {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 22px 28px 0 0;
	border-right: 1px solid var(--line);
}

.plinth > div + div { padding-left: 28px }
.plinth > div:last-child { border-right: 0; padding-right: 0 }

.plinth .figure {
	font: 300 34px/1 var(--prose);
	letter-spacing: -.012em;
	color: var(--gold);
}

.caption {
	margin-top: auto;
	padding-top: 12px;
	font: 12px/18px var(--machine);
	color: var(--quiet);
}

/* ---- Врезка ---------------------------------------------------------- */

.quote {
	margin: 104px 0 0 0;
	padding-left: 26px;
	border-left: 2px solid var(--gold);
	max-width: 680px;
}

.quote .words {
	font: 300 25px/38px var(--prose);
	letter-spacing: -.014em;
	color: var(--white);
}

.quote .source {
	display: block;
	margin-top: 16px;
	font: 12px var(--machine);
	color: var(--quiet);
}

/* ---- Разделы --------------------------------------------------------- */

.opening .wrap { padding-bottom: 108px }

.section { border-top: 1px solid var(--line) }
.story > .section:first-child { border-top: 1px solid var(--edge) }
.story { border-bottom: 1px solid var(--edge) }   /* ось упирается в линию, а не обрывается */

/* Горизонтальная линейка идёт во всю ширину окна, вертикальная ось
   остаётся внутри колонки. Лист шире набора - так на нём и чертят. */
.row {
	display: grid;
	grid-template-columns: 92px 1fr;
	column-gap: 38px;
}

.body { padding: 48px 0 52px }

/* Номер посажен на общую с заголовком линию шрифта: разница в отступе -
   это разница кеглей, а не произвол. */
.axis {
	padding: 51px 20px 52px 0;
	text-align: right;
	border-right: 1px solid var(--line);
	font: 11px/32px var(--machine);
	letter-spacing: .1em;
	color: var(--gold);
}

h2 {
	margin: 0 0 24px 0;
	font: 600 25px/32px var(--prose);
	letter-spacing: -.012em;
	color: var(--white);
}

.body > p { max-width: 640px }

.strong { color: var(--white) }
.muted { color: var(--quiet) }

/* Заявление. Регистр между прозой и заголовком, белым, во всю строку.
   Ставится там, где сказанное должно остановить чтение. */
.statement {
	max-width: 620px;
	margin: 0 0 20px 0;
	font: 300 19px/32px var(--prose);
	letter-spacing: -.008em;
	color: var(--white);
	text-wrap: pretty;
}

/* ---- Хроника --------------------------------------------------------- */

/* Запись датируется, а не озаглавливается: год стоит на оси слева
   и работает заголовком. Отсюда у записи нет h2. */
.year {
	font: 12px/32px var(--machine);
	letter-spacing: .06em;
}

.entry .body { padding-top: 46px }

.entry .body > p:first-child { margin-top: 0 }

/* Перелом. Отдельной строкой, белым, ничем не украшен. */
.beat {
	margin: 22px 0 0 0;
	font: 300 25px/34px var(--prose);
	letter-spacing: -.014em;
	color: var(--white);
}

/* ---- Перелом регистра ------------------------------------------------- */

/* Здесь мир замолкает и начинают говорить авторы. Смена голоса должна
   быть видна глазом раньше, чем прочитана. */
.turn .wrap { padding-top: 84px; padding-bottom: 76px }

.turn .speech {
	max-width: 660px;
	margin: 0;
	font-size: 15px;
	line-height: 27px;
	color: var(--quiet);
}

.turn .speech b { color: var(--white); font-weight: 400 }

.turn .quote { margin-top: 52px }

/* Метка на оси у авторских записей: слово вместо года. */
.word {
	font: 11px/32px var(--machine);
	letter-spacing: .1em;
}

/* ---- Плита с числами -------------------------------------------------- */

.slab {
	background: var(--slab);
	padding: 23px 30px 25px;
	margin: 30px 0;
}

.slab:last-child { margin-bottom: 0 }

table.numbers {
	border-collapse: collapse;
	width: 100%;
	font: 13px/20px var(--machine);
}

/* Подпись таблицы. Её читают машина и экранный диктор, а глазами видеть
   её незачем: что за таблица, сказано прозой строкой выше, и вторая серая
   строка над шапкой только повторяла бы её. Убрана из виду, но не из
   разметки - display:none отнял бы её и у диктора. */
table.numbers caption {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

table.numbers th {
	text-align: left;
	font: 11px var(--machine);
	font-weight: normal;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--quiet);
	padding: 0 16px 12px 0;
	border-bottom: 1px solid var(--edge);
	white-space: nowrap;
}

table.numbers td {
	padding: 13px 16px 13px 0;
	border-bottom: 1px solid var(--line);
	color: #D4D4D4;
	vertical-align: top;
}

table.numbers tr:last-child td { border-bottom: 0; padding-bottom: 2px }
table.numbers th:last-child, table.numbers td:last-child { padding-right: 0 }

th.figure, td.figure { text-align: right; white-space: nowrap }

td.figure {
	color: var(--gold);
	font-weight: bold;
	font-size: 14px;
}

/* ---- Поле для почты --------------------------------------------------- */

.signup { margin: 24px 0 0; max-width: 560px }

.signup .line { display: flex }

.field {
	flex: 1;
	min-width: 0;
	background: var(--slab);
	border: 1px solid var(--edge);
	color: var(--text);
	font: 15px/20px var(--prose);
	padding: 13px 14px;
}

.field::placeholder { color: #6E6E6E }
.field:focus { outline: none; border-color: var(--gold) }

.button {
	background: var(--gold);
	border: 1px solid var(--gold);
	color: var(--back);
	font: 600 14px/20px var(--prose);
	padding: 13px 22px;
	margin-left: 10px;
	cursor: pointer;
	white-space: nowrap;
}

.button:hover { background: #FFD25E; border-color: #FFD25E }

/* Ответ формы. Золотом, потому что это ответ нам, а не часть рассказа. */
.said {
	margin: 0 0 16px 0;
	max-width: 560px;
	color: var(--gold);
}

.signup + .fine { margin-top: 14px }

/* Подпись у поля: нужна диктору, глазами её видеть незачем - что вводить,
   сказано и placeholder-ом, и фразой выше. */
.away {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Ловушка для машин. Человек её не видит и мимо неё проходит клавишей. */
.trap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	overflow: hidden;
}

/* ---- Конец ------------------------------------------------------------ */

/* Страница должна приземлиться. Дата вынесена из раздела сюда: раздел
   объясняет, почему закрыто, а конец называет срок. */
.closing .wrap { padding-top: 92px; padding-bottom: 96px }

.rule {
	width: 46px;
	height: 2px;
	background: var(--gold);
	margin-bottom: 30px;
}

.deadline {
	font: 300 38px/1.18 var(--prose);
	text-wrap: balance;
	letter-spacing: -.02em;
	color: var(--white);
	margin: 0 0 18px 0;
	max-width: 700px;
}

.closing .detail { color: var(--quiet); max-width: 560px; margin: 0 }

/* Оговорка. Мельче прозы и тише её: читают её один раз и по своей воле. */
.fine {
	margin: 34px 0 0 0;
	max-width: 620px;
	font: 12px/19px var(--machine);
	color: var(--quiet);
}

/* ---- Подвал ---------------------------------------------------------- */

.foot { border-top: 1px solid var(--line) }

.foot .wrap {
	display: flex;
	justify-content: space-between;
	padding-top: 27px;
	padding-bottom: 64px;
	font: 12px/20px var(--machine);
	color: var(--quiet);
}

.foot .right { text-align: right }

/* ---- Узкий экран ------------------------------------------------------ */

@media (max-width: 960px) {
	.wrap { width: auto; max-width: 700px; padding: 0 22px }
	.opening .wrap { padding-top: 66px }
	h1 { font-size: 40px; letter-spacing: -.02em }
	.lead { font-size: 17px; line-height: 29px; margin-top: 28px }
	.plinth { display: block; margin-top: 44px }
	.plinth > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 19px 0 19px }
	.plinth > div + div { padding-left: 0 }
	.plinth > div:last-child { border-bottom: 0; padding-bottom: 0 }
	.opening .wrap { padding-bottom: 56px }
	.quote { margin: 58px 0 0; padding-left: 20px }
	.quote .words { font-size: 20px; line-height: 32px }
	.row { display: block }
	.axis {
		text-align: left;
		border-right: 0;
		padding: 36px 0 0 0;
		line-height: 20px;
	}
	.body { padding: 15px 0 40px }
	h2 { font-size: 22px; line-height: 30px; margin-bottom: 18px }
	.statement { font-size: 18px; line-height: 30px }
	.slab { padding: 19px 22px 21px; margin-left: -22px; margin-right: -22px }
	.closing .wrap { padding-top: 58px; padding-bottom: 62px }
	.deadline { font-size: 27px }
	.foot .wrap { display: block; padding-bottom: 46px }
	.foot .right { text-align: left; margin-top: 11px; display: block }
	/* На узком поле и кнопка встают друг под друга: рядом им тесно,
	   и кнопка отъедала бы у адреса половину строки. */
	.signup .line { display: block }
	.button { width: 100%; margin: 10px 0 0 }
}

/* ---- Печать ----------------------------------------------------------- */

/* Страницу сохраняют в PDF и пересылают. Тёмный лист на бумаге съедает
   картридж и читается хуже, поэтому на печать идёт чёрное по белому. */
@media print {
	body { background: #FFF; color: #000; font-size: 11pt }
	.header, .foot, .skip { display: none }
	h1, h2, .statement, .beat, .deadline, .quote .words { color: #000 }
	.eyebrow, .axis, .plinth .figure, td.figure { color: #000 }
	.slab { background: #F2F2F2 }
	a { color: #000; text-decoration: underline }
	.section, .story { border-color: #CCC }
}