/* ==========================================================================
   Essly test-index prototype (page-test-index.php)
   Light modern layout built after the approved mock-up.
   Scoped to the prototype page only; other templates are untouched.
   ========================================================================== */

body.page-template-page-test-index,
body.essly-front {
	background: #f8fafc;
}

body.page-template-page-test-index .site-content,
body.essly-front .site-content {
	max-width: none;
	padding: 0;
	background: #f8fafc;
}

body.page-template-page-test-index .site-content-inner,
body.essly-front .site-content-inner {
	display: block;
}

.essly-test-index {
	--eti-bg: #f8fafc;
	--eti-card: #ffffff;
	--eti-border: #e2e8f0;
	--eti-border-strong: #cbd5e1;
	--eti-text: #0f172a;
	--eti-muted: #64748b;
	--eti-faint: #94a3b8;
	--eti-soft: #f1f5f9;
	--eti-accent: #4f46e5;
	--eti-accent-text: #4338ca;
	--eti-accent-soft: #eef2ff;
	--eti-radius-sm: 10px;
	--eti-radius: 16px;
	--eti-radius-lg: 24px;
	/*
	 * Геометрия рельсов карточек. Ширина рельса не меняется: доступное место
	 * делится поровну между N карточками и N-1 промежутками, поэтому в видимой
	 * части помещается ровно N анонсов, а следующий начинается строго за краем
	 * и не обрезается наполовину. Дальше — только прокрутка или стрелки.
	 */
	--eti-rail-gap: 1.25rem;
	--eti-rail-per-view: 3;
	--eti-shadow-sm: 0 1px 2px rgba( 15, 23, 42, .04 );
	--eti-shadow: 0 12px 25px -5px rgba( 15, 23, 42, .08 ), 0 8px 10px -6px rgba( 15, 23, 42, .04 );
	color: var(--eti-text);
}

.essly-test-index [data-accent="indigo"] {
	--eti-accent: #4f46e5;
	--eti-accent-text: #4338ca;
	--eti-accent-soft: #eef2ff;
}

.essly-test-index [data-accent="rose"] {
	--eti-accent: #e11d48;
	--eti-accent-text: #be123c;
	--eti-accent-soft: #fff1f2;
}

.essly-test-index [data-accent="emerald"] {
	--eti-accent: #059669;
	--eti-accent-text: #047857;
	--eti-accent-soft: #ecfdf5;
}

.essly-test-index *,
.essly-test-index *::before,
.essly-test-index *::after {
	box-sizing: border-box;
}

.essly-test-index img {
	display: block;
	max-width: 100%;
	height: auto;
}

.essly-test-index p,
.essly-test-index h1,
.essly-test-index h2,
.essly-test-index h3 {
	margin: 0;
}

/* The parent theme renders an empty 10em block before every <p> as a spacing
   fix for WordPress lists. The prototype has no such lists, so the invisible
   spacer is removed here (it also used to stretch the category pill). */
.essly-test-index p::before {
	content: none;
}

.essly-test-index a {
	text-decoration: none;
}

.essly-test-index [hidden] {
	display: none !important;
}

.essly-test-icon {
	width: 1em;
	height: 1em;
	flex: none;
}

.essly-test-wrap {
	width: min( 1240px, 100% - 2.5rem );
	margin: 0 auto;
	padding: 2.5rem 0 4rem;
}

/* Toolbar: demo note ------------------------------------------------------- */

.essly-test-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	margin-bottom: 1.5rem;
}

.essly-test-demo-note {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: .4rem .85rem;
	background: var(--eti-card);
	border: 1px dashed var(--eti-border-strong);
	border-radius: 999px;
	color: var(--eti-muted);
	font-size: .75rem;
}

/* Hero ----------------------------------------------------------------- */

.essly-test-hero__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: 1rem;
}

.essly-test-hero__title {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--eti-muted);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.essly-test-hero__dot {
	width: .625rem;
	height: .625rem;
	border-radius: 50%;
	background: #4f46e5;
	box-shadow: 0 0 0 4px rgba( 79, 70, 229, .15 );
}

.essly-test-pill {
	display: inline-flex;
	align-items: center;
	/* The label hugs its own text instead of being stretched by the flex row. */
	flex: 0 0 auto;
	width: fit-content;
	max-width: 100%;
	padding: .3rem .8rem;
	background: #eef2ff;
	border: 1px solid #c7d2fe;
	border-radius: 999px;
	color: #4338ca;
	font-size: .75rem;
	font-weight: 600;
}

.essly-test-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 290px, 1fr );
	gap: 1.5rem;
	align-items: stretch;
	transition: opacity .25s ease, transform .25s ease;
}

.essly-test-hero__grid.is-fading {
	opacity: 0;
	transform: translateY( 6px );
}

.essly-test-feature-column {
	display: flex;
	flex-direction: column;
}

.essly-test-feature {
	position: relative;
	display: flex;
	flex: 1;
	min-height: 480px;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: var(--eti-radius-lg);
	box-shadow: var(--eti-shadow-sm);
	overflow: hidden;
	transition: transform .3s cubic-bezier( .4, 0, .2, 1 ), box-shadow .3s, border-color .3s;
}

.essly-test-feature:hover {
	transform: translateY( -4px );
	border-color: var(--eti-border-strong);
	box-shadow: var(--eti-shadow);
}

.essly-test-feature__link {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 100%;
	color: #fff;
}

.essly-test-feature__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.essly-test-feature__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s ease;
}

.essly-test-feature:hover .essly-test-feature__image {
	transform: scale( 1.04 );
}

.essly-test-feature__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 2, 6, 23, .95 ) 0%, rgba( 15, 23, 42, .65 ) 45%, rgba( 15, 23, 42, .12 ) 100% );
}

.essly-test-feature__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 2rem;
}

.essly-test-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}

.essly-test-chip {
	display: inline-flex;
	align-items: center;
	padding: .35rem .85rem;
	background: var(--eti-accent);
	border-radius: 999px;
	box-shadow: 0 6px 14px -6px rgba( 15, 23, 42, .5 );
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.essly-test-feature__time,
.essly-test-feature__read {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #cbd5e1;
	font-size: .75rem;
}

/* Relation labels (cosplayer, fandom, character, ...). They wrap into as many
   rows as needed instead of being clipped to a single line. */
.essly-test-feature__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	min-width: 0;
}

.essly-test-feature__tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: .25rem .7rem;
	background: rgba( 255, 255, 255, .14 );
	border: 1px solid rgba( 255, 255, 255, .28 );
	border-radius: 999px;
	color: #f1f5f9;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

/* Labels of a taxonomy term are slightly quieter than relation labels. The
   `data-kind` attribute already tells them apart, so the colouring task can
   style every kind separately later without touching the markup. */
.essly-test-feature__tag[data-kind="term"],
.essly-test-feature__tag[data-kind="category"],
.essly-test-feature__tag[data-kind="tag"] {
	background: rgba( 255, 255, 255, .1 );
	border-color: rgba( 255, 255, 255, .22 );
	color: #e2e8f0;
}

.essly-test-feature__title,
.essly-test-feature__title:hover,
.essly-test-feature__title:focus,
.essly-test-feature__link .essly-test-feature__title,
.essly-test-feature__link:hover .essly-test-feature__title {
	color: #fff;
	font-size: clamp( 1.5rem, 3.2vw, 2.25rem );
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba( 2, 6, 23, .55 );
}

.essly-test-feature__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: #e2e8f0;
	font-size: .9375rem;
	line-height: 1.5;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.essly-test-feature__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	margin-top: .5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba( 255, 255, 255, .2 );
}

.essly-test-feature__metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	min-width: 0;
}

.essly-test-feature__metric {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: #cbd5e1;
	font-size: .75rem;
	white-space: nowrap;
}

.essly-test-feature__metric .essly-test-icon {
	font-size: .9rem;
	opacity: .85;
}

/* Рейтинг на фичерд-карточке: та же метрика, но с акцентной звездой. */
.essly-test-feature__metric--rating {
	color: #fde68a;
}

.essly-test-feature__more {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: #a5b4fc;
	font-size: .75rem;
	font-weight: 700;
}

.essly-test-feature:hover .essly-test-feature__more {
	color: #fff;
}

/* Image placeholders --------------------------------------------------- */

.essly-test-thumb {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient( 160deg, #eef2f7 0%, #dfe6ee 45%, #cbd5e1 100% );
	color: rgba( 100, 116, 139, .55 );
	font-size: 1.75rem;
}

.essly-test-thumb--hero {
	color: rgba( 148, 163, 184, .6 );
	font-size: 2.5rem;
}

/* Fresh materials feed ------------------------------------------------- */

.essly-test-recent {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: var(--eti-radius-lg);
	box-shadow: var(--eti-shadow-sm);
}

.essly-test-recent__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
}

.essly-test-recent__title {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .875rem;
	font-weight: 700;
}

.essly-test-recent__title .essly-test-icon {
	color: #f59e0b;
	font-size: 1rem;
}

.essly-test-recent__list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .75rem;
}

.essly-test-recent__empty {
	color: var(--eti-muted);
	font-size: .8125rem;
}

.essly-test-mini {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: var(--eti-radius);
	transition: border-color .25s, box-shadow .25s, transform .25s;
}

.essly-test-mini:hover {
	transform: translateY( -2px );
	border-color: var(--eti-border-strong);
	box-shadow: var(--eti-shadow);
}

.essly-test-mini__thumb {
	position: relative;
	display: block;
	flex: none;
	width: 4rem;
	height: 4rem;
	background: var(--eti-soft);
	border-radius: 12px;
	overflow: hidden;
}

.essly-test-mini__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.essly-test-mini__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.essly-test-mini__cat {
	color: var(--eti-accent-text);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.essly-test-mini__title {
	display: -webkit-box;
	overflow: hidden;
	color: var(--eti-text);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.essly-test-mini:hover .essly-test-mini__title {
	color: var(--eti-accent-text);
}

.essly-test-mini__time {
	color: var(--eti-faint);
	font-size: .6875rem;
}

/*
 * Right half of the compact card, two narrow columns side by side: the labels
 * of the record on the left and the three numbers on the right, each stacked
 * one item under another and centred inside its own column. The aside takes
 * only the width its two columns really need, so the text column next to it
 * keeps all the remaining space and sits right against the labels.
 */
.essly-test-mini__aside {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: start;
	gap: .75rem;
	flex: 0 1 auto;
	width: auto;
	max-width: 56%;
	min-width: 0;
	padding-left: .6rem;
	border-left: 1px solid var(--eti-border);
}

.essly-test-mini__tags {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .25rem;
	min-width: 0;
}

.essly-test-mini__tag {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: .15rem .5rem;
	background: var(--eti-soft);
	border: 1px solid var(--eti-border);
	border-radius: 999px;
	color: var(--eti-muted);
	font-size: .625rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.essly-test-mini__tag[data-kind="term"],
.essly-test-mini__tag[data-kind="category"],
.essly-test-mini__tag[data-kind="tag"] {
	background: transparent;
	border-style: dashed;
}

.essly-test-mini__stats {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
	color: var(--eti-faint);
	font-size: .6875rem;
	font-weight: 600;
	line-height: 1.3;
}

/* A record without labels has no first column, so the metrics take the whole
   row instead of leaving a gap where the tags would be. */
.essly-test-mini__aside--metrics {
	grid-template-columns: auto;
}

.essly-test-mini__stat {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	white-space: nowrap;
}

.essly-test-mini__stat .essly-test-icon {
	width: .8125rem;
	height: .8125rem;
	opacity: .75;
}

@media (max-width: 1199px) {
	/*
	 * The card is half as wide here: a quarter of it is already taken by the
	 * thumbnail, so two columns of equal share no longer fit. The aside drops
	 * under the text and takes the whole row instead of squeezing the title.
	 */
	.essly-test-mini {
		flex-wrap: wrap;
	}

	.essly-test-mini__aside {
		flex: 1 1 100%;
		width: auto;
		max-width: none;
		padding: .4rem 0 0;
		border-top: 1px solid var(--eti-border);
		border-left: 0;
	}

	/*
	 * The aside is full width here, so its two columns are centred as a pair
	 * and every tag and number stays centred inside its own column.
	 */
	.essly-test-mini__tags,
	.essly-test-mini__stats {
		align-items: center;
	}
}

/* Filter bar ----------------------------------------------------------- */

.essly-test-filterbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 2.5rem 0 3rem;
	padding: .75rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: 18px;
	box-shadow: var(--eti-shadow-sm);
}

.essly-test-tabs {
	display: flex;
	align-items: center;
	gap: .35rem;
	/*
	 * As a flex item the default `min-width: auto` refuses to shrink below the
	 * content, so `overflow-x: auto` never engages and the pills that do not
	 * fit are simply cut off by the clipping ancestor. `min-width: 0` lets the
	 * row shrink to the panel and turns the overflow into a real scroll area.
	 */
	min-width: 0;
	overflow-x: auto;
	padding: .15rem;
	scrollbar-width: none;
}

.essly-test-tabs::-webkit-scrollbar {
	display: none;
}

.essly-test-tab {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.25rem;
	background: transparent;
	border: 0;
	border-radius: 12px;
	color: var(--eti-muted);
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
	transition: background .2s, color .2s, box-shadow .2s;
}

.essly-test-tab .essly-test-icon {
	color: var(--eti-accent);
	font-size: 1rem;
}

.essly-test-tab:hover {
	background: var(--eti-soft);
	color: var(--eti-text);
}

.essly-test-tab.is-active {
	background: var(--eti-accent);
	box-shadow: 0 10px 18px -12px var(--eti-accent);
	color: #fff;
}

.essly-test-tab.is-active .essly-test-icon {
	color: #fff;
}

.essly-test-filterbar__more {
	display: flex;
	align-items: center;
	padding: 0 .5rem;
}

.essly-test-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--eti-accent-text);
	font-size: .75rem;
	font-weight: 700;
}

.essly-test-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--eti-soft);
	border: 1px solid var(--eti-border);
	border-radius: 50%;
	color: var(--eti-muted);
	font-size: .7rem;
	transition: background .2s, color .2s, border-color .2s;
}

.essly-test-link:hover .essly-test-circle {
	background: var(--eti-accent);
	border-color: var(--eti-accent);
	color: #fff;
}

/* Category sections ---------------------------------------------------- */

.essly-test-section {
	margin-bottom: 3.25rem;
}

.essly-test-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--eti-border);
}

.essly-test-section__intro {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.essly-test-section__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	font-size: clamp( 1.25rem, 2.4vw, 1.625rem );
	font-weight: 800;
	letter-spacing: -.01em;
}

.essly-test-section__bar {
	width: .75rem;
	height: 2rem;
	background: var(--eti-accent);
	border-radius: 999px;
}

.essly-test-count {
	padding: .2rem .7rem;
	background: var(--eti-accent-soft);
	border: 1px solid var(--eti-accent-soft);
	border-radius: 999px;
	color: var(--eti-accent-text);
	font-size: .6875rem;
	font-weight: 600;
}

.essly-test-section__desc {
	color: var(--eti-muted);
	font-size: .75rem;
}

.essly-test-section__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.essly-test-nav {
	display: inline-flex;
	gap: .4rem;
}

.essly-test-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: 12px;
	color: var(--eti-muted);
	font-size: .9rem;
	transition: background .2s, color .2s, border-color .2s, opacity .2s;
}

.essly-test-nav__btn:hover:not( [disabled] ) {
	background: var(--eti-soft);
	border-color: var(--eti-border-strong);
	color: var(--eti-text);
}

.essly-test-nav__btn[disabled] {
	opacity: .4;
	cursor: default;
}

.essly-test-rail {
	display: flex;
	gap: var(--eti-rail-gap);
	margin: 0 -.25rem;
	padding: .25rem .25rem 1rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	/*
	 * proximity, а не mandatory: у последних карточек snap-позиция находится за
	 * пределами прокручиваемой области, и при mandatory рельс «заклинивало» бы
	 * на них — до конца нельзя было бы домотать. proximity только подтягивает
	 * рельс к границе карточки, не блокируя прокрутку, а точный шаг стрелок
	 * задаёт JS (ширина карточки + промежуток).
	 */
	scroll-snap-type: x proximity;
	scroll-padding-left: .25rem;
}

.essly-test-rail:focus-visible {
	outline: 2px solid var(--eti-accent);
	outline-offset: 2px;
}

.essly-test-rail::-webkit-scrollbar {
	height: 6px;
}

.essly-test-rail::-webkit-scrollbar-track {
	background: transparent;
}

.essly-test-rail::-webkit-scrollbar-thumb {
	background: var(--eti-border-strong);
	border-radius: 999px;
}

/* Cards ---------------------------------------------------------------- */

.essly-test-card {
	display: flex;
	/*
	 * Ширина карточки = (ширина рельса - промежутки) / N, где N = --eti-rail-per-view.
	 * Так в видимой части помещается ровно N анонсов, а (N+1)-й целиком уходит за
	 * правый край: половины карточки больше не видно, до неё надо домотать.
	 * min-width защищает от нечитаемо узкой карточки на очень узких экранах —
	 * там рельс просто прокручивается, ничего не ломается.
	 */
	flex: 0 0 calc( ( 100% - ( var(--eti-rail-per-view) - 1 ) * var(--eti-rail-gap) ) / var(--eti-rail-per-view) );
	min-width: 260px;
	max-width: none;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: var(--eti-radius);
	box-shadow: var(--eti-shadow-sm);
	overflow: hidden;
	scroll-snap-align: start;
	transition: transform .3s cubic-bezier( .4, 0, .2, 1 ), box-shadow .3s, border-color .3s;
}

/*
 * Раньше у косплея и майнкрафта были собственные бóльшие ширины (340/360px) —
 * из-за них в рельс попадала ровно одна полная карточка плюс обрезок. Теперь все
 * рельсы считаются по одной формуле, поэтому направления выглядят одинаково.
 */

.essly-test-card:hover {
	transform: translateY( -4px );
	border-color: var(--eti-border-strong);
	box-shadow: var(--eti-shadow);
}

.essly-test-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
}

.essly-test-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background: var(--eti-soft);
	overflow: hidden;
}

.essly-test-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.essly-test-card:hover .essly-test-card__media img {
	transform: scale( 1.05 );
}

/*
 * Corner label stack on the media (WOW placeholder, cosplayer / fandom /
 * character). Wraps into up to three rows so long names never leave the frame.
 */
.essly-test-card__chips {
	position: absolute;
	top: .75rem;
	left: .75rem;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: .35rem;
	max-width: calc( 100% - 1.5rem );
}

.essly-test-card__chip {
	padding: .3rem .6rem;
	background: var(--eti-accent);
	border-radius: 8px;
	box-shadow: 0 6px 14px -8px rgba( 15, 23, 42, .6 );
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * Rating badge on the card media: the bottom-left corner of the picture, like
 * the labels sit in the top-left one. A dark pill keeps the score readable on
 * any photo, and a muted variant marks a record nobody has rated yet.
 */
.essly-test-card__rating {
	position: absolute;
	bottom: .75rem;
	left: .75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	max-width: calc( 100% - 1.5rem );
	padding: .3rem .6rem;
	background: rgba( 15, 23, 42, .72 );
	border: 1px solid rgba( 255, 255, 255, .22 );
	border-radius: 8px;
	box-shadow: 0 6px 14px -8px rgba( 15, 23, 42, .8 );
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

.essly-test-card__rating .essly-test-icon {
	color: #fbbf24;
	font-size: .875rem;
}

.essly-test-card__rating--empty {
	background: rgba( 15, 23, 42, .55 );
	color: rgba( 255, 255, 255, .72 );
	font-weight: 600;
}

.essly-test-card__rating--empty .essly-test-icon {
	color: rgba( 251, 191, 36, .6 );
}
/*
 * The hero keeps its rating in the metrics line instead of a badge on the
 * picture, so the star simply picks up the accent colour there. A record
 * without a single vote keeps the same slot but stays muted.
 */
.essly-test-feature__metric--rating-empty {
	color: rgba( 226, 232, 240, .6 );
}

.essly-test-feature__metric--rating-empty .essly-test-icon {
	color: rgba( 251, 191, 36, .55 );
}




.essly-test-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .6rem;
	padding: 1.25rem;
}

/*
 * Unified metrics row shown for every post type: date, reading time, views.
 * Wraps instead of overflowing when several long labels meet on a narrow card.
 */
.essly-test-card__metrics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .75rem;
	color: var(--eti-faint);
	font-size: .6875rem;
}

.essly-test-card__flags {
	display: flex;
	align-items: center;
	gap: .5rem;
}

.essly-test-flag {
	padding: .2rem .5rem;
	background: var(--eti-accent-soft);
	border: 1px solid var(--eti-accent-soft);
	border-radius: 6px;
	color: var(--eti-accent-text);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.essly-test-card__flag-meta {
	color: var(--eti-faint);
	font-size: .6875rem;
}

.essly-test-card__title {
	color: var(--eti-text);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
}

.essly-test-card:hover .essly-test-card__title {
	color: var(--eti-accent-text);
}

.essly-test-card__excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--eti-muted);
	font-size: .8125rem;
	line-height: 1.55;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.essly-test-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding: .85rem 1.25rem;
	/*
	 * Фон футера намеренно НЕ полупрозрачный. Раньше здесь стояло
	 * rgba(248, 250, 252, .6), и на дробном масштабе экрана Windows (125% /
	 * 150%) в Chromium появлялся тёмный шов на границе с body карточки:
	 * полупрозрачный слой растрировался по субпиксельной координате
	 * (foot.top = 1809.90625) внутри скруглённого clip родителя
	 * (overflow: hidden + border-radius), и между слоями возникал тёмный
	 * 1px-шов. Он исчезал после наведения и не появлялся до перезагрузки,
	 * потому что hover переводит карточку на отдельный композиторный слой
	 * и принудительно перерисовывает её.
	 *
	 * Непрозрачный #fbfcfd — это ровно тот же цвет, что давала полупрозрачная
	 * версия поверх белой карточки (rgba(248,250,252,.6) по #fff = 251,252,253),
	 * поэтому вид не меняется, а шов уходит.
	 */
	background: #fbfcfd;
	border-top: 1px solid var(--eti-border);
}

.essly-test-card__stat {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--eti-muted);
	font-size: .6875rem;
	font-weight: 600;
}

/*
 * Left slot of the card footer: author, views and the type specific stat.
 * Wraps instead of overflowing when a long author name meets the other chips.
 */
.essly-test-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .85rem;
	min-width: 0;
}

.essly-test-card__stat--author {
	color: var(--eti-accent-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 11rem;
}

.essly-test-card__stat--views {
	color: var(--eti-muted);
	font-weight: 500;
}

/*
 * Rating metric: same size and rhythm as the other stats, only the star icon
 * picks up the accent colour so the eye finds the score first.
 */
.essly-test-card__stat--rating {
	color: var(--eti-accent-text);
}

.essly-test-card__stat--rating .essly-test-icon {
	color: var(--eti-accent);
}

.essly-test-card__stat .essly-test-icon {
	color: var(--eti-faint);
	font-size: .9rem;
}

.essly-test-card__stat--end {
	color: var(--eti-accent-text);
}

.essly-test-card[data-type="cosplay"] .essly-test-card__stat--end .essly-test-icon {
	color: var(--eti-accent);
}

.essly-test-card__act {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	color: var(--eti-accent-text);
	font-size: .6875rem;
	font-weight: 700;
}

.essly-test-card__act .essly-test-icon {
	transition: transform .25s ease;
}

.essly-test-card:hover .essly-test-card__act .essly-test-icon {
	transform: translateX( 3px );
}

/* Empty states --------------------------------------------------------- */

.essly-test-empty {
	display: flex;
	flex: 1 1 320px;
	flex-direction: column;
	align-items: center;
	gap: .75rem;
	padding: 2.5rem 1.5rem;
	background: var(--eti-card);
	border: 1px dashed var(--eti-border-strong);
	border-radius: var(--eti-radius);
	color: var(--eti-muted);
	text-align: center;
}

.essly-test-empty__icon {
	color: var(--eti-faint);
	font-size: 1.5rem;
}

.essly-test-empty__text {
	font-size: .875rem;
}

/* Typography and responsive -------------------------------------------- */

.essly-test-index {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.5;
}

.essly-test-index h1,
.essly-test-index h2,
.essly-test-index h3 {
	color: inherit;
}

@media ( max-width: 991px ) {

	/* Планшет: две карточки вместо трёх — иначе анонсы становятся нечитаемыми. */
	.essly-test-index {
		--eti-rail-per-view: 2;
	}

	.essly-test-hero__grid {
		grid-template-columns: 1fr;
	}

	.essly-test-feature {
		min-height: 400px;
	}
}

@media ( max-width: 767px ) {

	.essly-test-wrap {
		width: min( 1240px, 100% - 2rem );
		padding-top: 1.5rem;
	}

	.essly-test-toolbar {
		flex-direction: column;
		align-items: stretch;
	}


	.essly-test-filterbar {
		flex-direction: column;
		align-items: stretch;
		margin: 2rem 0 2.5rem;
	}

	/*
	 * В колоночной раскладке `align-items: stretch` не задаёт ширину навигации
	 * (её перебивает собственная ширина контента), поэтому панель уезжает за
	 * экран, а последние пилли обрезаются родителем. Явная ширина включает
	 * горизонтальную прокрутку внутри панели.
	 */
	.essly-test-tabs {
		width: 100%;
	}

	.essly-test-filterbar__more {
		padding: 0 .25rem .25rem;
	}

	.essly-test-section__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.essly-test-section__actions {
		width: 100%;
		justify-content: space-between;
	}

	.essly-test-feature {
		min-height: 360px;
	}

	.essly-test-feature__body {
		padding: 1.25rem;
	}

	.essly-test-feature__foot {
		align-items: flex-start;
		flex-direction: column;
		gap: .75rem;
	}

	/*
	 * Телефон: одна карточка на всю ширину рельса. Раньше здесь стояло 78vw, и
	 * в кадр попадала ровно одна карточка плюс обрезок следующей — тот же
	 * визуальный дефект, что и на десктопе.
	 */
	.essly-test-index {
		--eti-rail-per-view: 1;
	}

	.essly-test-recent {
		padding: 1rem;
	}
}

/* ==========================================================================
   Cosplay front page (/cosplay/)
   The page reuses the test-index layout; these rules cover only the new
   blocks: the infographic dashboard, the fandom pill rail, the featured
   block and the filter panel.
   ========================================================================== */

.essly-dash {
	display: flex;
	flex-direction: column;
	/*
	 * Dashboard fills the left column: the filter panel on the right is taller,
	 * so the popular block is pushed to the bottom instead of leaving a gap.
	 */
	flex: 1;
	align-self: stretch;
	padding: 1.75rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: var(--eti-radius);
	box-shadow: var(--eti-shadow-sm);
}

.essly-dash__head {
	margin-bottom: 1.25rem;
}

.essly-dash__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--eti-text);
	font-size: 1.125rem;
	font-weight: 700;
}

.essly-dash__title .essly-test-icon {
	color: var(--eti-accent);
}

.essly-dash__subtitle {
	margin-top: .35rem;
	color: var(--eti-muted);
	font-size: .8125rem;
	line-height: 1.5;
}

/*
 * Top of the dashboard: two columns.
 *
 * The head and the 2x2 tiles share the left column, «Стоит взглянуть» takes
 * the right one, so its title stands on the same line as «Раздел косплея в
 * цифрах». Both columns stretch to the full height of the row, which is what
 * closes the hole: the tiles and the slider card end on the same line.
 *
 * flex: 1 lets the row take the height the dashboard gets from the taller
 * filter panel, and the counters below are pushed to the bottom as before.
 */
.essly-dash__stats {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 1.5rem;
	align-items: stretch;
	flex: 1;
	min-height: 0;
}

/* No slider (empty filters) — the left column takes the whole row. */
.essly-dash__stats--solo {
	grid-template-columns: minmax( 0, 1fr );
}

/* The head and the tiles, stacked; the head keeps its bottom margin. */
.essly-dash__stats-main {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.essly-dash__counters {
	display: grid;
	/* 2x2 rather than a single row of four. */
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	/* Equal rows: the tiles grow with the row instead of leaving the bottom empty. */
	grid-template-rows: repeat( 2, minmax( 0, 1fr ) );
	gap: .75rem;
	flex: 1;
}

/*
 * «Стоит взглянуть» — the second column of the dashboard top, next to the
 * counters, its title on the same line as «Раздел косплея в цифрах».
 *
 * The heading matches «Самые популярные» below it (same size, same uppercase
 * treatment, accent icon), so the dashboard reads as one set of blocks.
 *
 * The block is a flex column stretched to the full height of the row, and the
 * rail takes what is left, so the card ends on the same line as the tiles
 * instead of leaving a hole under them.
 */
.essly-ch-worth {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.essly-ch-worth__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .85rem;
	/*
	 * The arrows are 2.25rem tall, the title line is not: centring them in this
	 * row would push the title 8px below the top edge, and the block would no
	 * longer stand on one line with «Раздел косплея в цифрах». Anchoring the
	 * title to the top of the row is what puts the two headings level.
	 */
	align-items: flex-start;
}

.essly-ch-worth__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	color: var(--eti-text);
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.75rem;
	text-transform: uppercase;
}

.essly-ch-worth__title .essly-test-icon {
	color: var(--eti-accent);
}

/*
 * One card at a time.
 *
 * The column is half as wide as a rail, and .essly-test-card sizes itself from
 * --eti-rail-per-view plus a 260px floor — that floor alone is wider than the
 * column here, so without this the card would overflow its own track.
 *
 * The rail takes the height left after the heading, and the card fills it, so
 * the slider is as tall as the counters beside it. The card is compacted for
 * that width: the excerpt goes first — a teaser in a column this narrow turns
 * into two lines of noise — then the metrics, and the paddings shrink to the
 * scale of the block.
 */
.essly-ch-worth__rail {
	flex: 1;
	min-height: 0;
	align-items: stretch;
	/*
	 * The base rail offsets the cards by a quarter of a rem on each side and
	 * leaves a rem of padding below them for the scrollbar gutter. Here the card
	 * has to reach the bottom edge of the column to end level with the tiles,
	 * and the scrollbar is hidden anyway, so both are dropped.
	 */
	margin: 0;
	padding: .25rem 0 0;
}

.essly-ch-worth__rail .essly-test-card {
	flex: 0 0 100%;
	min-width: 0;
	height: 100%;
}

/*
 * The image is the whole card here, so it takes the full height of the column
 * and the card clips it with its own rounded corners.
 */
.essly-ch-worth__rail .essly-test-card__media {
	flex: 1;
	aspect-ratio: auto;
	min-height: 8rem;
}

/*
 * Date, reading time, views, the title and the footer all go: in this block the
 * card is a picture with the corner labels and the rating, nothing else. The
 * three metric chips under a thumbnail in a 370px column were noise, and the
 * caption below it pushed the picture into a strip.
 */
.essly-ch-worth__rail .essly-test-card__body {
	display: none;
}

.essly-ch-worth__rail .essly-test-card__foot {
	display: none;
}

/* The arrows are the affordance here; a scrollbar under a single card is noise. */
.essly-ch-worth__rail {
	scrollbar-width: none;
}

.essly-ch-worth__rail::-webkit-scrollbar {
	display: none;
}

/*
 * With the body and the footer gone the picture is the whole card, so the
 * rounded corners of the card are its own — nothing to add here. The image
 * fills the card from edge to edge, and the card clips it with its radius.
 */

.essly-dash__counter {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: 1rem .9rem;
	background: var(--eti-soft);
	border: 1px solid transparent;
	border-radius: 12px;
	color: inherit;
	transition: border-color .2s ease, transform .2s ease;
}

a.essly-dash__counter:hover {
	border-color: var(--eti-accent);
	transform: translateY( -2px );
}

.essly-dash__counter-value {
	color: var(--eti-text);
	font-size: 1.5rem;
	font-weight: 800;
	line-height: 1.1;
}

.essly-dash__counter-label {
	color: var(--eti-muted);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.essly-dash__counter-icon {
	position: absolute;
	top: .85rem;
	right: .85rem;
	color: var(--eti-accent);
	opacity: .35;
}

.essly-dash__counter-icon .essly-test-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.essly-dash__popular {
	/* Прижимаем блок к низу растянутой карточки дашборда. */
	margin-top: auto;
	padding-top: 1.5rem;
}

.essly-dash__popular-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .85rem;
}

.essly-dash__popular-title {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--eti-text);
	font-size: .875rem;
	font-weight: 800;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.essly-dash__popular-title .essly-test-icon {
	color: var(--eti-accent);
}

.essly-dash__popular-note {
	color: var(--eti-muted);
	font-size: .6875rem;
	font-weight: 600;
}

.essly-dash__popular-grid {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	align-items: start;
	gap: .75rem;
}

.essly-dash__popular-card {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: .8rem;
	background: var(--eti-soft);
	border: 1px solid var(--eti-border);
	border-radius: 12px;
}

.essly-dash__popular-card-title {
	display: flex;
	align-items: center;
	gap: .4rem;
	color: var(--eti-text);
	font-size: .8125rem;
	font-weight: 700;
}

.essly-dash__popular-card-title .essly-test-icon {
	width: .95rem;
	height: .95rem;
	color: var(--eti-accent);
}

.essly-dash__popular-card-note {
	margin-left: auto;
	color: var(--eti-faint);
	font-size: .625rem;
	font-weight: 600;
	white-space: nowrap;
}

.essly-dash__popular-list {
	display: flex;
	flex-direction: column;
	gap: .1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-dash__popular-row {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .35rem 0;
}

.essly-dash__popular-rank {
	flex: 0 0 1.15rem;
	color: var(--eti-faint);
	font-size: .6875rem;
	font-weight: 700;
}

.essly-dash__popular-rank--top {
	color: var(--eti-accent-text);
}

.essly-dash__popular-link {
	display: flex;
	flex: 1;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	color: inherit;
}

.essly-dash__popular-thumb {
	display: grid;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	place-items: center;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: 50%;
	color: var(--eti-faint);
	overflow: hidden;
}

.essly-dash__popular-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.essly-dash__popular-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.essly-dash__popular-name {
	overflow: hidden;
	color: var(--eti-text);
	font-size: .8125rem;
	font-weight: 600;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.essly-dash__popular-sub {
	overflow: hidden;
	color: var(--eti-muted);
	font-size: .6875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.essly-dash__popular-views {
	flex: 0 0 auto;
	padding: .1rem .45rem;
	background: var(--eti-card);
	border: 1px solid var(--eti-border);
	border-radius: 8px;
	color: var(--eti-muted);
	font-size: .625rem;
	font-weight: 700;
	white-space: nowrap;
}

.essly-dash__popular-all {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	margin-top: auto;
	padding-top: .6rem;
	border-top: 1px solid var(--eti-border);
	color: var(--eti-accent-text);
	font-size: .6875rem;
	font-weight: 700;
}

.essly-dash__popular-all .essly-test-icon {
	width: .85rem;
	height: .85rem;
	transition: transform .2s ease;
}

.essly-dash__popular-all:hover .essly-test-icon {
	transform: translateX( 2px );
}

/* Cosplay card rails and filter panel --------------------------------- */

.essly-test-index--cosplay .essly-test-sections {
	margin-top: 2.5rem;
}

.essly-ch-rail-section .essly-test-section__desc {
	font-size: .8125rem;
}

.essly-ch-filters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.essly-ch-filters .essly-filters-form__controls {
	flex-direction: column;
}

@media ( max-width: 991px ) {

	.essly-dash {
		min-height: 0;
		padding: 1.25rem;
	}

	/*
	 * The reserved column is filled by «Стоит взглянуть», so on a narrow screen
	 * the two columns simply stack: the head and the tiles, then the slider.
	 * Nothing stretches any more — the block grows by its own height, the way
	 * the rest of the page does.
	 */
	.essly-dash__stats {
		grid-template-columns: 1fr;
		gap: 1.25rem;
		flex: 0 0 auto;
	}

	.essly-dash__stats--solo {
		grid-template-columns: 1fr;
	}

	.essly-dash__counters {
		align-content: start;
		flex: 0 0 auto;
	}

	.essly-dash__popular-grid {
		grid-template-columns: 1fr;
	}

	/* На мобильных колонки складываются, растягивать блок не нужно. */
	.essly-dash__popular {
		margin-top: 1.5rem;
		padding-top: 0;
	}

	.essly-dash__popular-grid {
		grid-template-columns: 1fr;
	}

	/*
	 * The block spans the full width once the columns collapse, and nothing
	 * stretches it any more — so the card needs a frame of its own again: a
	 * 16:10 crop that is not too tall on a phone.
	 *
	 * The card keeps a sane size too: one per view, capped at the width a card
	 * has in the rails further down, so the block still reads as a slider
	 * rather than as a poster.
	 */
	.essly-ch-worth {
		margin-top: 0;
	}

	.essly-ch-worth__rail {
		flex: 0 0 auto;
	}

	.essly-ch-worth__rail .essly-test-card {
		flex: 0 0 min( 100%, 360px );
		height: auto;
	}

	.essly-ch-worth__rail .essly-test-card__media {
		flex: 0 0 auto;
		aspect-ratio: 16 / 10;
		min-height: 0;
	}
}


/* ==========================================================================
   Full cosplay feed (/cosplay/)
   Bottom block of the cosplay page: the whole section as a regular grid,
   four rows of three cards per page, with pagination underneath.

   The column count and the gap are the same variables the rails use, so a
   card is exactly as wide here as in the sliders above.
   ========================================================================== */

.essly-ch-archive {
	margin-top: 1rem;
	/* A jump to the anchor should not glue the heading to the very top edge. */
	scroll-margin-top: 1.5rem;
}

.essly-ch-archive__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --eti-rail-gap );
}

/*
 * The cards inside a rail are sized by `flex-basis`; in a grid the column
 * already defines the width, so that flex shorthand has to be dropped —
 * otherwise a leftover basis would fight the track size.
 */
.essly-ch-archive__grid .essly-test-card {
	flex: none;
	width: 100%;
	min-width: 0;
}

/* A single card on the last page should not stretch to the full row width. */
.essly-ch-archive__grid .essly-test-empty {
	grid-column: 1 / -1;
	flex: none;
	width: 100%;
}

.essly-ch-archive__page {
	flex-shrink: 0;
	align-self: center;
}

.essly-ch-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 2rem 0 0;
}

.essly-ch-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var( --eti-border );
	border-radius: 10px;
	background: var( --eti-card );
	color: var( --eti-muted );
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.essly-ch-archive__pagination .page-numbers:hover {
	border-color: var( --eti-accent );
	color: var( --eti-accent );
}

.essly-ch-archive__pagination .page-numbers.current {
	border-color: var( --eti-accent );
	background: var( --eti-accent );
	color: #fff;
}

.essly-ch-archive__pagination .page-numbers .essly-test-icon {
	width: 1rem;
	height: 1rem;
}

@media ( max-width: 991px ) {

	.essly-ch-archive__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.essly-ch-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Fandom archive (/fandom/)

   The section catalogue speaks the visual language of the cosplay front page:
   a pill filter bar over a regular grid of the very same cards. Geometry, gap
   and pagination mirror `.essly-ch-archive`, so a card is exactly as wide on
   /fandom/ as it is on /cosplay/ — six rows of three cards per page.
   ========================================================================== */

/*
 * Accent tokens of the fandom classification. The base palette declares
 * indigo, rose and emerald; the types of a fandom add violet, sky and amber,
 * which are the third accent family of the prototype.
 */
.essly-test-index [data-accent="violet"] {
	--eti-accent: #7c3aed;
	--eti-accent-text: #6d28d9;
	--eti-accent-soft: #f5f3ff;
}

.essly-test-index [data-accent="sky"] {
	--eti-accent: #0284c7;
	--eti-accent-text: #0369a1;
	--eti-accent-soft: #f0f9ff;
}

.essly-test-index [data-accent="amber"] {
	--eti-accent: #d97706;
	--eti-accent-text: #b45309;
	--eti-accent-soft: #fffbeb;
}

/* Filter pills: the counter of a pill carries the accent of its own type. */
.essly-fandom-filterbar .essly-test-tab__count {
	margin-left: .1rem;
	padding: .1rem .45rem;
	background: var(--eti-accent-soft);
	border: 1px solid var(--eti-accent-soft);
	border-radius: 999px;
	color: var(--eti-accent-text);
	font-size: .625rem;
	font-weight: 700;
	line-height: 1.4;
	transition: background .2s, color .2s, border-color .2s;
}

.essly-fandom-filterbar .essly-test-tab.is-active .essly-test-tab__count {
	background: rgba( 255, 255, 255, .22 );
	border-color: rgba( 255, 255, 255, .3 );
	color: #fff;
}

.essly-fandom-archive {
	/* A jump to the anchor should not glue the heading to the very top edge. */
	scroll-margin-top: 1.5rem;
}

.essly-fandom-archive__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --eti-rail-gap );
}

/*
 * The cards inside a rail are sized by `flex-basis`; in a grid the column
 * already defines the width, so that flex shorthand has to be dropped —
 * otherwise a leftover basis would fight the track size.
 */
.essly-fandom-archive__grid .essly-test-card {
	flex: none;
	width: 100%;
	min-width: 0;
}

/* The empty state spans the whole row instead of one narrow column. */
.essly-fandom-archive__grid .essly-test-empty {
	grid-column: 1 / -1;
	flex: none;
	width: 100%;
}

/*
 * The classification chip of a fandom card pairs an icon with a label, so the
 * chip itself becomes a flex line: a plain inline span would put the icon on
 * the text baseline and the label would drift away from it.
 */
.essly-fandom-card .essly-test-card__chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
}

.essly-fandom-card .essly-test-card__chip .essly-test-icon {
	width: .85rem;
	height: .85rem;
}

.essly-fandom-archive__page {
	flex-shrink: 0;
	align-self: center;
}

.essly-fandom-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 2rem 0 0;
}

.essly-fandom-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var( --eti-border );
	border-radius: 10px;
	background: var( --eti-card );
	color: var( --eti-muted );
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.essly-fandom-archive__pagination .page-numbers:hover {
	border-color: var( --eti-accent );
	color: var( --eti-accent );
}

.essly-fandom-archive__pagination .page-numbers.current {
	border-color: var( --eti-accent );
	background: var( --eti-accent );
	color: #fff;
}

@media ( max-width: 991px ) {

	.essly-fandom-archive__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.essly-fandom-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single fandom page (/fandom/<slug>/)

   Same visual language as the section pages: the cover is a wide rail, the
   numbers are the dashboard tiles, the feed is the same 3-column grid. Only
   the blocks themselves are new.
   ========================================================================== */

.essly-fandom-single__hero {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 1rem;
}

/*
 * The top row of a fandom page: the cover slider on the left, the "О фэндоме"
 * card on the right. Both columns stretch to the same height, so they read as
 * two roughly equal rectangles; a wide 21:9 strip above a full-width card left
 * the picture and the text as two unrelated blocks.
 */
.essly-fandom-single__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --eti-rail-gap );
	margin-top: 1.5rem;
	align-items: stretch;
}

.essly-fandom-single__media {
	min-width: 0;
}

.essly-fandom-single__intro {
	min-width: 0;
}

/*
 * The classification pill and the two "look elsewhere" links sit on one line
 * under the title and wrap as a whole: a broken link row reads as a mistake,
 * a wrapped one as a list.
 */
.essly-fandom-single__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: .75rem;
}

.essly-fandom-single__type {
	gap: .4rem;
}

.essly-fandom-single__type .essly-test-icon {
	color: var( --eti-accent );
}

/*
 * The cover column stretches to the height of the "О фэндоме" card next to it,
 * so both halves of the top row are the same rectangle. The rail and every
 * frame take the full height of the column, and the picture is cropped
 * (object-fit: cover) instead of the frame changing height from slide to slide.
 */
.essly-fandom-single__media,
.essly-fandom-single__gallery,
.essly-fandom-single__rail,
.essly-fandom-single__slide {
	height: 100%;
}

.essly-fandom-single__gallery {
	position: relative;
}

.essly-fandom-single__rail {
	display: flex;
	gap: var( --eti-rail-gap );
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 0;
	scrollbar-width: none;
}

.essly-fandom-single__rail::-webkit-scrollbar {
	display: none;
}

.essly-fandom-single__rail:focus-visible {
	outline: 2px solid var( --eti-accent );
	outline-offset: 3px;
	border-radius: 12px;
}

/*
 * One frame per view. The picture keeps the wide 21:9 frame of the hero strip
 * instead of a 16:10 card ratio, because the cover sets the mood of the whole
 * page and a cropped portrait strip reads as a mistake.
 */
/*
 * One frame per view. The frame follows the height of the column (see the
 * rule above) instead of a fixed ratio: inside the top row the cover has to
 * match the card next to it. A cover taller than the card is fine — the card
 * stretches to the picture, not the other way round.
 */
.essly-fandom-single__slide {
	flex: 0 0 min( 100%, 860px );
	margin: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: 18px;
	background: var( --eti-soft );
	box-shadow: var( --eti-shadow-sm );
	min-height: 260px;
}

/*
 * The picture fills the frame edge to edge.
 *
 * Two things are needed here. First, the selector repeats the frame class:
 * `.essly-test-index img { height: auto }` in this same file has a higher
 * specificity (one class + one element) than a single class, so a lone
 * `.essly-fandom-single__slide-img` loses to it and the picture takes its
 * natural height, leaving an empty strip under it. Second, the picture is
 * taken out of flow and pinned to the frame, so "cover" crops the image
 * instead of the image deciding the frame height — a portrait cover and a
 * landscape one then fill the same rectangle without empty space.
 */
.essly-fandom-single__slide {
	position: relative;
}

.essly-fandom-single__slide .essly-fandom-single__slide-img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/*
 * Miniatures strip instead of arrows.
 *
 * It sits over the bottom of the frame, so it must not shift the picture: the
 * strip is taken out of flow and pinned to the frame (which is `position:
 * relative` above). The gradient under it is a local readability aid — the
 * strip has no panel of its own, a floating row of boxes over a photo reads as
 * debris. The miniatures need the same specificity dance as the frame picture:
 * `.essly-test-index img` sets `height: auto` with a higher specificity, so a
 * lone `__thumb-img` would take its natural size and blow the strip apart.
 *
 * The radius at the bottom is not decoration. The frame rounds its own corners
 * with `border-radius` + `overflow: hidden`, but this strip is a sibling of the
 * rail, not a child of the frame, so nothing clips it: the gradient used to
 * run over the rounded corners with its own square ones and the picture looked
 * rounded on the left, top and right — and chopped off at the bottom.
 */
.essly-fandom-single__thumbs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: .4rem;
	padding: 2.5rem 1rem .9rem;
	background: linear-gradient( to top, rgba( 15, 23, 42, .55 ), rgba( 15, 23, 42, 0 ) );
	border-radius: 0 0 18px 18px;
	pointer-events: none;
}

.essly-fandom-single__thumb {
	pointer-events: auto;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	border: 2px solid rgba( 255, 255, 255, .55 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .3 );
	box-shadow: 0 2px 8px rgba( 15, 23, 42, .35 );
	transition: border-color .2s ease, transform .2s ease;
}

.essly-fandom-single__thumb:hover {
	transform: translateY( -2px );
	border-color: rgba( 255, 255, 255, .9 );
}

.essly-fandom-single__thumb:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The current frame: a solid white frame, not just a tint of one. */
.essly-fandom-single__thumb.is-active,
.essly-fandom-single__thumb[aria-selected="true"] {
	border-color: #fff;
	transform: translateY( -2px);
}

.essly-fandom-single__thumbs .essly-fandom-single__thumb-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Description block: heading with the metrics on its right, text below. */
.essly-fandom-single__about {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.75rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 18px;
	box-shadow: var( --eti-shadow-sm );
}

/*
 * Heading and metrics share one line. The metrics are tags, not tiles: six
 * counters used to fill a third of the page with six boxes while the text —
 * the thing a visitor actually came for — was squeezed into a narrow column.
 */
.essly-fandom-single__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
}

.essly-fandom-single__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-left: auto;
}

/*
 * A metric is a small label: icon in the accent colour plus "11 просмотров".
 * Same shape as the character tags below, so both read as one chip family.
 */
.essly-fandom-single__stat {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .4rem .7rem;
	background: var( --eti-soft );
	border-radius: 10px;
	color: var( --eti-muted );
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

.essly-fandom-single__stat .essly-test-icon {
	color: var( --eti-accent );
	font-size: .9375rem;
}

/*
 * A count that leads to a filtered archive keeps the chip shape but becomes a
 * link: the underline of the raw <a> would break the tag family, and hover has
 * to say "clickable" the way the pills of the filter bar do.
 */
a.essly-fandom-single__stat {
	color: var( --eti-muted );
	text-decoration: none;
	transition: background .2s, color .2s, box-shadow .2s;
}

a.essly-fandom-single__stat:hover {
	background: var( --eti-accent );
	box-shadow: 0 10px 18px -12px var( --eti-accent );
	color: #fff;
}

a.essly-fandom-single__stat:hover .essly-test-icon {
	color: #fff;
}

a.essly-fandom-single__stat:focus-visible {
	outline: 2px solid var( --eti-accent );
	outline-offset: 2px;
}

.essly-fandom-single__desc {
	min-width: 0;
}

.essly-fandom-single__text {
	margin-top: 1rem;
	color: var( --eti-muted );
	font-size: .9375rem;
	line-height: 1.65;
}

.essly-fandom-single__text > :first-child {
	margin-top: 0;
}

.essly-fandom-single__text > :last-child {
	margin-bottom: 0;
}

.essly-fandom-single__text--empty {
	font-style: italic;
	opacity: .75;
}

.essly-fandom-single__characters {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --eti-border );
}

.essly-fandom-single__sub {
	margin: 0 0 .75rem;
	color: var( --eti-text );
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.essly-fandom-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

/*
 * The character tags are pills of the filter bar, only smaller: same shape,
 * so the eye reads them as "chips" everywhere on the site. Hover is restyled
 * here because the pills of the archive only ever live inside a <nav>.
 */
.essly-fandom-single__tags .essly-test-tab {
	padding: .4rem .8rem;
	font-size: .8125rem;
}

.essly-fandom-single__tags .essly-test-tab:hover {
	background: var( --eti-soft );
	color: var( --eti-text );
}

/*
 * The picks follow the description card. The shared `.essly-test-section`
 * rhythm only adds space *below* a section, so without an explicit top margin
 * the «Избранное фэндома» heading would sit flush against the card border.
 */
.essly-fandom-single__picks {
	margin-top: 3rem;
}

/*
 * The picks: a card with a caption above it, three per view on wide screens.
 *
 * The rail stretches every item to the tallest one, and the card inside a pick
 * fills the remaining height. Without it the cards keep their natural height
 * and the ones with a two-line excerpt grow taller than their neighbours,
 * which breaks the even row of the /cosplay/ grid below.
 */
.essly-fandom-single__picks-rail {
	align-items: stretch;
}

.essly-fandom-single__picks-rail .essly-fandom-single__pick {
	flex: 0 0 calc( ( 100% - 2 * var( --eti-rail-gap ) ) / 3 );
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.essly-fandom-single__pick-label {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: .5rem;
	color: var( --eti-accent-text );
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.essly-fandom-single__pick-label .essly-test-icon {
	font-size: 1rem;
}

/*
 * The card takes the whole height left under the caption, so all three picks
 * end on the same line; the foot is pushed to the bottom by `margin-top: auto`.
 */
.essly-fandom-single__pick .essly-test-card {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
}

/* The feed of the fandom repeats the /cosplay/ grid and its pagination. */
.essly-fandom-single__feed {
	margin-top: 2.5rem;
	scroll-margin-top: 1.5rem;
}

.essly-fandom-single__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --eti-rail-gap );
}

.essly-fandom-single__grid .essly-test-card {
	flex: none;
	width: 100%;
	min-width: 0;
}

.essly-fandom-single__grid .essly-test-empty {
	grid-column: 1 / -1;
	flex: none;
	width: 100%;
}

.essly-fandom-single__page {
	flex-shrink: 0;
	align-self: center;
}

.essly-fandom-single__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 2rem 0 0;
}

.essly-fandom-single__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var( --eti-border );
	border-radius: 10px;
	background: var( --eti-card );
	color: var( --eti-muted );
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.essly-fandom-single__pagination .page-numbers:hover {
	border-color: var( --eti-accent );
	color: var( --eti-accent );
}

.essly-fandom-single__pagination .page-numbers.current {
	border-color: var( --eti-accent );
	background: var( --eti-accent );
	color: #fff;
}

@media ( max-width: 991px ) {

	/*
	 * Two columns of a 1100px page are ~530px each, which is enough for the
	 * cover; below that the picture and the text each need the full width.
	 */
	.essly-fandom-single__top {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.essly-fandom-single__slide {
		aspect-ratio: 16 / 9;
		height: auto;
	}

	/* Below the breakpoint the tags no longer fit next to the heading. */
	.essly-fandom-single__stats {
		margin-left: 0;
		width: 100%;
	}

	.essly-fandom-single__picks-rail .essly-fandom-single__pick {
		flex-basis: calc( ( 100% - var( --eti-rail-gap ) ) / 2 );
	}

	.essly-fandom-single__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.essly-fandom-single__slide {
		/* A 21:9 frame on a phone is a letterbox; 16:9 keeps the picture readable. */
		aspect-ratio: 16 / 9;
		flex-basis: 100%;
	}

	/* A 46px miniature is a comfortable tap target, smaller ones are not. */
	.essly-fandom-single__thumb {
		width: 38px;
		height: 38px;
		border-radius: 8px;
	}

	.essly-fandom-single__thumbs {
		gap: .3rem;
		padding: 2rem .75rem .7rem;
	}

	.essly-fandom-single__about {
		padding: 1.25rem;
	}

	.essly-fandom-single__picks-rail .essly-fandom-single__pick {
		flex-basis: 100%;
	}

	.essly-fandom-single__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Character archive (/character/)

   The same geometry as the fandom archive. The selectors are repeated instead
   of grouped, so a future change to one catalogue does not silently move the
   other one.
   ========================================================================== */

/* Filter pills: the counter of a pill carries the accent of its own universe. */
.essly-character-filterbar .essly-test-tab__count {
	margin-left: .1rem;
	padding: .1rem .45rem;
	background: var(--eti-accent-soft);
	border: 1px solid var(--eti-accent-soft);
	border-radius: 999px;
	color: var(--eti-accent-text);
	font-size: .625rem;
	font-weight: 700;
	line-height: 1.4;
	transition: background .2s, color .2s, border-color .2s;
}

.essly-character-filterbar .essly-test-tab.is-active .essly-test-tab__count {
	background: rgba( 255, 255, 255, .22 );
	border-color: rgba( 255, 255, 255, .3 );
	color: #fff;
}

.essly-character-archive {
	/* A jump to the anchor should not glue the heading to the very top edge. */
	scroll-margin-top: 1.5rem;
}

.essly-character-archive__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --eti-rail-gap );
}

/*
 * The cards inside a rail are sized by `flex-basis`; in a grid the column
 * already defines the width, so that flex shorthand has to be dropped —
 * otherwise a leftover basis would fight the track size.
 */
.essly-character-archive__grid .essly-test-card {
	flex: none;
	width: 100%;
	min-width: 0;
}

/* The empty state spans the whole row instead of one narrow column. */
.essly-character-archive__grid .essly-test-empty {
	grid-column: 1 / -1;
	flex: none;
	width: 100%;
}

/*
 * The universe chip of a character card pairs an icon with a label, so the chip
 * itself becomes a flex line: a plain inline span would put the icon on the
 * text baseline and the label would drift away from it.
 */
.essly-character-card .essly-test-card__chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	max-width: 100%;
}

.essly-character-card .essly-test-card__chip .essly-test-icon {
	width: .85rem;
	height: .85rem;
}

.essly-character-archive__page {
	flex-shrink: 0;
	align-self: center;
}

.essly-character-archive__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin: 2rem 0 0;
}

.essly-character-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 .75rem;
	border: 1px solid var( --eti-border );
	border-radius: 10px;
	background: var( --eti-card );
	color: var( --eti-muted );
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.essly-character-archive__pagination .page-numbers:hover {
	border-color: var( --eti-accent );
	color: var( --eti-accent );
}

.essly-character-archive__pagination .page-numbers.current {
	border-color: var( --eti-accent );
	background: var( --eti-accent );
	color: #fff;
}

@media ( max-width: 991px ) {

	.essly-character-archive__grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.essly-character-archive__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Single entity page (/cosplayer/<slug>/ and, after the rollout, the
   character, the photographer and the studio).

   The geometry follows the owner's sketch: a narrow rail on the left with
   everything about the person, and the main column on the right.

   The wrapper is the same 1240px as every other page, so the work cards
   below the rail come out at exactly the width they have on the home page
   and on /cosplay/ — one card width across the site. The first attempt used
   a 1560px wrapper, which made the cards ~500px wide against ~390px
   everywhere else; that is what the owner spotted.

   Below 1200px the rail drops under the main column rather than squeezing it —
   a 320px rail beside a 900px grid would leave the cards too narrow to read,
   and a card grid that changes shape between pages is worse than a rail that
   moves.
   ========================================================================== */

.essly-entity-page {
	/* The same 1240px as every other page. A wider wrapper made the work cards
	   below the rail ~500px across while they are ~390px on the home page and on
	   /cosplay/ — the same card in two widths. The rail keeps its 320px beside
	   the narrow main column, and the feed below spans the full 1240px, so the
	   grid lines up with the section pages again. */
	width: min( 1240px, 100% - 2.5rem );
}

.essly-entity-page__grid {
	display: grid;
	/* minmax( 0, … ) on the second track keeps a long word in a comment from
	   stretching the whole grid instead of wrapping. */
	grid-template-columns: 320px minmax( 0, 1fr );
	gap: 2.5rem;
	align-items: start;
}

/* --- Rail ---------------------------------------------------------------- */

.essly-entity-rail {
	display: grid;
	gap: 1.25rem;
	min-width: 0;
}

.essly-entity-rail__portrait {
	overflow: hidden;
	background: var( --eti-soft );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
}

.essly-entity-rail__portrait-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/*
 * The card wraps the rows and the rating breakdown, so the border and the
 * padding live on the wrapper: a `<dl>` cannot legally contain the `<ul>` of
 * the breakdown below.
 */
.essly-entity-rail__metrics-card {
	padding: 1rem 1.1rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
}

.essly-entity-rail__metrics {
	display: grid;
	gap: .5rem;
	margin: 0;
	padding: 0;
}

.essly-entity-rail__dist {
	display: grid;
	gap: .35rem;
	margin: .85rem 0 0;
	padding: .85rem 0 0;
	list-style: none;
	border-top: 1px solid var( --eti-border );
}

.essly-entity-rail__dist-row {
	display: grid;
	grid-template-columns: 4.25rem 1fr auto;
	align-items: center;
	gap: .5rem;
}

.essly-entity-rail__dist-label {
	color: var( --eti-muted );
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
}

.essly-entity-rail__dist-bar {
	height: .35rem;
	overflow: hidden;
	background: var( --eti-soft );
	border-radius: 999px;
}

.essly-entity-rail__dist-fill {
	display: block;
	height: 100%;
	background: #f59e0b;
	border-radius: inherit;
}

.essly-entity-rail__dist-value {
	color: var( --eti-text );
	font-size: .8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.essly-entity-rail__metric {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
}

.essly-entity-rail__metric-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var( --eti-muted );
	font-size: .8125rem;
	font-weight: 600;
}

.essly-entity-rail__metric-label .essly-test-icon {
	color: var( --eti-accent );
}

.essly-entity-rail__metric-value {
	margin: 0;
	color: var( --eti-text );
	font-size: .875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.essly-entity-rail__block {
	padding: 1rem 1.1rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
}

.essly-entity-rail__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .75rem;
	font-size: .875rem;
	font-weight: 700;
}

.essly-entity-rail__links {
	display: grid;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-entity-rail__links a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var( --eti-text );
	font-size: .8125rem;
	font-weight: 600;
	word-break: break-word;
}

.essly-entity-rail__links a:hover {
	color: var( --eti-accent-text );
}

.essly-entity-rail__links .essly-test-icon {
	color: var( --eti-faint );
}

.essly-entity-rail__comments {
	display: grid;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.essly-entity-rail__comment {
	display: grid;
	gap: .15rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid var( --eti-border );
}

.essly-entity-rail__comment:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.essly-entity-rail__comment-author {
	color: var( --eti-text );
	font-size: .8125rem;
	font-weight: 700;
}

.essly-entity-rail__comment-date {
	color: var( --eti-faint );
	font-size: .6875rem;
}

.essly-entity-rail__comment-text {
	margin: .25rem 0 0;
	color: var( --eti-muted );
	font-size: .8125rem;
	line-height: 1.5;
}

.essly-entity-rail__empty {
	margin: 0;
	color: var( --eti-muted );
	font-size: .8125rem;
}

.essly-entity-rail__all-comments {
	display: inline-block;
	margin: .75rem 0 0;
	color: var( --eti-accent-text );
	font-size: .8125rem;
	font-weight: 600;
}


.essly-entity-rail__form {
	padding: 1rem 1.1rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: var( --eti-radius );
}

.essly-entity-rail__form .comment-form {
	margin: 0;
}

.essly-entity-rail__form .comment-form p {
	margin: 0 0 .6rem;
}

.essly-entity-rail__form label {
	display: block;
	margin-bottom: .25rem;
	color: var( --eti-muted );
	font-size: .75rem;
	font-weight: 600;
}

.essly-entity-rail__form input[type="text"],
.essly-entity-rail__form input[type="email"],
.essly-entity-rail__form input[type="url"],
.essly-entity-rail__form textarea {
	box-sizing: border-box;
	width: 100%;
	padding: .5rem .6rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 8px;
	color: var( --eti-text );
	font-size: .8125rem;
}

.essly-entity-rail__form input:focus,
.essly-entity-rail__form textarea:focus {
	border-color: var( --eti-accent );
	outline: 2px solid var( --eti-accent-soft );
}

.essly-entity-rail__form .submit {
	display: inline-block;
	height: 2.25rem;
	padding: 0 1rem;
	background: var( --eti-accent );
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: .8125rem;
	font-weight: 700;
	cursor: pointer;
}

/* --- Main column --------------------------------------------------------- */

.essly-entity-main {
	min-width: 0;
}

/* The name is the only h1 here; the h2 headings inside the blocks are restyled
   just below. Its bottom margin is the only gap between the name and the first
   section heading, and the two blocks below are set 1.75rem apart — at 1.25rem
   the 36px name and the 17px "О косплеере" heading right under it read as one
   glued heading. Sibling margins collapse, so the gap is set here rather than as
   a margin-top on the block.

   The element is addressed as `h1.essly-entity-main__title` on purpose: the
   reset at the top of this file (`.essly-test-index h1 { margin: 0; }`) is more
   specific than the bare class, and without the tag the margin stays 0. */
.essly-entity-main > h1.essly-entity-main__title {
	margin: 0 0 2.25rem;
	font-size: clamp( 1.5rem, 1.1rem + 1.4vw, 2.25rem );
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
}

.essly-entity-main__block + .essly-entity-main__block {
	margin-top: 1.75rem;
}

/* The h1 is the first title; the section headings below it carry the accent bar
   the rest of the site uses, so they need the flex row. */
.essly-entity-main__block .essly-entity-main__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .85rem;
	font-size: 1.0625rem;
	font-weight: 700;
}

.essly-entity-main__facts {
	display: grid;
	gap: .5rem;
	margin: 0;
}

.essly-entity-main__fact {
	display: grid;
	grid-template-columns: 11rem minmax( 0, 1fr );
	gap: 1rem;
	padding: .7rem .85rem;
	background: var( --eti-card );
	border: 1px solid var( --eti-border );
	border-radius: 10px;
}

.essly-entity-main__fact-label {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var( --eti-muted );
	font-size: .8125rem;
	font-weight: 600;
}

.essly-entity-main__fact-label .essly-test-icon {
	color: var( --eti-accent );
}

.essly-entity-main__fact-value {
	margin: 0;
	color: var( --eti-text );
	font-size: .875rem;
	word-break: break-word;
}

.essly-entity-main__text {
	color: var( --eti-text );
	font-size: .9375rem;
	line-height: 1.65;
}

.essly-entity-main__text > :first-child {
	margin-top: 0;
}

.essly-entity-main__text > :last-child {
	margin-bottom: 0;
}

.essly-entity-main__text a {
	color: var( --eti-accent-text );
	text-decoration: underline;
}

.essly-entity-main__text--empty {
	margin: 0;
	color: var( --eti-faint );
	font-style: italic;
}

/* --- Rails under the biography ------------------------------------------- */

/*
 * The two rails sit inside the 880px main column, so a card is
 * (880 - 2 * 1.25rem) / 3 = ~280px. That is above the 260px floor of
 * `.essly-test-card`, so the shared rail rules already give three cards per
 * view and nothing card-specific is needed here: the rails stay built from
 * the same classes as every other rail on the site.
 *
 * `.essly-test-section` puts 3.25rem under every section. Inside the main
 * column that gap would fall between the two rails and push the feed far
 * down, so the shared bottom margin is cancelled and the space between the
 * blocks is set explicitly.
 */
.essly-entity-single__picks {
	margin-top: 2.5rem;
}

.essly-entity-single__picks--popular {
	margin-top: 2.25rem;
}

.essly-entity-single__picks.essly-test-section {
	margin-bottom: 0;
}

/* --- Filter bar and feed ------------------------------------------------- */

.essly-entity-filterbar {
	margin-top: 2rem;
}

.essly-entity-page .essly-entity-single__feed {
	margin-top: 1.25rem;
}

@media ( max-width: 1199px ) {
	.essly-entity-page__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: 1.75rem;
	}

	/* Once the rail sits under the content it spans the full width, so its
	   blocks line up in a row instead of a 320px column. */
	.essly-entity-rail {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		align-items: start;
	}

	.essly-entity-rail__portrait,
	.essly-entity-rail__form {
		grid-column: 1 / -1;
	}
}

@media ( max-width: 767px ) {
	.essly-entity-rail {
		grid-template-columns: minmax( 0, 1fr );
	}

	.essly-entity-main__fact {
		grid-template-columns: minmax( 0, 1fr );
		gap: .25rem;
	}
}