@font-face {
	font-family: "Ages Sans";
	src: url("fonts/noto-sans-regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Ages Sans";
	src: url("fonts/noto-sans-bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}

:root {
	color-scheme: light;

	--plate:      #fcf1db;
	--page:       #f5e5c6;
	--card:       #fff8ea;
	--edge:       #caa773;
	--edge-deep:  #ad834b;
	--ink:        #3d2818;
	--ink-soft:   #79624b;

	--gold:       #ffb224;
	--gold-hover: #ffc352;
	--gold-lip:   #d98a0b;
	--green:      #24b25c;
	--green-deep: #178c46;

	--radius:     18px;
	--lip:        6px;
	--gutter:     16px;
	--measure:    76rem;
	--band-pad:   28px;
	--filler:     none;
	--filler-mid: 1;
}

.tone-stone, .tone-plain {
	--plate:      var(--age_stone_panel, #fcf1db);
	--page:       var(--age_stone_deep, #f5e5c6);
	--card:       var(--age_stone_quiet, #fffbf3);
	--edge:       var(--age_stone_edge_soft, #caa773);
	--edge-deep:  var(--age_stone_edge, #ad834b);
	--ink:        var(--age_stone_ink, #3d2818);
	--ink-soft:   var(--age_stone_muted, #79624b);
	--gold:       var(--age_stone_accent, #ffb224);
	--gold-hover: var(--age_stone_accent_top, #ffc43a);
	--gold-lip:   var(--age_stone_accent_lip, #d98a0b);
	--filler:     url("img/filler-stone.svg");
}
.tone-plain { --filler: none; }
.tone-bronze {
	--plate:      var(--age_bronze_panel, #f9f3ee);
	--page:       var(--age_bronze_deep, #f2e7db);
	--card:       var(--age_bronze_quiet, #fcfaf8);
	--edge:       var(--age_bronze_edge_soft, #bca38a);
	--edge-deep:  var(--age_bronze_edge, #a1754a);
	--ink:        var(--age_bronze_ink, #362616);
	--ink-soft:   var(--age_bronze_muted, #76593d);
	--gold:       var(--age_bronze_accent, #efad7b);
	--gold-hover: var(--age_bronze_accent_top, #f0b689);
	--gold-lip:   var(--age_bronze_accent_lip, #b2672f);
	--filler:     url("img/filler-bronze.svg");
}
.tone-iron {
	--plate:      var(--age_iron_panel, #faf4ed);
	--page:       var(--age_iron_deep, #f4e9d9);
	--card:       var(--age_iron_quiet, #fdfbf8);
	--edge:       var(--age_iron_edge_soft, #bfa787);
	--edge-deep:  var(--age_iron_edge, #a17945);
	--ink:        var(--age_iron_ink, #291e0f);
	--ink-soft:   var(--age_iron_muted, #725837);
	--gold:       var(--age_iron_accent, #c98b73);
	--gold-hover: var(--age_iron_accent_top, #d49b85);
	--gold-lip:   var(--age_iron_accent_lip, #8c4f3a);
	--filler:     url("img/filler-iron.svg");
}
.tone-steel {
	--plate:      var(--age_steel_panel, #f2f3f5);
	--page:       var(--age_steel_deep, #e4e6e9);
	--card:       var(--age_steel_quiet, #fafafb);
	--edge:       var(--age_steel_edge_soft, #99a0ad);
	--edge-deep:  var(--age_steel_edge, #636e88);
	--ink:        var(--age_steel_ink, #13161b);
	--ink-soft:   var(--age_steel_muted, #505768);
	--gold:       var(--age_steel_accent, #97a8ce);
	--gold-hover: var(--age_steel_accent_top, #a5b3d5);
	--gold-lip:   var(--age_steel_accent_lip, #52648e);
	--filler:     url("img/filler-steel.svg");
}
.tone-concrete {
	--plate:      var(--age_concrete_panel, #f5f4f2);
	--page:       var(--age_concrete_deep, #e9e8e5);
	--card:       var(--age_concrete_quiet, #fbfbfa);
	--edge:       var(--age_concrete_edge_soft, #aca79a);
	--edge-deep:  var(--age_concrete_edge, #877d64);
	--ink:        var(--age_concrete_ink, #2f2c22);
	--ink-soft:   var(--age_concrete_muted, #645e4e);
	--gold:       var(--age_concrete_accent, #eed24f);
	--gold-hover: var(--age_concrete_accent_top, #f3e086);
	--gold-lip:   var(--age_concrete_accent_lip, #948123);
	--filler:     url("img/filler-concrete.svg");
}
.tone-silicon {
	--plate:      var(--age_silicon_panel, #eff8f8);
	--page:       var(--age_silicon_deep, #def0f0);
	--card:       var(--age_silicon_quiet, #f9fcfc);
	--edge:       var(--age_silicon_edge_soft, #8eb8b8);
	--edge-deep:  var(--age_silicon_edge, #488989);
	--ink:        var(--age_silicon_ink, #1a3737);
	--ink-soft:   var(--age_silicon_muted, #3c6768);
	--gold:       var(--age_silicon_accent, #5ae1e2);
	--gold-hover: var(--age_silicon_accent_top, #8eeaeb);
	--gold-lip:   var(--age_silicon_accent_lip, #2e9394);
	--filler:     url("img/filler-silicon.svg");
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 72px;
	font-size: 100%;
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page);
	color: var(--ink);
	font-family: "Ages Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1.0625rem;
	line-height: 1.5;
	overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: block; }

a { color: var(--ink); }
a:focus-visible, button:focus-visible {
	outline: 3px solid var(--ink);
	outline-offset: 3px;
}

h2 {
	margin: 0 0 10px;
	font-size: clamp(1.55rem, 6vw, 2.1rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
}
h3 { margin: 0 0 4px; font-size: 1.1rem; line-height: 1.25; }
p { margin: 0 0 12px; }

.wrap {
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	padding-left: max(var(--gutter), env(safe-area-inset-left));
	padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.top {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--plate);
	color: var(--ink);
	border-bottom: 2px solid var(--edge);
}
.top-in {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: var(--measure);
	margin: 0 auto;
	padding: 8px var(--gutter);
	padding-left: max(var(--gutter), env(safe-area-inset-left));
	padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-right: auto;
	font-weight: 700;
	font-size: 1.05rem;
	text-decoration: none;
}
.brand img { width: 32px; height: 32px; border-radius: 8px; }
.brand span { white-space: nowrap; }

.langs { display: flex; gap: 2px; }
.langs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 40px;
	padding: 0 4px;
	border-radius: 10px;
	color: var(--ink-soft);
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
}
.langs a[aria-current="true"] {
	background: var(--page);
	color: var(--ink);
	box-shadow: inset 0 0 0 2px var(--edge);
}

.btn {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 14px;
	background: var(--gold);
	border-bottom: var(--lip) solid var(--gold-lip);
	color: var(--ink);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color 90ms linear, transform 90ms linear;
}
.btn:hover { background: var(--gold-hover); }
.btn:active {
	transform: translateY(2px);
	border-bottom-width: calc(var(--lip) - 2px);
}
.btn-small {
	padding: 8px 14px;
	border-radius: 11px;
	border-bottom-width: 4px;
	font-size: 0.95rem;
}
.btn-small:active { border-bottom-width: 2px; }
.btn-big {
	display: block;
	padding: 20px 28px;
	border-radius: 18px;
	font-size: 1.45rem;
	border-bottom-width: 8px;
}
.btn-big:active { border-bottom-width: 6px; }

main {
	flex: 1;
	width: 100%;
}

.band {
	position: relative;
	isolation: isolate;
	padding: var(--band-pad) 0;
	background: var(--page);
	color: var(--ink);
	border-top: 2px solid var(--edge);
}
.band:first-child { border-top: 0; }
.band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--filler);
	background-repeat: repeat;
	background-position: center top;
	pointer-events: none;
	opacity: 0.6;
}

.hero {
	display: grid;
	gap: 22px;
}
.band:first-child { padding-top: 22px; }
h1 {
	margin: 0 0 8px;
	font-size: clamp(2.6rem, 13vw, 4.6rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
}
.lede {
	margin: 0 0 20px;
	font-size: 1.25rem;
	line-height: 1.35;
	color: var(--ink);
}
.cta { margin: 0 0 14px; }
.note {
	margin: 0;
	font-size: 0.93rem;
	color: var(--ink-soft);
}

.art {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius);
	border: 2px solid var(--edge);
	background: var(--plate);
	box-shadow: 0 6px 0 var(--edge);
}
.art img { width: 100%; }
.art-hero { order: -1; }
.art-bare {
	border: 0;
	box-shadow: none;
	background: none;
	border-radius: 0;
}

.board {
	padding: 20px 16px 16px;
	border-radius: var(--radius);
	background: var(--card);
	border: 2px solid var(--edge);
	box-shadow: 0 6px 0 var(--edge);
}
.board-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.board-head h2 { margin-bottom: 6px; }
.board-icon { width: 56px; height: 56px; flex: none; }
.season {
	display: inline-block;
	justify-self: start;
	margin: 2px 0 12px;
	padding: 6px 12px;
	border-radius: 12px;
	background: var(--green);
	border-bottom: 3px solid var(--green-deep);
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
}

.season.over { background: var(--edge-deep); border-bottom-color: var(--ink-soft); }
.board-sub { font-size: 0.93rem; color: var(--ink-soft); }
.board-state {
	margin: 8px 0;
	padding: 14px;
	border-radius: 12px;
	background: var(--plate);
	color: var(--ink-soft);
	text-align: center;
}

.ranks {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 6px;
}
.rank {
	display: grid;
	grid-template-columns: 2.1rem 34px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 12px;
	background: var(--plate);
	border: 2px solid var(--page);
}
.rank-place {
	font-weight: 700;
	font-size: 1.05rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.rank:nth-child(1) { background: #ffe7b0; border-color: #ffb224; }
.rank:nth-child(2) { background: #f1ece4; border-color: #c9c2b6; }
.rank:nth-child(3) { background: #f6dfc7; border-color: #d9a273; }
.rank-age {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--age, var(--edge));
	padding: 3px;
}
.rank-who { min-width: 0; }
.rank-nick {
	display: block;
	font-weight: 700;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rank-age-name { display: block; font-size: 0.8rem; color: var(--ink-soft); }
.rank-speed {
	font-weight: 700;
	font-size: 0.95rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}
.rank-speed small {
	display: block;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--ink-soft);
}

.board-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 12px;
	margin: 12px 2px 0;
	font-size: 0.93rem;
	color: var(--ink-soft);
}
.board-foot a { font-weight: 700; }

.facts {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.facts li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 14px;
	align-items: start;
	padding: 14px;
	border-radius: 16px;
	background: var(--plate);
	border: 2px solid var(--edge);
	box-shadow: 0 4px 0 var(--edge);
}
.facts img { width: 56px; height: 56px; }
.facts p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

.age-strip {
	list-style: none;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 12px;
	margin: 14px calc(-1 * var(--gutter)) 0;
	padding: 4px var(--gutter) 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 var(--gutter);
	-webkit-overflow-scrolling: touch;
}
.age-stone { --age: #6b874d; }
.age-bronze { --age: #c27533; }
.age-iron { --age: #615e7a; }
.age-steel { --age: #3875b8; }
.age-concrete { --age: #857f75; }
.age-silicon { --age: #1a8f8a; }
.age {
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 16px;
	background: var(--plate);
	border: 2px solid var(--age);
	box-shadow: 0 5px 0 var(--age);
}
.age p {
	margin: 0;
	padding: 10px 12px 12px;
	border-top: 4px solid var(--age);
}
.age b { display: block; font-size: 1.05rem; }
.age span { display: block; font-size: 0.88rem; color: var(--ink-soft); }

.split {
	display: grid;
	gap: 18px;
	align-items: center;
}
.split p { color: var(--ink-soft); }

.chain {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 14px 0 0;
	padding: 0;
}
.chain li {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 62px;
	font-size: 0.8rem;
	color: var(--ink-soft);
	position: relative;
}
.chain li + li::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 21px;
	border: 7px solid transparent;
	border-left-color: var(--edge-deep);
	border-right-width: 0;
}
.chain img { width: 48px; height: 48px; margin-bottom: 2px; }

.news {
	display: grid;
	gap: 18px;
	align-items: center;
}
.news-list {
	list-style: none;
	margin: 6px 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
}
.news-list li {
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--plate);
	border: 2px solid var(--edge);
	border-left: 6px solid var(--gold);
}

.follow-links {
	display: grid;
	gap: 12px;
	margin-top: 12px;
}
.tg {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border-radius: 16px;
	background: var(--plate);
	border: 2px solid var(--edge);
	box-shadow: 0 5px 0 var(--edge);
	text-decoration: none;
}
.tg:hover { background: var(--card); }
.tg:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--edge); }
.tg b { display: block; font-size: 1.05rem; }
.tg small { display: block; font-size: 0.88rem; color: var(--ink-soft); }
.tg-mark {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #2aa3df url("img/telegram.svg") center / 26px no-repeat;
}

footer {
	padding: 20px 0 calc(28px + env(safe-area-inset-bottom));
	background: var(--plate);
	border-top: 2px solid var(--edge);
	font-size: 0.88rem;
	color: var(--ink-soft);
}
footer p { margin: 0 auto; }
footer a { color: var(--ink-soft); }

@media (max-width: 359px) {
	.brand span { display: none; }
}

@media (min-width: 700px) {
	:root { --band-pad: 44px; }
	.band:first-child { padding-top: 48px; }
	.hero {
		grid-template-columns: 1fr 1.35fr;
		align-items: center;
		gap: 40px;
	}
	.art-hero { order: 0; }
	.btn-big { display: inline-block; padding: 20px 56px; }
	.board { padding: 26px 26px 20px; }
	.ranks { grid-template-columns: 1fr 1fr; column-gap: 12px; }
	.ranks { grid-auto-flow: column; grid-template-rows: repeat(5, auto); }
	.facts { grid-template-columns: 1fr 1fr; }
	.age-strip {
		grid-auto-flow: row;
		grid-template-columns: repeat(3, 1fr);
		grid-auto-columns: auto;
		margin: 16px 0 0;
		padding: 4px 0 6px;
		overflow: visible;
	}
	.split { grid-template-columns: 1.1fr 1fr; gap: 36px; }
	.split-flip { grid-template-columns: 1fr 1.25fr; }
	.split-flip > :first-child { order: 2; }
	h1 { font-size: clamp(2.6rem, 7.5vw, 4.6rem); }
	.news { grid-template-columns: 1.2fr 1fr; gap: 36px; }
	.follow-links { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1000px) {
	.age-strip { grid-template-columns: repeat(6, 1fr); gap: 14px; }
	.age b { font-size: 0.98rem; }
	.band::before {
		opacity: 1;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--measure) / 2 - 24px), rgba(0, 0, 0, 0.4) calc(50% - var(--measure) / 2 + 120px), rgba(0, 0, 0, 0.4) calc(50% + var(--measure) / 2 - 120px), #000 calc(50% + var(--measure) / 2 + 24px));
		mask-image: linear-gradient(90deg, #000 calc(50% - var(--measure) / 2 - 24px), rgba(0, 0, 0, 0.4) calc(50% - var(--measure) / 2 + 120px), rgba(0, 0, 0, 0.4) calc(50% + var(--measure) / 2 - 120px), #000 calc(50% + var(--measure) / 2 + 24px));
	}
}

@media (min-width: 1100px) {
	html { font-size: 106.25%; }
	:root { --band-pad: 64px; --gutter: 32px; }
	.band:first-child { padding-top: 64px; padding-bottom: 72px; }
	h1 { font-size: 5.2rem; }
	h2 { font-size: 2.35rem; margin-bottom: 14px; }
	.lede { font-size: 1.45rem; }
	.hero { grid-template-columns: 1fr 1.5fr; gap: 56px; }
	.board {
		display: grid;
		grid-template-columns: minmax(16rem, 1fr) 2.6fr;
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "head body" "season body" "sub body" "foot body";
		column-gap: 40px;
		padding: 32px 32px 28px;
	}
	.board-head { grid-area: head; align-items: flex-start; }
	.board-icon { width: 64px; height: 64px; }
	.season { grid-area: season; }
	.board-sub { grid-area: sub; }
	.board-body { grid-area: body; }
	.board-foot { grid-area: foot; align-self: end; flex-direction: column; margin: 12px 0 0; }
	.ranks { margin: 0; gap: 8px; column-gap: 14px; }
	.rank { padding: 10px 14px; }
	.facts { grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 22px; }
	.facts li { grid-template-columns: 1fr; padding: 22px 20px 20px; gap: 12px; }
	.facts img { width: 64px; height: 64px; }
	.age-strip { gap: 18px; margin-top: 22px; }
	.split { gap: 64px; }
	.chain { gap: 10px; margin-top: 20px; }
	.chain li { width: 76px; }
	.chain li + li::before { left: -12px; top: 26px; }
	.chain img { width: 56px; height: 56px; }
	.news { gap: 56px; }
	.follow-links { gap: 20px; margin-top: 18px; }
	.tg { padding: 20px 22px; gap: 18px; }
	.tg-mark { width: 52px; height: 52px; background-size: 30px; }
}

@media (min-width: 1500px) {
	html { font-size: 112.5%; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn, .tg { transition: none; }
	.btn:active, .tg:active { transform: none; }
}