/* ─────────────────────────────────────────────────────────
   Witcher IV case study — overrides on top of main style.css
   Loaded after ../style.css. Scoped under body.witcher-page
   for body-level changes; cascade order handles the rest.
   ───────────────────────────────────────────────────────── */

/* ── Dark theme tokens ─────────────────────────────────── */
.witcher-page {
	--witcher-bg: oklch(0.156 0.004 164.472);
	--witcher-surface: oklch(0.164 0.014 195.873);
	--witcher-text: oklch(0.779 0.045 185.556);
	--witcher-text-muted: oklch(0.65 0.047 185.164);
	--witcher-text-soft: oklch(0.815 0.038 185.882);
	--witcher-heading: oklch(0.86 0.048 183.125);
	--witcher-heading-strong: oklch(0.934 0.033 182.625);
	--witcher-action-text: oklch(0.165 0.012 196.014);
	--witcher-blue: oklch(0.564 0.2 259.289);
	--witcher-cyan: oklch(0.802 0.113 237.978);
}

/* ── Body overrides — higher specificity than main's body ─ */
body.witcher-page {
	background: var(--witcher-bg);
	color: var(--witcher-text);
	font-family: "Inter", system-ui;
	font-weight: 400;
	margin: 80px 0;
	padding: 0;
}

.witcher-page ::-moz-selection {
	background: var(--witcher-text);
	color: var(--witcher-bg);
}

.witcher-page ::selection {
	background: var(--witcher-text);
	color: var(--witcher-bg);
}

.witcher-page :focus-visible {
	outline: 3px solid rgba(175, 220, 212, 0.48);
	outline-offset: 4px;
}

html:has(body.witcher-page) {
	scroll-behavior: smooth;
}

/* ── Typography overrides ───────────────────────── */
.witcher-page h1,
.witcher-page h2,
.witcher-page p {
	max-width: 720px;
}

.witcher-page h1,
.witcher-page h2 {
	color: var(--witcher-heading);
	margin: 32px 0 8px 0;
}

.witcher-page h1 {
	font-size: 48px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 110%;
}

.witcher-page h2 {
	font-size: 36px;
}

.witcher-page p {
	color: var(--witcher-text);
	font-size: 18px;
	font-weight: 300;
	line-height: 145%;
	margin: 4px 0 12px 0;
}

.witcher-page p.intro {
	color: var(--witcher-text);
	font-size: 21px;
}

.witcher-page p.before-ul {
	margin-bottom: 4px;
}

.witcher-page .eyebrow {
	color: var(--witcher-text-muted);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 48px 0 8px;
	text-transform: uppercase;
}

/* ── Links ───────────────────────────────────── */
.witcher-page a {
	color: var(--witcher-heading);
	text-decoration: underline;
	text-shadow: 0 0 1px var(--witcher-heading);
	transition: color 0.25s ease-out, text-shadow 0.25s ease-out;
}

	.witcher-page a:hover {
		text-decoration: none;
		text-shadow: 0 0 1.5px var(--witcher-heading);
	}

	.witcher-page a.image,
	.witcher-page a.lightbox-link {
		text-shadow: none;
		text-decoration: none;
	}

.witcher-page .back-link {
	align-self: flex-start;
	font-size: 15px;
	margin-bottom: 24px;
	text-shadow: none;
}

/* ── Images / video ─────────────────────────── */
.witcher-page img {
	border-radius: 16px;
	height: auto;
	margin: 40px 0;
	max-width: 1440px;
	outline: 1px solid rgba(255, 255, 255, 0.1);
	outline-offset: -1px;
	width: auto;
}

.witcher-page img.space {
	width: calc(100% - 16px);
}

.witcher-page img.smaller {
	max-width: 1280px;
}

.witcher-page video {
	border-radius: 16px;
	height: auto;
	margin: 32px 0;
	max-width: 1280px;
	width: 100%;
}

.witcher-page .lightbox-link {
	display: block;
}

	.witcher-page .lightbox-link img {
		border: 1px solid rgba(151, 193, 187, 0.16);
		box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
		transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
	}

	.witcher-page .lightbox-link:hover img {
		border-color: rgba(175, 220, 212, 0.42);
		box-shadow: 0 32px 96px rgba(0, 0, 0, 0.34);
		transform: translateY(-2px);
	}

/* ── Container override (narrower than main) ────── */
.witcher-page .container {
	display: flex;
	flex-flow: column;
	justify-content: center;
	max-width: 720px;
	padding: 0 16px;
	width: 100%;
}

/* ── Project nav (Witcher-specific top bar) ─────── */
.witcher-page .project-nav {
	align-items: center;
	border-bottom: 1px solid rgba(151, 193, 187, 0.18);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin-bottom: 30px;
	padding-bottom: 16px;
	width: 100%;
}

	.witcher-page .project-nav .back-link {
		margin: 0;
	}

	.witcher-page .project-nav div {
		display: flex;
		flex-wrap: wrap;
		gap: 14px;
		justify-content: flex-end;
	}

	.witcher-page .project-nav a {
		font-size: 14px;
		text-decoration: none;
		text-shadow: none;
	}

/* ── Witcher tags (was .case-meta — renamed to avoid main collision) ── */
.witcher-page .witcher-tags {
	border-top: 1px solid rgba(151, 193, 187, 0.28);
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
	padding-top: 18px;
}

	.witcher-page .witcher-tags span {
		border: 1px solid rgba(151, 193, 187, 0.28);
		border-radius: 999px;
		color: var(--witcher-heading);
		font-size: 14px;
		padding: 8px 12px;
	}

/* ── Project summary ────────────────────────────── */
.witcher-page .project-summary {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-top: 22px;
}

	.witcher-page .project-summary div {
		background:
			linear-gradient(145deg, rgba(32, 54, 57, 0.72), rgba(12, 18, 18, 0.92)),
			#101717;
		border: 1px solid rgba(151, 193, 187, 0.18);
		border-radius: 12px;
		padding: 18px;
	}

	.witcher-page .project-summary span,
	.witcher-page .interaction-preview span,
	.witcher-page .lightbox-kicker {
		color: var(--witcher-text-muted);
		display: block;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.1em;
		margin-bottom: 10px;
		text-transform: uppercase;
	}

	.witcher-page .project-summary strong {
		color: var(--witcher-heading-strong);
		display: block;
		font-size: 17px;
		font-weight: 500;
		line-height: 135%;
	}

/* ── Reddit reach section ───────────────────────── */
.witcher-page .reddit-reach {
	background:
		radial-gradient(circle at 18% 0, rgba(37, 95, 119, 0.3), transparent 34%),
		linear-gradient(145deg, rgba(16, 29, 31, 0.96), rgba(5, 8, 8, 0.98));
	border: 1px solid rgba(151, 193, 187, 0.2);
	border-radius: 24px;
	box-shadow: 0 32px 120px rgba(0, 0, 0, 0.32);
	display: grid;
	gap: 20px;
	margin: 56px 16px 24px;
	max-width: 960px;
	overflow: hidden;
	padding: 28px 32px;
	width: calc(100% - 32px);
}

	.witcher-page .reddit-reach .eyebrow {
		margin-top: 0;
	}

	.witcher-page .reddit-reach h2 {
		font-size: clamp(22px, 2.6vw, 32px);
		letter-spacing: -0.03em;
		line-height: 118%;
		margin-top: 0;
		max-width: 720px;
	}

/* Stats row */
.witcher-page .reddit-stats {
	border-bottom: 1px solid rgba(151, 193, 187, 0.14);
	border-top: 1px solid rgba(151, 193, 187, 0.14);
	display: grid;
	gap: 0;
	grid-template-columns: repeat(4, 1fr);
	padding: 14px 0;
}

	.witcher-page .reddit-stats div {
		align-items: baseline;
		border-right: 1px solid rgba(151, 193, 187, 0.10);
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 0 18px;
	}

	.witcher-page .reddit-stats div:last-child {
		border-right: none;
	}

	.witcher-page .reddit-stats span {
		color: #6f9993;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

	.witcher-page .reddit-stats strong {
		color: var(--witcher-heading-strong);
		font-size: clamp(24px, 3vw, 36px);
		font-weight: 700;
		letter-spacing: -0.03em;
		line-height: 1;
	}

/* Comments — Instrument Serif italic with auto-quotes */
.witcher-page .comment-quotes {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

	.witcher-page .comment-quotes figure {
		background: rgba(5, 12, 12, 0.42);
		border: 1px solid rgba(151, 193, 187, 0.12);
		border-radius: 12px;
		display: grid;
		gap: 10px;
		margin: 0;
		padding: 16px 18px;
	}

	.witcher-page .comment-quotes blockquote {
		color: var(--witcher-heading-strong);
		font-family: "Instrument Serif", "Libre Baskerville", serif;
		font-size: 17px;
		font-style: italic;
		font-weight: 400;
		line-height: 138%;
		margin: 0;
		quotes: "“" "”" "‘" "’";
	}

	.witcher-page .comment-quotes blockquote::before {
		content: open-quote;
	}

	.witcher-page .comment-quotes blockquote::after {
		content: close-quote;
	}

	.witcher-page .comment-quotes figcaption {
		color: #6f9993;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
	}

/* Reddit text link */
.witcher-page .reddit-link-wrap {
	margin: 0;
}

.witcher-page .reddit-link {
	color: var(--witcher-heading-strong);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(151, 193, 187, 0.4);
	text-shadow: none;
	text-underline-offset: 4px;
}

	.witcher-page .reddit-link:hover {
		text-decoration-color: var(--witcher-heading-strong);
		text-shadow: none;
	}

/* ── Decision blocks ────────────────────────────── */
.witcher-page .decision-block {
	border-top: 1px solid rgba(151, 193, 187, 0.28);
	margin-top: 20px;
	padding-top: 20px;
}

	.witcher-page .decision-block h3 {
		color: var(--witcher-heading);
		font-size: 22px;
		line-height: 130%;
		margin: 0 0 8px;
	}

.witcher-page .decision-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 8px 0 28px;
}

	.witcher-page .decision-grid div {
		background: rgba(14, 24, 24, 0.82);
		border: 1px solid rgba(151, 193, 187, 0.18);
		border-radius: 12px;
		padding: 16px;
	}

	.witcher-page .decision-grid span {
		color: var(--witcher-text-muted);
		display: block;
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.1em;
		margin-bottom: 8px;
		text-transform: uppercase;
	}

	.witcher-page .decision-grid p {
		color: var(--witcher-text-soft);
		font-size: 15px;
		line-height: 145%;
		margin: 0;
	}

.witcher-page .case-footer {
	border-top: 1px solid rgba(151, 193, 187, 0.28);
	margin-top: 40px;
	padding-top: 24px;
}

.witcher-page li {
	margin-bottom: 4px;
}

/* ── Button (image-based) ───────────────────────── */
.witcher-page .button {
	background: url("img/button.png");
	background-size: 240px 96px;
	height: 48px;
	width: 240px;
}

	.witcher-page .button:hover {
		background-position: 0 100%;
	}

/* ── Before/after image comparison slider ───────── */
.witcher-page .cd-image-container {
	margin: 40px 0;
	max-width: 1920px;
	position: relative;
}

	.witcher-page .cd-image-container img {
		display: block;
		margin: 0;
		width: 100%;
	}

.witcher-page .cd-image-label {
	bottom: 0;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	opacity: 0;
	padding: 1em;
	position: absolute;
	right: 0;
	transform: translateY(20px);
	transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}

	.witcher-page .cd-image-label.is-hidden {
		visibility: hidden;
	}

	.witcher-page .is-visible .cd-image-label {
		opacity: 1;
		transform: translateY(0);
	}

.witcher-page .cd-resize-img {
	backface-visibility: hidden;
	border-right: 2px solid rgba(255, 255, 255, 0.5);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	transform: translateZ(0);
	width: 0;
}

	.witcher-page .cd-resize-img img {
		display: block;
		height: 100%;
		left: 0;
		max-width: none;
		position: absolute;
		top: 0;
		width: auto;
	}

	.witcher-page .cd-resize-img .cd-image-label {
		left: 0;
		right: auto;
	}

	.witcher-page .is-visible .cd-resize-img {
		animation: cd-bounce-in 0.7s;
		width: 50%;
	}

@keyframes cd-bounce-in {
	0% { width: 0; }
	60% { width: 55%; }
	100% { width: 50%; }
}

.witcher-page .cd-handle {
	background: #97c1bb url("../img/cd-arrows.svg") no-repeat center center;
	border-radius: 50%;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 10px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3);
	cursor: move;
	height: 44px;
	left: 50%;
	margin-left: -22px;
	margin-top: -22px;
	opacity: 0;
	position: absolute;
	top: 50%;
	transform: translate3d(0, 0, 0) scale(0);
	width: 44px;
}

	.witcher-page .cd-handle.draggable {
		background-color: #445b7c;
	}

	.witcher-page .is-visible .cd-handle {
		opacity: 1;
		transform: translate3d(0, 0, 0) scale(1);
		transition: transform 0.3s 0.7s, opacity 0s 0.7s;
	}

/* ── Backlight + TV frame ───────────────────────── */
.witcher-page .backlight {
	background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Firefox_logo%2C_2019.svg/800px-Firefox_logo%2C_2019.svg.png') no-repeat;
	background-size: cover;
	height: 800px;
	position: relative;
	width: 800px;
}

	.witcher-page .backlight:after {
		background: inherit;
		content: '';
		filter: blur(16px);
		height: 100%;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -2;
	}

.witcher-page .filter-blur {
	filter: url(#blur-and-scale);
}

.witcher-page .tv {
	align-items: center;
	aspect-ratio: 16 / 9;
	display: flex;
	justify-content: center;
	margin: 64px 0;
	max-width: 1280px;
	position: relative;
	width: 100%;
}

	.witcher-page .tv img,
	.witcher-page .tv video {
		margin: 0;
	}

	.witcher-page .tv video {
		height: 100%;
		left: 0;
		object-fit: cover;
		position: absolute;
		top: 0;
		width: 100%;
		z-index: -1;
	}

.witcher-page .tv-frame {
	border-radius: 0;
	height: 100%;
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 100%;
}

/* ── Interaction panel (tabbed component) ───────── */
.witcher-page .interaction-panel {
	background:
		radial-gradient(circle at 80% 0, rgba(151, 193, 187, 0.14), transparent 34%),
		linear-gradient(145deg, rgba(19, 31, 32, 0.92), rgba(8, 12, 12, 0.98));
	border: 1px solid rgba(151, 193, 187, 0.18);
	border-radius: 16px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.26);
	margin: 28px 0 48px;
	overflow: hidden;
}

.witcher-page .interaction-tabs {
	border-bottom: 1px solid rgba(151, 193, 187, 0.14);
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

	.witcher-page .interaction-tabs button {
		appearance: none;
		background: transparent;
		border: 0;
		border-right: 1px solid rgba(151, 193, 187, 0.14);
		color: #7fa9a3;
		cursor: pointer;
		font: inherit;
		font-size: 14px;
		font-weight: 700;
		padding: 16px 14px;
		text-align: left;
		transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
	}

	.witcher-page .interaction-tabs button:last-child {
		border-right: 0;
	}

	.witcher-page .interaction-tabs button:hover,
	.witcher-page .interaction-tabs button.is-active {
		background: rgba(151, 193, 187, 0.1);
		color: var(--witcher-heading-strong);
	}

	.witcher-page .interaction-tabs button:active {
		transform: scale(0.96);
	}

.witcher-page .interaction-preview {
	display: grid;
	gap: 28px;
	grid-template-columns: minmax(0, 1fr) 220px;
	min-height: 280px;
	padding: 28px;
	position: relative;
}

.witcher-page .preview-copy {
	grid-column: 1;
	grid-row: 1;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.24s ease, transform 0.24s ease;
}

	.witcher-page .preview-copy.is-active {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	.witcher-page .preview-copy h3 {
		color: var(--witcher-heading-strong);
		font-size: 28px;
		line-height: 112%;
		margin: 0 0 12px;
		max-width: 420px;
	}

	.witcher-page .preview-copy p {
		color: var(--witcher-text-soft);
		font-size: 16px;
		max-width: 470px;
	}

.witcher-page .radial-preview {
	align-self: center;
	aspect-ratio: 1;
	background:
		radial-gradient(circle, rgba(175, 220, 212, 0.24) 0 9%, transparent 10%),
		conic-gradient(from 25deg, rgba(175, 220, 212, 0.08), rgba(89, 128, 144, 0.28), rgba(175, 220, 212, 0.08));
	border: 1px solid rgba(175, 220, 212, 0.2);
	border-radius: 50%;
	box-shadow: inset 0 0 36px rgba(0, 0, 0, 0.38), 0 0 36px rgba(151, 193, 187, 0.12);
	grid-column: 2;
	height: 220px;
	position: relative;
	transition: transform 0.28s ease, filter 0.28s ease;
}

	.witcher-page .radial-preview span {
		background: rgba(8, 12, 12, 0.82);
		border: 1px solid rgba(175, 220, 212, 0.24);
		border-radius: 999px;
		color: var(--witcher-heading-strong);
		font-size: 12px;
		font-weight: 700;
		left: 50%;
		margin: 0;
		padding: 6px 10px;
		position: absolute;
		text-transform: none;
		transform: translate(-50%, -50%);
	}

	.witcher-page .radial-preview span:nth-child(1) { top: 16%; }
	.witcher-page .radial-preview span:nth-child(2) { left: 84%; top: 50%; }
	.witcher-page .radial-preview span:nth-child(3) { top: 84%; }
	.witcher-page .radial-preview span:nth-child(4) { left: 16%; top: 50%; }

.witcher-page .interaction-preview[data-active-panel="combat-readability"] .radial-preview {
	filter: hue-rotate(28deg) saturate(0.75);
	transform: rotate(18deg);
}

.witcher-page .interaction-preview[data-active-panel="progression"] .radial-preview {
	filter: hue-rotate(-32deg) saturate(1.15);
	transform: rotate(-18deg) scale(0.96);
}

/* ── Lightbox modal ─────────────────────────────── */
.witcher-page #lightbox {
	opacity: 0;
	transition: display 0.24s allow-discrete, overlay 0.24s allow-discrete, opacity 0.24s ease;
}

.witcher-page #lightbox[open] {
	backdrop-filter: blur(18px);
	background: rgba(5, 7, 7, 0.72);
	border: none;
	display: grid;
	height: 100vh;
	margin: 0;
	max-height: 100vh;
	max-width: 100vw;
	opacity: 1;
	padding: 0;
	place-items: center;
	width: 100vw;
}

@starting-style {
	.witcher-page #lightbox[open] {
		opacity: 0;
	}
}

.witcher-page #lightbox.is-closing {
	opacity: 0;
}

.witcher-page .lightbox-shell {
	background: linear-gradient(145deg, rgba(16, 24, 24, 0.96), rgba(8, 12, 12, 0.98));
	border: 1px solid rgba(175, 220, 212, 0.18);
	border-radius: 18px;
	box-shadow: 0 36px 120px rgba(0, 0, 0, 0.56);
	display: grid;
	gap: 0;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	max-height: calc(100dvh - 48px);
	max-width: min(1320px, calc(100vw - 48px));
	overflow: hidden;
	position: relative;
	transform: translateY(14px) scale(0.98);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.witcher-page #lightbox[open] .lightbox-shell {
	transform: translateY(0) scale(1);
}

@starting-style {
	.witcher-page #lightbox[open] .lightbox-shell {
		transform: translateY(14px) scale(0.98);
	}
}

.witcher-page .lightbox-media {
	align-items: center;
	background: #030505;
	display: flex;
	justify-content: center;
	min-height: 300px;
}

.witcher-page #lightbox img {
	border-radius: 0;
	display: block;
	margin: 0;
	max-height: calc(100dvh - 48px);
	max-width: 100%;
	object-fit: contain;
	outline: none;
	width: 100%;
}

.witcher-page .lightbox-copy {
	border-left: 1px solid rgba(175, 220, 212, 0.14);
	padding: 32px;
}

	.witcher-page .lightbox-copy h2 {
		color: var(--witcher-heading-strong);
		font-size: 28px;
		line-height: 115%;
		margin: 0 0 12px;
	}

	.witcher-page .lightbox-copy p {
		color: var(--witcher-text-soft);
		font-size: 16px;
	}

.witcher-page #lightbox-close-button {
	background: rgba(8, 12, 12, 0.72);
	border: 1px solid rgba(175, 220, 212, 0.22);
	border-radius: 999px;
	color: var(--witcher-heading-strong);
	cursor: pointer;
	font: inherit;
	inset: 16px 16px auto auto;
	letter-spacing: inherit;
	padding: 10px 14px;
	position: absolute;
	text-transform: inherit;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

	.witcher-page #lightbox-close-button:hover {
		background: var(--witcher-heading-strong);
		color: var(--witcher-action-text);
	}

	.witcher-page #lightbox-close-button:active {
		transform: scale(0.96);
	}

.witcher-page #lightbox-close-button::before {
	content: '✕ ';
	content: '✕ ' / '';
	font-weight: 800;
}

/* ── Reduced-motion: keep Witcher-specific transforms steady ── */
@media (prefers-reduced-motion: reduce) {
	.witcher-page .lightbox-shell,
	.witcher-page .preview-copy,
	.witcher-page .radial-preview,
	.witcher-page .lightbox-link img {
		transform: none !important;
	}
}

/* ── Mobile (≤480px) ───────────────────────────── */
@media only screen and (max-width: 480px) {
	body.witcher-page {
		margin: 48px 0;
		padding: 0 16px;
	}

	.witcher-page h1 {
		font-size: 34px;
		line-height: 110%;
	}

	.witcher-page h2 {
		font-size: 26px;
		line-height: 115%;
	}

	.witcher-page p {
		font-size: 16px;
		line-height: 150%;
	}

	.witcher-page p.intro {
		font-size: 18px;
	}

	.witcher-page .eyebrow {
		margin-top: 24px;
	}

	.witcher-page .witcher-tags {
		flex-direction: column;
	}

	.witcher-page .project-nav {
		align-items: flex-start;
		flex-direction: column;
	}

	.witcher-page .project-nav div {
		justify-content: flex-start;
	}

	.witcher-page .project-summary,
	.witcher-page .decision-grid,
	.witcher-page .interaction-preview,
	.witcher-page .comment-quotes {
		grid-template-columns: 1fr;
	}

	.witcher-page .decision-grid {
		gap: 10px;
	}

	.witcher-page .reddit-reach {
		border-radius: 16px;
		gap: 16px;
		margin: 36px 0 16px;
		padding: 20px;
		width: 100%;
	}

	.witcher-page .reddit-reach h2 {
		font-size: 22px;
		line-height: 118%;
	}

	.witcher-page .reddit-stats {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 14px;
	}

	.witcher-page .reddit-stats div:nth-child(2) {
		border-right: none;
	}

	.witcher-page .reddit-stats strong {
		font-size: 22px;
	}

	.witcher-page img {
		margin: 24px 0;
	}

	.witcher-page .tv {
		height: auto;
		margin: 24px 0;
		width: 100%;
	}

	.witcher-page .tv video {
		position: relative;
		transform: translateX(0);
	}

	.witcher-page .interaction-tabs {
		grid-template-columns: 1fr;
	}

	.witcher-page .interaction-tabs button {
		border-bottom: 1px solid rgba(151, 193, 187, 0.14);
		border-right: 0;
	}

	.witcher-page .interaction-preview {
		min-height: 420px;
		padding: 22px;
	}

	.witcher-page .radial-preview {
		grid-column: 1;
		height: 190px;
		justify-self: center;
	}

	.witcher-page .lightbox-shell {
		grid-template-columns: 1fr;
		max-height: calc(100dvh - 24px);
		max-width: calc(100vw - 24px);
	}

	.witcher-page .lightbox-media {
		min-height: 220px;
	}

	.witcher-page #lightbox img {
		max-height: 62dvh;
	}

	.witcher-page .lightbox-copy {
		border-left: 0;
		border-top: 1px solid rgba(175, 220, 212, 0.14);
		padding: 22px;
	}
}