/*
 * The shared page masthead (2026-10-14): one hero for news, wiki, support, stats, features, rules,
 * the Valkyrian Chronicles and the account panel, so every page opens with the same structure.
 * It is the news list's masthead made generic: the homepage key art (includes/helpers/hero_art.php)
 * framed as a whole cast, the article page's shade recipe fading into #0b0a09, breadcrumb on top,
 * the Cinzel gold-gradient title with the article's diamond rule, a one-line dek, an optional meta
 * line and stat chips, and an optional dock at the bottom (a segmented control of tabs, a search).
 * Every masthead is the same height, whatever it holds (owner, 2026-10-15): see --ph-h below.
 * Markup: site_page_hero() in includes/helpers/page_hero.php. Static on purpose: no animation on
 * or near the hero (see the seam note in css/news-article.css).
 */
:root {
	--ph-ink: #0b0a09;
	--ph-gold: #e0bc72;
	--ph-header: 71px;
	--ph-gold-btn: linear-gradient(180deg, #ffe09a 0%, #e8b955 48%, #b9832b 100%);
}

/* The header is fixed (71px): keyboard focus and #anchors land below it, never under it. */
html {
	scroll-padding-top: calc(var(--ph-header) + 16px);
}

.page-hero .ph-icon {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

/* =========================================================================
   Masthead
   ========================================================================= */
.page-hero {
	/* Desktop art: the homepage key art at 66% scale, so the whole cast (elves, knight, orc) lines up
	   right of the title instead of the homepage's close-up of the knight. --ph-art-x = where the
	   art's centre sits, right of the page centre (the knight's face is 66px right of it). */
	--ph-art-s: 0.66;
	/* 200px at 992 (continuous with the tablet value) growing to 364px at 1366+, so the knight never
	   gets pushed against the right edge on a small laptop (his face stays at 77-81% of the width). */
	--ph-art-x: clamp(200px, (100vw - 992px) * 0.44 + 200px, 364px);
	--ph-art-top: 0px;
	/* One height and one layout for every masthead (owner, 2026-10-15: "the same height on all", then
	   "the navigation sits somewhere else"): the trail and the title always start --ph-top below the
	   header, the dock (tabs, search) always sits on the bottom edge, and the dek / meta / chips fill
	   the middle. --ph-h is sized for the fullest one (a two-line dek, a meta line and the dock). */
	--ph-h: clamp(440px, 44vh, 460px);
	--ph-top: 40px;
	--ph-dock-gap: 28px;
	position: relative;
	isolation: isolate;
	/* No overflow:hidden here: the art clips itself (.page-hero__art), so the tabs' drop shadow can
	   fall past the hero edge instead of being cut into a 1-2 level step there. */
	display: flex;
	align-items: stretch;
	min-height: var(--ph-h);
	padding: calc(var(--ph-header) + var(--ph-top)) 0 0;
	background: var(--ph-ink);
}
.page-hero__art {
	position: absolute;
	z-index: -2;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: block;
	overflow: hidden;
}
.page-hero__img {
	position: absolute;
	top: var(--ph-art-top);
	left: calc(50% + var(--ph-art-x) - 1280px * var(--ph-art-s));
	display: block;
	width: calc(2560px * var(--ph-art-s));
	height: calc(860px * var(--ph-art-s));
	max-width: none;
}
/* The article hero's shade (.na-hero__shade) with a pocket behind the title column in between.
   The pocket is anchored to the page centre (like the art), so it sits behind the text at every
   width and never darkens the cast on a wide screen. */
.page-hero__shade {
	position: absolute;
	z-index: -1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	background:
		radial-gradient(110% 85% at 16% 100%, rgba(11, 10, 9, 0.9) 0%, rgba(11, 10, 9, 0.4) 55%, rgba(11, 10, 9, 0) 82%),
		linear-gradient(90deg, rgba(11, 10, 9, 0.62) calc(50% - 700px), rgba(11, 10, 9, 0.32) calc(50% - 150px), rgba(11, 10, 9, 0) calc(50% + 130px)),
		linear-gradient(180deg, rgba(11, 10, 9, 0.78) 0%, rgba(11, 10, 9, 0.12) 26%, rgba(11, 10, 9, 0.28) 58%, #0b0a09 94%, #0b0a09 100%);
}
.page-hero__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-bottom: 28px;
}
.page-hero--plain .page-hero__inner {
	padding-bottom: 34px;
}
.page-hero .page-hero__crumbs {
	margin: 0 0 20px;
}
.page-hero__title {
	margin: 0;
	font-family: 'Cinzel', 'EB Garamond', serif;
	font-weight: 700;
	font-size: clamp(40px, 4.6vw, 64px);
	line-height: 1.04;
	letter-spacing: 0.04em;
	color: #f6e3b4;
	background: linear-gradient(180deg, #fff6dc 0%, #f1d595 46%, #c99a3e 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.7));
	text-wrap: balance;
}
/* Long titles (a wiki article, "Valkyrian Chronicles") step down a size. */
.page-hero__title--long {
	font-size: clamp(32px, 3.6vw, 52px);
	line-height: 1.08;
}
/* Cinzel has no Greek / Cyrillic: those glyphs come from EB Garamond (main.css loads it), set in
   capitals so "Νέα" / "Новости" read like Cinzel's capitals instead of a lowercase serif. */
html[lang="el"] .page-hero__title,
html[lang="ru"] .page-hero__title {
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* The article's diamond rule (.na-body hr), short and left-aligned under the title. */
.page-hero__rule {
	position: relative;
	display: block;
	width: 168px;
	height: 1px;
	margin: 14px 0 16px 5px;
	background: linear-gradient(90deg, rgba(224, 188, 114, 0.7), rgba(224, 188, 114, 0.35) 45%, rgba(224, 188, 114, 0));
}
.page-hero__rule::before {
	content: '';
	position: absolute;
	top: 50%;
	left: -4px;
	width: 9px;
	height: 9px;
	transform: translateY(-50%) rotate(45deg);
	border: 1px solid rgba(224, 188, 114, 0.85);
	background: #12100e;
	box-shadow: 0 0 10px rgba(255, 196, 92, 0.35);
}
.page-hero__lead {
	max-width: 560px;
	margin: 0;
	color: rgba(240, 231, 212, 0.88);
	font-family: 'Open Sans', sans-serif;
	font-size: 16.5px;
	line-height: 1.6;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
	text-wrap: pretty;
}
.page-hero__lead strong {
	color: #f6e3b4;
	font-weight: 700;
}
/* The meta line (.na-hero__meta style): "Page 2 of 3", "3,225 accounts", ... */
.page-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin: 12px 0 0;
	color: rgba(236, 226, 206, 0.84);
	font: 600 13px/1.2 'Montserrat', sans-serif;
	letter-spacing: 0.04em;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.page-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.page-hero__meta-item strong {
	color: #f6e3b4;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.page-hero__meta-sep {
	width: 5px;
	height: 5px;
	transform: rotate(45deg);
	background: var(--ph-gold);
	opacity: 0.7;
}
.page-hero__meta .ph-icon {
	color: var(--ph-gold);
}
/* Stat chips (the Victoria rates): small glass pills with an item icon. */
.page-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
.page-hero__stat {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	/* the round icon sits as far from the chip's left edge as from its top and bottom (3px) */
	padding: 0 12px 0 2px;
	border: 1px solid rgba(224, 188, 114, 0.3);
	border-radius: 999px;
	background: rgba(14, 12, 10, 0.72);
	color: rgba(236, 226, 206, 0.86);
	font: 700 11px/1 'Montserrat', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	box-shadow: inset 0 1px 0 rgba(255, 236, 190, 0.06);
}
.page-hero__stat img {
	/* A round badge with the game's square icon whole inside it (EXP / SP are framed text, so a
	   circle cut straight out of the icon lost the letters). */
	width: 28px;
	height: 28px;
	padding: 3px;
	border: 1px solid rgba(224, 188, 114, 0.45);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 35%, #2c2418 0%, #0e0c0a 100%);
	object-fit: contain;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.page-hero__stat strong {
	color: #ffd27a;
	font-size: 12.5px;
	letter-spacing: 0.04em;
}

/* The dock: the segmented control (or a search), and a gold hairline running on to the container edge.
   It sits on the masthead's bottom edge (margin-top: auto), at least --ph-dock-gap below the text. */
.page-hero__dock {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: auto;
	padding-top: var(--ph-dock-gap);
}
.page-hero__dock::after {
	content: '';
	flex: 1 1 auto;
	/* only the room the tabs leave: a long tab row is never cut to make space for it */
	min-width: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(224, 188, 114, 0.45), rgba(224, 188, 114, 0.08) 70%, rgba(224, 188, 114, 0));
}
/* Stat chips in the dock (stats_dock): the tabs' place, on one row while they fit. */
.page-hero__dock .page-hero__stats {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}
/* A link button at the dock's right end (the Features page's "Valkyrian Chronicles"), styled like
   the active tab, after the hairline. */
.page-hero__dock--action::after {
	order: 1;
}
.page-hero__action {
	order: 2;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 18px 0 20px;
	border-radius: 10px;
	background: var(--ph-gold-btn);
	color: #1b1307;
	font: 700 12px/1.15 'Montserrat', sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 8px 22px -10px rgba(255, 190, 80, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
	transition: filter 0.2s ease;
}
.page-hero__action:hover,
.page-hero__action:focus {
	color: #1b1307;
	text-decoration: none;
	filter: brightness(1.07);
}
.page-hero__action:focus-visible {
	outline: 2px solid #fff3d1;
	outline-offset: 2px;
}
/* A dock that ends in a search box: the hairline sits between the tabs and the search, and only
   takes the room they leave (none when they need it all). */
.page-hero__dock--search::after {
	order: 1;
	min-width: 0;
}
.page-hero__dock--search .page-hero__search {
	order: 2;
}

/* ---------- Segmented control: the tabs, with optional counts ---------- */
.page-seg {
	display: inline-flex;
	flex: 0 1 auto;
	min-width: 0;
	gap: 4px;
	padding: 5px;
	border: 1px solid rgba(224, 188, 114, 0.3);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(24, 21, 17, 0.9) 0%, rgba(14, 12, 10, 0.92) 100%);
	box-shadow:
		0 18px 40px -22px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 rgba(255, 236, 190, 0.07);
}
.page-seg__item {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 40px;
	padding: 0 14px 0 18px;
	border-radius: 8px;
	color: rgba(232, 220, 196, 0.78);
	font: 700 12px/1.15 'Montserrat', sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* A tab without a count is padded evenly. */
.page-seg__item--plain {
	padding: 0 18px;
}
.page-seg__count {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border: 1px solid rgba(224, 188, 114, 0.22);
	border-radius: 999px;
	background: rgba(224, 188, 114, 0.08);
	color: rgba(240, 220, 174, 0.8);
	font: 700 10.5px/1 'Montserrat', sans-serif;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
}
.page-seg__item:hover {
	color: #fff3d1;
	background: rgba(224, 188, 114, 0.1);
	text-decoration: none;
}
/* A tab without content: dimmed, still a link (its page shows the empty state). 0.58 keeps it at
   about 5:1 on the control (0.48 was about 4:1, under AA for 12px text). */
.page-seg__item--empty {
	color: rgba(232, 220, 196, 0.58);
}
.page-seg__item--empty .page-seg__count {
	border-color: rgba(224, 188, 114, 0.14);
	background: transparent;
	color: rgba(240, 220, 174, 0.56);
}
.page-seg__item--active,
.page-seg__item--active:hover {
	color: #1b1307;
	background: var(--ph-gold-btn);
	box-shadow: 0 8px 22px -10px rgba(255, 190, 80, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.page-seg__item--active .page-seg__count {
	border-color: rgba(27, 19, 7, 0.22);
	background: rgba(27, 19, 7, 0.12);
	color: #1b1307;
}
.page-seg__item:focus-visible {
	outline: 2px solid rgba(255, 210, 122, 0.9);
	outline-offset: -2px;
}
.page-seg__item--active:focus-visible {
	outline-color: #fff3d1;
	outline-offset: 2px;
}

/* ---------- Search in the dock (the wiki) ---------- */
.page-hero__search {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	width: 260px;
	max-width: 100%;
	height: 52px;
	padding: 5px;
	border: 1px solid rgba(224, 188, 114, 0.3);
	border-radius: 12px;
	background: linear-gradient(180deg, rgba(24, 21, 17, 0.9) 0%, rgba(14, 12, 10, 0.92) 100%);
	box-shadow:
		0 18px 40px -22px rgba(0, 0, 0, 0.95),
		inset 0 1px 0 rgba(255, 236, 190, 0.07);
}
.page-hero__search-input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	padding: 0 12px 0 14px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #f2e9d6;
	font: 500 14px/1 'Open Sans', sans-serif;
	outline: none;
	/* main.css eases every input (0.5s, all properties): the folded field must show at once, or it is
	   still hidden when the button focuses it */
	transition: none;
}
.page-hero__search-input::placeholder {
	color: rgba(214, 204, 186, 0.55);
}
.page-hero__search-input::-webkit-search-cancel-button {
	filter: grayscale(1) brightness(1.4);
}
.page-hero__search:focus-within {
	border-color: rgba(255, 210, 122, 0.75);
}
.page-hero__search-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--ph-gold-btn);
	color: #1b1307;
	cursor: pointer;
	box-shadow: 0 8px 22px -10px rgba(255, 190, 80, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.page-hero__search-btn:focus-visible {
	outline: 2px solid #fff3d1;
	outline-offset: 2px;
}
.page-hero__search-btn svg {
	width: 17px;
	height: 17px;
}
/* closes the folded search (below 1200px), see the scroll section */
.page-hero__search-close {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-right: 4px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: rgba(236, 226, 206, 0.8);
	cursor: pointer;
}
.page-hero__search-close:hover {
	color: #fff3d1;
	background: rgba(224, 188, 114, 0.1);
}
.page-hero__search-close:focus-visible {
	outline: 2px solid rgba(255, 210, 122, 0.9);
	outline-offset: -2px;
}
.page-hero__search-close svg {
	width: 16px;
	height: 16px;
}

/* =========================================================================
   Focus (main.css removes outlines on a:focus)
   ========================================================================= */
.page-hero a:focus-visible:not(.page-seg__item) {
	outline: 2px solid rgba(255, 210, 122, 0.9);
	outline-offset: 3px;
}

/* =========================================================================
   Many tabs (the wiki, stats): tighter segments, and the control scrolls sideways instead of
   spilling out when it still doesn't fit. page_hero.php marks the side(s) with hidden tabs
   (.is-more-start / .is-more-end) and that edge fades, so a cut tab reads as "more this way".
   ========================================================================= */
.page-seg--scroll {
	max-width: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.page-seg--scroll::-webkit-scrollbar {
	display: none;
}
.page-seg--scroll .page-seg__item {
	gap: 8px;
	padding: 0 12px 0 14px;
	letter-spacing: 0.11em;
}
.page-seg--scroll .page-seg__item--plain {
	padding: 0 14px;
}
.page-seg--scroll.is-more-end {
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent 100%);
}
.page-seg--scroll.is-more-start {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px);
	mask-image: linear-gradient(90deg, transparent 0, #000 36px);
}
.page-seg--scroll.is-more-start.is-more-end {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 44px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 44px), transparent 100%);
}
/* 992-1309px: the wiki's seven tabs (931px) share the row with the search only when they are a
   little tighter (831px), and the search a little narrower. Stats and news are untouched. */
@media (min-width: 992px) and (max-width: 1309.98px) {
	.page-hero__dock--search .page-seg--scroll {
		gap: 2px;
	}
	.page-hero__dock--search .page-seg--scroll .page-seg__item {
		gap: 6px;
		padding: 0 8px 0 10px;
		letter-spacing: 0.08em;
	}
	.page-hero__dock--search .page-seg--scroll .page-seg__item--plain {
		padding: 0 10px;
	}
	.page-hero__dock--search .page-hero__search {
		width: 220px;
	}
	/* the placeholder ("At least three letters") still fits */
	.page-hero__dock--search .page-hero__search-input {
		padding: 0 8px 0 12px;
	}
}
/* 992-1199px (a 930px container): every long tab row gets the same tighter tabs, so six or seven
   tabs (the rules in Portuguese / Russian, stats) still fit on one row. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	.page-seg--scroll {
		gap: 2px;
	}
	.page-seg--scroll .page-seg__item {
		gap: 6px;
		padding: 0 8px 0 10px;
		letter-spacing: 0.08em;
	}
	.page-seg--scroll .page-seg__item--plain {
		padding: 0 10px;
	}
}
/* Below 1200px the search folds into its button at the end of the tabs' row, so the wiki's dock
   stays one row like every other page's (and its masthead the same height). The button opens the
   field over the row (page_hero.php); the close button or Escape folds it again. */
@media (max-width: 1199.98px) {
	.page-hero__dock--search {
		position: relative;
		gap: 12px;
	}
	.page-hero__dock--search::after {
		display: none;
	}
	.page-seg--scroll {
		display: flex;
	}
	.page-hero__dock--search .page-hero__search {
		width: auto;
		margin-left: auto;
	}
	.page-hero__dock--search .page-hero__search-input {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		visibility: hidden;
	}
	.page-hero__dock--search.is-search-open .page-seg {
		visibility: hidden;
	}
	.page-hero__dock--search.is-search-open .page-hero__search {
		position: absolute;
		z-index: 2;
		top: var(--ph-dock-gap);
		right: 0;
		bottom: 0;
		left: 0;
		height: auto;
		margin: 0;
		background: linear-gradient(180deg, rgba(24, 21, 17, 0.9) 0%, rgba(14, 12, 10, 0.92) 100%), #0f0d0b;
		border-color: rgba(255, 210, 122, 0.75);
	}
	.page-hero__dock--search.is-search-open .page-hero__search-input {
		position: static;
		width: auto;
		height: 100%;
		padding: 0 12px 0 14px;
		visibility: visible;
	}
	.page-hero__dock--search.is-search-open .page-hero__search-close {
		display: inline-flex;
	}
	/* one cross only: the close button (the field's own clear cross would sit right next to it) */
	.page-hero__dock--search .page-hero__search-input::-webkit-search-cancel-button {
		display: none;
		-webkit-appearance: none;
	}
}

/* =========================================================================
   Tablet
   ========================================================================= */
/* Up to 1199px the elves sit under the dek, so the pocket behind the text is deeper. */
@media (max-width: 1199.98px) {
	.page-hero__shade {
		background:
			radial-gradient(110% 85% at 16% 100%, rgba(11, 10, 9, 0.92) 0%, rgba(11, 10, 9, 0.45) 55%, rgba(11, 10, 9, 0) 82%),
			linear-gradient(90deg, rgba(11, 10, 9, 0.8) 0%, rgba(11, 10, 9, 0.58) 40%, rgba(11, 10, 9, 0) 66%),
			linear-gradient(180deg, rgba(11, 10, 9, 0.78) 0%, rgba(11, 10, 9, 0.12) 26%, rgba(11, 10, 9, 0.28) 58%, #0b0a09 94%, #0b0a09 100%);
	}
}
/* Short laptop screens (1366x768 / 1280x720 minus the browser bars): a lower masthead and tighter
   spacing, so the page's own content is still above the fold. */
@media (min-width: 992px) and (max-height: 760px) {
	.page-hero {
		--ph-h: 416px;
		--ph-top: 28px;
		--ph-dock-gap: 22px;
	}
	.page-hero .page-hero__crumbs {
		margin-bottom: 14px;
	}
	.page-hero__inner {
		padding-bottom: 24px;
	}
}
@media (max-width: 991.98px) {
	/* the chips and the action button keep one row: no hairline, a tighter button */
	.page-hero__dock--action {
		gap: 12px;
	}
	.page-hero__dock--action::after {
		display: none;
	}
	.page-hero__dock .page-hero__stats {
		gap: 6px;
	}
	.page-hero__dock .page-hero__stat {
		gap: 5px;
		padding: 0 8px 0 2px;
	}
	.page-hero__action {
		margin-left: auto;
		padding: 0 14px;
		letter-spacing: 0.06em;
	}
	.page-hero__action svg {
		display: none;
	}
	/* the same cast at 66%, the knight's face at about three quarters of the width */
	.page-hero {
		--ph-art-x: clamp(120px, (100vw - 768px) * 0.36 + 120px, 200px);
		--ph-h: 440px;
	}
	.page-hero__lead {
		max-width: 440px;
		font-size: 16px;
	}
}

/* =========================================================================
   Phone: the homepage's phone crops (432 / 768 CSS px wide, 480 tall), shown unscaled
   ========================================================================= */
@media (max-width: 767.98px) {
	.page-hero {
		--ph-h: 458px;
		--ph-top: 24px;
		--ph-dock-gap: 22px;
	}
	/* A deep trail (3+ crumbs) stops at its parent: the current page is the title or the active tab
	   right below it, and the trail stays one line, so the title starts at the same height on every
	   page. */
	.page-hero .page-hero__crumbs .page-hero__crumb--last {
		display: none;
	}
	.page-hero__img {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: none;
		object-position: 50% 0;
	}
	.page-hero__shade {
		background:
			radial-gradient(120% 80% at 0% 100%, rgba(11, 10, 9, 0.9) 0%, rgba(11, 10, 9, 0.45) 55%, rgba(11, 10, 9, 0) 85%),
			linear-gradient(90deg, rgba(11, 10, 9, 0.62) 0%, rgba(11, 10, 9, 0.34) 48%, rgba(11, 10, 9, 0) 74%),
			linear-gradient(180deg, rgba(11, 10, 9, 0.7) 0%, rgba(11, 10, 9, 0.1) 24%, rgba(11, 10, 9, 0.3) 52%, #0b0a09 92%, #0b0a09 100%);
	}
	.page-hero__inner,
	.page-hero--plain .page-hero__inner {
		padding-bottom: 22px;
	}
	.page-hero .page-hero__crumbs {
		margin-bottom: 16px;
	}
	/* On the phone crops the knight's pale wing and gold hair sit right behind a deep trail's last
	   crumb ("Home > News > Dorf Mode"): gold on gold. The trail gets a soft dark scrim exactly as
	   long as itself (the trail shrinks to its content and wraps between crumbs instead of
	   scrolling, so it can never push the page sideways), plus a dark halo instead of main.css's
	   gold glow. */
	.page-hero .page-hero__crumbs {
		position: relative;
		flex-wrap: wrap;
		width: fit-content;
		/* leaves room for the scrim's 36px fade-out past the last crumb (the container gutter is 15px+) */
		max-width: calc(100% - 22px);
		overflow: visible;
		padding-right: 0;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.page-hero .page-hero__crumbs::after {
		content: '';
		position: absolute;
		z-index: -1;
		top: -12px;
		right: -36px;
		bottom: -12px;
		left: -15px;
		background: linear-gradient(90deg, rgba(11, 10, 9, 0.74) 0%, rgba(11, 10, 9, 0.74) calc(100% - 44px), rgba(11, 10, 9, 0) 100%);
		-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
		mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
		pointer-events: none;
	}
	.page-hero .page-hero__crumbs .breadcrumb__item {
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 8px rgba(11, 10, 9, 0.9);
	}
	/* 40px down to 11vw on the narrowest phones: a long single word in capitals ("ΛΟΓΑΡΙΑΣΜΟΣ",
	   "СТАТИСТИКА") stays inside a 320px screen instead of pushing the page sideways */
	.page-hero__title {
		font-size: min(40px, 11vw);
	}
	.page-hero__rule {
		width: 120px;
		margin: 12px 0 14px 5px;
	}
	.page-hero__lead {
		max-width: 30em;
		font-size: 15px;
		line-height: 1.55;
		/* the phone crop puts the knight's pale pauldron behind the first line: a tighter halo */
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.85);
	}
	.page-hero__meta {
		gap: 8px 14px;
		font-size: 12px;
	}
	/* on a wrapped line a diamond would open the second row: the gap separates the items instead */
	.page-hero__meta-sep {
		display: none;
	}
	/* an item the page says elsewhere too (a wiki article's category, in its trail) */
	.page-hero__meta-item--wide,
	.page-hero__action--wide {
		display: none;
	}
	.page-hero__dock::after {
		display: none;
	}
	/* Full width, one row; a long translation wraps inside its own segment, so no tab is ever hidden
	   off the edge or left alone on a second row. */
	.page-seg:not(.page-seg--scroll) {
		display: flex;
		width: 100%;
		padding: 4px;
		border-radius: 10px;
	}
	/* (min-width stays auto: a segment never shrinks below its longest word, so words never split)
	   Tight insets: spare width is shared out by flex-grow anyway, and they let the longest set
	   ("Todas as notícias") fit on one line from 576px instead of wrapping two segments. */
	.page-seg:not(.page-seg--scroll) .page-seg__item {
		flex: 1 1 auto;
		gap: 7px;
		min-height: 40px;
		padding: 6px;
		border-radius: 7px;
		font-size: 11px;
		letter-spacing: 0.06em;
		white-space: normal;
		text-align: center;
	}
	.page-seg__label {
		overflow-wrap: break-word;
	}
	.page-seg__count {
		min-width: 20px;
		height: 18px;
		padding: 0 5px;
		font-size: 10px;
	}
	/* many tabs on a phone: the same scrolling strip, a little tighter */
	.page-seg--scroll {
		padding: 4px;
		border-radius: 10px;
	}
	.page-seg--scroll .page-seg__item {
		min-height: 38px;
		padding: 0 12px;
		font-size: 11px;
		letter-spacing: 0.1em;
	}
	.page-hero__search {
		height: 48px;
		padding: 4px;
	}
	.page-hero__search-btn,
	.page-hero__search-close {
		width: 38px;
		height: 38px;
	}
	/* iOS zooms into a focused field under 16px */
	.page-hero__search-input {
		font-size: 16px;
	}
	.page-hero__stats {
		margin-top: 14px;
	}
}
@media (max-width: 575.98px) {
	/* two by two */
	.page-seg:not(.page-seg--scroll) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 432px) {
	.page-hero__img {
		object-position: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-seg__item {
		transition: none;
	}
}

/* The account panel (owner, 2026-10-15): no dock, and the masthead ends with its text instead of
   keeping the shared height, so the panel starts right under it. Last in the file so it wins over
   every breakpoint's --ph-h. */
.page-hero.page-hero--compact {
	--ph-h: 0px;
}