/*!
Theme Name: Chain of Custody
Theme URI: https://chainofcustody.tech
Author: @echo_0ff
Author URI: https://chainofcustody.tech
Description: Cybersecurity learning and career platform
Version: 1.0.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: chain-of-custody
Tags: dark, custom-logo, custom-menu
*/
:root {
	--color-bg: oklch(14% 0.025 250);
	--color-surface: oklch(19% 0.025 250);
	--color-accent: oklch(82% 0.18 195);
	--color-text: oklch(88% 0.01 250);
	--color-text-muted: oklch(58% 0.01 250);
	--color-border: oklch(28% 0.015 250);
	--font-sans: "Courier Prime", "Courier New", serif;
	--font-mono: "Courier Prime Code", "Courier New", monospace;
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 2rem;
	--space-xl: 4rem;
	--max-width: 1200px;
	--nav-height: 64px;
	--space-side: 1rem;
}

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

html {
	font-size: 16px;
	scroll-behavior: smooth;
}

body {
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.6;
	min-height: 100vh;
	min-width: 320px;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

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

ul {
	list-style: none;
}

.site-wrapper {
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-side);
}

@media (min-width: 768px) {

	.site-wrapper {
		padding: 0 var(--space-lg);
	}
}

main {
	padding-top: calc(var(--nav-height) + var(--space-lg));
	padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {

	main {
		padding-top: calc(var(--nav-height) + var(--space-xl));
		padding-bottom: var(--space-xl);
	}
}

.page-header {
	margin-bottom: var(--space-xl);
}

.page-header h1 {
	font-size: 2.5rem;
	font-weight: 700;
	margin-bottom: var(--space-sm);
}

.page-header p {
	color: var(--color-text-muted);
	max-width: 600px;
}

@keyframes typing {

	from {
		width: 0;
	}

	to {
		width: 23ch;
	}
}

@keyframes cursor-blink {

	0%,
	100% {
		border-right-color: var(--color-accent);
	}

	50% {
		border-right-color: transparent;
	}
}

@keyframes cursor-out {

	from {
		border-right-color: var(--color-accent);
	}

	to {
		border-right-color: transparent;
	}
}

@keyframes fade-up {

	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes nav-slide-down {

	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes panel-fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes panel-fade-out {

	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.hero__heading,
.hero__sub,
.hero__actions {
	opacity: 0;
}

.hero__label {
	overflow: hidden;
	white-space: nowrap;
	width: 0;
	border-right: 2px solid transparent;
}

body.site-loaded .hero__label {
	animation: typing 0.65s steps(19) 0.1s forwards, cursor-blink 0.7s step-end 0.1s 3, cursor-out 0.3s ease 2.2s forwards;
}

body.site-loaded .hero__heading {
	animation: fade-up 0.5s ease-out 400ms forwards;
}

body.site-loaded .hero__sub {
	animation: fade-up 0.5s ease-out 650ms forwards;
}

body.site-loaded .hero__actions {
	animation: fade-up 0.5s ease-out 850ms forwards;
}

.page-header h1,
.page-header p {
	opacity: 0;
}

body.site-loaded .page-header h1 {
	animation: fade-up 0.5s ease-out 0ms forwards;
}

body.site-loaded .page-header p {
	animation: fade-up 0.5s ease-out 200ms forwards;
}

.site-nav__links.is-open {
	animation: nav-slide-down 0.2s ease forwards;
}

[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.45s ease, transform 0.45s ease;
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

.about-section[data-reveal] {
	transform: translateY(20px);
	transition: opacity 0.9s ease, transform 0.9s ease;
}

.roadmap-milestones.is-entering {
	animation: panel-fade-in 0.8s ease forwards;
}

.roadmap-milestones.is-leaving {
	animation: panel-fade-out 0.8s ease forwards;
}

[data-reveal].card-entry {
	opacity: 0;
	transform: translateY(12px);
}

body.site-loaded [data-reveal].card-entry {
	animation: fade-up 0.7s ease-out var(--entry-delay, 150ms) forwards;
}

@media (prefers-reduced-motion: reduce) {

	.hero__label,
	.hero__heading,
	.hero__sub,
	.hero__actions,
	body.site-loaded .hero__label,
	body.site-loaded .hero__heading,
	body.site-loaded .hero__sub,
	body.site-loaded .hero__actions {
		opacity: 1 !important;
		width: auto !important;
		border-right: none !important;
		animation: none !important;
	}

	.page-header h1,
	.page-header p,
	body.site-loaded .page-header h1,
	body.site-loaded .page-header p {
		opacity: 1 !important;
		animation: none !important;
	}

	[data-reveal],
	[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.site-nav__links.is-open {
		animation: none;
	}

	[data-reveal].card-entry,
	body.site-loaded [data-reveal].card-entry {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.roadmap-milestones.is-entering,
	.roadmap-milestones.is-leaving {
		animation: none;
	}

	a.card {
		transition: border-color 0.15s, box-shadow 0.15s;
	}

	a.card:hover {
		transform: none;
	}
}

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--nav-height);
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 var(--space-side);
	z-index: 100;
}

@media (min-width: 768px) {

	.site-nav {
		padding: 0 var(--space-lg);
	}
}

.site-nav__logo {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-family: var(--font-mono);
	font-size: 1.1rem;
	color: var(--color-accent);
	letter-spacing: -0.02em;
}

.site-nav__logo img {
	display: block;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
}

.site-nav__links a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	transition: color 0.15s;
}

.site-nav__links a:hover,
.site-nav__links a.active {
	color: var(--color-accent);
	text-decoration: none;
}

.current-menu-item > a,
.current-menu-ancestor > a {
	color: var(--color-accent);
	text-decoration: none;
}

.site-nav__toggle {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 22px;
	height: 16px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.site-nav__toggle::before,
.site-nav__toggle::after {
	content: "";
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text-muted);
	border-radius: 1px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-nav__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--color-text-muted);
	border-radius: 1px;
	transition: opacity 0.2s ease;
}

.site-nav__toggle[aria-expanded="true"]::before {
	transform: translateY(7px) rotate(45deg);
}

.site-nav__toggle[aria-expanded="true"] .site-nav__toggle-bar {
	opacity: 0;
}

.site-nav__toggle[aria-expanded="true"]::after {
	transform: translateY(-7px) rotate(-45deg);
}

.site-nav__links {
	display: none;
	position: absolute;
	top: var(--nav-height);
	left: 0;
	right: 0;
	flex-direction: column;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	padding: var(--space-sm) 0;
	list-style: none;
	z-index: 99;
}

.site-nav__links.is-open {
	display: flex;
}

.site-nav__links li a {
	display: block;
	padding: 0.75rem var(--space-side);
}

@media (min-width: 960px) {

	.site-nav__toggle {
		display: none;
	}

	.site-nav__links {
		display: flex;
		position: static;
		flex-direction: row;
		background: none;
		border-bottom: none;
		padding: 0;
		gap: var(--space-lg);
		z-index: auto;
	}

	.site-nav__links li a {
		display: inline;
		padding: 0;
	}
}

.card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: var(--space-lg);
}

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 768px) {

	.card-grid {
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	}
}

a.card {
	display: block;
	text-decoration: none;
	color: var(--color-text);
	transition: border-color 0.15s, box-shadow 0.2s, transform 0.2s ease;
}

a.card:hover {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent), 0 8px 24px oklch(82% 0.18 195/0.15);
	text-decoration: none;
	transform: translateY(-4px);
}

a.card .post-header {
	color: var(--color-accent);
}

a.card p {
	color: var(--color-text-muted);
}

.hero {
	padding: calc(var(--nav-height) + var(--space-lg)) 0 var(--space-lg);
	border-bottom: 1px solid var(--color-border);
	margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {

	.hero {
		padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-xl);
		margin-bottom: var(--space-xl);
	}
}

.hero__inner {
	max-width: 760px;
}

.hero__label {
	display: block;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: var(--space-md);
}

.hero__heading {
	font-size: clamp(1.75rem, 6vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin-bottom: var(--space-lg);
}

.hero__sub {
	font-size: 1.05rem;
	color: var(--color-text-muted);
	max-width: 580px;
	line-height: 1.75;
	margin-bottom: var(--space-xl);
}

.hero__actions {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
	align-items: center;
}

.hero__cta {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 0.65rem 1.4rem;
	border-radius: 4px;
	text-decoration: none;
	transition: opacity 0.15s, box-shadow 0.15s;
}

.hero__cta--primary {
	background: var(--color-accent);
	color: var(--color-bg);
}

.hero__cta--primary:hover {
	opacity: 0.88;
	box-shadow: 0 0 16px rgba(0, 230, 231, 0.4);
	text-decoration: none;
}

.hero__cta--secondary {
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}

.hero__cta--secondary:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
	text-decoration: none;
}

.home-section {
	margin-bottom: var(--space-xl);
}

.home-section__heading {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-lg);
}

main:has(.hero) {
	padding-top: 0;
}

.roadmap-phase-bar {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: 6px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	margin-bottom: var(--space-xl);
}

.roadmap-phase-bar::-webkit-scrollbar {
	display: none;
}

.roadmap-phase-btn {
	flex: 1;
	min-width: 120px;
	padding: var(--space-md) var(--space-lg);
	background: var(--color-surface);
	border: none;
	border-right: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-family: var(--font-sans);
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	text-align: center;
}

.roadmap-phase-btn:last-child {
	border-right: none;
}

.roadmap-phase-btn.active {
	background: var(--color-accent);
	color: var(--color-bg);
	font-weight: 600;
}

.roadmap-phase-btn.locked {
	opacity: 0.4;
	cursor: default;
}

.roadmap-milestones {
	display: flex;
	gap: var(--space-md);
	flex-direction: column;
	margin-bottom: var(--space-xl);
}

@media (min-width: 768px) {

	.roadmap-milestones {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

.milestone-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	padding: var(--space-md);
	min-width: 0;
	flex: 1;
}

@media (min-width: 768px) {

	.milestone-card {
		min-width: 180px;
	}
}

.milestone-card__title {
	font-family: var(--font-mono);
	font-size: 1.1rem;
	color: var(--color-text);
	margin-bottom: var(--space-sm);
}

.milestone-card__status {
	font-size: 0.75rem;
	font-family: var(--font-mono);
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 2px 8px;
	border-radius: 3px;
	display: inline-block;
	margin-bottom: var(--space-sm);
}

.milestone-card__status--complete {
	background: oklch(60% 0.15 145);
	color: var(--color-bg);
}

.milestone-card__status--in_progress {
	background: var(--color-accent);
	color: var(--color-bg);
}

.milestone-card__status--locked {
	background: var(--color-border);
	color: var(--color-text-muted);
}

.milestone-card__date {
	font-size: 0.8rem;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
}

.milestone-card__notes {
	font-size: 0.8rem;
	color: var(--color-text-muted);
	line-height: 1.4;
}

.job-search-banner {
	background: oklch(22% 0.04 195);
	border: 1px solid var(--color-accent);
	border-radius: 6px;
	padding: var(--space-md) var(--space-lg);
	display: none;
}

.job-search-banner.visible {
	display: block;
}

.job-search-banner__label {
	font-family: var(--font-mono);
	color: var(--color-accent);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-sm);
}

.job-search-banner__targets {
	display: flex;
	gap: var(--space-md);
	flex-wrap: wrap;
	margin-bottom: var(--space-sm);
}

.evidence-header {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: 6px;
	padding: var(--space-lg);
	margin-bottom: var(--space-xl);
	max-width: 800px;
}

.evidence-header__badge {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

.evidence-header__body {
	display: flex;
	gap: var(--space-lg);
	align-items: flex-start;
	flex-direction: column;
}

.evidence-header__photo {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 4px;
	border: 1px solid var(--color-border);
	object-fit: cover;
	filter: grayscale(20%);
}

.evidence-header__grid {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-sm) var(--space-lg);
}

@media (min-width: 600px) {

	.evidence-header__body {
		flex-direction: row;
	}

	.evidence-header__photo {
		width: 110px;
		height: 110px;
	}

	.evidence-header__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.evidence-header__field {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.evidence-header__label {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.evidence-header__value {
	font-size: 0.95rem;
	color: var(--color-text);
}

.evidence-header__status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--color-accent);
}

.evidence-header__status::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 6px var(--color-accent);
	animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		box-shadow: 0 0 6px var(--color-accent);
	}

	50% {
		opacity: 0.5;
		box-shadow: 0 0 2px var(--color-accent);
	}
}

.about-body {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

.about-section h2 {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-md);
}

.about-section p {
	color: var(--color-text);
	line-height: 1.8;
	margin-bottom: var(--space-md);
}

.about-section p:last-child {
	margin-bottom: 0;
}

.post-header {
	font-family: var(--font-mono);
	color: var(--color-accent);
	font-size: 1.1rem;
	margin-bottom: var(--space-md);
	line-height: 1.4;
}

.post-meta {
	font-size: 0.85rem;
	color: var(--color-text-muted);
	display: flex;
	gap: var(--space-md);
	align-items: center;
	margin-bottom: var(--space-md);
	flex-wrap: wrap;
}

.tag {
	display: inline-block;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.75rem;
	font-family: var(--font-mono);
	padding: 2px 8px;
	border-radius: 3px;
	text-decoration: none;
}

.tag:hover {
	text-decoration: none;
}

.post-back {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-xl);
	transition: color 0.15s;
	text-decoration: none;
}

.post-back:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.post-article {
	max-width: 680px;
	margin-bottom: var(--space-xl);
}

.post-article__header {
	margin-bottom: var(--space-xl);
	padding-bottom: var(--space-lg);
	border-bottom: 1px solid var(--color-border);
}

.post-article__header .post-header {
	font-size: 1.25rem;
	margin-bottom: var(--space-md);
}

.post-body {
	line-height: 1.85;
}

.post-body p {
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.post-body h2 {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin: var(--space-xl) 0 var(--space-md);
}

.post-body ul,
.post-body ol {
	margin: 0 0 var(--space-md) var(--space-lg);
	color: var(--color-text);
}

.post-body li {
	margin-bottom: var(--space-xs);
}

.post-body strong {
	color: var(--color-text);
	font-weight: 600;
}

.post-body em {
	color: var(--color-text-muted);
	font-style: italic;
}

.post-body code {
	font-family: var(--font-mono);
	font-size: 0.85em;
	color: var(--color-accent);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 3px;
	padding: 1px 5px;
}

.post-body pre {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: 4px;
	padding: var(--space-md);
	overflow-x: auto;
	margin: 0 0 var(--space-md);
}

.post-body pre code {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text);
	background: none;
	border: none;
	padding: 0;
	border-radius: 0;
}

.post-callout {
	background: oklch(22% 0.02 250);
	border: 1px solid var(--color-border);
	border-left: 3px solid var(--color-accent);
	border-radius: 4px;
	padding: var(--space-md);
	margin: 0 0 var(--space-md);
}

.post-callout p {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin: 0;
}

.post-nav {
	max-width: 680px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-nav__slot {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.post-nav__slot--next {
	text-align: right;
}

.post-nav__label {
	font-family: var(--font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--color-text-muted);
	text-transform: uppercase;
}

.post-nav__title {
	font-size: 0.9rem;
	color: var(--color-text);
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.15s;
}

.post-nav__title:hover {
	color: var(--color-accent);
	text-decoration: none;
}

.blog-header {
	margin-bottom: var(--space-xl);
}

.blog-header__title {
	font-family: var(--font-mono);
	font-size: 1.5rem;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.blog-header__sub {
	color: var(--color-text-muted);
	max-width: 600px;
}

.category-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-xl);
}

.tag--active {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

.blog-empty {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text-muted);
}

.navigation.pagination {
	margin-top: var(--space-xl);
}

.nav-links {
	display: flex;
	gap: var(--space-sm);
	flex-wrap: wrap;
}

.page-numbers {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-text-muted);
	text-decoration: none;
	padding: 4px 10px;
	border: 1px solid var(--color-border);
	border-radius: 3px;
	transition: color 0.15s, border-color 0.15s;
}

.page-numbers:hover {
	color: var(--color-accent);
	border-color: var(--color-accent);
	text-decoration: none;
}

.page-numbers.current {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.page-numbers.dots {
	border: none;
	padding: 4px 2px;
}

.page-title {
	margin-bottom: var(--space-xl);
}

.connect-grid {
	max-width: 720px;
	margin-bottom: var(--space-xl);
}

.connect-card__label {
	font-family: var(--font-mono);
	font-size: 0.8rem;
	color: var(--color-accent);
	margin-bottom: var(--space-xs);
	letter-spacing: 0.04em;
}

.connect-card__handle {
	color: var(--color-text);
	font-size: 1rem;
}

.contact-section {
	max-width: 720px;
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.contact-section__heading {
	font-family: var(--font-mono);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-accent);
	letter-spacing: 0.05em;
	margin-bottom: var(--space-sm);
}

.contact-section__sub {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	margin-bottom: var(--space-lg);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-md);
}

@media (min-width: 768px) {

	.contact-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.contact-form__label {
	font-family: var(--font-mono);
	font-size: 0.65rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
}

.contact-form__input {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 4px;
	padding: 0.6rem 0.8rem;
	color: var(--color-text);
	font-family: var(--font-sans);
	font-size: 0.95rem;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	width: 100%;
}

.contact-form__input::placeholder {
	color: var(--color-text-muted);
	opacity: 0.6;
}

.contact-form__input:focus {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.contact-form__note {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-text-muted);
}

.contact-form__submit {
	background: var(--color-accent);
	color: var(--color-bg);
	border: none;
	border-radius: 4px;
	padding: 0.6rem 1.4rem;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: opacity 0.15s, box-shadow 0.15s;
	white-space: nowrap;
}

.contact-form__submit:hover {
	opacity: 0.85;
	box-shadow: 0 0 12px rgba(0, 230, 231, 0.35);
}

.contact-form__feedback {
	display: none;
	font-family: var(--font-mono);
	font-size: 0.8rem;
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
}

.contact-form__feedback.is-success {
	display: block;
	color: var(--color-accent);
	background: oklch(14% 0.025 195/0.15);
	border: 1px solid var(--color-accent);
}

.contact-form__feedback.is-error {
	display: block;
	color: oklch(75% 0.18 25);
	background: oklch(14% 0.025 25/0.15);
	border: 1px solid oklch(75% 0.18 25);
}

.site-footer {
	background: var(--color-surface);
	border-top: 2px solid var(--color-accent);
	padding: var(--space-xl) var(--space-lg);
	text-align: center;
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-sm);
}

.site-footer__brand {
	font-family: var(--font-mono);
	font-size: 1.1rem;
	color: var(--color-text);
}

.site-footer__tagline {
	font-family: var(--font-mono);
	font-size: 0.85rem;
	color: var(--color-accent);
}

.site-footer__copy {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--color-text-muted);
	margin-top: var(--space-md);
}