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

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--wr-font-body);
	color: var(--wr-ink);
	background-color: var(--wr-bg);
	line-height: 1.5;
	font-size: 16px;
	min-height: 100vh;
	overflow-x: clip;
	/* Theme color morph duration lives in motion.css */
}

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

a:hover {
	color: var(--wr-accent);
}

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

.wr-wrap {
	width: min(100% - 2rem, var(--wr-max));
	margin-inline: auto;
}

/* —— Header (Kotaku-style bar) —— */
.wr-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Solid fill so scrolled content never bleeds through / above the bar */
	background: var(--wr-bg);
	border-bottom: 1px solid var(--wr-line);
	margin-bottom: 2rem;
	padding: 1rem 0;
}

/* Sit below the WP admin bar when logged in (otherwise content peeks in the gap). */
body.admin-bar .wr-site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .wr-site-header {
		top: 46px;
	}
}

.wr-header-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

/* Full chrome stays on one row once the hamburger is off. */
@media (min-width: 1101px) {
	.wr-header-bar {
		flex-wrap: nowrap;
	}

	.wr-nav {
		flex-wrap: nowrap;
	}
}

.wr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wr-ink);
	font-family: var(--wr-font-display);
	font-weight: 800;
	font-size: clamp(1.15rem, 2.4vw, 1.45rem);
	letter-spacing: -0.02em;
	line-height: 1.05;
	text-transform: uppercase;
}

.wr-brand:hover {
	color: var(--wr-accent);
}

.wr-brand__mark {
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 0.2rem;
	object-fit: contain;
	background: transparent;
	flex: 0 0 auto;
	filter: invert(1);
	transition: transform 0.25s ease, filter 0.2s ease;
}

html[data-theme="dark"] .wr-brand__mark {
	filter: none;
}

.wr-brand:hover .wr-brand__mark {
	transform: scale(1.04);
}

.wr-brand__text {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.wr-brand__tag {
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wr-muted);
}

.wr-header-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.wr-mobile-tools {
	display: none;
}

.wr-header-search {
	display: flex;
	align-items: stretch;
	height: var(--wr-control-h);
	border: 1px solid var(--wr-line);
	background: var(--wr-bg);
	max-width: 11rem;
	box-sizing: border-box;
}

.wr-header-search--mobile {
	max-width: none;
	width: 100%;
	margin-bottom: 0.75rem;
}

.wr-header-search input[type="search"] {
	width: 100%;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	color: var(--wr-ink);
	font: inherit;
	font-size: 0.8rem;
	line-height: 1;
	padding: 0 0.55rem;
	outline: none;
}

.wr-header-search input[type="search"]::placeholder {
	color: var(--wr-muted);
}

.wr-header-search input[type="search"]::-webkit-search-decoration,
.wr-header-search input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.wr-header-search__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border: 0;
	border-left: 1px solid var(--wr-line);
	background: var(--wr-bg);
	color: var(--wr-ink);
	padding: 0 0.5rem;
	cursor: pointer;
}

.wr-header-search__submit:hover {
	background: var(--wr-ink);
	color: var(--wr-bg);
}

.wr-header-actions .wr-theme-toggle {
	width: var(--wr-control-h);
	height: var(--wr-control-h);
	flex: 0 0 var(--wr-control-h);
}

.wr-header-actions .wr-btn {
	height: var(--wr-control-h);
	padding-top: 0;
	padding-bottom: 0;
	box-sizing: border-box;
	line-height: 1;
}

.wr-nav-toggle {
	display: none;
	width: var(--wr-control-h);
	height: var(--wr-control-h);
	margin-left: auto;
	border: 1px solid var(--wr-line);
	background: var(--wr-bg);
	color: var(--wr-ink);
	cursor: pointer;
	padding: 0;
	align-items: center;
	justify-content: center;
}

.wr-nav-toggle__bars,
.wr-nav-toggle__bars::before,
.wr-nav-toggle__bars::after {
	display: block;
	width: 1.1rem;
	height: 2px;
	background: currentColor;
	position: relative;
}

.wr-nav-toggle__bars::before,
.wr-nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.wr-nav-toggle__bars::before {
	top: -5px;
}

.wr-nav-toggle__bars::after {
	top: 5px;
}

.wr-nav-panel {
	flex: 1 1 auto;
}

.wr-nav-wrap {
	flex: 1 1 auto;
}

.wr-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wr-nav a {
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wr-ink);
}

.wr-nav a:hover,
.wr-nav .current-menu-item > a {
	color: var(--wr-accent);
}

/* —— ≤1100: hamburger before the bar would wrap to two lines —— */
@media (max-width: 1100px) {
	.wr-header-bar {
		position: relative;
		gap: 0.65rem 0.85rem;
	}

	.wr-nav-toggle {
		display: inline-flex;
		order: 2;
	}

	.wr-header-actions {
		order: 3;
		margin-left: 0;
	}

	.wr-header-search--bar {
		max-width: 8rem;
	}

	.wr-nav-panel {
		display: none;
		order: 4;
		flex: 1 1 100%;
		width: 100%;
		padding: 0.85rem 0 0.35rem;
		border-top: 1px solid var(--wr-line);
		margin-top: 0.25rem;
	}

	html.wr-nav-open .wr-nav-panel {
		display: block;
	}

	.wr-mobile-tools {
		display: block;
		margin-bottom: 0.85rem;
		padding-bottom: 0.85rem;
		border-bottom: 1px solid var(--wr-line);
	}

	.wr-mobile-tools__request {
		width: 100%;
		min-height: var(--wr-control-h);
	}

	.wr-header-search--bar,
	.wr-header-request {
		display: none;
	}

	.wr-nav {
		flex-direction: column;
		gap: 0.1rem;
	}

	.wr-nav a {
		display: block;
		padding: 0.7rem 0;
		min-height: var(--wr-control-h);
		line-height: 1.2;
	}

	.wr-brand__mark {
		width: 4.5rem;
		height: 4.5rem;
	}
}

/* —— ≤480: compact phone header —— */
@media (max-width: 480px) {
	.wr-site-header {
		padding: 0.75rem 0;
		margin-bottom: 1.35rem;
	}

	.wr-brand__mark {
		width: 3.75rem;
		height: 3.75rem;
	}

	.wr-brand__tag {
		display: none;
	}

	.wr-brand {
		font-size: 1.05rem;
		gap: 0.25rem;
		max-width: calc(100% - 6.5rem);
	}

	.wr-brand__text > span:first-child {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.wr-main {
	padding-bottom: 4rem;
}

.wr-site-footer {
	border-top: 1px solid var(--wr-line);
	margin-top: 3.5rem;
	padding: 2rem 0 2.5rem;
	color: var(--wr-muted);
	font-size: 0.9rem;
}

.wr-site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
}

.wr-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wr-footer-nav a {
	color: var(--wr-ink);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.wr-footer-nav a:hover {
	text-decoration: underline;
}

.wr-site-footer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.wr-site-footer__yt {
	color: var(--wr-ink);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.wr-site-footer__yt:hover {
	text-decoration: underline;
}

.wr-site-footer__copy {
	margin: 0;
}

/* —— Editorial layouts —— */
.wr-home-top {
	display: grid;
	gap: 2.25rem;
	margin-bottom: 0;
	padding-bottom: 3rem;
}

@media (min-width: 700px) {
	.wr-home-top {
		padding-bottom: 3.75rem;
	}
}

@media (min-width: 960px) {
	.wr-home-top {
		grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr);
		gap: 2.75rem;
		align-items: start;
		padding-bottom: 4.5rem;
	}
}

.wr-section-label {
	font-family: var(--wr-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0 0 1.35rem;
	color: var(--wr-ink);
}

.wr-section-title {
	font-family: var(--wr-font-display);
	font-weight: 700;
	font-size: clamp(1.75rem, 3.5vw, 2.25rem);
	margin: 0 0 1.5rem;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--wr-ink);
}

.wr-section-title--ink {
	color: var(--wr-ink);
}

.wr-grid {
	display: grid;
	gap: 1.5rem 1rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

@media (min-width: 700px) {
	.wr-grid {
		gap: 2rem 1.5rem;
		grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	}
}

/* Homepage Reviews: hard-cap four across so eight cards fill two even rows. */
@media (min-width: 960px) {
	.wr-grid--reviews {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.wr-grid--column {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 700px) {
	.wr-grid--column {
		grid-template-columns: minmax(0, 1fr);
	}
}

.wr-layout {
	display: grid;
	gap: 1.75rem;
}

/* Single review: mobile order = header → video → aside → body */
.wr-layout--review {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"header"
		"media"
		"aside"
		"body";
}

.wr-layout--review .wr-review-header {
	grid-area: header;
}

.wr-layout--review .wr-review-media {
	grid-area: media;
}

.wr-layout--review .wr-review-aside {
	grid-area: aside;
}

.wr-layout--review .wr-review-body {
	grid-area: body;
	min-width: 0;
}

.wr-layout--review-no-media {
	grid-template-areas:
		"header"
		"aside"
		"body";
}

@media (min-width: 900px) {
	.wr-layout--review {
		grid-template-columns: minmax(0, 1fr) 16rem;
		grid-template-areas:
			"header aside"
			"media aside"
			"body aside";
		column-gap: 2.25rem;
		row-gap: 1.5rem;
		align-items: start;
	}

	.wr-layout--review-no-media {
		grid-template-areas:
			"header aside"
			"body aside";
	}
}

.wr-muted {
	color: var(--wr-muted);
}

/*
 * Homepage section rhythm.
 * Gaps live on section wrappers — never on .wr-splash-panel — so panel padding
 * cannot eat the space between Retro cards and the request CTA.
 */
.wr-home-section {
	margin: 0;
	border-top: 1px solid var(--wr-line);
}

/* Same section rhythm as Retro: generous top/bottom on wrappers, not panels */
.wr-home-section--reviews {
	padding-top: 3.5rem;
	padding-bottom: 3.5rem;
}

.wr-home-section--columns {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
}

.wr-home-columns__grid {
	display: grid;
	gap: 2.5rem 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
	.wr-home-columns__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2rem 1.75rem;
		align-items: start;
	}
}

.wr-home-column__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 0.75rem;
}

.wr-home-column__all {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.wr-home-column__all:hover,
.wr-home-column__all:focus-visible {
	color: var(--wr-ink);
}

.wr-home-section--retro,
.wr-home-section--throwback {
	padding-top: 2.5rem;
	padding-bottom: 3rem;
}

@media (min-width: 700px) {
	.wr-home-section--retro,
	.wr-home-section--throwback {
		padding-top: 3.5rem;
		padding-bottom: 3.5rem;
	}
}

@media (min-width: 960px) {
	.wr-home-section--throwback {
		/* Empty band between Throwbacks and the request CTA */
		padding-bottom: 10rem;
	}
}

.wr-home-section--cta {
	border-top: 0;
	padding-top: 2rem;
	padding-bottom: 1rem;
}

.wr-byline {
	color: var(--wr-byline);
	font-weight: 700;
	font-size: 0.75rem;
}

a.wr-byline {
	text-decoration: none;
}

a.wr-byline:hover {
	color: var(--wr-ink);
	text-decoration: underline;
}

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

.wr-skip-link {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
	z-index: 100000;
}

.wr-skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	margin: 0;
	overflow: visible;
	padding: 0.65rem 1rem;
	width: auto;
	left: 0.75rem;
	top: 0.75rem;
	background: var(--wr-ink);
	color: var(--wr-paper);
	text-decoration: none;
	font-weight: 700;
}

html.wr-nav-open,
html.wr-nav-open body {
	overflow: hidden;
}

.wr-wizard-archive__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 1rem 1.25rem;
	margin-bottom: 2rem;
}

.wr-wizard-archive__avatar {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	background: var(--wr-bg-elevated);
	flex: 0 0 auto;
}

@media (min-width: 700px) {
	.wr-wizard-archive__avatar {
		width: 5.5rem;
		height: 5.5rem;
	}
}

.wr-wizard-archive__bio {
	margin: 0.35rem 0 0;
	max-width: 40rem;
	line-height: 1.5;
}

.wr-related {
	margin-top: 3rem;
	padding-top: 2rem;
	border-top: 1px solid var(--wr-line);
}

.wr-related .wr-section-title {
	margin-bottom: 1.25rem;
}