/*
Theme Name: OmniFusion Arena
Theme URI: https://jamilblog.top/
Author: Jamil & Codex
Author URI: https://jamilblog.top/
Description: A Q-version visual WordPress blog theme built around direct elements from Overwatch 2, CS2, Don't Starve, Oxygen Not Included, Dave the Diver, autonomous driving, embodied intelligence, Teamfight Tactics, League of Legends, Rainbow Six Siege, Apex Legends, and badminton.
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: omnifusion-arena
Tags: blog, portfolio, custom-logo, custom-menu, featured-images, threaded-comments, wide-blocks, block-styles, translation-ready
*/

:root {
	--of-bg: #090a0d;
	--of-bg-soft: #14171c;
	--of-panel: rgba(20, 24, 29, 0.92);
	--of-panel-strong: #191e25;
	--of-card: #202732;
	--of-card-warm: #34261b;
	--of-line: rgba(222, 230, 240, 0.18);
	--of-line-bright: rgba(116, 240, 255, 0.52);
	--of-text: #f7f3e8;
	--of-muted: #b9c1ce;
	--of-cyan: #57d8ff;
	--of-orange: #ff9b42;
	--of-green: #a9ef5a;
	--of-gold: #ffd166;
	--of-red: #ff5668;
	--of-violet: #a98bff;
	--of-sea: #1b7aa0;
	--of-paper: #e8d7aa;
	--of-ink: #0c0f14;
	--of-steel: #798696;
	--of-radius: 8px;
	--of-shadow: 0 20px 70px rgba(0, 0, 0, 0.42);
	--of-width: min(1180px, calc(100vw - 32px));
	--of-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--of-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: auto;
}

body {
	margin: 0;
	min-height: 100vh;
	background:
		linear-gradient(90deg, rgba(255, 155, 66, 0.12) 0 10px, transparent 10px 84px),
		linear-gradient(180deg, rgba(87, 216, 255, 0.10) 0 2px, transparent 2px 78px),
		linear-gradient(135deg, #0a0b0f 0%, #171015 38%, #0b1720 72%, #0d1113 100%);
	color: var(--of-text);
	font-family: var(--of-font);
	font-size: 16px;
	line-height: 1.72;
	letter-spacing: 0;
	overflow-x: hidden;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(135deg, transparent 0 47%, rgba(255, 255, 255, 0.035) 47% 53%, transparent 53%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 22px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 22px);
	background-size: 220px 220px, 100% 100%, 100% 100%;
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 82%);
}

body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		linear-gradient(115deg, transparent 0 44%, rgba(87, 216, 255, 0.11) 44.3% 44.8%, transparent 45.1%),
		linear-gradient(65deg, transparent 0 68%, rgba(255, 209, 102, 0.10) 68.3% 68.8%, transparent 69.1%),
		repeating-linear-gradient(90deg, transparent 0 160px, rgba(255, 255, 255, 0.026) 160px 161px, transparent 161px 220px);
}

a {
	color: var(--of-cyan);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

a:hover,
a:focus {
	color: var(--of-gold);
}

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

button,
input,
select,
textarea {
	font: inherit;
}

code,
kbd,
pre,
samp {
	font-family: var(--of-mono);
}

pre {
	overflow-x: auto;
	padding: 18px;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background: #080d13;
}

blockquote {
	margin: 28px 0;
	padding: 2px 0 2px 22px;
	border-left: 3px solid var(--of-orange);
	color: #d8e2f2;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 12px 14px;
	border: 1px solid var(--of-line);
}

th {
	background: rgba(87, 216, 255, 0.08);
	color: var(--of-text);
	text-align: left;
}

.screen-reader-text,
.skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 10px 14px;
	clip: auto;
	border-radius: var(--of-radius);
	background: var(--of-text);
	color: var(--of-bg);
}

.of-progress {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.08);
}

.of-progress__bar {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, var(--of-orange), var(--of-cyan), var(--of-green));
	transform-origin: left center;
}

.of-shell {
	width: var(--of-width);
	margin: 0 auto;
}

.of-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var(--of-line);
	background:
		linear-gradient(90deg, rgba(255, 155, 66, 0.10), transparent 26%),
		rgba(9, 10, 13, 0.90);
	backdrop-filter: blur(16px);
}

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

.of-topbar {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	min-height: 72px;
}

.of-brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	color: var(--of-text);
	text-decoration: none;
}

.of-brand:hover,
.of-brand:focus {
	color: var(--of-text);
}

.of-brand__mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 1px solid var(--of-line-bright);
	border-radius: var(--of-radius);
	background:
		linear-gradient(135deg, rgba(255, 155, 66, 0.36) 0 34%, transparent 34% 100%),
		linear-gradient(315deg, rgba(87, 216, 255, 0.34) 0 42%, transparent 42% 100%),
		#121922;
	box-shadow:
		inset 0 0 0 3px rgba(0, 0, 0, 0.22),
		0 0 22px rgba(87, 216, 255, 0.12);
}

.of-brand__mark::before,
.of-brand__mark::after {
	content: "";
	position: absolute;
	border-radius: 999px;
}

.of-brand__mark::before {
	width: 18px;
	height: 18px;
	border: 2px solid var(--of-gold);
	border-right-color: transparent;
	transform: rotate(-24deg);
}

.of-brand__mark::after {
	width: 6px;
	height: 24px;
	background: var(--of-cyan);
	box-shadow: 12px 8px 0 -2px var(--of-green), -12px 10px 0 -2px var(--of-orange);
	transform: skewX(-16deg);
}

.of-brand__text {
	display: grid;
	gap: 0;
	min-width: 0;
}

.of-brand__name {
	color: var(--of-text);
	font-size: 1.02rem;
	font-weight: 800;
	line-height: 1.1;
	white-space: nowrap;
}

.of-brand__tag {
	color: var(--of-muted);
	font-family: var(--of-mono);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.of-nav {
	justify-self: end;
}

.of-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.of-menu a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 10px;
	border: 1px solid transparent;
	border-radius: var(--of-radius);
	color: var(--of-muted);
	text-decoration: none;
}

.of-menu a:hover,
.of-menu a:focus,
.of-menu .current-menu-item > a,
.of-menu .current_page_item > a {
	border-color: rgba(255, 155, 66, 0.48);
	background: rgba(255, 155, 66, 0.08);
	color: var(--of-text);
}

.of-nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background: rgba(255, 255, 255, 0.04);
	color: var(--of-text);
	cursor: pointer;
}

.of-nav-toggle span,
.of-nav-toggle span::before,
.of-nav-toggle span::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	content: "";
}

.of-nav-toggle span::before {
	transform: translateY(-6px);
}

.of-nav-toggle span::after {
	transform: translateY(4px);
}

.of-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
	gap: clamp(26px, 4vw, 58px);
	align-items: center;
	min-height: clamp(560px, 72vh, 760px);
	padding: clamp(54px, 7vw, 96px) 0 42px;
}

.of-hero::before {
	content: "";
	position: absolute;
	inset: 24px calc(50% - 50vw);
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 36%),
		linear-gradient(90deg, rgba(255, 155, 66, 0.08), transparent 24%, rgba(87, 216, 255, 0.07) 78%, transparent),
		url("assets/svg/fusion-field.svg") center right / min(820px, 75vw) auto no-repeat;
	opacity: 0.78;
}

.of-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 18px;
	color: var(--of-gold);
	font-family: var(--of-mono);
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.of-eyebrow::before {
	content: "";
	width: 36px;
	height: 12px;
	border: 1px solid rgba(255, 209, 102, 0.62);
	background:
		linear-gradient(90deg, var(--of-orange) 0 42%, transparent 42% 58%, var(--of-cyan) 58% 100%);
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.24);
}

.of-hero h1,
.of-page-title {
	margin: 0;
	color: var(--of-text);
	font-size: clamp(2.35rem, 8vw, 6rem);
	line-height: 0.96;
	letter-spacing: 0;
	text-wrap: balance;
}

.of-hero__copy {
	max-width: 720px;
	margin: 22px 0 0;
	color: #d5deea;
	font-size: clamp(1.02rem, 2vw, 1.25rem);
}

.of-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.of-button,
.of-readmore,
.post-page-numbers,
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 10px 14px;
	border: 1px solid var(--of-line-bright);
	border-radius: var(--of-radius);
	background:
		linear-gradient(135deg, rgba(87, 216, 255, 0.13), transparent 54%),
		rgba(255, 255, 255, 0.045);
	color: var(--of-text);
	text-decoration: none;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.20);
}

.of-button:hover,
.of-button:focus,
.of-readmore:hover,
.of-readmore:focus,
.page-numbers:hover,
.page-numbers:focus,
.page-numbers.current {
	background: rgba(255, 155, 66, 0.16);
	border-color: rgba(255, 155, 66, 0.62);
	color: var(--of-text);
	transform: translateY(-1px);
}

.of-button--solid {
	border-color: rgba(255, 155, 66, 0.8);
	background:
		linear-gradient(135deg, var(--of-orange), #e95c52),
		var(--of-orange);
	color: #160d09;
	font-weight: 800;
}

.of-button--solid:hover,
.of-button--solid:focus {
	color: #160d09;
}

.of-hero-art {
	position: relative;
	margin: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--of-radius);
	background:
		linear-gradient(135deg, rgba(255, 155, 66, 0.20), transparent 44%),
		linear-gradient(315deg, rgba(87, 216, 255, 0.18), transparent 48%),
		#0c1117;
	box-shadow: var(--of-shadow);
	overflow: hidden;
}

.of-hero-art::before {
	content: "Q VERSION ELEMENT BOARD";
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 9px;
	border: 1px solid rgba(255, 209, 102, 0.72);
	border-radius: 5px;
	background: rgba(7, 9, 15, 0.82);
	color: var(--of-gold);
	font-family: var(--of-mono);
	font-size: 0.66rem;
	letter-spacing: 0.10em;
}

.of-hero-art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	border: 8px solid rgba(7, 9, 15, 0.58);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.18),
		inset 0 -80px 90px rgba(0, 0, 0, 0.28);
}

.of-hero-art img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	filter: saturate(1.08) contrast(1.03);
}

.of-hero-art figcaption {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	background: rgba(7, 9, 15, 0.80);
	color: #f7f3e8;
	font-size: 0.88rem;
	line-height: 1.45;
}

.of-hero-map {
	position: relative;
	min-height: 420px;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background:
		linear-gradient(90deg, rgba(255, 209, 102, 0.18) 0 12px, transparent 12px 100%),
		linear-gradient(180deg, rgba(87, 216, 255, 0.16) 0 12px, transparent 12px 100%),
		linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 48%),
		#10141a;
	box-shadow: var(--of-shadow);
	overflow: hidden;
}

.of-hero-map::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 6px;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px),
		linear-gradient(135deg, rgba(255, 155, 66, 0.22) 0 18%, transparent 18% 100%),
		linear-gradient(315deg, rgba(87, 216, 255, 0.18) 0 20%, transparent 20% 100%),
		rgba(255, 255, 255, 0.035);
	background-size: 74px 74px, 74px 74px, 100% 100%, 100% 100%, 100% 100%;
	clip-path: polygon(6% 0, 100% 0, 100% 82%, 90% 100%, 0 100%, 0 10%);
}

.of-hero-map::after {
	content: "LOADOUT WALL";
	position: absolute;
	left: 24px;
	bottom: 22px;
	padding: 5px 9px;
	border: 1px solid rgba(255, 209, 102, 0.58);
	border-radius: 5px;
	background:
		repeating-linear-gradient(90deg, rgba(255, 209, 102, 0.18) 0 6px, transparent 6px 10px),
		rgba(7, 9, 15, 0.86);
	color: var(--of-gold);
	font-family: var(--of-mono);
	font-size: 0.68rem;
	letter-spacing: 0.12em;
}

.of-lane {
	position: absolute;
	left: 12%;
	right: 18%;
	bottom: 18%;
	height: 74px;
	border: 1px solid rgba(87, 216, 255, 0.48);
	border-radius: 7px;
	background:
		linear-gradient(90deg, rgba(87, 216, 255, 0.14) 0 18%, transparent 18% 24%, rgba(255, 255, 255, 0.10) 24% 76%, transparent 76% 82%, rgba(255, 155, 66, 0.18) 82% 100%),
		rgba(4, 8, 12, 0.74);
	box-shadow: inset 0 0 0 4px rgba(0, 0, 0, 0.16);
	transform: rotate(-5deg);
}

.of-lane::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 18px;
	right: 18px;
	border-top: 2px dashed rgba(255, 255, 255, 0.50);
}

.of-orbit {
	position: absolute;
	top: 10%;
	left: 12%;
	width: 42%;
	height: 50%;
	border: 1px solid rgba(255, 209, 102, 0.52);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(255, 209, 102, 0.16), transparent 40%),
		linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
		rgba(21, 18, 16, 0.72);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
	transform: rotate(3deg);
}

.of-orbit::before,
.of-orbit::after {
	content: "";
	position: absolute;
}

.of-orbit::before {
	width: 36px;
	height: 58px;
	top: 22px;
	left: 24px;
	border: 1px solid rgba(169, 239, 90, 0.7);
	border-radius: 18px 18px 8px 8px;
	background:
		linear-gradient(180deg, rgba(169, 239, 90, 0.78) 0 16%, transparent 16%),
		#243326;
	box-shadow: 54px 18px 0 -12px #2a3140, 108px -2px 0 -15px #49301d;
}

.of-orbit::after {
	right: 18px;
	bottom: 16px;
	width: 58px;
	height: 13px;
	border-radius: 999px;
	background: var(--of-paper);
	box-shadow: -24px -30px 0 -3px var(--of-cyan);
	transform: rotate(-28deg);
}

.of-node {
	position: absolute;
	display: grid;
	place-items: center;
	width: 72px;
	height: 88px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 7px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0 24%, transparent 24%),
		var(--of-card);
	color: var(--of-text);
	font-family: var(--of-mono);
	font-size: 0.72rem;
	box-shadow:
		0 18px 36px rgba(0, 0, 0, 0.32),
		inset 0 -4px 0 rgba(0, 0, 0, 0.18);
	clip-path: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 0 100%);
}

.of-node--one {
	top: 12%;
	right: 14%;
	color: var(--of-orange);
	transform: rotate(-4deg);
}

.of-node--two {
	top: 44%;
	left: 8%;
	color: var(--of-cyan);
	transform: rotate(6deg);
}

.of-node--three {
	right: 18%;
	bottom: 15%;
	color: var(--of-green);
	transform: rotate(4deg);
}

.of-system-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 10px;
	padding: 18px 0 44px;
}

.of-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 9px 10px 9px 34px;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.10), transparent 48%),
		var(--of-panel-strong);
	color: var(--of-muted);
	font-family: var(--of-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.20);
}

.of-chip::before {
	content: "";
	position: absolute;
	left: 10px;
	width: 7px;
	height: 18px;
	border-radius: 2px;
	background: var(--of-cyan);
	box-shadow: 0 0 16px currentColor;
}

.of-chip::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 8px;
	width: 16px;
	height: 3px;
	background: rgba(255, 255, 255, 0.20);
	box-shadow: 0 6px 0 rgba(255, 255, 255, 0.12);
}

.of-chip:nth-child(3n)::before {
	background: var(--of-orange);
}

.of-chip:nth-child(4n)::before {
	background: var(--of-green);
}

.of-chip:nth-child(5n)::before {
	background: var(--of-gold);
}

.of-element-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	padding: 18px 0 44px;
}

.of-element-card {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 100%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--of-radius);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 40%),
		var(--of-panel-strong);
	box-shadow:
		0 18px 42px rgba(0, 0, 0, 0.28),
		inset 0 -4px 0 rgba(0, 0, 0, 0.18);
	overflow: hidden;
}

.of-element-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
		linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px);
	background-size: 34px 34px;
	opacity: 0.34;
}

.of-element-card::after {
	content: "";
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	width: 28px;
	height: 9px;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--of-orange), var(--of-cyan), var(--of-green));
	box-shadow: 0 0 18px rgba(87, 216, 255, 0.30);
}

.of-element-card img {
	display: block;
	width: 100%;
	aspect-ratio: 384 / 341;
	object-fit: cover;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.of-element-card div {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 13px 14px 15px;
}

.of-element-card h2 {
	margin: 0;
	color: var(--of-text);
	font-size: 1rem;
	line-height: 1.2;
}

.of-element-card p {
	margin: 0;
	color: var(--of-muted);
	font-size: 0.86rem;
	line-height: 1.45;
}

.of-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: 28px;
	align-items: start;
	padding: 24px 0 72px;
}

.of-post-list {
	display: grid;
	gap: 18px;
}

.of-post-card,
.of-panel,
.of-article,
.comment-body {
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 120px),
		var(--of-panel);
	box-shadow: 0 16px 50px rgba(0, 0, 0, 0.18);
}

.of-post-card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
	min-height: 230px;
	overflow: hidden;
}

.of-post-card::before {
	content: "";
	position: absolute;
	inset: 10px;
	z-index: 1;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	pointer-events: none;
}

.of-post-card::after {
	content: "CARD";
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	padding: 2px 6px;
	border: 1px solid rgba(87, 216, 255, 0.42);
	border-radius: 4px;
	background: rgba(7, 9, 15, 0.72);
	color: var(--of-cyan);
	font-family: var(--of-mono);
	font-size: 0.62rem;
	letter-spacing: 0.12em;
}

.of-post-card:not(:has(.of-post-card__media)) {
	grid-template-columns: 1fr;
}

.of-post-card__media {
	position: relative;
	z-index: 0;
	min-height: 100%;
	background:
		linear-gradient(135deg, rgba(87, 216, 255, 0.22) 0 34%, transparent 34%),
		linear-gradient(315deg, rgba(255, 155, 66, 0.26) 0 38%, transparent 38%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 9px),
		#0b1018;
}

.of-post-card__media img {
	width: 100%;
	height: 100%;
	min-height: 230px;
	object-fit: cover;
	filter: saturate(1.04) contrast(1.04);
}

.of-post-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, transparent, rgba(7, 9, 15, 0.22)),
		linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 22%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 5px);
	pointer-events: none;
}

.of-post-card__body {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: start;
	gap: 14px;
	padding: clamp(18px, 3vw, 30px);
}

.of-post-card__body::after {
	content: "";
	position: absolute;
	right: clamp(18px, 3vw, 30px);
	bottom: clamp(18px, 3vw, 30px);
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 209, 102, 0.34);
	border-radius: 50%;
	background:
		linear-gradient(90deg, transparent 47%, rgba(255, 209, 102, 0.36) 47% 53%, transparent 53%),
		linear-gradient(0deg, transparent 47%, rgba(255, 209, 102, 0.36) 47% 53%, transparent 53%);
	opacity: 0.52;
	pointer-events: none;
}

.of-kicker,
.of-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	color: var(--of-muted);
	font-family: var(--of-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
}

.of-kicker {
	align-items: stretch;
}

.of-kicker a {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border: 1px solid rgba(255, 155, 66, 0.38);
	border-radius: 4px;
	background: rgba(255, 155, 66, 0.08);
}

.of-kicker a,
.of-meta a {
	color: inherit;
	text-decoration: none;
}

.of-kicker a:hover,
.of-meta a:hover,
.of-kicker a:focus,
.of-meta a:focus {
	color: var(--of-gold);
}

.of-post-card h2,
.of-article h1,
.of-panel h2,
.of-panel h3 {
	margin: 0;
	line-height: 1.12;
	text-wrap: balance;
}

.of-post-card h2 {
	font-size: clamp(1.35rem, 3vw, 2.15rem);
}

.of-post-card h2 a {
	color: var(--of-text);
	text-decoration: none;
}

.of-post-card h2 a:hover,
.of-post-card h2 a:focus {
	color: var(--of-gold);
}

.of-excerpt {
	margin: 0;
	color: #c7d2e1;
	max-width: 64ch;
}

.of-sidebar {
	display: grid;
	gap: 18px;
	position: sticky;
	top: 96px;
}

.admin-bar .of-sidebar {
	top: 128px;
}

.of-panel {
	position: relative;
	padding: 20px;
	overflow: hidden;
}

.of-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 8px;
	background:
		linear-gradient(90deg, var(--of-orange) 0 24%, var(--of-cyan) 24% 52%, var(--of-green) 52% 76%, var(--of-gold) 76% 100%);
	opacity: 0.78;
}

.of-panel::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 14px;
	width: 70px;
	height: 70px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.08) 42% 44%, transparent 44%),
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 10px);
	opacity: 0.55;
	pointer-events: none;
}

.of-panel ul,
.of-panel ol {
	margin: 12px 0 0;
	padding-left: 20px;
}

.of-panel li + li {
	margin-top: 8px;
}

.of-panel li {
	padding-left: 2px;
}

.of-panel a {
	color: #cfeaff;
}

.of-system-meter {
	display: grid;
	gap: 11px;
	margin-top: 14px;
}

.of-meter {
	display: grid;
	grid-template-columns: 86px 1fr;
	gap: 10px;
	align-items: center;
	color: var(--of-muted);
	font-family: var(--of-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
}

.of-meter span:last-child {
	height: 8px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 3px;
	background:
		linear-gradient(90deg, var(--of-cyan), var(--of-green) var(--value), rgba(255, 255, 255, 0.08) var(--value)),
		repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.24) 12px 14px);
}

.of-page-head {
	padding: clamp(50px, 8vw, 86px) 0 28px;
	border-bottom: 1px solid var(--of-line);
	background:
		linear-gradient(135deg, rgba(255, 155, 66, 0.16) 0 24%, transparent 24%),
		linear-gradient(315deg, rgba(87, 216, 255, 0.14) 0 26%, transparent 26%),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 44px);
}

.of-page-title {
	font-size: clamp(2rem, 6vw, 4.2rem);
}

.of-page-description {
	max-width: 760px;
	margin: 18px 0 0;
	color: #cfdae8;
}

.of-article {
	position: relative;
	padding: clamp(20px, 5vw, 46px);
	overflow: hidden;
}

.of-article::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: min(220px, 38vw);
	height: 12px;
	background: linear-gradient(90deg, var(--of-cyan), var(--of-orange), var(--of-green));
	opacity: 0.82;
}

.of-article__header {
	display: grid;
	gap: 16px;
	margin-bottom: 28px;
}

.of-article__header h1 {
	font-size: clamp(2rem, 6vw, 4.2rem);
}

.of-featured {
	margin: 0 0 28px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--of-radius);
	overflow: hidden;
	background: #0b1018;
}

.of-featured img {
	display: block;
	width: 100%;
	max-height: 560px;
	object-fit: cover;
}

.of-content {
	color: #e2e8f0;
}

.of-content > *:first-child {
	margin-top: 0;
}

.of-content > *:last-child {
	margin-bottom: 0;
}

.of-content h2,
.of-content h3,
.of-content h4 {
	margin-top: 1.8em;
	line-height: 1.2;
}

.of-content h2 {
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 155, 66, 0.30);
}

.of-content a {
	color: #7fe4ff;
}

.of-content .alignwide {
	max-width: min(1040px, 100%);
}

.of-content .alignfull {
	width: calc(100% + clamp(40px, 10vw, 92px));
	max-width: none;
	margin-left: calc(clamp(20px, 5vw, 46px) * -1);
}

.wp-caption,
.wp-block-image figcaption,
.gallery-caption {
	color: var(--of-muted);
	font-size: 0.88rem;
}

.wp-block-image img,
.wp-block-gallery img {
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--of-radius);
}

.of-post-nav,
.pagination,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: center;
	margin-top: 24px;
}

.of-post-nav {
	justify-content: space-between;
}

.of-comments {
	margin-top: 28px;
}

.comments-title,
.comment-reply-title {
	margin: 0 0 16px;
}

.comment-list {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.comment-body {
	padding: 18px;
}

.comment-meta {
	color: var(--of-muted);
	font-size: 0.9rem;
}

.comment-content {
	margin-top: 12px;
}

.comment-form {
	display: grid;
	gap: 14px;
}

.comment-form input:not([type="submit"]),
.comment-form textarea,
.search-form input[type="search"] {
	width: 100%;
	border: 1px solid var(--of-line);
	border-radius: var(--of-radius);
	background:
		linear-gradient(90deg, rgba(87, 216, 255, 0.08), transparent 30%),
		rgba(255, 255, 255, 0.06);
	color: var(--of-text);
	padding: 12px 14px;
}

.comment-form input[type="submit"],
.search-form input[type="submit"] {
	border: 1px solid rgba(255, 155, 66, 0.72);
	border-radius: var(--of-radius);
	background: linear-gradient(135deg, var(--of-orange), #e95c52);
	color: #160d09;
	font-weight: 800;
	padding: 12px 16px;
	cursor: pointer;
}

.of-site-footer {
	border-top: 1px solid var(--of-line);
	background:
		linear-gradient(90deg, rgba(87, 216, 255, 0.08), transparent 30%, rgba(255, 155, 66, 0.08)),
		rgba(4, 6, 10, 0.86);
}

.of-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 30px 0;
	color: var(--of-muted);
}

.of-footer-grid p {
	margin: 0;
}

.of-footer-signal {
	display: flex;
	gap: 7px;
}

.of-footer-signal span {
	width: 10px;
	height: 10px;
	border-radius: 2px;
	background: var(--of-cyan);
	box-shadow: 0 0 18px var(--of-cyan);
}

.of-footer-signal span:nth-child(2) {
	background: var(--of-orange);
	box-shadow: 0 0 18px var(--of-orange);
}

.of-footer-signal span:nth-child(3) {
	background: var(--of-green);
	box-shadow: 0 0 18px var(--of-green);
}

.sticky .of-post-card__body::before {
	content: "Pinned";
	justify-self: start;
	padding: 4px 8px;
	border: 1px solid rgba(255, 209, 102, 0.52);
	border-radius: var(--of-radius);
	background: rgba(255, 209, 102, 0.08);
	color: var(--of-gold);
	font-family: var(--of-mono);
	font-size: 0.72rem;
	text-transform: uppercase;
}

.bypostauthor .comment-body {
	border-color: rgba(255, 209, 102, 0.45);
}

@media (max-width: 920px) {
	.of-topbar {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	.of-nav-toggle {
		display: inline-flex;
	}

	.of-nav {
		grid-column: 1 / -1;
		justify-self: stretch;
		display: none;
	}

	.of-nav.is-open {
		display: block;
	}

	.of-menu {
		display: grid;
		justify-content: stretch;
		padding: 0 0 14px;
	}

	.of-menu a {
		border: 1px solid var(--of-line);
		border-radius: var(--of-radius);
		background: rgba(255, 255, 255, 0.035);
	}

	.of-hero,
	.of-layout {
		grid-template-columns: 1fr;
	}

	.of-hero {
		min-height: auto;
		padding-top: 42px;
	}

	.of-sidebar {
		position: static;
	}

	.of-system-strip {
		grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	}

	.of-element-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	:root {
		--of-width: min(100vw - 22px, 1180px);
	}

	.admin-bar .of-site-header {
		top: 46px;
	}

	.of-brand__tag {
		display: none;
	}

	.of-hero-map {
		min-height: 330px;
	}

	.of-hero-art::before {
		top: 10px;
		left: 10px;
		font-size: 0.58rem;
	}

	.of-hero-art::after {
		border-width: 5px;
	}

	.of-hero-art figcaption {
		position: static;
		border-width: 1px 0 0;
		border-radius: 0;
		background: rgba(7, 9, 15, 0.94);
	}

	.of-hero-map::after {
		left: 18px;
		bottom: 16px;
	}

	.of-orbit {
		left: 9%;
		width: 54%;
		height: 48%;
	}

	.of-node {
		width: 60px;
		height: 74px;
		font-size: 0.66rem;
	}

	.of-node--one {
		right: 8%;
	}

	.of-node--two {
		left: 6%;
		top: 50%;
	}

	.of-lane {
		left: 10%;
		right: 10%;
		height: 58px;
	}

	.of-system-strip {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.of-element-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}

	.of-chip {
		min-height: 42px;
		padding-right: 28px;
		font-size: 0.68rem;
	}

	.of-post-card {
		grid-template-columns: 1fr;
	}

	.of-post-card__media img {
		min-height: 210px;
	}

	.of-post-card::after {
		top: 12px;
		right: 12px;
	}

	.of-post-card__body::after,
	.of-panel::after {
		display: none;
	}

	.of-footer-grid {
		grid-template-columns: 1fr;
	}

	.of-content .alignfull {
		width: 100%;
		margin-left: 0;
	}
}

@media (max-width: 460px) {
	.of-element-grid {
		grid-template-columns: 1fr;
	}
}

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