:root {
	--cream: #F5F1E7;
	--white: #FFFFFF;
	--navy: #1B2138;
	--navy-2: #12162A;
	--gold-1: #D9B463;
	--gold-2: #B5872E;
	--ink: #1E1C16;
	--text-secondary: #6B6659;
	--text-muted: #9A9484;
	--border: #E4DECD;
	--pill-bg: #EFE9D9;
}

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

body {
	font-family: 'Outfit', sans-serif;
	background: var(--cream);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

.page {
	max-width: 1400px;
	margin: 0 auto;
	padding: 36px 40px 80px;
}

/* ---- Top filter nav ---- */
.filters {
	display: flex;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.pill {
	padding: 10px 20px;
	border-radius: 999px;
	font-size: 13px;
	border: 1px solid var(--border);
	background: var(--white);
	color: var(--ink);
	white-space: nowrap;
}

.pill.active {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--white);
}

.pill.current {
	border-color: var(--gold-2);
	color: var(--gold-2);
}

/* ---- Breadcrumb ---- */
.crumb {
	font-size: 13px;
	color: var(--text-muted);
	margin-bottom: 20px;
}

.crumb a {
	color: var(--text-secondary);
	text-decoration: none;
	font-weight: 500;
}

.crumb a:hover {
	color: var(--gold-2);
}

/* ---- Layout ---- */
.layout {
	display: grid;
	grid-template-columns:1fr 340px;
	gap: 48px;
	align-items: start;
}

/* ---- Article header ---- */
.cat-badge {
	display: inline-block;
	background: var(--white);
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ink);
	margin-bottom: 18px;
	border: 1px solid var(--border);
}

.article-title {
	font-size: 28px;
	font-weight: 600;
	line-height: 1.22;
	letter-spacing: -0.01em;
	margin-bottom: 18px;
}

.article-dek {
	font-size: 16px;
	line-height: 1.6;
	color: var(--text-secondary);
	margin-bottom: 26px;
	max-width: 640px;
}

.byline {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--border);
	margin-bottom: 28px;
}

.avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 500;
	flex-shrink: 0;
}

.byline-info {
	font-size: 13px;
	color: var(--text-muted);
}

.byline-name {
	color: var(--ink);
	font-weight: 600;
}

.byline-dot {
	margin: 0 6px;
}

/* ---- Hero image ---- */
.hero {
	height: 380px;
	border-radius: 16px;
	background: url('../../assets/img.png') no-repeat center center;
	background-size: cover;
	/*background: linear-gradient(135deg, var(--gold-1), var(--gold-2));*/
	position: relative;
	margin-bottom: 36px;
	overflow: hidden;
}

.hero-tag {
	position: absolute;
	top: 18px;
	left: 18px;
	background: var(--white);
	padding: 8px 16px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

.hero-count {
	position: absolute;
	top: 18px;
	right: 18px;
	background: rgba(0, 0, 0, 0.28);
	color: #fff;
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
}

/* ---- Article body ---- */
.article-body {
	font-size: 17px;
	line-height: 1.85;
	color: #2B2818;
	max-width: 100%;
}

.article-body p {
	font-size: 16px;
	margin-bottom: 22px;
}

.article-body h2 {
	font-size: 24px;
	font-weight: 600;
	margin: 38px 0 16px;
	letter-spacing: -0.005em;
}

.article-body h3 {
	font-size: 19px;
	font-weight: 500;
	margin: 30px 0 14px;
}

.article-body ul {
	margin: 0 0 22px 0;
	padding-left: 22px;
}

.article-body li {
	margin-bottom: 10px;
}

.pullquote {
	border-left: 3px solid var(--gold-2);
	padding: 6px 0 6px 22px;
	margin: 32px 0;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ink);
}

.inline-figure {
	margin: 32px 0;
}

.inline-figure .box {
	height: 220px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.inline-figure figcaption {
	font-size: 13px;
	color: var(--text-muted);
	margin-top: 10px;
}

.compare-table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 15px;
}

.compare-table th, .compare-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
}

.compare-table th {
	color: var(--text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-weight: 500;
}

/* ---- Tags ---- */
.tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 36px 0 32px;
}

.tag {
	background: var(--pill-bg);
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: 999px;
}

/* ---- Author card ---- */
.author-card {
	display: flex;
	gap: 16px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 22px;
	max-width: 680px;
	margin-bottom: 44px;
}

.author-card .avatar {
	width: 52px;
	height: 52px;
	font-size: 16px;
}

.author-card-name {
	font-weight: 500;
	font-size: 15px;
	margin-bottom: 4px;
}

.author-card-bio {
	font-size: 13.5px;
	color: var(--text-secondary);
	line-height: 1.6;
}

/* ---- Related articles ---- */
.section-heading {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 20px;
}

.related-grid {
	display: grid;
	grid-template-columns:1fr 1fr;
	gap: 20px;
	max-width: 680px;
}

.rel-card {
	cursor: pointer;
}

.rel-thumb {
	height: 130px;
	border-radius: 12px;
	margin-bottom: 12px;
}

.rel-thumb.gold {
	background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
}

.rel-thumb.navy {
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.rel-cat {
	font-size: 11px;
	font-weight: 500;
	color: var(--gold-2);
	margin-bottom: 6px;
}

.rel-title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 6px;
}

.rel-meta {
	font-size: 12px;
	color: var(--text-muted);
}

/* ---- Sidebar (identical component to listing page) ---- */
.sidebar-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px;
	margin-bottom: 24px;
}

.sidebar-title {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: var(--gold-2);
	text-transform: uppercase;
	margin-bottom: 18px;
}

.cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 0;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}

.cat-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cat-row.active .cat-name {
	color: var(--gold-2);
	font-weight: 500;
}

.cat-count {
	background: var(--pill-bg);
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 500;
	padding: 3px 10px;
	border-radius: 999px;
}

.recent-item {
	display: flex;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

.recent-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.recent-thumb {
	width: 56px;
	height: 56px;
	border-radius: 10px;
	flex-shrink: 0;
}

.recent-thumb.gold {
	background: linear-gradient(135deg, var(--gold-1), var(--gold-2));
}

.recent-thumb.navy {
	background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.recent-title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	margin-bottom: 6px;
}

.recent-meta {
	font-size: 11.5px;
	color: var(--text-muted);
}

@media (max-width: 900px) {
	.layout {
		grid-template-columns:1fr;
	}

	.related-grid {
		grid-template-columns:1fr;
	}

	.article-title {
		font-size: 29px;
	}
}