/* ==========================================================================
   TERMINAL PROTOCOL // PORTFOLIO_OS_V1.0
   Retro-Hacker / Cyberpunk Design System
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Colors — Retro Green Phosphor palette */
	--color-bg: #000000;
	--color-surface: #131313;
	--color-surface-dim: #0e0e0e;
	--color-surface-low: #1c1b1b;
	--color-surface-container: #201f1f;
	--color-surface-high: #2a2a2a;
	--color-surface-highest: #353534;
	--color-surface-bright: #3a3939;

	--color-primary: #eaffde;
	--color-primary-fixed-dim: #02e600;
	--color-primary-fixed: #77ff61;
	--color-primary-container: #00ff00;
	--color-on-primary: #013a00;
	--color-on-primary-fixed: #002200;

	--color-secondary: #9ed58d;
	--color-secondary-fixed-dim: #9ed58d;
	--color-secondary-container: #215119;
	--color-on-secondary-container: #8dc37e;

	--color-on-surface: #e5e2e1;
	--color-on-surface-variant: #b9ccaf;
	--color-on-tertiary-container: #616060;

	--color-outline: #84967c;
	--color-outline-variant: #3b4b35;

	--color-error: #ffb4ab;
	--color-warning: #ffb800;

	/* Typography */
	--font-code: 'JetBrains Mono', 'Courier New', monospace;
	--font-label: 'Space Mono', 'Courier New', monospace;

	--fs-headline-lg: 32px;
	--fs-headline-lg-mobile: 24px;
	--fs-headline-md: 20px;
	--fs-body: 16px;
	--fs-body-sm: 14px;
	--fs-code: 14px;
	--fs-label: 12px;
	--fs-tiny: 10px;

	/* Spacing */
	--unit: 4px;
	--stack-sm: 8px;
	--gutter: 16px;
	--stack-md: 16px;
	--container-margin: 24px;
	--stack-lg: 32px;

	/* Effects */
	--glow-primary: 0 0 5px rgba(2, 230, 0, 0.6);
	--glow-panel: 0 0 20px rgba(2, 230, 0, 0.15);
	--transition-fast: 0.15s ease-out;
	--transition-med: 0.3s ease-out;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

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

body {
	font-family: var(--font-code);
	font-size: var(--fs-body);
	line-height: 1.5;
	color: var(--color-on-surface);
	background-color: var(--color-bg);
	overflow-x: hidden;
	cursor: crosshair;
	min-height: 100vh;
	perspective: 1000px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

button {
	font-family: inherit;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

::selection {
	background-color: var(--color-primary-fixed-dim);
	color: var(--color-on-primary-fixed);
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-outline-variant); }
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-fixed-dim); }

/* Reduced-motion accessibility */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	body { cursor: auto; }
}

/* --------------------------------------------------------------------------
   3. CRT / SCANLINE / VIGNETTE OVERLAYS
   -------------------------------------------------------------------------- */
.crt-scanlines {
	position: fixed;
	inset: 0;
	background:
		linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
	background-size: 100% 4px, 3px 100%;
	pointer-events: none;
	z-index: 100;
	will-change: transform;
}

.crt-vignette {
	position: fixed;
	inset: 0;
	background: radial-gradient(circle, transparent 55%, rgba(0, 0, 0, 0.85) 100%);
	pointer-events: none;
	z-index: 101;
}

.crt-scanline-sweep {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: rgba(0, 255, 0, 0.1);
	pointer-events: none;
	z-index: 102;
	animation: scanline-sweep 8s linear infinite;
}

@keyframes scanline-sweep {
	0%   { top: -2%; }
	100% { top: 100%; }
}

/* --------------------------------------------------------------------------
   4. UTILITIES (Typography, layout helpers)
   -------------------------------------------------------------------------- */
.font-label { font-family: var(--font-label); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.1em; line-height: 1; text-transform: uppercase; }
.font-code { font-family: var(--font-code); font-size: var(--fs-code); line-height: 1.6; }
.font-body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }
.font-headline-md { font-size: var(--fs-headline-md); font-weight: 600; line-height: 1.4; }
.font-headline-lg { font-size: var(--fs-headline-lg); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }

.text-primary { color: var(--color-primary); }
.text-primary-dim { color: var(--color-primary-fixed-dim); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-dim { color: var(--color-secondary-fixed-dim); }
.text-on-surface { color: var(--color-on-surface); }
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-outline { color: var(--color-outline); }
.text-muted { color: var(--color-on-tertiary-container); }
.text-error { color: var(--color-error); }

.text-glow { text-shadow: var(--glow-primary); }
.text-uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-tiny { font-size: var(--fs-tiny); }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   5. LAYOUT: HEADER / NAV / FOOTER
   -------------------------------------------------------------------------- */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gutter);
	padding: var(--stack-sm) var(--container-margin);
	background: rgba(19, 19, 19, 0.85);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-bottom: 1px solid var(--color-outline-variant);
}

.site-header__brand {
	font-family: var(--font-code);
	font-size: var(--fs-headline-md);
	font-weight: 600;
	color: var(--color-primary);
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

.site-nav {
	display: none;
	gap: var(--gutter);
	align-items: center;
}

@media (min-width: 900px) {
	.site-nav { display: flex; }
}

.site-nav__link {
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-on-surface-variant);
	padding: 4px 8px;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
	background-color: var(--color-outline-variant);
	color: var(--color-primary);
	outline: none;
}

.site-nav__link.is-active {
	color: var(--color-primary);
	border-bottom: 2px solid var(--color-primary-fixed-dim);
	padding-bottom: 2px;
}

.site-header__meta {
	display: flex;
	align-items: center;
	gap: var(--stack-md);
}

.status-chip {
	display: none;
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-primary-fixed-dim);
}

@media (min-width: 640px) {
	.status-chip { display: inline; }
}

.btn-login {
	background: var(--color-primary-container);
	color: var(--color-on-primary);
	padding: 4px 16px;
	font-family: var(--font-code);
	font-weight: 700;
	font-size: var(--fs-code);
	transition: background-color var(--transition-fast);
}
.btn-login:hover { background: var(--color-primary-fixed); }

/* Mobile menu toggle */
.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-outline-variant);
	color: var(--color-primary-fixed-dim);
	font-family: var(--font-code);
	font-size: 18px;
}
@media (min-width: 900px) { .nav-toggle { display: none; } }

/* Mobile nav overlay */
.mobile-nav {
	position: fixed;
	top: 56px;
	left: 0;
	right: 0;
	z-index: 49;
	background: var(--color-surface-dim);
	border-bottom: 1px solid var(--color-primary-fixed-dim);
	padding: var(--stack-md) var(--container-margin);
	display: none;
	flex-direction: column;
	gap: var(--stack-sm);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav .site-nav__link { padding: 8px; border-bottom: 1px solid var(--color-outline-variant); }

.site-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 40;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--gutter);
	padding: var(--stack-sm) var(--container-margin);
	background: var(--color-surface-dim);
	border-top: 1px solid var(--color-outline-variant);
	font-family: var(--font-label);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.site-footer__meta { color: var(--color-secondary); }
.site-footer__links { display: flex; gap: var(--gutter); }
.site-footer__links a { color: var(--color-on-tertiary-container); font-family: var(--font-code); font-size: var(--fs-code); text-transform: none; letter-spacing: 0; }
.site-footer__links a:hover { color: var(--color-primary-fixed-dim); }

/* --------------------------------------------------------------------------
   6. MAIN LAYOUT
   -------------------------------------------------------------------------- */
.page-main {
	min-height: 100vh;
	padding: 96px var(--container-margin) 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	position: relative;
}

.page-main--center {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   7. TERMINAL WINDOW COMPONENT
   -------------------------------------------------------------------------- */
.terminal {
	width: 100%;
	max-width: 1024px;
	background: rgba(14, 14, 14, 0.9);
	border: 1px solid rgba(2, 230, 0, 0.55);
	box-shadow: var(--glow-panel);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transform-style: preserve-3d;
	transition: transform 0.15s ease-out;
	will-change: transform;
}

.terminal--tight { max-width: 900px; }

.terminal__titlebar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px var(--stack-md);
	background: rgba(59, 75, 53, 0.35);
	border-bottom: 1px solid rgba(2, 230, 0, 0.3);
	font-family: var(--font-label);
	font-size: var(--fs-tiny);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-primary-fixed-dim);
}

.terminal__titlebar-info {
	display: flex;
	align-items: center;
	gap: var(--stack-sm);
}

.terminal__controls {
	display: flex;
	gap: var(--stack-sm);
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-primary-fixed-dim);
}

.terminal__controls span {
	cursor: pointer;
	opacity: 0.7;
	transition: color var(--transition-fast), opacity var(--transition-fast);
}
.terminal__controls span:hover { opacity: 1; color: var(--color-primary-fixed); }
.terminal__controls span[data-action="close"]:hover { color: var(--color-error); }

.terminal__body {
	padding: var(--stack-lg);
}

.terminal__body--compact { padding: var(--stack-md); }

.terminal__statusbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4px var(--stack-md);
	background: var(--color-surface-high);
	border-top: 1px solid rgba(2, 230, 0, 0.2);
	font-family: var(--font-code);
	font-size: var(--fs-tiny);
	color: var(--color-on-surface-variant);
}

.terminal__statusbar-group {
	display: flex;
	gap: var(--gutter);
	align-items: center;
}

/* --------------------------------------------------------------------------
   8. TERMINAL PRIMITIVES: cursor, chips, buttons, progress bars
   -------------------------------------------------------------------------- */
.cursor-blink {
	display: inline-block;
	width: 0.6em;
	height: 1em;
	background-color: var(--color-primary-fixed-dim);
	vertical-align: middle;
	margin-left: 4px;
	animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0; }
}

.chip {
	display: inline-block;
	padding: 2px 8px;
	border: 1px solid var(--color-primary-fixed-dim);
	font-family: var(--font-code);
	font-size: var(--fs-body-sm);
	color: var(--color-primary-fixed-dim);
}

.chip--muted {
	border-color: var(--color-outline-variant);
	color: var(--color-on-surface-variant);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--stack-sm);
	padding: 10px 20px;
	font-family: var(--font-code);
	font-size: var(--fs-code);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background-color var(--transition-fast), transform var(--transition-fast);
	border: 1px solid transparent;
}

.btn--primary {
	background: var(--color-primary-fixed-dim);
	color: var(--color-on-primary-fixed);
}
.btn--primary:hover { background: var(--color-primary-fixed); }
.btn--primary:active { transform: scale(0.97); }

.btn--ghost {
	background: transparent;
	border-color: var(--color-primary-fixed-dim);
	color: var(--color-primary-fixed-dim);
}
.btn--ghost:hover {
	background: rgba(33, 81, 25, 0.35);
	color: var(--color-primary);
}

.btn:focus-visible {
	outline: 2px solid var(--color-primary-fixed);
	outline-offset: 2px;
}

.progress-bar {
	font-family: var(--font-code);
	color: var(--color-primary-fixed-dim);
	letter-spacing: -0.02em;
	line-height: 1;
}

.meter {
	height: 6px;
	width: 100%;
	background: var(--color-outline-variant);
}
.meter__fill {
	height: 100%;
	background: var(--color-primary-fixed-dim);
}
.meter__fill--secondary { background: var(--color-secondary); }

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--stack-sm); }

.field__label {
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-primary-fixed-dim);
}

.field__input-wrap {
	display: flex;
	align-items: center;
	padding: 8px 0;
	background: #000;
	border-bottom: 1px solid var(--color-primary-fixed-dim);
}

.field__prompt {
	font-family: var(--font-code);
	color: var(--color-primary-fixed-dim);
	margin-right: 8px;
	padding-left: 8px;
}

.field__input,
.field__textarea {
	flex: 1;
	width: 100%;
	background: transparent;
	border: none;
	color: var(--color-primary-fixed-dim);
	font-family: var(--font-code);
	font-size: var(--fs-code);
	padding: 0 8px;
	outline: none;
	resize: none;
}
.field__input::placeholder,
.field__textarea::placeholder { opacity: 0.35; }

.field--textarea {
	background: #000;
	border: 1px solid var(--color-primary-fixed-dim);
	padding: var(--stack-md);
	min-height: 200px;
	position: relative;
	display: flex;
	flex-direction: column;
}
.field--textarea .field__textarea { min-height: 160px; margin-top: 4px; }

.field__meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: var(--stack-sm);
	font-family: var(--font-code);
	font-size: var(--fs-tiny);
	color: var(--color-on-surface-variant);
}

/* --------------------------------------------------------------------------
   10. GRID / CARD LAYOUTS
   -------------------------------------------------------------------------- */
.stack-sm > * + * { margin-top: var(--stack-sm); }
.stack-md > * + * { margin-top: var(--stack-md); }
.stack-lg > * + * { margin-top: var(--stack-lg); }

.grid {
	display: grid;
	gap: var(--gutter);
}

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

.grid--skills {
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--container-margin);
	perspective: 1000px;
}

.grid--stats {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Project card */
.card {
	position: relative;
	padding: var(--stack-md);
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-dim);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.card:hover { border-color: var(--color-primary-fixed-dim); }
.card__eyebrow {
	font-family: var(--font-label);
	font-size: var(--fs-label);
	color: var(--color-secondary);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.card__title {
	font-family: var(--font-code);
	font-size: var(--fs-headline-md);
	font-weight: 600;
	color: var(--color-primary);
	margin-bottom: var(--stack-sm);
}
.card__stack {
	font-family: var(--font-code);
	font-size: 11px;
	color: var(--color-on-surface-variant);
	margin-bottom: var(--stack-sm);
}
.card__status {
	font-family: var(--font-code);
	font-size: 12px;
	color: var(--color-primary-fixed-dim);
}
.card__tooltip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 8px);
	background: var(--color-primary-container);
	color: var(--color-on-primary);
	font-family: var(--font-code);
	font-size: 11px;
	padding: var(--stack-sm);
	border: 1px solid var(--color-primary-fixed);
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast);
	pointer-events: none;
	z-index: 20;
}
.card:hover .card__tooltip,
.card:focus-within .card__tooltip {
	opacity: 1;
	transform: translateY(0);
}

/* Skill panel */
.skill-panel {
	position: relative;
	padding: var(--stack-md);
	padding-top: 44px;
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-dim);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
	will-change: transform;
}
.skill-panel--primary { border-color: var(--color-primary-fixed-dim); }
.skill-panel:hover { border-color: var(--color-primary-fixed-dim); }

.skill-panel__header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 10px;
	background: rgba(59, 75, 53, 0.25);
	border-bottom: 1px solid var(--color-outline-variant);
	font-family: var(--font-label);
	font-size: var(--fs-label);
	color: var(--color-on-surface-variant);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.skill-panel--primary .skill-panel__header {
	background: rgba(2, 230, 0, 0.1);
	border-bottom-color: var(--color-primary-fixed-dim);
	color: var(--color-primary-fixed-dim);
}
.skill-panel:hover .skill-panel__header {
	background: rgba(2, 230, 0, 0.1);
	color: var(--color-primary-fixed-dim);
}

.skill-row { margin-bottom: var(--stack-md); }
.skill-row__head {
	display: flex;
	justify-content: space-between;
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-on-surface-variant);
	margin-bottom: 4px;
}
.skill-panel:hover .skill-row__head,
.skill-panel--primary .skill-row__head { color: var(--color-primary-fixed-dim); }

/* Stat card */
.stat-card {
	padding: var(--stack-sm);
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-low);
}
.stat-card__label {
	font-family: var(--font-code);
	font-size: var(--fs-tiny);
	color: var(--color-outline);
	text-transform: uppercase;
	margin-bottom: 4px;
}
.stat-card__value {
	font-family: var(--font-code);
	font-weight: 700;
	color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   11. HERO / HOME
   -------------------------------------------------------------------------- */
.hero {
	width: 100%;
	max-width: 1024px;
	text-align: center;
}
.hero__eyebrow {
	font-family: var(--font-label);
	font-size: var(--fs-label);
	color: var(--color-secondary);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: var(--stack-md);
}
.hero__title {
	font-family: var(--font-code);
	font-size: var(--fs-headline-lg);
	font-weight: 700;
	color: var(--color-primary-fixed-dim);
	letter-spacing: -0.02em;
	text-shadow: var(--glow-primary);
	margin-bottom: var(--stack-md);
	line-height: 1.15;
}
@media (max-width: 640px) {
	.hero__title { font-size: var(--fs-headline-lg-mobile); }
}
.hero__subtitle {
	font-family: var(--font-code);
	font-size: var(--fs-body);
	color: var(--color-on-surface-variant);
	max-width: 640px;
	margin: 0 auto var(--stack-lg);
	line-height: 1.6;
}
.hero__cta {
	display: flex;
	gap: var(--stack-md);
	justify-content: center;
	flex-wrap: wrap;
}

.boot-log {
	text-align: left;
	max-width: 720px;
	margin: var(--stack-lg) auto 0;
	padding: var(--stack-md);
	background: var(--color-surface-dim);
	border: 1px solid var(--color-outline-variant);
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-on-surface-variant);
}
.boot-log__line { padding: 2px 0; }
.boot-log__line--ok { color: var(--color-primary-fixed-dim); }
.boot-log__line--warn { color: var(--color-warning); }
.boot-log__line--err { color: var(--color-error); }

/* --------------------------------------------------------------------------
   12. ABOUT PAGE
   -------------------------------------------------------------------------- */
.about-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--stack-lg);
}
@media (min-width: 900px) {
	.about-layout {
		grid-template-columns: minmax(240px, 320px) 1fr;
	}
}

.profile-image {
	position: relative;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--color-primary-fixed-dim);
	padding: 4px;
	overflow: hidden;
}
.profile-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) brightness(0.75) contrast(1.25);
	transition: filter 0.6s ease;
}
.profile-image:hover img { filter: grayscale(0) brightness(1) contrast(1); }
.profile-image__tag {
	position: absolute;
	bottom: 12px;
	left: 12px;
	padding: 2px 8px;
	background: var(--color-primary-container);
	color: var(--color-on-primary-container, #027100);
	font-family: var(--font-label);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	z-index: 2;
}

.meta-list {
	padding: var(--stack-md);
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-low);
	font-family: var(--font-code);
	font-size: var(--fs-code);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.meta-list__row {
	display: flex;
	justify-content: space-between;
	gap: var(--stack-md);
}
.meta-list__row dt { color: var(--color-on-surface-variant); }
.meta-list__row dd { color: var(--color-primary-fixed-dim); text-align: right; }
.meta-list__divider {
	height: 1px;
	background: var(--color-outline-variant);
	margin: 4px 0;
}

.bio {
	display: flex;
	flex-direction: column;
	gap: var(--stack-md);
}
.bio__title {
	font-family: var(--font-code);
	font-size: var(--fs-headline-lg);
	font-weight: 700;
	color: var(--color-primary-fixed-dim);
	letter-spacing: -0.02em;
	line-height: 1.15;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
@media (max-width: 640px) {
	.bio__title { font-size: var(--fs-headline-lg-mobile); }
}
.bio__underline {
	width: 96px;
	height: 2px;
	background: var(--color-primary-fixed-dim);
}
.bio__paragraphs p {
	color: var(--color-on-surface-variant);
	line-height: 1.6;
	margin-bottom: var(--stack-md);
}
.bio__cta {
	display: flex;
	gap: var(--stack-md);
	flex-wrap: wrap;
	padding-top: var(--stack-md);
	border-top: 1px solid var(--color-outline-variant);
	margin-top: var(--stack-md);
}

/* --------------------------------------------------------------------------
   13. TIMELINE (experience-style, used inside about if needed)
   -------------------------------------------------------------------------- */
.timeline {
	position: relative;
	padding-left: 32px;
	border-left: 1px solid rgba(2, 230, 0, 0.3);
	margin-left: 16px;
}
.timeline__item { position: relative; padding-bottom: var(--stack-lg); }
.timeline__item::before {
	content: "";
	position: absolute;
	left: -41px;
	top: 4px;
	width: 16px;
	height: 16px;
	background: var(--color-primary-fixed-dim);
	border: 4px solid #000;
}
.timeline__item--muted::before { background: var(--color-secondary); }

/* --------------------------------------------------------------------------
   14. CONTACT PAGE
   -------------------------------------------------------------------------- */
.contact-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--stack-md);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--stack-lg);
	opacity: 0.85;
}

.log-panel {
	position: fixed;
	bottom: 60px;
	left: var(--container-margin);
	width: 280px;
	max-height: 200px;
	background: var(--color-surface-dim);
	border: 1px solid var(--color-outline-variant);
	padding: var(--stack-sm);
	overflow: hidden;
	opacity: 0.6;
	transition: opacity var(--transition-fast);
	z-index: 30;
	display: none;
}
.log-panel:hover { opacity: 1; }
@media (min-width: 1100px) { .log-panel { display: block; } }
.log-panel__title {
	font-family: var(--font-label);
	font-size: var(--fs-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-outline-variant);
	margin-bottom: 6px;
	color: var(--color-on-surface-variant);
}
.log-panel__content {
	font-family: var(--font-code);
	font-size: 10px;
	line-height: 1.4;
	color: var(--color-on-surface-variant);
}
.log-panel__content > div { padding: 1px 0; }

/* --------------------------------------------------------------------------
   15. DIAGNOSTICS (system diagnostics terminal on skills page)
   -------------------------------------------------------------------------- */
.diagnostics {
	margin-top: var(--stack-lg);
	padding: var(--gutter);
	border: 1px solid var(--color-outline-variant);
	background: var(--color-surface-low);
}
.diagnostics__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: var(--stack-sm);
	border-bottom: 1px solid var(--color-outline-variant);
	margin-bottom: var(--stack-sm);
	font-family: var(--font-label);
	font-size: var(--fs-label);
	color: var(--color-primary-fixed-dim);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.diagnostics__log {
	height: 180px;
	overflow-y: auto;
	font-family: var(--font-code);
	font-size: var(--fs-code);
	color: var(--color-on-surface-variant);
	padding-right: 8px;
}
.diagnostics__log > div { padding: 1px 0; }
.diagnostics__log .log-success { color: var(--color-primary-fixed-dim); }
.diagnostics__log .log-warn { color: var(--color-warning); }
.diagnostics__log .log-error { color: var(--color-error); }
.diagnostics__prompt {
	margin-top: var(--stack-sm);
	padding-top: var(--stack-sm);
	border-top: 1px solid var(--color-outline-variant);
	font-family: var(--font-code);
	color: var(--color-primary-fixed-dim);
	display: flex;
	align-items: center;
	gap: 6px;
}

/* --------------------------------------------------------------------------
   16. ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes flicker {
	0%, 100% { opacity: 1; }
	5% { opacity: 0.94; }
	10% { opacity: 0.99; }
	15% { opacity: 0.92; }
	20% { opacity: 1; }
}
.flicker { animation: flicker 3s infinite; }

@keyframes pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}
.pulse-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-primary-fixed-dim);
	animation: pulse-dot 1.5s ease-in-out infinite;
}

.animate-pulse { animation: pulse-dot 2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   17. RESPONSIVE ADJUSTMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.site-header { padding: var(--stack-sm) var(--gutter); }
	.site-footer { padding: 6px var(--gutter); font-size: 10px; }
	.page-main { padding: 80px var(--gutter) 72px; }
	.terminal__body { padding: var(--stack-md); }
	.status-chip { display: none; }
	.site-footer__meta { font-size: 10px; }
}

/* Print-friendly */
@media print {
	.crt-scanlines,
	.crt-vignette,
	.crt-scanline-sweep,
	.site-footer,
	.log-panel { display: none !important; }
	body { background: #fff; color: #000; cursor: auto; }
}