:root {
	--bg: #0b0d14;
	--surface: rgba(255, 255, 255, .045);
	--surface-hover: rgba(255, 255, 255, .08);
	--border: rgba(255, 255, 255, .11);
	--border-focus: rgba(255, 255, 255, .25);
	--text: #e9ecf4;
	--muted: #98a1b4;
	--accent: #8da2ff;
	--accent-2: #5eead4;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f7f8fb;
		--surface: #ffffff;
		--surface-hover: #f0f2f7;
		--border: #e3e6ee;
		--border-focus: #c2c7d6;
		--text: #161a26;
		--muted: #5c6577;
		--accent: #3447c7;
		--accent-2: #0d9488;
	}
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1.0625rem/1.65 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(42rem 30rem at 85% -12%, rgba(86, 105, 233, .22), transparent 60%),
		radial-gradient(32rem 24rem at -12% 28%, rgba(94, 234, 212, .10), transparent 60%);
}

@media (prefers-color-scheme: light) {
	body::before {
		background:
			radial-gradient(42rem 30rem at 85% -12%, rgba(86, 105, 233, .12), transparent 60%),
			radial-gradient(32rem 24rem at -12% 28%, rgba(13, 148, 136, .07), transparent 60%);
	}
}

main {
	max-width: 44rem;
	margin: 0 auto;
	padding: clamp(2.5rem, 8vh, 4.5rem) 1.5rem 3.5rem;
	animation: rise .5s ease .05s both;
}

@keyframes rise {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	main { animation: none; }
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
::selection { background: rgba(141, 162, 255, .35); }

/* Navigation */
.site-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2.2rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--border);
	font-size: .95rem;
}

.nav-back {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	color: var(--muted);
	font-weight: 500;
	transition: color .15s;
}
.nav-back:hover {
	color: var(--text);
	text-decoration: none;
}
.nav-back svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* Chips & Badges */
.chip {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .4rem .85rem;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font-weight: 500;
	font-size: .88rem;
	cursor: pointer;
	transition: border-color .18s, transform .18s, background .18s;
}
.chip:hover {
	border-color: var(--accent);
	text-decoration: none;
	transform: translateY(-1.5px);
}
.chip.active {
	border-color: var(--accent);
	background: rgba(141, 162, 255, .15);
	color: var(--text);
}

.badge {
	display: inline-block;
	padding: .15rem .45rem;
	border-radius: .4rem;
	font-size: .72rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.badge-pt {
	background: rgba(94, 234, 212, .12);
	color: var(--accent-2);
	border: 1px solid rgba(94, 234, 212, .25);
}
.badge-en {
	background: rgba(141, 162, 255, .12);
	color: var(--accent);
	border: 1px solid rgba(141, 162, 255, .25);
}

/* Page Header */
.page-header {
	margin-bottom: 2rem;
}
.page-title {
	margin: 0 0 .5rem;
	font-size: clamp(2.1rem, 6vw, 2.9rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.035em;
}
.page-subtitle {
	margin: 0;
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.55;
}

/* Blog Controls: Search & Tabs */
.blog-controls {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin-bottom: 2rem;
}

.search-box {
	position: relative;
	width: 100%;
}
.search-icon {
	position: absolute;
	left: .95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	fill: var(--muted);
	pointer-events: none;
}
.search-input {
	width: 100%;
	padding: .75rem 1rem .75rem 2.6rem;
	border: 1px solid var(--border);
	border-radius: .85rem;
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: .95rem;
	outline: none;
	transition: border-color .18s, box-shadow .18s;
}
.search-input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(141, 162, 255, .15);
}
.search-input::placeholder {
	color: var(--muted);
}

.filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.filter-btn {
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--muted);
	padding: .38rem .85rem;
	border-radius: 999px;
	font: inherit;
	font-size: .88rem;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .15s, color .15s, background .15s;
}
.filter-btn:hover {
	color: var(--text);
	border-color: var(--border-focus);
}
.filter-btn.active {
	color: var(--text);
	border-color: var(--accent);
	background: rgba(141, 162, 255, .15);
}

/* Post Cards */
.posts-list {
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

.post-card {
	display: block;
	padding: 1.15rem 1.25rem;
	border: 1px solid var(--border);
	border-radius: 1rem;
	background: var(--surface);
	color: var(--text);
	transition: border-color .18s, transform .18s, background .18s;
}
.post-card:hover {
	border-color: var(--accent);
	text-decoration: none;
	transform: translateY(-2px);
	background: var(--surface-hover);
}
.post-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: .8rem;
	margin-bottom: .45rem;
}
.post-card-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 650;
	line-height: 1.35;
	color: var(--text);
}
.post-card-meta {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-shrink: 0;
	font-size: .85rem;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.post-card-excerpt {
	margin: 0;
	color: var(--muted);
	font-size: .935rem;
	line-height: 1.55;
}
.post-card-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .65rem;
	padding-top: .55rem;
	border-top: 1px dashed var(--border);
	font-size: .82rem;
	color: var(--muted);
}
.post-card-sibling {
	color: var(--muted);
	transition: color .15s;
}
.post-card-sibling:hover {
	color: var(--accent);
	text-decoration: underline;
}

.empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--muted);
}

/* Single Post Layout */
.post-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
}
.post-title {
	margin: .5rem 0 .8rem;
	font-size: clamp(2.1rem, 5.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.03em;
}
.post-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .65rem 1rem;
	font-size: .9rem;
	color: var(--muted);
}
.post-meta-item {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
}
.linkedin-badge-link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .2rem .55rem;
	border-radius: .4rem;
	background: var(--surface);
	border: 1px solid var(--border);
	color: var(--muted);
	font-size: .82rem;
	font-weight: 500;
	transition: border-color .15s, color .15s;
}
.linkedin-badge-link:hover {
	color: var(--accent);
	border-color: var(--accent);
	text-decoration: none;
}
.linkedin-badge-link svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* Language Switcher Banner */
.lang-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1rem;
	margin-top: 1.25rem;
	padding: .75rem 1rem;
	border-radius: .85rem;
	background: rgba(141, 162, 255, .08);
	border: 1px solid rgba(141, 162, 255, .2);
	font-size: .9rem;
}
.lang-banner-text {
	color: var(--text);
	display: flex;
	align-items: center;
	gap: .45rem;
}
.lang-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: var(--surface);
	border: 1px solid var(--accent);
	color: var(--accent);
	font-weight: 600;
	font-size: .85rem;
	transition: background .15s, color .15s, transform .15s;
}
.lang-banner-btn:hover {
	background: var(--accent);
	color: var(--bg);
	text-decoration: none;
	transform: translateY(-1px);
}

/* Post Typography */
.post-content {
	line-height: 1.75;
	font-size: 1.0625rem;
}
.post-content p {
	margin: 1.25rem 0;
}
.post-content h2, .post-content h3, .post-content h4 {
	font-weight: 750;
	line-height: 1.25;
	letter-spacing: -.02em;
	margin: 2.2rem 0 .9rem;
}
.post-content h2 { font-size: 1.6rem; }
.post-content h3 { font-size: 1.3rem; }
.post-content ul, .post-content ol {
	margin: 1.25rem 0;
	padding-left: 1.4rem;
}
.post-content li {
	margin: .45rem 0;
}
.post-content blockquote {
	margin: 1.5rem 0;
	padding: .3rem 0 .3rem 1.15rem;
	border-left: 3px solid var(--accent);
	color: var(--muted);
	font-style: italic;
}
.post-content blockquote p {
	margin: .4rem 0;
}
.post-content hr {
	border: 0;
	height: 1px;
	background: var(--border);
	margin: 2.5rem 0;
}
.post-content em {
	color: var(--text);
}
.post-content strong {
	font-weight: 650;
	color: var(--text);
}

/* Post Footer */
.post-footer {
	margin-top: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--border);
}
.post-nav-links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-top: 1.5rem;
}
@media (max-width: 580px) {
	.post-nav-links { grid-template-columns: 1fr; }
}
.post-nav-card {
	display: block;
	padding: .95rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: .85rem;
	background: var(--surface);
	color: var(--text);
	transition: border-color .15s;
}
.post-nav-card:hover {
	border-color: var(--accent);
	text-decoration: none;
}
.post-nav-label {
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: .25rem;
}
.post-nav-title {
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer */
footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: .5rem 1rem;
	margin-top: 3.5rem;
	padding-top: 1.4rem;
	border-top: 1px solid var(--border);
	color: var(--muted);
	font-size: .9rem;
}
footer a { color: var(--muted); }
footer a:hover { color: var(--text); }