P {
	text-indent : 28px;
	text-align : justify;
}
BODY {
	background-image : url(fon.jpg);
	background-position : center 20%;
	background-repeat : no-repeat;
	background-attachment : fixed;
	background-size : cover;
	background-color : #D2D4D4;
	font-size : 16px;
	line-height : 1.45;
}
H1 {
	font-size : 18px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-variant : small-caps;
	text-align : center;
}
H2 {
	font-size : 16px;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-variant : small-caps;
	text-align : center;
}

/* не даём мобильным браузерам самовольно увеличивать шрифт */
html { -webkit-text-size-adjust: 100%; }

/* картинки (чертежи, формулы) не вылезают за край экрана телефона */
img { max-width: 100%; height: auto; }

/* таблицы результатов на старых страницах можно листать вбок,
   а не ломать ими вёрстку */
table { max-width: 100%; }

/* ---------- Главная страница ------------------------------------- */

.page {
	max-width: 860px;
	margin: 0 auto;
	padding: 0 12px 20px;
}

/* ссылки на новых страницах — прежний цвет сайта */
.page a { color: #575a8c; }
.page a:visited { color: #6f5a8c; }

/* шапка с корабликом */
.top {
	text-align: center;
	padding: 10px 0 0;
	margin-bottom: 16px;
	border-bottom: 1px solid #b3b8c8;
}

/* меню: строкой под шапкой, по центру.
   На узком экране само переносится в две-три строки */
.menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 6px 0 8px;
}
.menu a {
	padding: 5px 11px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	border-radius: 3px;
}
.menu a:hover, .menu a:focus {
	background: rgba(255,255,255,.8);
	text-decoration: underline;
}

/* белая «карточка»: раньше это была <table border="1">.
   Полупрозрачный фон нужен, чтобы текст читался поверх картины */
.box {
	border: 1px solid #9aa0b4;
	background: rgba(255,255,255,.4);
	border-radius: 4px;
	padding: 12px 20px 16px;
}
.box p { margin: .7em 0; }

/* заголовок внутри карточки */
.hdr {
	text-align: center;
	text-indent: 0;
	font-weight: bold;
	margin: 1.2em 0 .4em;
}
.c { text-align: center; text-indent: 0; }

/* аккуратная разделительная линия вместо <hr width="70%"> */
.box hr, .foot hr {
	border: 0;
	border-top: 1px solid #b3b8c8;
	width: 70%;
	margin: 1.2em auto;
}

/* таблицы «график регат» и «результаты» */
.tbl {
	border-collapse: collapse;
	margin: .5em auto .2em;
}
.tbl th {
	padding: 0 12px 5px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-align: left;
	color: #43434f;
	border-bottom: 1px solid #9aa0b4;
	white-space: nowrap;
}
.tbl td {
	padding: 5px 12px;
	border-bottom: 1px solid rgba(154,160,180,.35);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .cls { font-weight: bold; white-space: nowrap; }
.tbl .dt  { white-space: nowrap; }
.tbl .reg { white-space: nowrap; color: #3c3c48; }
.tbl .lnk { white-space: nowrap; }
.tbl .lnk a { padding: 0 2px; }

/* ближайшая регата — подсветка строки */
.tbl tr.next td { background: rgba(255,255,255,.55); }
.tbl tr.next .cls {
	border-left: 3px solid #8d93ad;
	padding-left: 9px;
}

/* внешняя ссылка со стрелкой (например, на сайт матфака ВШЭ) */
a.out::after {
	content: " \2192";
	font-weight: bold;
	text-decoration: none;
}

/* список школ, не допущенных к участию */
.box code {
	font-family: inherit;
	font-style: italic;
}


/* ---------- Архив регат (бывшая правая панель) ---------------------- */

.arch {
	margin-top: 22px;
	border: 1px solid #9aa0b4;
	background: rgba(255,255,255,.4);
	border-radius: 4px;
	padding: 10px 16px 16px;
}
.arch h2 { margin: .2em 0 .1em; }
.arch .note {
	text-align: center;
	text-indent: 0;
	font-size: 13px;
	color: #4a4a4a;
	margin: 0 0 14px;
}

/* пять колонок — по одной на класс; на узком экране они
   сами перестраиваются в две колонки и в одну */
.arch-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px 16px;
}
.arch-class h3 {
	margin: 0 0 6px;
	padding-bottom: 4px;
	font-family: Verdana, Arial, sans-serif;
	font-size: 14px;
	text-align: center;
	border-bottom: 1px solid #c2c7d6;
}

/* сами годы: газетные колонки — сначала один столбик сверху вниз,
   потом следующий. Сколько столбиков поместится, браузер решает сам:
   на широком экране два, на телефоне три-четыре */
.years {
	columns: 68px;
	column-gap: 6px;
}
.years a {
	display: block;
	padding: 3px 2px;
	font-size: 13px;
	text-align: center;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 3px;
	break-inside: avoid;
}
.years a:hover, .years a:focus {
	background: #dde2ef;
	text-decoration: underline;
}
.years a.wide { white-space: normal; }   /* «2001/02 (эксп.)» — длиннее прочих */


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

.foot {
	max-width: 860px;
	margin: 16px auto 0;
	padding: 0 12px 12px;
	text-align: center;
	font-size: 13px;
	line-height: 1.7;
}
.foot .fin {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	justify-content: space-between;
}


/* ---------- Телефоны -------------------------------------------------- */

@media (max-width: 700px) {
	/* fixed на телефонах дёргается при прокрутке, а cover в паре со scroll
	   растянул бы картину на всю длину страницы — поэтому кладём её
	   один экран высотой сверху, дальше идёт ровный фон */
	body {
		background-image: linear-gradient(to bottom, rgba(210,212,212,0) 55%, #D2D4D4 100%),
		                  url(fon-mob.jpg);
		background-attachment: scroll, scroll;
		background-size: auto 100vh, auto 100vh;
		background-position: center top, center top;
		background-repeat: no-repeat, no-repeat;
	}
	.page { padding: 0 8px 16px; }
	.box  { padding: 10px 12px 12px; }
	.arch { padding: 8px 10px 12px; }
	.menu a { padding: 5px 7px; }             /* ссылки меню теснее, чтобы влезло в 2 строки */
	.tbl { font-size: 14px; }                 /* таблицы должны влезать в узкий экран */
	.tbl th, .tbl td { padding-left: 5px; padding-right: 5px; }
	.tbl .lnk { white-space: normal; }
	P { text-indent: 0; }
}


/* ---------- 4. Страницы отдельных регат  <body class="reg"> ---------- */

body.reg h1 { font-size: 20px; margin-bottom: .2em; }
body.reg h1 .date {
	display: block;
	font-size: 14px;
	font-variant: normal;
	font-weight: normal;
	color: #40404a;
}
body.reg h2 {
	font-size: 17px;
	margin: 1.4em 0 .4em;
	padding-bottom: 4px;
	border-bottom: 1px solid #b3b8c8;
}

/* строчка «наверх / задания / результаты / решения» */
.crumb { text-indent: 0; font-size: 13px; margin: 6px 0 0; }
.pnav {
	text-indent: 0;
	text-align: center;
	margin: 0 0 14px;
	font-size: 14px;
}
.pnav a { display: inline-block; padding: 4px 8px; }

/* тур: заголовок + условия задач */
.tur {
	text-indent: 0;
	font-weight: bold;
	margin: 1.3em 0 .5em;
}
.tur span { font-weight: normal; font-style: italic; font-size: 14px; }
.task { text-indent: 0; margin: .6em 0; }
.task b:first-child { margin-right: .2em; }

/* чертёж к задаче */
.pic { text-indent: 0; text-align: center; margin: .6em 0; }

/* таблица результатов: id="t1" — как на страницах прошлых лет,
   class="results" — на новых */
.tbl-scroll {
	overflow-x: auto;                 /* длинную таблицу можно листать вбок */
	-webkit-overflow-scrolling: touch;
	margin-bottom: 1em;
}
table.results, table#t1 {
	border-collapse: collapse;
	margin: 0 auto;
	background: #fff;
	font-size: 14px;
}
table.results td, table.results th,
table#t1 td, table#t1 th {
	border: 1px solid #b6bccd;
	padding: 2px 7px;
}
table.results tbody tr:nth-child(even) { background: #eef0f5; }
table.results thead td, table.results thead th {
	background: #dde2ef;
	font-weight: bold;
	text-align: center;
}
table.results tbody td:first-child { text-align: left; white-space: nowrap; }
table.results tbody tr:hover { background: #e3e9f7; }   /* подсветка строки под курсором */


/* ---------- Формулы (MathML) ------------------------------------------ */

math { font-size: 1.06em; }
math[display="block"] { margin: .6em 0; }

/* дробь «на строке», если MathML не нужен: <span class="frac">y<i>/</i>x</span> */
.frac { white-space: nowrap; }
.frac sup, .frac sub { font-size: .8em; }
