/* DK Expressions — locked Insights archive v1.23.5 */

.dkxoi {
	--ink: #02070c;
	--panel: #07131c;
	--panel-2: #0a1a25;
	--white: #f6f9fc;
	--muted: #91a6b5;
	--line: rgba(67, 186, 255, .24);
	--blue: #43baff;
	--red: #ff536d;
	--purple: #9b7cff;
	--teal: #2ad6c9;
	--gold: #ffc857;
	position: relative;
	background: var(--ink);
	color: var(--white);
	overflow: clip;
}

.dkxoi,
.dkxoi * {
	box-sizing: border-box;
}

.dkxoi :is(h1, h2, h3, p, a, span, strong, b, time) {
	text-shadow: none !important;
}

.dkxoi :is(h1, h2, h3, p) {
	margin-top: 0;
}

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

.dkxoi button {
	font: inherit;
}

.dkxoi-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	color: var(--blue);
	font: 900 clamp(.68rem, .75vw, .82rem)/1.25 Montserrat, Arial, sans-serif;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.dkxoi-eyebrow::before {
	width: 42px;
	height: 2px;
	background: currentColor;
	content: "";
}

/* Editorial Spectrum hero with the official DK mark in the background. */
.dkxoi-spectrum-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: clamp(720px, 82vh, 940px);
	padding: clamp(130px, 13vw, 200px) max(6vw, calc((100vw - 1400px) / 2));
	border-bottom: 1px solid var(--line);
	background:
		linear-gradient(90deg, rgba(2, 7, 12, .13), rgba(2, 7, 12, .96) 66%),
		linear-gradient(135deg, rgba(255, 83, 109, .14), transparent 39%),
		linear-gradient(45deg, rgba(155, 124, 255, .16), transparent 45%),
		linear-gradient(90deg, rgba(67, 186, 255, .04) 1px, transparent 1px),
		linear-gradient(rgba(67, 186, 255, .04) 1px, transparent 1px),
		var(--ink);
	background-size: auto, auto, auto, 58px 58px, 58px 58px, auto;
	isolation: isolate;
}

.dkxoi-spectrum-hero::before {
	position: absolute;
	inset: 22px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, .1);
	content: "";
	pointer-events: none;
}

.dkxoi-spectrum-hero::after {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	height: 10px;
	background: linear-gradient(90deg, var(--blue) 0 25%, var(--red) 25% 50%, var(--purple) 50% 75%, var(--gold) 75%);
	content: "";
}

.dkxoi-hero-brand {
	position: absolute;
	left: max(5vw, calc((100vw - 1480px) / 2));
	top: 50%;
	z-index: 0;
	width: min(52vw, 760px);
	height: 76%;
	transform: translateY(-50%);
	pointer-events: none;
}

.dkxoi-hero-brand span {
	position: absolute;
	left: -11%;
	top: 50%;
	color: transparent;
	font: 950 clamp(8rem, 19vw, 19rem)/.72 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.1em;
	-webkit-text-stroke: 1px rgba(67, 186, 255, .23);
	transform: translateY(-50%) rotate(-90deg);
}

.dkxoi-hero-brand img {
	position: absolute;
	left: 49%;
	top: 50%;
	width: min(30vw, 410px);
	height: auto;
	opacity: .2;
	filter: saturate(1.25) brightness(1.25);
	transform: translate(-50%, -50%);
	animation: dkxoi-logo-breathe 8s ease-in-out infinite;
}

.dkxoi-spectrum-lines {
	position: absolute;
	left: 9%;
	top: 50%;
	z-index: 0;
	width: clamp(320px, 34vw, 560px);
	aspect-ratio: 1;
	border: 1px solid rgba(67, 186, 255, .27);
	border-radius: 50%;
	transform: translateY(-50%);
	animation: dkxoi-orbit 30s linear infinite;
}

.dkxoi-spectrum-lines::before,
.dkxoi-spectrum-lines::after,
.dkxoi-spectrum-lines i {
	position: absolute;
	border-radius: 50%;
	content: "";
}

.dkxoi-spectrum-lines::before {
	inset: 13%;
	border: 1px dashed rgba(155, 124, 255, .35);
}

.dkxoi-spectrum-lines::after {
	inset: 30%;
	border: 7px solid rgba(42, 214, 201, .09);
	border-right-color: var(--teal);
}

.dkxoi-spectrum-lines i:nth-child(1) {
	left: 50%;
	top: -7px;
	width: 13px;
	height: 13px;
	background: var(--blue);
}

.dkxoi-spectrum-lines i:nth-child(2) {
	right: 6%;
	bottom: 15%;
	width: 9px;
	height: 9px;
	background: var(--gold);
}

.dkxoi-spectrum-lines i:nth-child(3) {
	left: 3%;
	top: 31%;
	width: 8px;
	height: 8px;
	background: var(--red);
}

.dkxoi-hero-copy {
	position: relative;
	z-index: 3;
	width: min(760px, 58%);
	margin-right: 5vw;
}

.dkxoi-hero-copy h1 {
	max-width: 820px;
	margin: 0;
	color: var(--white);
	font: 950 clamp(4.4rem, 8.7vw, 9.5rem)/.8 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.085em;
	text-transform: uppercase;
}

.dkxoi-hero-copy h1 em {
	display: block;
	margin-top: .16em;
	color: transparent;
	font-style: normal;
	-webkit-text-stroke: 2px var(--blue);
}

.dkxoi-hero-copy > p:last-child {
	max-width: 680px;
	margin: 42px 0 0;
	color: #d7e1e8;
	font: 650 clamp(1rem, 1.35vw, 1.25rem)/1.72 Montserrat, Arial, sans-serif;
}

/* Page heading and compact analytics. */
.dkxoi-archive {
	width: min(1480px, 92vw);
	margin: 0 auto;
	padding: clamp(95px, 10vw, 155px) 0 125px;
}

.dkxoi-heading {
	position: relative;
	margin-bottom: 64px;
	text-align: center;
}

.dkxoi-heading .dkxoi-eyebrow {
	justify-content: center;
}

.dkxoi-heading h2 {
	margin: 0;
	color: var(--white);
	font: 950 clamp(4.2rem, 10vw, 10rem)/.78 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.085em;
	text-transform: uppercase;
}

.dkxoi-server {
	display: grid;
	grid-template-columns: minmax(260px, .72fr) minmax(0, 1.6fr);
	margin: 0 0 34px;
	border: 1px solid var(--line);
	background:
		linear-gradient(120deg, rgba(67, 186, 255, .075), transparent 40%),
		var(--panel);
}

.dkxoi-server > header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px clamp(26px, 3vw, 46px);
	border-right: 1px solid var(--line);
}

.dkxoi-server > header .dkxoi-eyebrow {
	margin-bottom: 12px;
	font-size: .6rem;
}

.dkxoi-server > header h3 {
	margin: 0;
	color: var(--white);
	font: 950 clamp(1.45rem, 2.3vw, 2.6rem)/.95 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.055em;
	text-transform: uppercase;
}

.dkxoi-server > header > span {
	margin-top: 14px;
	color: var(--muted);
	font: 700 .62rem/1.55 Montserrat, Arial, sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.dkxoi-server-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dkxoi-server-grid article {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 175px;
	padding: 24px;
	border-right: 1px solid rgba(255, 255, 255, .09);
	overflow: hidden;
}

.dkxoi-server-grid article:last-child {
	border-right: 0;
}

.dkxoi-server-grid article::before {
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var(--stat-accent);
	content: "";
}

.dkxoi-server-grid article::after {
	position: absolute;
	right: -8px;
	top: 50%;
	color: color-mix(in srgb, var(--stat-accent) 8%, transparent);
	font: 950 7rem/.7 "Arial Black", Arial, sans-serif;
	content: attr(data-stat);
	transform: translateY(-50%);
}

.dkxoi-server-grid article > span {
	position: relative;
	z-index: 1;
	margin-bottom: 18px;
	color: var(--stat-accent);
	font: 900 .6rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dkxoi-server-grid article strong {
	position: relative;
	z-index: 1;
	color: var(--stat-accent);
	font: 950 clamp(1.8rem, 3vw, 3.5rem)/.85 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.07em;
}

.dkxoi-server-grid article b {
	position: relative;
	z-index: 1;
	margin-top: 14px;
	color: var(--white);
	font: 900 .62rem/1.15 Montserrat, Arial, sans-serif;
	letter-spacing: .11em;
	text-transform: uppercase;
}

/* Category signal strip. */
.dkxoi-categories {
	position: sticky;
	top: 86px;
	z-index: 30;
	display: flex;
	gap: 7px;
	margin: 0 0 clamp(80px, 8vw, 120px);
	padding: 11px;
	overflow-x: auto;
	border: 1px solid rgba(255, 255, 255, .11);
	background: rgba(2, 7, 12, .94);
	backdrop-filter: blur(18px);
	scrollbar-width: thin;
}

.dkxoi-categories a {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid color-mix(in srgb, var(--cat-accent) 50%, transparent);
	color: #d9e5ec;
	font: 850 .68rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	transition: color .25s ease, background .25s ease, transform .25s ease;
}

.dkxoi-categories a::before {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cat-accent);
	content: "";
}

.dkxoi-categories a span {
	color: var(--cat-accent);
	font-size: .62rem;
}

.dkxoi-categories a:hover,
.dkxoi-categories a:focus-visible,
.dkxoi-categories a.is-active {
	background: var(--cat-accent);
	color: var(--ink);
	transform: translateY(-2px);
}

.dkxoi-categories a:hover::before,
.dkxoi-categories a:focus-visible::before,
.dkxoi-categories a.is-active::before {
	background: var(--ink);
}

.dkxoi-categories a:hover span,
.dkxoi-categories a:focus-visible span,
.dkxoi-categories a.is-active span {
	color: var(--ink);
}

/* Shared section headings. */
.dkxoi-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(290px, .62fr);
	align-items: end;
	gap: 60px;
	margin-bottom: 48px;
}

.dkxoi-section-head h2 {
	margin: 0;
	color: var(--white);
	font: 950 clamp(3.2rem, 6.8vw, 7.2rem)/.82 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.075em;
	text-transform: uppercase;
}

.dkxoi-section-head h2 em {
	color: var(--blue);
	font-style: normal;
}

.dkxoi-section-head > p {
	max-width: 500px;
	margin: 0 0 6px auto;
	padding-left: 24px;
	border-left: 3px solid var(--blue);
	color: var(--muted);
	font: 550 1rem/1.72 Montserrat, Arial, sans-serif;
}

/* Sticky-only story slider. */
.dkxoi-featured {
	margin-bottom: clamp(110px, 12vw, 180px);
}

.dkxoi-slider {
	position: relative;
	border: 1px solid rgba(67, 186, 255, .3);
	background: var(--panel);
	contain: layout paint;
}

.dkxoi-slider::before {
	position: absolute;
	left: -1px;
	top: -1px;
	z-index: 4;
	width: 22%;
	height: 7px;
	background: linear-gradient(90deg, var(--blue), var(--purple), var(--red));
	content: "";
}

.dkxoi-slider-viewport {
	overflow: hidden;
}

.dkxoi-slider-track {
	display: flex;
	transition: transform .75s cubic-bezier(.2, .75, .1, 1);
	will-change: transform;
}

.dkxoi-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.dkxoi-slide > a {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(380px, .8fr);
	min-height: 640px;
}

.dkxoi-slide-media {
	position: relative;
	min-height: 640px;
	background: linear-gradient(140deg, color-mix(in srgb, var(--cat-accent) 18%, var(--panel)), var(--ink));
	overflow: hidden;
}

.dkxoi-slide-media::before {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, transparent 52%, rgba(7, 19, 28, .92));
	content: "";
}

.dkxoi-slide-media::after {
	position: absolute;
	inset: 22px;
	z-index: 2;
	border: 1px solid color-mix(in srgb, var(--cat-accent) 55%, transparent);
	content: "";
}

.dkxoi-slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.92) contrast(1.06);
}

.dkxoi-slide-media > span {
	position: absolute;
	left: 50%;
	top: 50%;
	color: color-mix(in srgb, var(--cat-accent) 70%, white);
	font: 950 clamp(6rem, 13vw, 13rem)/1 "Arial Black", Arial, sans-serif;
	letter-spacing: -.1em;
	transform: translate(-50%, -50%);
}

.dkxoi-slide-copy {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(42px, 6vw, 90px);
	background:
		linear-gradient(140deg, color-mix(in srgb, var(--cat-accent) 10%, transparent), transparent 54%),
		var(--panel);
}

.dkxoi-slide-copy::after {
	position: absolute;
	right: 3%;
	top: 50%;
	color: color-mix(in srgb, var(--cat-accent) 7%, transparent);
	font: 950 clamp(10rem, 19vw, 18rem)/.7 "Arial Black", Arial, sans-serif;
	letter-spacing: -.12em;
	content: "01";
	transform: translateY(-50%);
}

.dkxoi-meta {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 22px;
	color: var(--muted);
	font: 850 .65rem/1.2 Montserrat, Arial, sans-serif;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.dkxoi-meta span {
	color: var(--cat-accent);
}

.dkxoi-slide-copy > b {
	position: relative;
	z-index: 2;
	display: table;
	margin-bottom: 22px;
	padding: 8px 10px;
	background: var(--cat-accent);
	color: var(--ink);
	font: 950 .62rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .13em;
	text-transform: uppercase;
}

.dkxoi-slide-copy h3 {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--white);
	font: 950 clamp(2.3rem, 4.8vw, 5.4rem)/.92 Montserrat, Arial, sans-serif;
	letter-spacing: -.065em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.dkxoi-slide-copy > p {
	position: relative;
	z-index: 2;
	margin: 25px 0 30px;
	color: #afc0cb;
	font: 520 .98rem/1.68 Montserrat, Arial, sans-serif;
}

.dkxoi-slide-copy > span {
	position: relative;
	z-index: 2;
	display: inline-flex;
	width: fit-content;
	padding-top: 14px;
	border-top: 2px solid var(--cat-accent);
	color: var(--white);
	font: 900 .67rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.dkxoi-slider-controls {
	display: grid;
	grid-template-columns: 62px auto minmax(130px, 1fr) 62px;
	align-items: center;
	gap: 20px;
	min-height: 78px;
	padding: 0 24px;
	border-top: 1px solid var(--line);
	background: var(--ink);
}

.dkxoi-slider-controls button {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	color: var(--white);
	cursor: pointer;
	transition: .25s ease;
}

.dkxoi-slider-controls button:hover,
.dkxoi-slider-controls button:focus-visible {
	border-color: var(--blue);
	background: var(--blue);
	color: var(--ink);
}

.dkxoi-slider-controls > span {
	color: var(--blue);
	font: 950 .72rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .12em;
}

.dkxoi-slider-progress {
	height: 2px;
	background: rgba(255, 255, 255, .13);
}

.dkxoi-slider-progress i {
	display: block;
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--blue), var(--purple), var(--red));
	transition: width .55s ease;
}

/* Timecode category stream. */
.dkxoi-streams-intro {
	margin-bottom: 82px;
}

.dkxoi-timeline {
	position: relative;
	padding-left: 84px;
}

.dkxoi-timeline::before {
	position: absolute;
	left: 24px;
	top: 0;
	bottom: 0;
	width: 2px;
	background: linear-gradient(var(--blue), var(--purple), var(--red), var(--gold), var(--teal));
	content: "";
}

.dkxoi-channel {
	position: relative;
	padding: 0 0 clamp(115px, 12vw, 180px);
	scroll-margin-top: 175px;
}

.dkxoi-channel:last-child {
	padding-bottom: 20px;
}

.dkxoi-channel-time {
	position: absolute;
	left: -84px;
	top: 5px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border: 1px solid var(--cat-accent);
	border-radius: 50%;
	background: var(--ink);
	color: var(--cat-accent);
	font: 950 .68rem/1 Montserrat, Arial, sans-serif;
}

.dkxoi-channel-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 50px;
	margin-bottom: 36px;
	padding-bottom: 28px;
	border-bottom: 1px solid color-mix(in srgb, var(--cat-accent) 47%, transparent);
}

.dkxoi-channel-head p {
	margin: 0 0 15px;
	color: var(--cat-accent);
	font: 900 .64rem/1.2 Montserrat, Arial, sans-serif;
	letter-spacing: .17em;
	text-transform: uppercase;
}

.dkxoi-channel-head h2 {
	margin: 0;
	color: var(--white);
	font: 950 clamp(3rem, 6.5vw, 7rem)/.8 "Arial Black", Montserrat, Arial, sans-serif;
	letter-spacing: -.075em;
	text-transform: uppercase;
}

.dkxoi-channel-head > span {
	padding: 11px 14px;
	border: 1px solid color-mix(in srgb, var(--cat-accent) 50%, transparent);
	color: var(--cat-accent);
	font: 850 .64rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.dkxoi-channel-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.dkxoi-card {
	position: relative;
	min-width: 0;
	border: 1px solid color-mix(in srgb, var(--cat-accent) 42%, #16232d);
	background: var(--panel);
	overflow: hidden;
}

.dkxoi-card::before {
	position: absolute;
	right: 11px;
	top: 16px;
	z-index: 3;
	color: rgba(255, 255, 255, .13);
	font: 950 4.5rem/.8 "Arial Black", Arial, sans-serif;
	letter-spacing: -.11em;
	content: var(--story-index);
}

.dkxoi-card > a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.dkxoi-card-media {
	position: relative;
	height: 255px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--cat-accent) 18%, var(--panel)), var(--ink));
	overflow: hidden;
}

.dkxoi-card-media::after {
	position: absolute;
	inset: 0;
	border-top: 8px solid var(--cat-accent);
	background: linear-gradient(0deg, rgba(2, 7, 12, .34), transparent 45%);
	content: "";
}

.dkxoi-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.9) contrast(1.05);
	transition: transform .7s cubic-bezier(.2, .75, .1, 1), filter .4s ease;
}

.dkxoi-card:hover .dkxoi-card-media img {
	filter: saturate(1.16) contrast(1.08);
	transform: scale(1.055);
}

.dkxoi-card-media > span {
	position: absolute;
	left: 50%;
	top: 50%;
	color: color-mix(in srgb, var(--cat-accent) 70%, white);
	font: 950 5rem/1 "Arial Black", Arial, sans-serif;
	letter-spacing: -.1em;
	transform: translate(-50%, -50%);
}

.dkxoi-card-copy {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 26px;
	background: linear-gradient(145deg, color-mix(in srgb, var(--cat-accent) 8%, transparent), transparent 50%);
}

.dkxoi-card-copy h3 {
	margin: 0;
	color: var(--white);
	font: 900 clamp(1.35rem, 1.85vw, 2rem)/1.02 Montserrat, Arial, sans-serif;
	letter-spacing: -.045em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.dkxoi-card-copy > p {
	margin: 19px 0 26px;
	color: #a9bac5;
	font: 500 .88rem/1.62 Montserrat, Arial, sans-serif;
}

.dkxoi-card-copy > span {
	display: inline-flex;
	width: fit-content;
	margin-top: auto;
	padding-top: 12px;
	border-top: 2px solid var(--cat-accent);
	color: var(--white);
	font: 900 .64rem/1 Montserrat, Arial, sans-serif;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.dkxoi-see-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 72px;
	margin-top: 14px;
	padding: 0 26px;
	border: 1px solid color-mix(in srgb, var(--cat-accent) 45%, transparent);
	background: color-mix(in srgb, var(--cat-accent) 6%, transparent);
	color: var(--white);
	font: 900 .7rem/1.2 Montserrat, Arial, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease;
}

.dkxoi-see-more span {
	color: var(--cat-accent);
	font-size: 1.25rem;
}

.dkxoi-see-more:hover,
.dkxoi-see-more:focus-visible {
	background: var(--cat-accent);
	color: var(--ink);
}

.dkxoi-see-more:hover span,
.dkxoi-see-more:focus-visible span {
	color: var(--ink);
}

@keyframes dkxoi-logo-breathe {
	0%, 100% { opacity: .16; transform: translate(-50%, -50%) scale(.96); }
	50% { opacity: .27; transform: translate(-50%, -50%) scale(1.035); }
}

@keyframes dkxoi-orbit {
	to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 1180px) {
	.dkxoi-hero-copy {
		width: 66%;
		margin-right: 1vw;
	}

	.dkxoi-hero-brand {
		left: 1vw;
	}

	.dkxoi-server {
		grid-template-columns: 1fr;
	}

	.dkxoi-server > header {
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.dkxoi-channel-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dkxoi-card-media {
		height: 320px;
	}
}

@media (max-width: 860px) {
	.dkxoi-spectrum-hero {
		justify-content: flex-start;
		min-height: 720px;
		padding: 130px 7vw 90px;
		background:
			linear-gradient(0deg, rgba(2, 7, 12, .93), rgba(2, 7, 12, .42)),
			linear-gradient(135deg, rgba(255, 83, 109, .13), transparent 42%),
			linear-gradient(45deg, rgba(155, 124, 255, .14), transparent 48%),
			var(--ink);
	}

	.dkxoi-spectrum-hero::before {
		inset: 12px;
	}

	.dkxoi-hero-brand {
		left: 50%;
		top: 50%;
		width: 100%;
		height: 92%;
		transform: translate(-50%, -50%);
	}

	.dkxoi-hero-brand span {
		left: 50%;
		top: 50%;
		font-size: clamp(8rem, 30vw, 15rem);
		transform: translate(-50%, -50%) rotate(-90deg);
	}

	.dkxoi-hero-brand img {
		left: 50%;
		width: min(64vw, 390px);
		opacity: .16;
	}

	.dkxoi-spectrum-lines {
		left: 50%;
		width: 80vw;
		opacity: .5;
		transform: translate(-50%, -50%);
	}

	.dkxoi-hero-copy {
		width: 100%;
		margin: 0;
	}

	.dkxoi-hero-copy h1 {
		font-size: clamp(4rem, 15vw, 7.3rem);
	}

	.dkxoi-archive {
		width: min(92vw, 760px);
		padding-top: 88px;
	}

	.dkxoi-server-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dkxoi-server-grid article:nth-child(2) {
		border-right: 0;
	}

	.dkxoi-server-grid article:nth-child(-n+2) {
		border-bottom: 1px solid rgba(255, 255, 255, .09);
	}

	.dkxoi-categories {
		top: 70px;
	}

	.dkxoi-section-head {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.dkxoi-section-head > p {
		margin-left: 0;
	}

	.dkxoi-slide > a {
		grid-template-columns: 1fr;
	}

	.dkxoi-slide-media {
		min-height: 430px;
		height: 430px;
	}

	.dkxoi-slide-media::before {
		background: linear-gradient(0deg, rgba(7, 19, 28, .88), transparent 48%);
	}

	.dkxoi-slide-copy {
		min-height: 430px;
	}

	.dkxoi-timeline {
		padding-left: 58px;
	}

	.dkxoi-timeline::before {
		left: 15px;
	}

	.dkxoi-channel-time {
		left: -58px;
		width: 34px;
		height: 34px;
		font-size: .55rem;
	}

	.dkxoi-channel-head {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.dkxoi-channel-head > span {
		width: fit-content;
	}
}

@media (max-width: 560px) {
	.dkxoi-spectrum-hero {
		min-height: 650px;
		padding: 112px 26px 76px;
	}

	.dkxoi-hero-copy .dkxoi-eyebrow {
		font-size: .62rem;
		letter-spacing: .17em;
	}

	.dkxoi-hero-copy h1 {
		font-size: clamp(3.45rem, 17.5vw, 5.6rem);
		line-height: .82;
	}

	.dkxoi-hero-copy h1 em {
		-webkit-text-stroke-width: 1px;
	}

	.dkxoi-hero-copy > p:last-child {
		margin-top: 30px;
		font-size: .95rem;
		line-height: 1.62;
	}

	.dkxoi-archive {
		width: calc(100% - 30px);
		padding: 70px 0 88px;
	}

	.dkxoi-heading {
		margin-bottom: 46px;
	}

	.dkxoi-heading h2 {
		font-size: clamp(3.5rem, 18vw, 5.4rem);
	}

	.dkxoi-server > header {
		padding: 26px 22px;
	}

	.dkxoi-server-grid article {
		min-height: 145px;
		padding: 20px;
	}

	.dkxoi-server-grid article strong {
		font-size: clamp(1.7rem, 10vw, 2.75rem);
	}

	.dkxoi-server-grid article b {
		font-size: .56rem;
	}

	.dkxoi-categories {
		top: 62px;
		width: calc(100vw - 12px);
		margin-left: -9px;
		margin-bottom: 78px;
		padding: 8px;
	}

	.dkxoi-categories a {
		min-height: 44px;
		padding: 0 14px;
	}

	.dkxoi-section-head h2 {
		font-size: clamp(3rem, 16vw, 5rem);
	}

	.dkxoi-section-head > p {
		padding-left: 18px;
		font-size: .92rem;
	}

	.dkxoi-slide-media {
		min-height: 300px;
		height: 300px;
	}

	.dkxoi-slide-media::after {
		inset: 12px;
	}

	.dkxoi-slide-copy {
		min-height: 390px;
		padding: 32px 24px 38px;
	}

	.dkxoi-slide-copy h3 {
		font-size: clamp(2rem, 11vw, 3.25rem);
		line-height: .96;
	}

	.dkxoi-slider-controls {
		grid-template-columns: 44px auto 1fr 44px;
		gap: 10px;
		padding: 0 12px;
	}

	.dkxoi-slider-controls button {
		width: 40px;
		height: 40px;
	}

	.dkxoi-streams-intro {
		margin-bottom: 64px;
	}

	.dkxoi-timeline {
		padding-left: 33px;
	}

	.dkxoi-timeline::before {
		left: 7px;
	}

	.dkxoi-channel {
		padding-bottom: 105px;
		scroll-margin-top: 140px;
	}

	.dkxoi-channel-time {
		left: -33px;
		width: 28px;
		height: 28px;
	}

	.dkxoi-channel-head h2 {
		font-size: clamp(2.7rem, 15vw, 4.7rem);
		line-height: .84;
		overflow-wrap: anywhere;
	}

	.dkxoi-channel-grid {
		grid-template-columns: 1fr;
	}

	.dkxoi-card-media {
		height: 270px;
	}

	.dkxoi-card-copy {
		padding: 26px 23px 30px;
	}

	.dkxoi-card-copy h3 {
		font-size: clamp(1.55rem, 8vw, 2.3rem);
	}

	.dkxoi-see-more {
		min-height: 68px;
		padding: 0 20px;
		font-size: .63rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dkxoi-hero-brand img,
	.dkxoi-spectrum-lines {
		animation: none;
	}

	.dkxoi-slider-track,
	.dkxoi-slider-progress i,
	.dkxoi-card-media img,
	.dkxoi-categories a {
		transition: none;
	}
}