/* ==========================================================================
   PC Game Press — Layout & components
   ========================================================================== */

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--pgp-bg);
	color: var(--pgp-text);
	font-family: var(--pgp-ff-sans);
	font-size: 1rem;
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

html.is-locked {
	overflow: hidden;
}

img,
svg,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
	margin: 0;
}

ul,
ol {
	padding: 0;
	list-style: none;
}

:focus-visible {
	outline: 2px solid var(--pgp-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: rgba(14, 165, 233, .28);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	top: 8px;
	left: 8px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--pgp-accent);
	color: var(--pgp-on-accent);
	font-weight: 700;
	border-radius: var(--pgp-radius);
}

.c-icon {
	width: 1.1em;
	height: 1.1em;
	flex: none;
}

.c-icon.is-flip {
	transform: scaleX(-1);
}

/* 濃色エリアのローカルトークン */
.u-on-dark {
	--pgp-ink: #F3F6FA;
	--pgp-text: #CBD5E1;
	--pgp-muted: rgba(226, 232, 240, .62);
	--pgp-subtle: rgba(226, 232, 240, .42);
	--pgp-line: rgba(255, 255, 255, .09);
	--pgp-line-strong: rgba(255, 255, 255, .16);
	--pgp-surface: #1C2028;
	--pgp-surface-2: #222731;
	--pgp-surface-3: #262B35;
	--pgp-accent-ink: #38BDF8;
	--pgp-ok-ink: #34D399;
	--pgp-warn-ink: #FBBF24;
	--pgp-ng-ink: #F87171;
	color: var(--pgp-text);
}

/* 濃色エリアの光彩＋グリッド */
.u-darkfx {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--pgp-dark);
}

.u-darkfx::before,
.u-darkfx::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.u-darkfx::before {
	background:
		radial-gradient(820px 420px at 12% -18%, rgba(14, 165, 233, .24), transparent 62%),
		radial-gradient(640px 340px at 96% 0%, rgba(139, 92, 246, .16), transparent 62%);
}

.u-darkfx::after {
	background-image:
		linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

/* ---------- Layout ---------- */
.l-container {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 768px) {
	.l-container {
		padding-inline: 28px;
	}
}

@media (min-width: 1200px) {
	.l-container {
		padding-inline: 40px;
	}
}

.l-columns {
	display: grid;
	gap: 56px;
	padding-block: 48px 88px;
}

@media (min-width: 1080px) {
	.l-columns {
		grid-template-columns: minmax(0, 1fr) 320px;
		gap: 56px;
	}
}

.l-main {
	min-width: 0;
}

.l-page {
	max-width: 880px;
	padding-block: 40px 96px;
}

/* ---------- Header ---------- */
.l-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(18, 21, 27, .9);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(255, 255, 255, .06);
	transition: box-shadow .3s;
}

.l-header.is-scrolled {
	box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7);
}

.admin-bar .l-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .l-header {
		top: 46px;
	}
}

@media (max-width: 600px) {
	.admin-bar .l-header {
		top: 0;
	}
}

.l-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	height: 64px;
}

@media (min-width: 1080px) {
	.l-header__inner {
		height: 72px;
	}
}

/* Logo */
.c-logo {
	margin: 0;
	font-size: inherit;
	line-height: 1;
	flex: none;
}

.c-logo__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff;
}

.c-logo__mark {
	width: 32px;
	height: 32px;
	flex: none;
	transition: transform .4s var(--pgp-ease);
}

.c-logo__link:hover .c-logo__mark {
	transform: rotate(-8deg) scale(1.05);
}

.c-logo__text {
	display: grid;
	gap: 5px;
}

.c-logo__word {
	font: 800 1.1875rem/1 var(--pgp-ff-display);
	letter-spacing: .015em;
	color: #fff;
	white-space: nowrap;
}

.c-logo__word span {
	color: var(--pgp-accent);
}

.c-logo__tag {
	font: 700 .5625rem/1 var(--pgp-ff-display);
	letter-spacing: .24em;
	color: rgba(255, 255, 255, .45);
	white-space: nowrap;
}

.c-logo--custom img {
	max-height: 40px;
	width: auto;
}

@media (max-width: 420px) {
	.c-logo__tag {
		display: none;
	}
}

/* Global nav */
.c-gnav {
	display: none;
	margin-left: auto;
	height: 100%;
}

@media (min-width: 1080px) {
	.c-gnav {
		display: block;
	}
}

.c-gnav__list {
	display: flex;
	height: 100%;
	gap: 4px;
}

.c-gnav__list > li {
	position: relative;
	display: flex;
	align-items: center;
}

.c-gnav__list > li > a {
	display: grid;
	gap: 3px;
	padding: 8px 14px;
	border-radius: var(--pgp-radius);
	transition: background-color .2s;
}

.c-gnav__list > li > a:hover {
	background: rgba(255, 255, 255, .06);
}

.c-gnav__en {
	font: 700 .5625rem/1 var(--pgp-ff-display);
	letter-spacing: .18em;
	color: var(--pgp-accent);
}

.c-gnav__ja {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .86);
	transition: color .2s;
}

.c-gnav__list > li > a:hover .c-gnav__ja,
.c-gnav__list > .current-menu-item .c-gnav__ja,
.c-gnav__list > .current-menu-ancestor .c-gnav__ja {
	color: #fff;
}

.c-gnav__list > .current-menu-item::after,
.c-gnav__list > .current-menu-ancestor::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: -1px;
	height: 2px;
	background: var(--pgp-accent);
	box-shadow: 0 0 12px var(--pgp-accent);
}

/* Header actions */
.l-header__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

@media (min-width: 1080px) {
	.l-header__actions {
		margin-left: 12px;
	}
}

.c-iconbtn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	transition: background-color .2s, color .2s;
}

.c-iconbtn:hover {
	background: rgba(255, 255, 255, .08);
	color: #fff;
}

.c-iconbtn .c-icon {
	width: 20px;
	height: 20px;
}

.js-theme-toggle .is-sun,
[data-theme="dark"] .js-theme-toggle .is-moon {
	display: none;
}

[data-theme="dark"] .js-theme-toggle .is-sun {
	display: block;
}

@media (min-width: 1080px) {
	.c-menubtn {
		display: none;
	}
}

.c-searchbtn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 10px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	transition: background-color .2s, border-color .2s;
}

.c-searchbtn .c-icon {
	width: 20px;
	height: 20px;
}

.c-searchbtn__text,
.c-searchbtn__kbd {
	display: none;
}

@media (min-width: 1200px) {
	.c-searchbtn {
		width: 230px;
		padding: 0 8px 0 14px;
		background: rgba(255, 255, 255, .05);
		border: 1px solid rgba(255, 255, 255, .1);
	}

	.c-searchbtn:hover {
		background: rgba(255, 255, 255, .08);
		border-color: rgba(255, 255, 255, .18);
	}

	.c-searchbtn .c-icon {
		width: 16px;
		height: 16px;
		color: rgba(255, 255, 255, .55);
	}

	.c-searchbtn__text {
		display: block;
		font-size: .8125rem;
		color: rgba(255, 255, 255, .5);
	}

	.c-searchbtn__kbd {
		display: grid;
		place-items: center;
		margin-left: auto;
		width: 22px;
		height: 22px;
		font: 600 .75rem/1 var(--pgp-ff-display);
		color: rgba(255, 255, 255, .55);
		border: 1px solid rgba(255, 255, 255, .16);
		border-radius: 5px;
	}
}

@media (max-width: 1199px) {
	.c-searchbtn {
		width: 40px;
		justify-content: center;
		padding: 0;
	}

	.c-searchbtn:hover {
		background: rgba(255, 255, 255, .08);
	}
}

/* Reading progress */
.c-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	overflow: hidden;
}

.c-progress span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--pgp-accent), #67E8F9);
	box-shadow: 0 0 10px var(--pgp-accent);
	transform: scaleX(0);
	transform-origin: left;
}

/* ---------- Sub bar (TRENDING) ---------- */
.l-subbar {
	background: var(--pgp-surface);
	border-bottom: 1px solid var(--pgp-line);
}

.l-subbar__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 44px;
	white-space: nowrap;
}

.l-subbar__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font: 800 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--pgp-ink);
}

.l-subbar__pulse {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pgp-accent);
}

.l-subbar__pulse::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid var(--pgp-accent);
	animation: pgp-pulse 2s var(--pgp-ease) infinite;
}

@keyframes pgp-pulse {
	from {
		transform: scale(.5);
		opacity: 1;
	}

	to {
		transform: scale(1.6);
		opacity: 0;
	}
}

.l-subbar__list {
	display: flex;
	gap: 6px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 85%, transparent);
	mask-image: linear-gradient(90deg, #000 85%, transparent);
}

.l-subbar__list::-webkit-scrollbar {
	display: none;
}

.l-subbar__list a {
	display: block;
	padding: 3px 10px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--pgp-muted);
	border-radius: 999px;
	transition: background-color .2s, color .2s;
}

.l-subbar__list a:hover {
	color: var(--pgp-ink);
	background: var(--pgp-surface-2);
}

.l-subbar__date {
	display: none;
	margin-left: auto;
	flex: none;
	font: 700 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .08em;
	color: var(--pgp-muted);
	font-variant-numeric: tabular-nums;
}

.l-subbar__date span {
	color: var(--pgp-accent-ink);
}

@media (min-width: 900px) {
	.l-subbar__date {
		display: block;
	}
}

/* ---------- Search overlay ---------- */
.c-search {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	justify-items: center;
	align-items: start;
	padding: 10vh 16px 16px;
	background: rgba(8, 10, 14, .66);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity .2s;
}

.c-search[hidden],
.c-drawer[hidden] {
	display: none;
}

.c-search.is-open {
	opacity: 1;
}

.c-search__panel {
	width: min(680px, 100%);
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: 14px;
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .7);
	overflow: hidden;
	transform: translateY(-12px) scale(.98);
	transition: transform .3s var(--pgp-ease);
}

.c-search.is-open .c-search__panel {
	transform: none;
}

.c-search__form {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 64px;
	padding: 0 14px 0 20px;
	border-bottom: 1px solid var(--pgp-line);
	color: var(--pgp-muted);
}

.c-search__form .c-icon {
	width: 20px;
	height: 20px;
}

.c-search__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: none;
	background: transparent;
	font-size: 1.0625rem;
	color: var(--pgp-ink);
}

.c-search__input::placeholder {
	color: var(--pgp-subtle);
}

.c-search__input::-webkit-search-cancel-button {
	display: none;
}

.c-search__close kbd {
	display: block;
	padding: 4px 7px;
	font: 700 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .06em;
	color: var(--pgp-muted);
	border: 1px solid var(--pgp-line-strong);
	border-radius: 5px;
}

.c-search__body {
	overflow-y: auto;
	padding: 8px 0 18px;
}

.c-search__results:empty {
	display: none;
}

.c-search__results li a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--pgp-ink);
	transition: background-color .15s;
}

.c-search__results li a:hover,
.c-search__results li a:focus-visible {
	background: var(--pgp-accent-soft);
	outline: none;
}

.c-search__results li a::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--pgp-accent);
	transform: rotate(45deg);
}

.c-search__results .is-status {
	padding: 14px 20px;
	font-size: .875rem;
	color: var(--pgp-muted);
}

.c-search__results:not(:empty) + .c-search__suggest {
	display: none;
}

.c-search__heading {
	padding: 14px 20px 8px;
	font: 800 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .12em;
	color: var(--pgp-subtle);
}

.c-search__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 20px 6px;
}

.c-search__chips a {
	display: block;
	padding: 5px 12px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--pgp-text);
	background: var(--pgp-surface-2);
	border-radius: 999px;
	transition: background-color .15s, color .15s;
}

.c-search__chips a:hover {
	background: var(--pgp-accent-soft);
	color: var(--pgp-accent-ink);
}

.c-search__cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
	padding: 0 20px;
}

.c-search__cats a {
	display: grid;
	gap: 2px;
	padding: 12px 14px;
	font-size: .875rem;
	font-weight: 700;
	color: var(--pgp-ink);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius);
	transition: border-color .15s, background-color .15s;
}

.c-search__cats a:hover {
	border-color: var(--cat, var(--pgp-accent));
	background: var(--pgp-surface-2);
}

.c-search__catEn {
	font: 800 .625rem/1.4 var(--pgp-ff-display);
	letter-spacing: .14em;
	color: var(--cat, var(--pgp-accent));
}

/* ---------- Drawer (mobile menu) ---------- */
.c-drawer {
	position: fixed;
	inset: 0;
	z-index: 110;
	background: rgba(8, 10, 14, .6);
	opacity: 0;
	transition: opacity .25s;
}

.c-drawer.is-open {
	opacity: 1;
}

.c-drawer__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 88vw);
	padding: 14px 20px 32px;
	overflow-y: auto;
	background: var(--pgp-dark);
	transform: translateX(100%);
	transition: transform .35s var(--pgp-ease);
}

.c-drawer.is-open .c-drawer__panel {
	transform: none;
}

.c-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}

.c-drawer__title {
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .2em;
	color: var(--pgp-muted);
}

.c-drawer__search {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 0 14px;
	margin-bottom: 20px;
	border-radius: var(--pgp-radius);
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
	color: var(--pgp-muted);
}

.c-drawer__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	background: transparent;
	color: #fff;
}

.c-drawer__nav > ul > li {
	padding: 14px 0;
	border-bottom: 1px solid var(--pgp-line);
}

.c-drawer__cat {
	display: grid;
	gap: 2px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: #fff;
}

.c-drawer__cat span {
	font: 800 .625rem/1.4 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--cat, var(--pgp-accent));
}

.c-drawer__nav li ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.c-drawer__nav li ul a {
	display: block;
	padding: 4px 10px;
	font-size: .8125rem;
	color: var(--pgp-text);
	border: 1px solid var(--pgp-line-strong);
	border-radius: 999px;
}

.c-drawer__links {
	display: grid;
	gap: 10px;
	margin-top: 24px;
	font-size: .8125rem;
}

.c-drawer__links a {
	color: var(--pgp-muted);
}

/* ---------- Category label / chips ---------- */
[data-cat="game"] {
	--cat: var(--pgp-cat-game);
}

[data-cat="spec"] {
	--cat: var(--pgp-cat-spec);
}

[data-cat="gear"] {
	--cat: var(--pgp-cat-gear);
}

[data-cat="howto"] {
	--cat: var(--pgp-cat-howto);
}

[data-cat="other"] {
	--cat: var(--pgp-cat-other);
}

.c-cat {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .03em;
	word-break: keep-all;
	color: var(--pgp-ink);
	transition: color .2s;
}

.c-cat:hover {
	color: var(--cat, var(--pgp-accent));
}

.c-cat__dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	flex: none;
	background: var(--cat, var(--pgp-accent));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat, var(--pgp-accent)) 22%, transparent);
	transform: rotate(45deg);
}

.c-cat--onimage {
	color: #fff;
}

.c-cat--chip {
	padding: 5px 12px 5px 10px;
	border: 1px solid var(--pgp-line-strong);
	border-radius: 999px;
	background: var(--pgp-surface);
}

.c-newtag,
.c-card__new {
	display: inline-flex;
	align-items: center;
	padding: 4px 8px;
	font: 800 .625rem/1 var(--pgp-ff-display);
	letter-spacing: .14em;
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	border-radius: 3px;
}

.c-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.c-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 8px;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1.6;
	border-radius: 4px;
	color: var(--pgp-muted);
	background: var(--pgp-surface-2);
	border: 1px solid var(--pgp-line);
}

.c-chip::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.c-chip--ok {
	color: var(--pgp-ok-ink);
}

.c-chip--warn {
	color: var(--pgp-warn-ink);
}

.c-chip--ng {
	color: var(--pgp-ng-ink);
}

/* ---------- No image placeholder ---------- */
.c-noimg {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--cat, #0EA5E9) 55%, #0B0E14) 0%, #0B0E14 62%);
}

.c-noimg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 80%);
	mask-image: radial-gradient(circle at 30% 30%, #000, transparent 80%);
}

.c-noimg__en {
	position: relative;
	font: 900 clamp(1rem, 2.4vw, 1.75rem)/1 var(--pgp-ff-display);
	letter-spacing: -.01em;
	color: rgba(255, 255, 255, .9);
}

/* ---------- Section head ---------- */
.p-section + .p-section {
	margin-top: 72px;
}

.c-sechead {
	position: relative;
	display: flex;
	align-items: flex-end;
	gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pgp-line);
}

.c-sechead::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 48px;
	height: 3px;
	background: var(--cat, var(--pgp-accent));
}

.c-sechead__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
	min-width: 0;
}

.c-sechead__en {
	font: 800 clamp(1.5rem, 1.15rem + 1.2vw, 2.125rem)/1 var(--pgp-ff-display);
	letter-spacing: -.025em;
	color: var(--pgp-ink);
	text-transform: uppercase;
}

.c-sechead__ja {
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pgp-muted);
}

.c-sechead__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: none;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pgp-muted);
	white-space: nowrap;
	transition: color .2s;
}

.c-sechead__more .c-icon {
	width: 15px;
	height: 15px;
	transition: transform .2s var(--pgp-ease);
}

.c-sechead__more:hover {
	color: var(--pgp-accent-ink);
}

.c-sechead__more:hover .c-icon {
	transform: translateX(3px);
}

/* ---------- Hero ---------- */
.p-hero {
	padding: 28px 0 44px;
}

@media (min-width: 1080px) {
	.p-hero {
		padding: 36px 0 56px;
	}
}

.p-hero__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 22px;
}

.p-hero__label {
	display: flex;
	align-items: baseline;
	gap: 14px;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--pgp-muted);
}

.p-hero__label span {
	font: 800 1.5rem/1 var(--pgp-ff-display);
	letter-spacing: -.02em;
	color: #fff;
}

.p-hero__catch {
	font-size: .8125rem;
	color: var(--pgp-muted);
	letter-spacing: .04em;
}

@media (max-width: 639px) {
	.p-hero__catch {
		display: none;
	}
}

.p-hero__grid {
	display: grid;
	gap: 18px;
}

@media (min-width: 1080px) {
	.p-hero__grid {
		grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
		gap: 24px;
	}
}

/* Lead feature */
.c-feature {
	position: relative;
	overflow: hidden;
	border-radius: var(--pgp-radius-lg);
	background: #0B0E14;
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}

.c-feature__media {
	position: relative;
	aspect-ratio: 4 / 3;
}

@media (min-width: 640px) {
	.c-feature__media {
		aspect-ratio: 16 / 9;
	}
}

.c-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .8s var(--pgp-ease);
}

.c-feature:hover .c-feature__media img {
	transform: scale(1.035);
}

.c-feature__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(8, 10, 14, .96) 0%, rgba(8, 10, 14, .7) 34%, rgba(8, 10, 14, 0) 68%);
}

.c-feature__body {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: 12px;
	padding: 20px;
}

@media (min-width: 768px) {
	.c-feature__body {
		padding: 32px 36px;
		gap: 14px;
	}
}

.c-feature__title {
	font-size: clamp(1.25rem, .95rem + 1.3vw, 2rem);
	font-weight: 800;
	line-height: 1.42;
	letter-spacing: .01em;
	color: #fff;
	font-feature-settings: "palt";
	word-break: auto-phrase;
	text-wrap: pretty;
	text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}

.c-feature__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.c-feature__excerpt {
	display: none;
	max-width: 60ch;
	font-size: .875rem;
	line-height: 1.8;
	color: rgba(226, 232, 240, .75);
}

@media (min-width: 900px) {
	.c-feature__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.c-feature .c-chip {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(255, 255, 255, .12);
}

.c-feature .c-chip--ok {
	color: #6EE7B7;
}

.c-feature .c-chip--warn {
	color: #FCD34D;
}

.c-feature .c-chip--ng {
	color: #FCA5A5;
}

/* Hero side list */
.p-hero__side {
	display: grid;
	align-content: space-between;
	gap: 0;
	counter-reset: none;
}

.c-heroitem {
	position: relative;
	display: grid;
	grid-template-columns: 30px 132px minmax(0, 1fr);
	gap: 14px;
	align-items: start;
	padding: 16px 0;
	border-top: 1px solid var(--pgp-line);
}

.c-heroitem:first-child {
	border-top: 0;
	padding-top: 4px;
}

@media (max-width: 1079px) {
	.c-heroitem:first-child {
		border-top: 1px solid var(--pgp-line);
		padding-top: 16px;
	}
}

@media (max-width: 480px) {
	.c-heroitem {
		grid-template-columns: 24px 104px minmax(0, 1fr);
		gap: 12px;
	}
}

.c-heroitem__num {
	font: 800 .875rem/1.6 var(--pgp-ff-display);
	color: var(--pgp-accent);
	font-variant-numeric: tabular-nums;
}

.c-heroitem__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pgp-radius);
	background: var(--pgp-surface-3);
}

.c-heroitem__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--pgp-ease);
}

.c-heroitem:hover .c-heroitem__media img {
	transform: scale(1.05);
}

.c-heroitem__body {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.c-heroitem__title {
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.55;
	color: #fff;
	font-feature-settings: "palt";
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-heroitem__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.c-heroitem:hover .c-heroitem__title {
	color: #7DD3FC;
}

/* ---------- Cards ---------- */
.c-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.c-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pgp-radius);
	background: var(--pgp-surface-3);
}

.c-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .7s var(--pgp-ease);
}

.c-card:hover .c-card__media img,
.c-row:hover .c-row__media img {
	transform: scale(1.05);
}

.c-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .06);
	pointer-events: none;
}

.c-card__new {
	position: absolute;
	top: 10px;
	left: 10px;
	box-shadow: 0 4px 14px -4px var(--pgp-accent-glow);
}

.c-card__body {
	display: grid;
	gap: 9px;
	align-content: start;
}

.c-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
}

.c-card__date {
	font: 600 .75rem/1.4 var(--pgp-ff-display);
	letter-spacing: .04em;
	color: var(--pgp-subtle);
	font-variant-numeric: tabular-nums;
}

.c-card__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: .01em;
	color: var(--pgp-ink);
	font-feature-settings: "palt";
	word-break: auto-phrase;
}

.c-card__title a {
	background: linear-gradient(var(--pgp-accent), var(--pgp-accent)) 0 100% / 0 2px no-repeat;
	transition: background-size .4s var(--pgp-ease);
}

.c-card:hover .c-card__title a,
.c-row:hover .c-row__title a {
	background-size: 100% 2px;
}

.c-card__title a::after,
.c-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.c-card__excerpt {
	font-size: .8125rem;
	line-height: 1.8;
	color: var(--pgp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-card--large .c-card__title {
	font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
	line-height: 1.5;
	font-weight: 800;
}

.c-card--large .c-card__excerpt {
	font-size: .875rem;
}

/* Grid */
.c-grid {
	display: grid;
	gap: 36px 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
}

.c-grid--3 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

@media (max-width: 599px) {
	.c-grid:not(.c-grid--keep) {
		gap: 0;
	}

	.c-grid:not(.c-grid--keep) .c-card {
		display: grid;
		grid-template-columns: 40% minmax(0, 1fr);
		gap: 14px;
		padding: 16px 0;
		border-top: 1px solid var(--pgp-line);
	}

	.c-grid:not(.c-grid--keep) .c-card:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.c-grid:not(.c-grid--keep) .c-card__title {
		font-size: .9375rem;
		line-height: 1.55;
	}

	.c-grid:not(.c-grid--keep) .c-card__excerpt,
	.c-grid:not(.c-grid--keep) .c-chips {
		display: none;
	}

	.c-grid:not(.c-grid--keep) .c-card__new {
		top: 6px;
		left: 6px;
		padding: 3px 5px;
		font-size: .5625rem;
	}

	.c-grid:not(.c-grid--keep) .c-card__body {
		gap: 6px;
	}
}

/* Row */
.c-row {
	position: relative;
	display: grid;
	grid-template-columns: 148px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

@media (max-width: 480px) {
	.c-row {
		grid-template-columns: 40% minmax(0, 1fr);
		gap: 14px;
	}
}

.c-row__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pgp-radius);
	background: var(--pgp-surface-3);
}

.c-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--pgp-ease);
}

.c-row__body {
	display: grid;
	gap: 7px;
	min-width: 0;
}

.c-row__title {
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--pgp-ink);
	font-feature-settings: "palt";
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-row__title a {
	background: linear-gradient(var(--pgp-accent), var(--pgp-accent)) 0 100% / 0 2px no-repeat;
	transition: background-size .4s var(--pgp-ease);
}

.c-row .c-chips {
	display: none;
}

@media (min-width: 768px) {
	.c-row .c-chips {
		display: flex;
	}
}

.c-rows {
	display: grid;
	gap: 0 32px;
}

@media (min-width: 768px) {
	.c-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.c-rows .c-row {
	padding: 18px 0;
	border-top: 1px solid var(--pgp-line);
}

.c-rows .c-row:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (min-width: 768px) {
	.c-rows .c-row:nth-child(2) {
		border-top: 0;
		padding-top: 0;
	}
}

/* Feature split */
.c-split {
	display: grid;
	gap: 28px;
}

@media (min-width: 768px) {
	.c-split {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		gap: 32px;
	}
}

.c-stack {
	display: grid;
	align-content: start;
}

.c-stack .c-row {
	grid-template-columns: 128px minmax(0, 1fr);
	padding: 16px 0;
	border-top: 1px solid var(--pgp-line);
}

.c-stack .c-row:first-child {
	border-top: 0;
	padding-top: 0;
}

@media (max-width: 480px) {
	.c-stack .c-row {
		grid-template-columns: 40% minmax(0, 1fr);
	}
}

/* ---------- Steam Deck band ---------- */
.p-band {
	padding: 56px 0 64px;
}

.p-band .c-sechead::after {
	background: var(--pgp-accent);
}

.c-hscroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: min(78%, 280px);
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 12px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

@media (min-width: 1080px) {
	.c-hscroll {
		grid-auto-columns: calc((100% - 60px) / 4);
	}
}

.c-hscroll > * {
	scroll-snap-align: start;
}

.p-band .c-card__media::after {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

/* ---------- Sidebar widgets ---------- */
.l-sidebar {
	display: grid;
	align-content: start;
	gap: 48px;
	min-width: 0;
}

@media (min-width: 1080px) {
	.l-sidebar > :last-child {
		position: sticky;
		top: 100px;
	}

	.admin-bar .l-sidebar > :last-child {
		top: 132px;
	}
}

.c-widget__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--pgp-ink);
}

.c-widget__en {
	font: 800 1rem/1 var(--pgp-ff-display);
	letter-spacing: .1em;
	color: var(--pgp-ink);
}

.c-widget__ja {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--pgp-muted);
}

/* Core widgets placed in the extra widget areas */
:is(.l-sidebar, .p-article__after) .widget_block :is(h2, h3),
:is(.l-sidebar, .p-article__after) .wp-block-search__label {
	display: block;
	margin-bottom: 16px;
	padding-bottom: 12px;
	font: 800 1rem/1.2 var(--pgp-ff-display);
	letter-spacing: .1em;
	color: var(--pgp-ink);
	border-bottom: 2px solid var(--pgp-ink);
}

:is(.l-sidebar, .p-article__after) .wp-block-search__inside-wrapper {
	display: flex;
	gap: 6px;
}

:is(.l-sidebar, .p-article__after) .wp-block-search__input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	color: var(--pgp-ink);
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line-strong);
	border-radius: var(--pgp-radius);
}

:is(.l-sidebar, .p-article__after) .wp-block-search__button {
	height: 44px;
	margin: 0;
	padding: 0 16px;
	font-size: .875rem;
	font-weight: 700;
	color: #fff;
	background: var(--pgp-navy);
	border: 0;
	border-radius: var(--pgp-radius);
}

:is(.l-sidebar, .p-article__after) .widget_block :is(ul, ol) {
	display: grid;
	gap: 8px;
	font-size: .875rem;
}

:is(.l-sidebar, .p-article__after) .widget_block a:hover {
	color: var(--pgp-accent-ink);
}

/* Ranking */
.c-rank {
	display: grid;
	counter-reset: rank;
}

.c-rank__item {
	position: relative;
	display: grid;
	grid-template-columns: 28px 96px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	padding: 14px 0;
	border-top: 1px solid var(--pgp-line);
}

.c-rank__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.c-rank__num {
	font: italic 900 1.5rem/1 var(--pgp-ff-display);
	color: var(--pgp-line-strong);
	font-variant-numeric: tabular-nums;
	text-align: center;
	padding-top: 2px;
}

.c-rank__item:nth-child(-n+3) .c-rank__num {
	color: var(--pgp-accent);
	text-shadow: 0 0 18px var(--pgp-accent-glow);
}

.c-rank__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pgp-radius-sm);
	background: var(--pgp-surface-3);
}

.c-rank__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-rank__media .c-noimg__en {
	font-size: .75rem;
}

.c-rank__body {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.c-rank__title {
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--pgp-ink);
	font-feature-settings: "palt";
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c-rank__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.c-rank__item:hover .c-rank__title {
	color: var(--pgp-accent-ink);
}

.c-rank__date {
	font: 600 .6875rem/1.4 var(--pgp-ff-display);
	color: var(--pgp-subtle);
	letter-spacing: .04em;
}

/* Category list */
.c-catlist__item + .c-catlist__item {
	border-top: 1px solid var(--pgp-line);
}

.c-catlist__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 2px;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--pgp-ink);
	transition: color .2s;
}

.c-catlist__link:hover {
	color: var(--cat);
}

.c-catlist__name {
	flex: 1;
	min-width: 0;
}

.c-catlist__count,
.c-catlist__children span {
	font: 700 .75rem/1 var(--pgp-ff-display);
	color: var(--pgp-subtle);
	font-variant-numeric: tabular-nums;
}

.c-catlist__children {
	display: grid;
	gap: 2px;
	margin: -4px 0 12px 19px;
	padding-left: 12px;
	border-left: 1px solid var(--pgp-line);
}

.c-catlist__children a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 2px;
	font-size: .8125rem;
	color: var(--pgp-muted);
	transition: color .2s;
}

.c-catlist__children a:hover {
	color: var(--pgp-ink);
}

/* Editorial card */
.c-editorial {
	position: relative;
	overflow: hidden;
	padding: 24px;
	border-radius: var(--pgp-radius-lg);
	background:
		radial-gradient(300px 160px at 100% 0%, rgba(14, 165, 233, .22), transparent 70%),
		var(--pgp-dark);
}

.c-editorial__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.c-editorial__mark {
	width: 40px;
	height: 40px;
	flex: none;
}

.c-editorial__en {
	font: 800 .625rem/1.4 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--pgp-accent);
}

.c-editorial__name {
	font-size: 1rem;
	font-weight: 800;
	color: #fff;
}

.c-editorial__bio {
	font-size: .8125rem;
	line-height: 1.85;
	color: var(--pgp-text);
}

.c-editorial__list {
	display: grid;
	gap: 8px;
	margin: 16px 0;
	padding: 14px 0;
	border-block: 1px solid var(--pgp-line);
}

.c-editorial__list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
}

.c-editorial__list .c-icon {
	width: 16px;
	height: 16px;
	padding: 2px;
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	border-radius: 50%;
	stroke-width: 3;
}

.c-editorial__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pgp-accent);
}

.c-editorial__more .c-icon {
	transition: transform .2s var(--pgp-ease);
}

.c-editorial__more:hover .c-icon {
	transform: translateX(3px);
}

/* Side TOC */
.c-sidetoc__list {
	position: relative;
	display: grid;
	max-height: calc(100vh - 220px);
	overflow-y: auto;
	scrollbar-width: thin;
	border-left: 2px solid var(--pgp-line);
	counter-reset: stoc;
}

.c-sidetoc__list a {
	display: block;
	margin-left: -2px;
	padding: 7px 0 7px 16px;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.55;
	color: var(--pgp-muted);
	border-left: 2px solid transparent;
	transition: color .2s, border-color .2s;
}

.c-sidetoc__list > li {
	counter-increment: stoc;
}

.c-sidetoc__list > li > a::before {
	content: counter(stoc, decimal-leading-zero);
	margin-right: 8px;
	font: 800 .6875rem/1 var(--pgp-ff-display);
	color: var(--pgp-subtle);
}

.c-sidetoc__list ol a {
	padding-left: 40px;
	font-weight: 500;
	font-size: .75rem;
}

.c-sidetoc__list a:hover {
	color: var(--pgp-ink);
}

.c-sidetoc__list a.is-active {
	color: var(--pgp-ink);
	border-left-color: var(--pgp-accent);
	background: linear-gradient(90deg, var(--pgp-accent-soft), transparent);
}

.c-sidetoc__list a.is-active::before {
	color: var(--pgp-accent-ink);
}

@media (max-width: 1079px) {
	.c-sidetoc {
		display: none;
	}
}

/* ---------- Article ---------- */
.p-article {
	max-width: 800px;
}

.l-page .p-article {
	margin-inline: auto;
}

.c-breadcrumb {
	margin-bottom: 22px;
}

.c-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	font-size: .75rem;
	color: var(--pgp-subtle);
}

.c-breadcrumb li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.c-breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	margin: 0 10px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: .6;
}

.c-breadcrumb a {
	color: var(--pgp-muted);
	transition: color .2s;
}

.c-breadcrumb a:hover {
	color: var(--pgp-accent-ink);
}

.c-breadcrumb [aria-current] span {
	display: inline-block;
	max-width: 22em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: bottom;
}

.p-article__cats {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}

.p-article__title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: .01em;
	color: var(--pgp-ink);
	font-feature-settings: "palt";
	word-break: auto-phrase;
	text-wrap: pretty;
}

.p-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--pgp-line);
	font-size: .8125rem;
	color: var(--pgp-muted);
}

.p-article__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--pgp-ink);
}

.p-article__avatar {
	width: 28px;
	height: 28px;
}

.p-article__metaitem {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-variant-numeric: tabular-nums;
}

.p-article__metaitem time {
	font-family: var(--pgp-ff-display);
	font-weight: 600;
	letter-spacing: .03em;
}

.p-article__metaitem .c-icon {
	width: 15px;
	height: 15px;
	color: var(--pgp-subtle);
}

.p-article__header {
	margin-bottom: 24px;
}

.p-article__thumb {
	margin-bottom: 28px;
	overflow: hidden;
	border-radius: var(--pgp-radius-lg);
	background: var(--pgp-surface-3);
	aspect-ratio: 16 / 9;
}

.p-article__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* PR notice */
.c-pr {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
	padding: 12px 16px;
	font-size: .75rem;
	line-height: 1.75;
	color: var(--pgp-muted);
	background: var(--pgp-surface-2);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius);
}

.c-pr__label {
	flex: none;
	margin-top: 1px;
	padding: 4px 7px;
	font: 800 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .1em;
	color: var(--pgp-bg);
	background: var(--pgp-ink);
	border-radius: 3px;
}

.c-pr__text a {
	color: var(--pgp-accent-ink);
	text-decoration: underline;
	text-underline-offset: .2em;
}

/* Facts */
.c-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin-bottom: 36px;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius-lg);
	overflow: hidden;
	box-shadow: var(--pgp-shadow);
}

.c-facts__item {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 16px 20px;
	border-left: 1px solid var(--pgp-line);
	margin-left: -1px;
	border-top: 1px solid var(--pgp-line);
	margin-top: -1px;
}

.c-facts dt {
	display: grid;
	gap: 2px;
	font-size: .75rem;
	font-weight: 700;
	color: var(--pgp-muted);
}

.c-facts dt span {
	font: 800 .625rem/1.4 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--pgp-accent-ink);
}

.c-facts .pgp-badge {
	font-size: .875rem;
}

.c-facts__store {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .875rem;
	font-weight: 700;
	color: var(--pgp-ink);
	border-bottom: 2px solid var(--pgp-accent);
	transition: color .2s;
}

.c-facts__store:hover {
	color: var(--pgp-accent-ink);
}

.c-facts__store .c-icon {
	width: 14px;
	height: 14px;
}

/* TOC (in content) */
.pgp-prose .c-toc {
	margin-block: 2.4em;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius-lg);
	box-shadow: var(--pgp-shadow);
	overflow: hidden;
}

.pgp-prose .c-toc summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 22px;
	cursor: pointer;
	list-style: none;
	background: var(--pgp-surface-2);
	border-bottom: 1px solid var(--pgp-line);
}

.pgp-prose .c-toc details:not([open]) summary {
	border-bottom: 0;
}

.pgp-prose .c-toc summary::-webkit-details-marker {
	display: none;
}

.c-toc__en {
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .18em;
	color: var(--pgp-accent-ink);
}

.c-toc__ja {
	font-size: .9375rem;
	font-weight: 800;
	color: var(--pgp-ink);
}

.c-toc__toggle {
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid var(--pgp-line-strong);
	color: var(--pgp-muted);
	transition: transform .3s var(--pgp-ease);
}

.c-toc__toggle .c-icon {
	width: 14px;
	height: 14px;
}

.pgp-prose .c-toc details[open] .c-toc__toggle {
	transform: rotate(180deg);
}

.pgp-prose .c-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgp-prose .c-toc .c-toc__list {
	padding: 8px 22px 16px;
	counter-reset: toc;
}

.pgp-prose .c-toc li {
	margin: 0;
}

.pgp-prose .c-toc .c-toc__list > li {
	counter-increment: toc;
	border-top: 1px dashed var(--pgp-line);
}

.pgp-prose .c-toc .c-toc__list > li:first-child {
	border-top: 0;
}

.pgp-prose .c-toc a {
	display: flex;
	gap: 12px;
	padding: 10px 0;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pgp-ink);
	text-decoration: none;
}

.pgp-prose .c-toc a:hover {
	color: var(--pgp-accent-ink);
}

.pgp-prose .c-toc .c-toc__list > li > a::before {
	content: counter(toc, decimal-leading-zero);
	flex: none;
	min-width: 1.6em;
	padding-top: .12em;
	font: 800 .8125rem/1.6 var(--pgp-ff-display);
	color: var(--pgp-accent-ink);
}

.pgp-prose .c-toc li ol {
	padding: 0 0 8px 2.4em;
}

.pgp-prose .c-toc li ol a {
	padding: 5px 0;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--pgp-muted);
}

.pgp-prose .c-toc li ol a::before {
	content: "";
	flex: none;
	width: 8px;
	height: 1px;
	margin-top: .85em;
	background: var(--pgp-line-strong);
}

/* Link card (shortcode) */
.pgp-prose .c-linkcard {
	position: relative;
	margin-block: 2em;
}

.pgp-prose .wp-block-group > .c-linkcard {
	margin-block: 1.6em 0;
}

.c-linkcard__label {
	position: absolute;
	top: -.75em;
	left: 16px;
	z-index: 1;
	padding: 2px 10px;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .06em;
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	border-radius: 3px;
}

.pgp-prose .c-linkcard__link {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 18px;
	padding: 18px;
	color: var(--pgp-ink);
	text-decoration: none;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius-lg);
	transition: border-color .2s, box-shadow .2s, transform .2s var(--pgp-ease);
}

.pgp-prose .c-linkcard__link:hover {
	border-color: var(--pgp-accent);
	box-shadow: var(--pgp-shadow);
	transform: translateY(-2px);
}

@media (max-width: 560px) {
	.pgp-prose .c-linkcard__link {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 14px;
		padding: 14px;
	}
}

.c-linkcard__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--pgp-radius);
	background: var(--pgp-surface-3);
}

.c-linkcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}

.c-linkcard__body {
	display: grid;
	gap: 6px;
	align-content: center;
	min-width: 0;
}

.c-linkcard__title {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.55;
	font-feature-settings: "palt";
}

.c-linkcard__excerpt {
	font-size: .8125rem;
	line-height: 1.7;
	color: var(--pgp-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 560px) {
	.c-linkcard__excerpt {
		display: none;
	}
}

.c-linkcard__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .75rem;
	font-weight: 700;
	color: var(--pgp-accent-ink);
}

/* Disclaimer / after */
.c-disclaimer {
	margin-top: 48px;
	padding: 16px 20px;
	font-size: .75rem;
	line-height: 1.85;
	color: var(--pgp-muted);
	background: var(--pgp-surface-2);
	border-radius: var(--pgp-radius);
	border-left: 3px solid var(--pgp-line-strong);
}

.p-article__after {
	margin-top: 32px;
}

.p-article__footer {
	display: grid;
	gap: 28px;
	margin-top: 40px;
}

.c-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.c-tags a {
	display: block;
	padding: 5px 12px;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--pgp-text);
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: 999px;
	transition: border-color .2s, color .2s;
}

.c-tags a::before {
	content: "#";
	margin-right: 2px;
	color: var(--pgp-accent-ink);
}

.c-tags a:hover {
	border-color: var(--pgp-accent);
	color: var(--pgp-ink);
}

/* Share */
.c-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 18px 0;
	border-block: 1px solid var(--pgp-line);
}

.c-share__label {
	margin-right: 8px;
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .18em;
	color: var(--pgp-ink);
}

.c-share__btn {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	font: 900 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .02em;
	color: var(--pgp-ink);
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: 50%;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--pgp-ease);
}

.c-share__btn:hover {
	transform: translateY(-2px);
	color: #fff;
	border-color: transparent;
}

.c-share__btn[data-sns="x"]:hover {
	background: #000;
}

.c-share__btn[data-sns="line"]:hover {
	background: #06C755;
}

.c-share__btn[data-sns="hatena"]:hover {
	background: #00A4DE;
}

.c-share__btn.js-copy:hover {
	background: var(--pgp-accent);
	color: var(--pgp-on-accent);
}

.c-share__btn .c-icon {
	width: 17px;
	height: 17px;
}

.c-share__copied {
	position: absolute;
}

.c-share__copied:not(:empty) {
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 5px 9px;
	font: 700 .6875rem/1 var(--pgp-ff-sans);
	white-space: nowrap;
	color: var(--pgp-bg);
	background: var(--pgp-ink);
	border-radius: 4px;
}

/* Author box */
.c-authorbox {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 18px;
	padding: 24px;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius-lg);
}

.c-authorbox__mark {
	width: 56px;
	height: 56px;
}

.c-authorbox__en {
	font: 800 .625rem/1.4 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--pgp-accent-ink);
}

.c-authorbox__name {
	margin-top: 2px;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--pgp-ink);
}

.c-authorbox__bio {
	margin-top: 8px;
	font-size: .8125rem;
	line-height: 1.85;
	color: var(--pgp-muted);
}

.c-authorbox__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pgp-accent-ink);
}

/* Post nav */
.c-postnav {
	display: grid;
	gap: 12px;
	max-width: 800px;
	margin-top: 40px;
}

@media (min-width: 640px) {
	.c-postnav {
		grid-template-columns: 1fr 1fr;
	}
}

.c-postnav__item {
	display: grid;
	gap: 8px;
	padding: 18px 20px;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius-lg);
	transition: border-color .2s;
}

.c-postnav__item:hover {
	border-color: var(--pgp-accent);
}

.c-postnav__item.is-next {
	text-align: right;
	grid-column: -2;
}

.c-postnav__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: 800 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .16em;
	color: var(--pgp-accent-ink);
}

.c-postnav__item.is-next .c-postnav__label {
	justify-content: flex-end;
}

.c-postnav__label .c-icon {
	width: 14px;
	height: 14px;
}

.c-postnav__title {
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--pgp-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.p-related {
	margin-top: 64px;
	max-width: 800px;
}

/* Static page */
.p-page__en {
	margin-bottom: 8px;
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .2em;
	color: var(--pgp-accent-ink);
}

.p-page__updated {
	margin-top: 14px;
	font-size: .75rem;
	color: var(--pgp-subtle);
}

.p-page .p-article__header {
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--pgp-line);
}

.c-adminhint {
	margin-top: 32px;
	padding: 16px 20px;
	font-size: .875rem;
	line-height: 1.8;
	color: var(--pgp-warn-ink);
	background: var(--pgp-warn-soft);
	border: 1px dashed var(--pgp-warn);
	border-radius: var(--pgp-radius);
}

/* Contact Form 7 */
.pgp-prose .wpcf7 :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], select, textarea) {
	width: 100%;
	padding: 12px 14px;
	font-size: 1rem;
	color: var(--pgp-ink);
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line-strong);
	border-radius: var(--pgp-radius);
	transition: border-color .2s, box-shadow .2s;
}

.pgp-prose .wpcf7 :is(input, select, textarea):focus {
	outline: none;
	border-color: var(--pgp-accent);
	box-shadow: 0 0 0 3px var(--pgp-accent-soft);
}

.pgp-prose .wpcf7 input[type="submit"] {
	padding: 14px 40px;
	font-weight: 800;
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	border: 0;
	border-radius: var(--pgp-radius);
	cursor: pointer;
}

/* ---------- Archive head ---------- */
.p-archive-head {
	padding: 32px 0 40px;
}

@media (min-width: 768px) {
	.p-archive-head {
		padding: 40px 0 52px;
	}
}

.p-archive-head .c-breadcrumb {
	margin-bottom: 28px;
}

.p-archive-head__en {
	font: 900 clamp(2.75rem, 1.6rem + 5vw, 5.5rem)/.9 var(--pgp-ff-display);
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .28);
	background: linear-gradient(100deg, var(--cat, var(--pgp-accent)) 0%, transparent 55%);
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
}

.p-archive-head__title {
	margin-top: 14px;
	font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
	font-weight: 800;
	line-height: 1.4;
	color: #fff;
	font-feature-settings: "palt";
}

.p-archive-head__desc {
	max-width: 62ch;
	margin-top: 10px;
	font-size: .875rem;
	line-height: 1.9;
	color: var(--pgp-text);
}

.p-archive-head__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.p-archive-head__chips a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	transition: background-color .2s, border-color .2s;
}

.p-archive-head__chips a:hover {
	background: rgba(255, 255, 255, .12);
	border-color: var(--cat, var(--pgp-accent));
}

.p-archive-head__chips span {
	font: 700 .6875rem/1 var(--pgp-ff-display);
	color: var(--pgp-muted);
}

.p-archive-head__count {
	margin-top: 22px;
	font: 700 .6875rem/1 var(--pgp-ff-display);
	letter-spacing: .18em;
	color: var(--pgp-muted);
}

.p-archive-head__count strong {
	font-size: 1rem;
	color: #fff;
	letter-spacing: 0;
	margin-right: 4px;
}

.c-grid--archive {
	gap: 44px 24px;
}

/* Pagination */
.c-pagination {
	margin-top: 56px;
}

.c-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
}

.c-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	font: 700 .875rem/1 var(--pgp-ff-display);
	color: var(--pgp-ink);
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line);
	border-radius: var(--pgp-radius);
	transition: border-color .2s;
}

.c-pagination a.page-numbers:hover {
	border-color: var(--pgp-accent);
}

.c-pagination .page-numbers.current {
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	border-color: var(--pgp-accent);
}

.c-pagination .page-numbers.dots {
	border: 0;
	background: none;
}

.c-pagination .c-icon {
	width: 16px;
	height: 16px;
}

/* Search form / empty */
.c-searchform {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 52px;
	padding: 0 6px 0 16px;
	background: var(--pgp-surface);
	border: 1px solid var(--pgp-line-strong);
	border-radius: var(--pgp-radius);
	color: var(--pgp-muted);
	transition: border-color .2s, box-shadow .2s;
}

.c-searchform:focus-within {
	border-color: var(--pgp-accent);
	box-shadow: 0 0 0 3px var(--pgp-accent-soft);
}

.c-searchform__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: none;
	background: transparent;
	color: var(--pgp-ink);
}

.c-searchform__submit {
	height: 40px;
	padding: 0 18px;
	font-size: .875rem;
	font-weight: 700;
	color: #fff;
	background: var(--pgp-navy);
	border-radius: 5px;
}

[data-theme="dark"] .c-searchform__submit {
	background: var(--pgp-accent);
	color: var(--pgp-on-accent);
}

.p-searchbar {
	margin-bottom: 40px;
}

.c-empty {
	display: grid;
	gap: 14px;
	padding: 48px 0;
	text-align: center;
}

.c-empty__en {
	font: 900 1.75rem/1 var(--pgp-ff-display);
	letter-spacing: -.02em;
	color: var(--pgp-ink);
}

.c-empty__text {
	color: var(--pgp-muted);
	font-size: .9375rem;
}

.c-empty .c-searchform {
	max-width: 520px;
	margin: 12px auto 0;
}

/* Buttons */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 48px;
	padding: 0 26px;
	font-size: .9375rem;
	font-weight: 700;
	border-radius: var(--pgp-radius);
	transition: transform .2s var(--pgp-ease), background-color .2s, border-color .2s;
}

.c-btn:hover {
	transform: translateY(-2px);
}

.c-btn--accent {
	color: var(--pgp-on-accent);
	background: var(--pgp-accent);
	box-shadow: 0 12px 28px -12px var(--pgp-accent-glow);
}

.c-btn--ghost {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .24);
}

.c-btn--ghost:hover {
	border-color: #fff;
}

/* ---------- 404 ---------- */
.p-404__hero {
	padding: 72px 0 88px;
	text-align: center;
}

.p-404__code {
	position: relative;
	display: inline-block;
	font: 900 clamp(6rem, 4rem + 12vw, 13rem)/.85 var(--pgp-ff-display);
	letter-spacing: -.06em;
	color: #fff;
	text-shadow: -4px 0 0 rgba(14, 165, 233, .85), 4px 0 0 rgba(236, 72, 153, .65);
}

.p-404__over {
	margin-top: 20px;
	font: 800 .875rem/1 var(--pgp-ff-display);
	letter-spacing: .5em;
	color: var(--pgp-accent);
}

.p-404__title {
	margin-top: 20px;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	font-weight: 800;
	color: #fff;
}

.p-404__text {
	margin-top: 10px;
	font-size: .9375rem;
	color: var(--pgp-muted);
}

.p-404__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 36px;
}

.p-404__continue {
	width: 100%;
	margin-bottom: 6px;
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .3em;
	color: var(--pgp-muted);
	animation: pgp-blink 1.2s steps(2, start) infinite;
}

@keyframes pgp-blink {
	to {
		visibility: hidden;
	}
}

.p-404__latest {
	padding-block: 64px 88px;
}

/* ---------- Footer ---------- */
.l-footer {
	position: relative;
	overflow: hidden;
	background: #0D1015;
	font-size: .875rem;
}

.l-footer__top {
	display: grid;
	gap: 40px;
	padding-block: 64px 32px;
}

@media (min-width: 900px) {
	.l-footer__top {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 56px;
	}
}

.l-footer__brand .c-logo__mark {
	width: 36px;
	height: 36px;
}

.l-footer__lead {
	margin-top: 22px;
	font-size: .875rem;
	font-weight: 700;
	color: #fff;
}

.l-footer__about {
	max-width: 46ch;
	margin-top: 10px;
	font-size: .8125rem;
	line-height: 1.9;
	color: var(--pgp-muted);
}

.l-footer__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	padding: 8px 14px;
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	border: 1px solid var(--pgp-line-strong);
	border-radius: 999px;
}

.l-footer__social .c-icon {
	width: 14px;
	height: 14px;
}

.l-footer__heading {
	margin-bottom: 16px;
	font: 800 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .2em;
	color: #fff;
}

.l-footer__col ul {
	display: grid;
	gap: 11px;
}

.l-footer__col a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--pgp-text);
	transition: color .2s;
}

.l-footer__col a:hover {
	color: #fff;
}

.l-footer__mega {
	padding-inline: 12px;
	font: 900 clamp(3.5rem, 13.2vw, 12.5rem)/.78 var(--pgp-ff-display);
	letter-spacing: -.045em;
	text-align: center;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .09);
	background: linear-gradient(180deg, rgba(14, 165, 233, .14), transparent 70%);
	-webkit-background-clip: text;
	background-clip: text;
	user-select: none;
	overflow: hidden;
	transform: translateY(.08em);
}

.l-footer__bottom {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 24px;
	padding-block: 20px 24px;
	border-top: 1px solid var(--pgp-line);
	font-size: .75rem;
	color: var(--pgp-muted);
}

.l-footer__note {
	flex: 1 1 320px;
}

.l-footer__copy {
	font: 600 .75rem/1 var(--pgp-ff-display);
	letter-spacing: .06em;
}

.c-totop {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	color: #fff;
	border: 1px solid var(--pgp-line-strong);
	border-radius: 50%;
	transition: background-color .2s, border-color .2s, color .2s;
}

.c-totop:hover {
	background: var(--pgp-accent);
	border-color: var(--pgp-accent);
	color: var(--pgp-on-accent);
}

.c-totop .c-icon {
	width: 16px;
	height: 16px;
}

/* ---------- Dark mode adjustments ---------- */
[data-theme="dark"] .c-card__media::after {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}

[data-theme="dark"] .c-widget__title {
	border-bottom-color: var(--pgp-line-strong);
}

[data-theme="dark"] .c-pr__label {
	color: var(--pgp-dark);
}