@charset "UTF-8";

/**
 * ハードピストン名鑑 トップページ試作
 * すべて hp- 接頭辞でCocoon / Hard Piston Toolkitのスタイルから分離。
 */

:root {
	--hp-bg: #eceeef;
	--hp-content-bg: #f6f7f8;
	--hp-surface: #f7f8f9;
	--hp-surface-raised: #ffffff;
	--hp-surface-dark: #34373a;
	--hp-metal: #aeb3b7;
	--hp-border: #d2d5d8;
	--hp-text: #222426;
	--hp-text-muted: #6f757a;
	--hp-accent: #ed145b;
	--hp-accent-hover: #ff2b72;
	--hp-accent-soft: rgba(237, 20, 91, 0.10);
	--hp-accent-border: rgba(237, 20, 91, 0.35);
	--hp-accent-hot: #ff4d2e;
	--hp-accent-hot-soft: rgba(255, 77, 46, 0.10);
	--hp-dark: #24272a;
	--hp-shell: 1320px;
	--hp-shadow: 0 12px 32px rgba(39, 43, 47, 0.08);
	--hp-header-height: 86px;
}

.hp-home-page {
	margin: 0;
	background: var(--hp-bg);
	color: var(--hp-text);
	font-family: "Helvetica Neue", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", Arial, sans-serif;
	line-height: 1.65;
	overflow-x: clip;
}

.hp-home-page *,
.hp-home-page *::before,
.hp-home-page *::after {
	box-sizing: border-box;
}

.hp-home-page img {
	max-width: 100%;
}

.hp-home-page a {
	color: inherit;
	text-decoration: none;
}

.hp-home-page button,
.hp-home-page input {
	font: inherit;
}

.hp-home-page a:focus-visible,
.hp-home-page button:focus-visible,
.hp-home-page input:focus-visible,
.hp-home-page [tabindex]:focus-visible {
	outline: 3px solid #ff4b83;
	outline-offset: 3px;
}

.hp-shell {
	width: min(calc(100% - 48px), var(--hp-shell));
	margin-inline: auto;
}

.hp-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.hp-skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 10000;
	padding: 10px 16px;
	background: #fff;
	color: var(--hp-text);
	transform: translateY(-150%);
	transition: transform 160ms ease;
}

.hp-skip-link:focus {
	transform: translateY(0);
}

.hp-header {
	position: absolute;
	inset: 0 0 auto;
	z-index: 50;
	height: var(--hp-header-height);
	color: #fff;
}

.hp-header__inner {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 32px;
}

.hp-header__brand {
	display: block;
	flex: 0 0 116px;
	height: 78px;
	overflow: hidden;
}

.hp-header__brand img,
.hp-menu-overlay__brand img,
.hp-footer__brand img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: screen;
}

.hp-header__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 2.6vw, 42px);
	flex: 1 1 auto;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.hp-header__nav a {
	position: relative;
	padding: 28px 0;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.hp-header__nav a::after {
	position: absolute;
	right: 0;
	bottom: 20px;
	left: 0;
	height: 2px;
	background: var(--hp-accent);
	content: "";
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 160ms ease;
}

.hp-header__nav a:hover::after,
.hp-header__nav a:focus-visible::after {
	transform: scaleX(1);
}

.hp-header__actions {
	display: flex;
	align-items: center;
	gap: 22px;
	margin-left: auto;
}

.hp-icon-button {
	position: relative;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
}

.hp-header__search span,
.hp-search button span {
	position: relative;
	display: block;
	width: 17px;
	height: 17px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.hp-header__search span::after,
.hp-search button span::after {
	position: absolute;
	right: -6px;
	bottom: -4px;
	width: 8px;
	height: 2px;
	background: currentColor;
	content: "";
	transform: rotate(48deg);
	transform-origin: left center;
}

.hp-menu-button {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 6px 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.hp-menu-button__lines {
	display: grid;
	gap: 5px;
	width: 24px;
}

.hp-menu-button__lines i {
	display: block;
	height: 2px;
	background: currentColor;
}

.hp-menu-button__label {
	font-size: 9px;
	letter-spacing: 0.06em;
}

.hp-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 500;
	display: grid;
	grid-template-rows: auto auto 1fr;
	padding: 22px clamp(24px, 7vw, 92px) 50px;
	background:
		linear-gradient(130deg, rgba(13, 15, 17, 0.97), rgba(46, 48, 50, 0.97)),
		radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15), transparent 34%);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.hp-menu-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.hp-menu-overlay__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.hp-menu-overlay__brand {
	display: block;
	width: 118px;
	height: 92px;
	overflow: hidden;
}

.hp-menu-overlay__close {
	position: relative;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}

.hp-menu-overlay__close::before,
.hp-menu-overlay__close::after {
	position: absolute;
	top: 23px;
	left: 9px;
	width: 30px;
	height: 2px;
	background: currentColor;
	content: "";
}

.hp-menu-overlay__close::before {
	transform: rotate(45deg);
}

.hp-menu-overlay__close::after {
	transform: rotate(-45deg);
}

.hp-menu-overlay__nav {
	display: grid;
	align-content: center;
	gap: 12px;
	width: min(100%, 480px);
	margin: 12px auto;
	font-size: clamp(22px, 3.2vw, 40px);
	font-weight: 700;
	letter-spacing: 0.05em;
}

.hp-menu-overlay__nav a {
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.hp-menu-overlay__nav a:hover {
	color: var(--hp-accent-hover);
}

.hp-menu-overlay__subnav {
	display: grid;
	grid-template-columns: repeat(4, max-content);
	justify-content: center;
	align-content: end;
	gap: 16px 32px;
	color: #d9dcde;
	font-size: 13px;
}

.hp-home-page.hp-menu-is-open {
	overflow: hidden;
}

.hp-home {
	min-width: 0;
}

.hp-hero {
	position: relative;
	min-height: 620px;
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(28, 31, 33, 0.22), rgba(225, 228, 230, 0.22)),
		linear-gradient(105deg, #62666a 0%, #dfe2e4 47%, #73777b 100%);
	isolation: isolate;
}

.hp-hero::before {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(ellipse at 8% 82%, rgba(255, 255, 255, 0.74), transparent 31%),
		radial-gradient(ellipse at 42% 26%, rgba(255, 255, 255, 0.7), transparent 36%),
		radial-gradient(ellipse at 89% 74%, rgba(255, 255, 255, 0.64), transparent 32%),
		radial-gradient(ellipse at 68% 8%, rgba(27, 30, 32, 0.4), transparent 36%),
		linear-gradient(120deg, rgba(24, 26, 28, 0.5), transparent 34%, rgba(32, 34, 36, 0.34));
	content: "";
	filter: blur(9px);
	transform: scale(1.04);
}

.hp-hero::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	height: 96px;
	background: linear-gradient(180deg, transparent, rgba(242, 243, 244, 0.48));
	content: "";
}

.hp-hero__fog {
	position: absolute;
	inset: 19% -8% auto;
	z-index: -1;
	height: 46%;
	background:
		radial-gradient(ellipse at 18% 50%, rgba(255, 255, 255, 0.72), transparent 44%),
		radial-gradient(ellipse at 62% 43%, rgba(255, 255, 255, 0.54), transparent 39%),
		radial-gradient(ellipse at 96% 52%, rgba(255, 255, 255, 0.6), transparent 40%);
	filter: blur(20px);
	opacity: 0.76;
}

.hp-hero__inner {
	display: grid;
	grid-template-columns: minmax(330px, 0.78fr) minmax(570px, 1.32fr);
	align-items: end;
	gap: clamp(32px, 5vw, 84px);
	min-height: 620px;
	padding-top: calc(var(--hp-header-height) + 48px);
	padding-bottom: 0;
}

.hp-hero__copy {
	position: relative;
	align-self: center;
	padding-bottom: 58px;
}

.hp-hero__copy::before {
	position: absolute;
	top: -20px;
	left: 0;
	width: 52px;
	height: 3px;
	background: var(--hp-accent);
	content: "";
}

.hp-eyebrow {
	margin: 0 0 10px;
	color: var(--hp-text-muted);
	font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
}

.hp-hero__copy .hp-eyebrow {
	color: rgba(25, 28, 30, 0.7);
}

.hp-hero h1 {
	margin: 0;
	color: #25282a;
	font-size: clamp(34px, 3.2vw, 52px);
	font-weight: 900;
	letter-spacing: 0.02em;
	line-height: 1.22;
	text-shadow: 0 1px 10px rgba(255, 255, 255, 0.44);
}

.hp-hero h1 span {
	color: var(--hp-accent);
	font-style: italic;
}

.hp-hero__lead {
	margin: 16px 0 26px;
	color: #34383b;
	font-size: 14px;
	font-weight: 700;
}

.hp-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	gap: 10px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 2px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.04em;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.hp-button:hover {
	transform: translateY(-1px);
}

.hp-button--primary {
	background: var(--hp-accent);
	border-color: var(--hp-accent);
	box-shadow: 0 8px 24px var(--hp-accent-border);
	color: #fff !important;
}

.hp-button--primary:hover {
	background: var(--hp-accent-hover);
	border-color: var(--hp-accent-hover);
}

.hp-search {
	display: grid;
	grid-template-columns: 1fr 54px;
	width: min(100%, 390px);
	height: 54px;
	margin-top: 28px;
	background: rgba(255, 255, 255, 0.91);
	border: 1px solid rgba(255, 255, 255, 0.74);
	box-shadow: 0 12px 28px rgba(34, 37, 40, 0.12);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hp-search:focus-within {
	border-color: var(--hp-accent-border);
	box-shadow: 0 0 0 3px var(--hp-accent-soft), 0 12px 28px rgba(34, 37, 40, 0.12);
}

.hp-search input:focus-visible {
	outline: 0;
}

.hp-search input {
	min-width: 0;
	padding: 0 18px;
	border: 0;
	background: transparent;
	color: var(--hp-text);
	font-size: 14px;
}

.hp-search input::placeholder {
	color: #858b90;
}

.hp-search button {
	display: grid;
	place-items: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--hp-accent);
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease;
}

.hp-search button:hover {
	background: var(--hp-accent-soft);
	color: var(--hp-accent-hover);
}

.hp-podium {
	align-self: end;
	width: 100%;
}

.hp-podium__cards {
	display: grid;
	grid-template-columns: minmax(130px, 0.9fr) minmax(180px, 1.18fr) minmax(130px, 0.9fr);
	grid-template-areas: "two one three";
	align-items: end;
	gap: 18px;
	padding: 34px 12px 0;
}

.hp-ranking-card {
	position: relative;
	min-width: 0;
	background: #34373a;
	border: 1px solid rgba(20, 22, 24, 0.54);
	border-top: 3px solid #686d71;
	box-shadow: 0 18px 30px rgba(24, 27, 29, 0.24);
	color: #fff;
}

.hp-ranking-card--rank-1 {
	grid-area: one;
	border-top-color: var(--hp-accent-hot);
	box-shadow: inset 3px 0 0 var(--hp-accent), 0 18px 30px rgba(24, 27, 29, 0.24);
}

.hp-ranking-card--rank-2 {
	grid-area: two;
}

.hp-ranking-card--rank-3 {
	grid-area: three;
	border-top-color: var(--hp-accent-border);
}

.hp-ranking-card__link {
	display: block;
	color: #fff !important;
}

.hp-ranking-card__rank {
	position: absolute;
	top: -31px;
	left: 50%;
	z-index: 2;
	width: 48px;
	height: 38px;
	background: #555a5e;
	color: #fff;
	clip-path: polygon(50% 0, 90% 18%, 100% 62%, 50% 100%, 0 62%, 10% 18%);
	transform: translateX(-50%);
}

.hp-ranking-card__rank span {
	display: grid;
	height: 100%;
	place-items: center;
	color: var(--hp-accent);
	font-family: "Arial Narrow", sans-serif;
	font-size: 20px;
	font-weight: 900;
}

.hp-ranking-card--rank-1 .hp-ranking-card__rank {
	width: 58px;
	height: 45px;
	background: #45494c;
	box-shadow: inset 0 -3px 0 var(--hp-accent-hot);
}

.hp-ranking-card--rank-1 .hp-ranking-card__rank span {
	color: var(--hp-accent-hot);
}

.hp-ranking-card--rank-3 .hp-ranking-card__rank {
	background: #595b5d;
}

.hp-media {
	position: relative;
	overflow: hidden;
	background: #c4c7c9;
}

.hp-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hp-media--placeholder {
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 50% 32%, rgba(87, 91, 94, 0.43) 0 10%, transparent 10.5%),
		radial-gradient(ellipse at 50% 82%, rgba(77, 81, 84, 0.4) 0 28%, transparent 28.5%),
		linear-gradient(135deg, #d9dcde, #979b9e 48%, #c9ccce);
}

.hp-media--placeholder::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 32%, rgba(255, 255, 255, 0.28), transparent 68%);
	content: "";
}

.hp-media--placeholder span {
	position: absolute;
	right: 8px;
	bottom: 6px;
	z-index: 1;
	color: rgba(255, 255, 255, 0.76);
	font-family: "Arial Narrow", sans-serif;
	font-size: 8px;
	letter-spacing: 0.13em;
}

.hp-media--podium {
	height: 148px;
}

.hp-ranking-card--rank-1 .hp-media--podium {
	height: 185px;
}

.hp-ranking-card__body {
	padding: 14px 14px 16px;
	background: linear-gradient(145deg, #3d4043, #292c2e);
}

.hp-ranking-card--rank-1 .hp-ranking-card__body {
	padding: 16px 18px 18px;
}

.hp-ranking-card__badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 7px;
	background: var(--hp-accent-hot);
	box-shadow: 0 0 0 2px var(--hp-accent-hot-soft);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.04em;
}

.hp-ranking-card h3 {
	margin: 0 0 4px;
	color: #fff;
	font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
	font-size: 22px;
	line-height: 1.1;
}

.hp-ranking-card--rank-1 h3 {
	font-size: 25px;
}

.hp-stars {
	display: flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
	white-space: nowrap;
}

.hp-stars span,
.hp-stars i {
	overflow: hidden;
	color: var(--hp-accent);
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0.08em;
	text-overflow: clip;
}

.hp-stars b {
	color: inherit;
	font-size: 11px;
}

.hp-ranking-card__metrics {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 5px;
	margin: 13px 0 0;
	text-align: center;
}

.hp-ranking-card__metrics div {
	position: relative;
	min-width: 0;
}

.hp-ranking-card__metrics div::after {
	position: absolute;
	right: 10%;
	bottom: -5px;
	left: 10%;
	height: 2px;
	background: linear-gradient(90deg, var(--hp-accent) 0 74%, rgba(255, 255, 255, 0.13) 74%);
	content: "";
}

.hp-ranking-card__metrics div:first-child::after {
	background: linear-gradient(90deg, var(--hp-accent-hot) 0 82%, rgba(255, 255, 255, 0.13) 82%);
}

.hp-ranking-card__metrics dt {
	overflow: hidden;
	color: #c6c9cb;
	font-size: 8px;
	font-weight: 500;
	white-space: nowrap;
}

.hp-ranking-card__metrics dd {
	margin: 1px 0 0;
	color: var(--hp-accent);
	font-family: "Arial Narrow", sans-serif;
	font-size: 19px;
	font-weight: 900;
	line-height: 1;
}

.hp-ranking-card__metrics div:first-child dd {
	color: var(--hp-accent-hot);
}

.hp-podium__base {
	position: relative;
	display: grid;
	width: calc(100% + 12px);
	height: 66px;
	margin-left: -6px;
	place-items: end center;
	padding-bottom: 12px;
	background:
		linear-gradient(90deg, transparent 0 4%, rgba(174, 178, 181, 0.6) 4% 96%, transparent 96%),
		linear-gradient(180deg, #c9ccce, #9ea2a5);
	border-top: 1px solid rgba(255, 255, 255, 0.68);
	box-shadow: 0 11px 18px rgba(34, 36, 38, 0.16);
	clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.hp-podium__base span {
	color: #fff;
	font-family: "Arial Narrow", sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.hp-section {
	padding: 46px 0;
}

.hp-section-heading {
	margin-bottom: 22px;
}

.hp-section-heading--with-link,
.hp-panel__heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
}

.hp-section-heading p {
	margin: 0 0 3px;
	color: var(--hp-text-muted);
	font-family: "Arial Narrow", sans-serif;
	font-size: 10px;
	letter-spacing: 0.15em;
}

.hp-section-heading h2,
.hp-panel__heading h2,
.hp-about h2,
.hp-hall h2 {
	position: relative;
	margin: 0;
	color: var(--hp-text);
	font-size: 22px;
	font-weight: 900;
	line-height: 1.35;
}

.hp-section-heading h2::after,
.hp-panel__heading h2::after,
.hp-about h2::after,
.hp-hall h2::after {
	display: block;
	width: 40px;
	height: 2px;
	margin-top: 10px;
	background: var(--hp-accent);
	content: "";
}

.hp-section-heading a,
.hp-panel__heading a {
	padding: 8px 0;
	color: #464b4f;
	font-size: 11px;
	font-weight: 700;
}

.hp-section--types {
	background:
		linear-gradient(rgba(250, 251, 252, 0.94), rgba(243, 245, 246, 0.94)),
		radial-gradient(circle at 25% 0, #fff, transparent 42%);
	border-bottom: 1px solid var(--hp-border);
}

.hp-type-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.hp-type-card {
	display: flex;
	min-width: 0;
	min-height: 150px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 18px 10px;
	background: rgba(255, 255, 255, 0.56);
	border: 1px solid var(--hp-border);
	box-shadow: 0 4px 14px rgba(42, 46, 49, 0.03);
	text-align: center;
	transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease;
}

.hp-type-card:hover,
.hp-type-card:focus-visible {
	background: #fff;
	border-color: var(--hp-accent-border);
	transform: translateY(-2px);
}

.hp-type-card.is-selected,
.hp-type-card[aria-current="page"] {
	background: var(--hp-accent-soft);
	border-color: var(--hp-accent-border);
}

.hp-type-card__icon {
	position: relative;
	display: grid;
	width: 56px;
	height: 50px;
	margin-bottom: 9px;
	place-items: center;
	color: var(--hp-accent);
	font-size: 38px;
	font-weight: 300;
	line-height: 1;
}

.hp-type-card__icon::after {
	position: absolute;
	right: 1px;
	bottom: 5px;
	width: 15px;
	height: 2px;
	background: var(--hp-accent);
	content: "";
}

.hp-type-card strong {
	font-size: 13px;
	font-weight: 800;
}

.hp-type-card small {
	margin-top: 4px;
	color: var(--hp-text-muted);
	font-size: 10px;
}

.hp-dashboard {
	padding-top: 28px;
	background:
		radial-gradient(ellipse at 74% 10%, rgba(255, 255, 255, 0.72), transparent 43%),
		var(--hp-bg);
}

.hp-dashboard__grid {
	display: grid;
	grid-template-columns: 0.82fr 1.52fr 0.72fr;
	align-items: start;
	gap: 8px;
}

.hp-panel {
	min-width: 0;
	background: rgba(248, 249, 250, 0.82);
	border: 1px solid var(--hp-border);
	box-shadow: var(--hp-shadow);
}

.hp-panel__heading {
	min-height: 64px;
	padding: 14px 18px 10px;
	border-bottom: 1px solid var(--hp-border);
}

.hp-panel__heading h2 {
	font-size: 16px;
}

.hp-panel__heading h2::after {
	width: 28px;
	margin-top: 8px;
}

.hp-overall__list {
	margin: 0;
	padding: 0 16px 10px;
	list-style: none;
}

.hp-overall__list li {
	position: relative;
	border-bottom: 1px solid var(--hp-border);
	transition: background-color 160ms ease;
}

.hp-overall__list li::before {
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: -16px;
	width: 2px;
	background: transparent;
	content: "";
	transition: background-color 160ms ease;
}

.hp-overall__list li:hover {
	background: var(--hp-accent-soft);
}

.hp-overall__list li:hover::before {
	background: var(--hp-accent);
}

.hp-overall__list li:last-child {
	border-bottom: 0;
}

.hp-overall__list a {
	display: grid;
	grid-template-columns: 44px 80px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	min-height: 102px;
	padding: 12px 0;
}

.hp-overall__rank {
	color: var(--hp-accent);
	font-family: "Arial Narrow", sans-serif;
	font-size: 26px;
	font-weight: 900;
	text-align: center;
}

.hp-overall__list li:first-child .hp-overall__rank {
	color: var(--hp-accent-hot);
}

.hp-overall__list li:first-child::before {
	background: var(--hp-accent-hot);
}

.hp-media--list {
	width: 80px;
	height: 72px;
}

.hp-overall__content {
	display: grid;
	min-width: 0;
	gap: 4px;
}

.hp-overall__content > strong {
	overflow: hidden;
	font-family: "Arial Narrow", sans-serif;
	font-size: 17px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-overall__content small {
	overflow: hidden;
	color: #4e5357;
	font-size: 9px;
	white-space: nowrap;
}

.hp-overall__content .hp-stars b {
	color: var(--hp-accent);
}

.hp-new__track {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	padding: 12px 12px 16px;
	overscroll-behavior-inline: contain;
}

.hp-review-card {
	position: relative;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--hp-border);
	box-shadow: inset 0 2px 0 var(--hp-accent-border), 0 6px 14px rgba(32, 35, 38, 0.08);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hp-review-card:hover,
.hp-review-card:focus-within {
	border-color: var(--hp-accent);
	box-shadow: inset 0 2px 0 var(--hp-accent), 0 8px 18px rgba(32, 35, 38, 0.10);
}

.hp-review-card > a {
	display: block;
}

.hp-review-card__new {
	position: absolute;
	top: 9px;
	left: 8px;
	z-index: 2;
	padding: 2px 7px;
	background: var(--hp-accent);
	color: #fff;
	font-family: "Arial Narrow", sans-serif;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.hp-review-card__type {
	position: absolute;
	top: 104px;
	right: 8px;
	z-index: 2;
	max-width: calc(100% - 16px);
	overflow: hidden;
	padding: 2px 6px;
	background: var(--hp-accent-soft);
	border: 1px solid var(--hp-accent-border);
	color: var(--hp-accent);
	font-size: 8px;
	font-weight: 800;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.hp-media--review {
	height: 128px;
}

.hp-review-card__body {
	padding: 10px 10px 12px;
}

.hp-review-card h3 {
	margin: 0 0 3px;
	font-family: "Arial Narrow", sans-serif;
	font-size: 16px;
	line-height: 1.2;
}

.hp-review-card p {
	overflow: hidden;
	min-height: 2.8em;
	margin: 0 0 5px;
	color: #62686d;
	font-size: 9px;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.hp-review-card dl {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
	margin: 9px 0 0;
}

.hp-review-card dl div {
	display: grid;
	text-align: center;
}

.hp-review-card dt {
	color: var(--hp-text-muted);
	font-size: 8px;
}

.hp-review-card dd {
	margin: 0;
	font-family: "Arial Narrow", sans-serif;
	font-size: 15px;
	font-weight: 900;
}

.hp-review-card .hp-stars b {
	color: var(--hp-accent);
}

.hp-features {
	border-top: 1px solid var(--hp-border);
}

.hp-features .hp-panel__heading {
	min-height: 58px;
}

.hp-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 12px;
}

.hp-feature-card {
	display: flex;
	min-height: 136px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 12px 8px;
	background:
		linear-gradient(rgba(48, 52, 55, 0.76), rgba(36, 39, 41, 0.86)),
		radial-gradient(circle at 50% 20%, #aeb2b5, #565a5d);
	border: 1px solid rgba(34, 36, 38, 0.42);
	color: #fff !important;
	text-align: center;
}

.hp-feature-card > span {
	margin-bottom: 10px;
	color: var(--hp-accent);
	font-size: 38px;
	font-weight: 200;
	line-height: 1;
}

.hp-feature-card strong {
	font-size: 11px;
}

.hp-feature-card small {
	margin-top: 3px;
	color: #cfd2d4;
	font-family: "Arial Narrow", sans-serif;
	font-size: 8px;
	letter-spacing: 0.13em;
}

.hp-actresses ul {
	margin: 0;
	padding: 0 16px 8px;
	list-style: none;
}

.hp-actresses li {
	border-bottom: 1px solid var(--hp-border);
}

.hp-actresses li:last-child {
	border-bottom: 0;
}

.hp-actresses li a {
	display: grid;
	grid-template-columns: 54px 1fr auto;
	align-items: center;
	gap: 10px;
	min-height: 98px;
}

.hp-actresses__avatar {
	display: block;
	width: 54px;
	height: 54px;
	background:
		radial-gradient(circle at 50% 35%, #c3c6c8 0 19%, transparent 20%),
		radial-gradient(ellipse at 50% 92%, #babdc0 0 36%, transparent 37%),
		linear-gradient(135deg, #e7e9ea, #a9adb0);
	border-radius: 50%;
}

.hp-actresses li a > span:nth-child(2) {
	display: grid;
}

.hp-actresses strong {
	font-size: 13px;
}

.hp-actresses small {
	color: #555b5f;
	font-size: 9px;
}

.hp-actresses i {
	font-size: 20px;
	font-style: normal;
}

.hp-section--positions {
	padding-top: 28px;
	background: #f5f6f7;
	border-top: 1px solid var(--hp-border);
}

.hp-position-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
}

.hp-position-grid a {
	display: grid;
	min-height: 110px;
	place-items: center;
	align-content: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--hp-border);
}

.hp-position-grid span {
	color: var(--hp-accent);
	font-size: 30px;
	line-height: 1;
}

.hp-position-grid strong {
	font-size: 12px;
}

.hp-hall {
	padding-top: 16px;
	background: #f5f6f7;
}

.hp-hall__card {
	display: grid;
	grid-template-columns: auto 1fr minmax(220px, 0.34fr);
	align-items: center;
	gap: 34px;
	min-height: 146px;
	padding: 26px clamp(28px, 6vw, 72px);
	background:
		linear-gradient(90deg, rgba(43, 46, 49, 0.88), rgba(81, 84, 87, 0.7)),
		radial-gradient(ellipse at 55% 0, #e4e6e7, #55595c);
	border: 1px solid #6e7275;
	border-top: 2px solid var(--hp-accent-hot);
	color: #fff;
}

.hp-hall__emblem {
	color: var(--hp-accent-hot);
	font-size: 60px;
}

.hp-hall h2 {
	color: #fff;
	font-size: 24px;
	letter-spacing: 0.05em;
}

.hp-hall p {
	margin: 6px 0 0;
	color: #e1e3e4;
	font-size: 12px;
}

.hp-button--outline-light {
	border-color: rgba(255, 255, 255, 0.64);
	color: #fff !important;
}

.hp-about {
	padding: 54px 0 66px;
	background: #f5f6f7;
}

.hp-about__inner {
	display: grid;
	grid-template-columns: 0.85fr 1.35fr auto;
	align-items: center;
	gap: 46px;
	padding: 34px 38px;
	background: #fff;
	border: 1px solid var(--hp-border);
	box-shadow: var(--hp-shadow);
}

.hp-about p:not(.hp-eyebrow) {
	margin: 0;
	color: #53595d;
	font-size: 13px;
	line-height: 1.9;
}

.hp-button--outline {
	min-width: 170px;
	border-color: var(--hp-accent);
	color: var(--hp-accent) !important;
}

.hp-footer {
	padding-top: 42px;
	background:
		linear-gradient(135deg, rgba(48, 51, 54, 0.96), rgba(33, 36, 38, 0.98)),
		radial-gradient(circle at 10% 0, #6a6d70, transparent 30%);
	border-top: 2px solid var(--hp-accent);
	color: #d8dbdd;
}

.hp-footer__grid {
	display: grid;
	grid-template-columns: 1.15fr repeat(3, 1fr);
	gap: 56px;
	padding-bottom: 42px;
}

.hp-footer__brand img {
	width: 145px;
	height: 100px;
	object-fit: cover;
}

.hp-footer__brand p {
	margin: 12px 0 0;
	color: #c1c5c7;
	font-size: 11px;
	line-height: 1.8;
}

.hp-footer__column {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.hp-footer__column h2 {
	margin: 4px 0 9px;
	color: #fff;
	font-family: "Arial Narrow", sans-serif;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.hp-footer__column a {
	color: #d1d4d6;
	font-size: 11px;
	transition: color 160ms ease;
}

.hp-footer__column a:hover {
	color: var(--hp-accent-hover);
}

.hp-footer__bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 58px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	color: #aeb3b6;
}

.hp-footer__bottom small {
	font-size: 9px;
	letter-spacing: 0.05em;
}

.hp-footer__to-top {
	position: absolute;
	right: max(24px, calc((100vw - var(--hp-shell)) / 2));
	display: grid;
	width: 42px;
	height: 42px;
	place-items: center;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid var(--hp-accent-border);
	border-radius: 50%;
	color: #fff !important;
}

@media (max-width: 1180px) {
	:root {
		--hp-shell: 1080px;
	}

	.hp-header__inner {
		gap: 20px;
	}

	.hp-header__nav {
		gap: 18px;
		font-size: 12px;
	}

	.hp-hero__inner {
		grid-template-columns: minmax(285px, 0.74fr) minmax(530px, 1.3fr);
		gap: 26px;
	}

	.hp-podium__cards {
		gap: 10px;
		padding-inline: 4px;
	}

	.hp-ranking-card__body {
		padding-inline: 10px;
	}

	.hp-ranking-card__metrics dt {
		font-size: 7px;
	}

	.hp-ranking-card__metrics dd {
		font-size: 17px;
	}

	.hp-dashboard__grid {
		grid-template-columns: minmax(280px, 0.8fr) minmax(470px, 1.35fr);
	}

	.hp-actresses {
		grid-column: 1 / -1;
	}

	.hp-actresses ul {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 0;
	}

	.hp-actresses li {
		border-right: 1px solid var(--hp-border);
		border-bottom: 0;
	}

	.hp-actresses li:last-child {
		border-right: 0;
	}

	.hp-actresses li a {
		grid-template-columns: 44px 1fr auto;
		padding: 0 10px;
	}

	.hp-actresses__avatar {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 900px) {
	:root {
		--hp-header-height: 78px;
	}

	.hp-shell {
		width: min(calc(100% - 32px), 760px);
	}

	.hp-header__brand {
		flex-basis: 104px;
		height: 72px;
	}

	.hp-header__nav,
	.hp-header__search {
		display: none;
	}

	.hp-hero {
		min-height: 0;
	}

	.hp-hero__inner {
		display: block;
		min-height: 0;
		padding-top: calc(var(--hp-header-height) + 62px);
	}

	.hp-hero__copy {
		padding-bottom: 34px;
	}

	.hp-hero h1 {
		font-size: clamp(36px, 7vw, 48px);
	}

	.hp-podium {
		width: min(100%, 650px);
		margin-inline: auto;
	}

	.hp-podium__cards {
		grid-template-columns: minmax(128px, 0.86fr) minmax(188px, 1.18fr) minmax(128px, 0.86fr);
	}

	.hp-type-grid,
	.hp-position-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.hp-dashboard__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.hp-overall,
	.hp-new,
	.hp-actresses {
		grid-column: auto;
	}

	.hp-new__track {
		grid-template-columns: repeat(4, 1fr);
	}

	.hp-actresses ul {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-actresses li {
		border-right: 0;
		border-bottom: 1px solid var(--hp-border);
	}

	.hp-actresses li:nth-child(odd) {
		border-right: 1px solid var(--hp-border);
	}

	.hp-hall__card {
		grid-template-columns: auto 1fr;
	}

	.hp-hall__card .hp-button {
		grid-column: 1 / -1;
	}

	.hp-about__inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.hp-about__inner .hp-button {
		justify-self: start;
	}

	.hp-footer__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 34px;
	}

	.hp-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 600px) {
	.hp-shell {
		width: min(calc(100% - 28px), 560px);
	}

	.hp-header__inner {
		width: calc(100% - 32px);
	}

	.hp-header__brand {
		flex-basis: 100px;
		height: 72px;
	}

	.hp-header__actions {
		gap: 0;
	}

	.hp-menu-button__label {
		display: none;
	}

	.hp-menu-overlay {
		padding: 14px 24px 32px;
	}

	.hp-menu-overlay__brand {
		width: 110px;
		height: 82px;
	}

	.hp-menu-overlay__nav {
		align-content: start;
		gap: 7px;
		margin-top: 24px;
		font-size: 19px;
	}

	.hp-menu-overlay__subnav {
		grid-template-columns: 1fr 1fr;
		justify-content: stretch;
		gap: 10px 18px;
		font-size: 12px;
	}

	.hp-hero::before {
		background:
			radial-gradient(ellipse at 10% 23%, rgba(255, 255, 255, 0.6), transparent 28%),
			radial-gradient(ellipse at 70% 53%, rgba(255, 255, 255, 0.74), transparent 40%),
			linear-gradient(130deg, rgba(25, 28, 30, 0.78), rgba(227, 229, 230, 0.42) 46%, rgba(52, 55, 57, 0.66));
	}

	.hp-hero__inner {
		padding-top: 126px;
	}

	.hp-hero__copy {
		padding-bottom: 30px;
	}

	.hp-hero__copy .hp-eyebrow {
		display: none;
	}

	.hp-hero h1 {
		font-size: clamp(28px, 8.5vw, 37px);
		letter-spacing: 0;
	}

	.hp-hero__lead {
		margin: 12px 0 20px;
		font-size: 11px;
	}

	.hp-button {
		min-height: 46px;
		font-size: 12px;
	}

	.hp-search {
		width: 100%;
		height: 50px;
		margin-top: 18px;
	}

	.hp-search input {
		padding-left: 14px;
		font-size: 12px;
	}

	.hp-podium__cards {
		grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.16fr) minmax(0, 0.82fr);
		gap: 5px;
		padding: 30px 0 0;
	}

	.hp-ranking-card__rank {
		top: -25px;
		width: 38px;
		height: 31px;
	}

	.hp-ranking-card--rank-1 .hp-ranking-card__rank {
		top: -29px;
		width: 48px;
		height: 38px;
	}

	.hp-ranking-card__rank span {
		font-size: 16px;
	}

	.hp-media--podium {
		height: 98px;
	}

	.hp-ranking-card--rank-1 .hp-media--podium {
		height: 130px;
	}

	.hp-ranking-card__body,
	.hp-ranking-card--rank-1 .hp-ranking-card__body {
		padding: 9px 7px 11px;
	}

	.hp-ranking-card__badge {
		margin-bottom: 3px;
		padding: 1px 4px;
		font-size: 7px;
	}

	.hp-ranking-card h3,
	.hp-ranking-card--rank-1 h3 {
		overflow: hidden;
		font-size: 15px;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.hp-ranking-card--rank-1 h3 {
		font-size: 18px;
	}

	.hp-ranking-card .hp-stars {
		gap: 3px;
	}

	.hp-ranking-card .hp-stars span {
		font-size: 8px;
		letter-spacing: 0;
	}

	.hp-ranking-card .hp-stars b {
		font-size: 8px;
	}

	.hp-ranking-card__metrics {
		grid-template-columns: repeat(2, 1fr);
		gap: 6px 2px;
		margin-top: 8px;
	}

	.hp-ranking-card__metrics dt {
		font-size: 7px;
	}

	.hp-ranking-card__metrics dd {
		font-size: 15px;
	}

	.hp-podium__base {
		width: calc(100% + 8px);
		height: 48px;
		margin-left: -4px;
		padding-bottom: 8px;
	}

	.hp-podium__base span {
		font-size: 8px;
	}

	.hp-section {
		padding: 34px 0;
	}

	.hp-section-heading {
		margin-bottom: 16px;
	}

	.hp-section-heading h2 {
		font-size: 20px;
	}

	.hp-section-heading--with-link > a {
		font-size: 9px;
	}

	.hp-type-grid {
		gap: 5px;
	}

	.hp-type-card {
		min-height: 116px;
		padding: 13px 4px;
	}

	.hp-type-card__icon {
		width: 42px;
		height: 40px;
		margin-bottom: 5px;
		font-size: 30px;
	}

	.hp-type-card strong {
		font-size: 10px;
	}

	.hp-type-card small {
		font-size: 8px;
	}

	.hp-dashboard {
		padding-top: 24px;
	}

	.hp-panel__heading {
		padding-inline: 12px;
	}

	.hp-overall__list {
		padding-inline: 10px;
	}

	.hp-overall__list a {
		grid-template-columns: 40px 70px minmax(0, 1fr);
		gap: 8px;
		min-height: 88px;
		padding-block: 9px;
	}

	.hp-overall__rank {
		font-size: 24px;
	}

	.hp-media--list {
		width: 70px;
		height: 62px;
	}

	.hp-overall__content > strong {
		font-size: 16px;
	}

	.hp-overall__content .hp-stars i {
		font-size: 10px;
	}

	.hp-overall__content small {
		font-size: 8px;
	}

	.hp-new__track {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		cursor: grab;
		padding: 12px 12px 18px;
		scrollbar-width: thin;
	}

	.hp-new__track.is-dragging {
		cursor: grabbing;
		user-select: none;
	}

	.hp-review-card {
		flex: 0 0 148px;
		scroll-snap-align: start;
	}

	.hp-media--review {
		height: 138px;
	}

	.hp-review-card__type {
		top: 114px;
		font-size: 7px;
	}

	.hp-ranking-card__metrics div:not(:first-child)::after {
		opacity: 0;
	}

	.hp-feature-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hp-feature-card {
		min-height: 142px;
	}

	.hp-actresses ul {
		display: block;
	}

	.hp-actresses li,
	.hp-actresses li:nth-child(odd) {
		border-right: 0;
	}

	.hp-position-grid {
		gap: 5px;
	}

	.hp-position-grid a {
		min-height: 92px;
		gap: 5px;
	}

	.hp-position-grid span {
		font-size: 25px;
	}

	.hp-position-grid strong {
		font-size: 10px;
	}

	.hp-hall {
		padding-top: 8px;
	}

	.hp-hall__card {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 10px;
		padding: 28px 18px;
		text-align: center;
	}

	.hp-hall__emblem {
		font-size: 48px;
	}

	.hp-hall h2 {
		font-size: 21px;
	}

	.hp-hall__card .hp-button {
		grid-column: auto;
		width: 100%;
		margin-top: 8px;
	}

	.hp-about {
		padding: 28px 0 40px;
	}

	.hp-about__inner {
		gap: 18px;
		padding: 28px 22px;
	}

	.hp-about__inner .hp-button {
		width: 100%;
	}

	.hp-footer {
		padding-top: 32px;
	}

	.hp-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 28px 22px;
	}

	.hp-footer__brand {
		grid-column: 1 / -1;
	}

	.hp-footer__column:last-child {
		grid-column: 1 / -1;
	}

	.hp-footer__to-top {
		right: 16px;
	}
}

@media (max-width: 380px) {
	.hp-shell {
		width: calc(100% - 22px);
	}

	.hp-ranking-card__body,
	.hp-ranking-card--rank-1 .hp-ranking-card__body {
		padding-inline: 5px;
	}

	.hp-ranking-card h3 {
		font-size: 14px;
	}

	.hp-ranking-card--rank-1 h3 {
		font-size: 17px;
	}

	.hp-ranking-card__metrics dd {
		font-size: 14px;
	}

	.hp-overall__list a {
		grid-template-columns: 35px 64px minmax(0, 1fr);
	}

	.hp-media--list {
		width: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hp-home-page *,
	.hp-home-page *::before,
	.hp-home-page *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}