/* =========================================================
   ZIBOL BLOG
   ========================================================= */


/* =========================================================
   BRAND VARIABLES
   ========================================================= */

:root {

	--zibol-ink: #0B0F2A;

	--zibol-blue: #7FA6FF;

	--zibol-purple: #B69BFF;

	--zibol-lavender: #A78BFA;

	--zibol-sky: #60A5FA;

	--zibol-green: #34D399;

	--zibol-coral: #FF8B7E;

	--zibol-white: #FFFFFF;

	--zibol-paper: #F7F7FA;

	--zibol-line: rgba(11, 15, 42, 0.12);

	--zibol-slate: rgba(11, 15, 42, 0.65);

	--zibol-serif: "Playfair Display", Georgia, serif;

	--zibol-sans: "Inter", Arial, sans-serif;

	--zibol-display: "Poppins", Arial, sans-serif;

	--zibol-mono: "Roboto Mono", monospace;

}


/* =========================================================
   BLOG HERO
   ========================================================= */

.blog-hero {

	background: var(--zibol-white);

	border-bottom: 1px solid var(--zibol-line);

	padding: 140px 0 90px;

}


.blog-hero-content {

	max-width: 900px;

}


.blog-eyebrow {

	display: inline-block;

	font-family: var(--zibol-mono);

	font-size: 12px;

	font-weight: 500;

	text-transform: uppercase;

	letter-spacing: 0.10em;

	color: var(--zibol-lavender);

	margin-bottom: 20px;

}


.blog-hero h1 {

	font-family: var(--zibol-serif);

	font-size: clamp(42px, 6vw, 72px);

	line-height: 1.08;

	font-weight: 500;

	letter-spacing: -0.035em;

	margin: 0 0 25px;

	color: var(--zibol-ink);

}


.g-text {

	background:
		linear-gradient(
			105deg,
			var(--zibol-blue),
			var(--zibol-purple)
		);

	-webkit-background-clip: text;

	background-clip: text;

	-webkit-text-fill-color: transparent;

	color: transparent;

}


.blog-hero p {

	max-width: 650px;

	font-family: var(--zibol-sans);

	font-size: 18px;

	line-height: 1.65;

	color: var(--zibol-slate);

	margin: 0;

}


/* =========================================================
   POSTS
   ========================================================= */

.blog-posts-section {

	background: var(--zibol-paper);

	padding: 80px 0 110px;

}


.blog-post-grid {

	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 32px;

}


.blog-post-card {

	background: var(--zibol-white);

	border: 1px solid var(--zibol-line);

	border-radius: 20px;

	overflow: hidden;

	margin: 0;

	padding: 0;

	transition:
		transform .3s ease,
		box-shadow .3s ease;

}


.blog-post-card:hover {

	transform: translateY(-5px);

	box-shadow:
		0 20px 50px rgba(11, 15, 42, .10);

}


.blog-post-image {

	display: block;

	aspect-ratio: 16 / 10;

	overflow: hidden;

	background: #EEEFF5;

}


.blog-post-image img {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	transition: transform .5s ease;

}


.blog-post-card:hover .blog-post-image img {

	transform: scale(1.04);

}


.blog-post-content {

	padding: 32px;

}


.blog-post-meta {

	display: flex;

	align-items: center;

	gap: 10px;

	font-family: var(--zibol-mono);

	font-size: 10px;

	font-weight: 500;

	text-transform: uppercase;

	letter-spacing: .07em;

	color: rgba(11, 15, 42, .50);

	margin-bottom: 17px;

}


.meta-divider {

	color: var(--zibol-lavender);

}


.blog-post-content h2 {

	font-family: var(--zibol-serif);

	font-size: clamp(28px, 3vw, 38px);

	line-height: 1.12;

	font-weight: 500;

	letter-spacing: -.025em;

	margin: 0 0 18px;

}


.blog-post-content h2 a {

	color: var(--zibol-ink);

	text-decoration: none;

}


.blog-post-content h2 a:hover {

	color: var(--zibol-lavender);

}


.blog-post-excerpt {

	font-family: var(--zibol-sans);

	font-size: 15px;

	line-height: 1.7;

	color: var(--zibol-slate);

	margin-bottom: 25px;

}


.blog-post-excerpt p {

	margin: 0;

}


.blog-read-more {

	display: inline-flex;

	align-items: center;

	gap: 9px;

	font-family: var(--zibol-display);

	font-size: 13px;

	font-weight: 600;

	color: var(--zibol-ink);

	text-decoration: none;

}


.blog-read-more span {

	font-size: 18px;

	transition: transform .2s ease;

}


.blog-read-more:hover span {

	transform: translateX(5px);

}


/* =========================================================
   PAGINATION
   ========================================================= */

.blog-pagination {

	display: flex;

	justify-content: center;

	flex-wrap: wrap;

	gap: 8px;

	margin-top: 60px;

}


.blog-pagination .page-numbers {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	min-width: 42px;

	height: 42px;

	padding: 0 13px;

	border: 1px solid var(--zibol-line);

	background: var(--zibol-white);

	color: var(--zibol-ink);

	font-family: var(--zibol-mono);

	font-size: 11px;

	text-decoration: none;

}


.blog-pagination .page-numbers.current {

	background: var(--zibol-ink);

	color: var(--zibol-white);

	border-color: var(--zibol-ink);

}


.blog-pagination .page-numbers:hover {

	border-color: var(--zibol-lavender);

}


/* =========================================================
   SINGLE ARTICLE
   ========================================================= */

.single-post-header {

	background: var(--zibol-white);

	padding: 120px 0 65px;

}


.narrow-wrap {

	width: min(820px, calc(100% - 48px));

	margin-left: auto;

	margin-right: auto;

}


.single-post-meta {

	display: flex;

	align-items: center;

	gap: 10px;

	font-family: var(--zibol-mono);

	font-size: 10px;

	text-transform: uppercase;

	letter-spacing: .08em;

	margin-bottom: 25px;

	color: rgba(11, 15, 42, .50);

}


.single-post-meta a {

	color: var(--zibol-lavender);

	text-decoration: none;

}


.single-post-header h1 {

	font-family: var(--zibol-serif);

	font-size: clamp(44px, 6vw, 76px);

	line-height: 1.02;

	font-weight: 500;

	letter-spacing: -.04em;

	color: var(--zibol-ink);

	margin: 0;

}


.single-post-excerpt {

	font-family: var(--zibol-sans);

	font-size: 19px;

	line-height: 1.65;

	color: var(--zibol-slate);

	max-width: 720px;

	margin: 28px 0 0;

}


/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.single-featured-wrap {

	width: min(1200px, calc(100% - 48px));

	margin-left: auto;

	margin-right: auto;

}


.single-featured-image {

	border-radius: 24px;

	overflow: hidden;

	background: var(--zibol-paper);

}


.single-featured-image img {

	display: block;

	width: 100%;

	height: auto;

}


/* =========================================================
   ARTICLE CONTENT
   ========================================================= */

.single-post-content {

	padding: 80px 0;

	font-family: var(--zibol-sans);

	font-size: 18px;

	line-height: 1.85;

	color: rgba(11, 15, 42, .84);

}


.single-post-content h2 {

	font-family: var(--zibol-serif);

	font-size: 40px;

	font-weight: 500;

	line-height: 1.15;

	letter-spacing: -.025em;

	margin: 60px 0 20px;

	color: var(--zibol-ink);

}


.single-post-content h3 {

	font-family: var(--zibol-serif);

	font-size: 30px;

	font-weight: 500;

	line-height: 1.2;

	margin: 45px 0 18px;

	color: var(--zibol-ink);

}


.single-post-content h4 {

	font-family: var(--zibol-display);

	font-size: 20px;

	font-weight: 600;

	margin: 35px 0 15px;

}


.single-post-content p {

	margin: 0 0 28px;

}


.single-post-content ul,

.single-post-content ol {

	margin-bottom: 30px;

	padding-left: 28px;

}


.single-post-content li {

	margin-bottom: 10px;

}


.single-post-content a {

	color: #5964C9;

	text-decoration-thickness: 1px;

	text-underline-offset: 3px;

}


.single-post-content blockquote {

	margin: 45px 0;

	padding: 28px 32px;

	border-left: 4px solid var(--zibol-lavender);

	background: var(--zibol-paper);

	font-family: var(--zibol-serif);

	font-size: 24px;

	line-height: 1.5;

	color: var(--zibol-ink);

}


.single-post-content img {

	display: block;

	max-width: 100%;

	height: auto;

	margin: 40px auto;

}


.single-post-content figure {

	margin: 40px 0;

}


.single-post-content figcaption {

	font-family: var(--zibol-mono);

	font-size: 10px;

	color: rgba(11, 15, 42, .50);

	margin-top: 10px;

}


/* =========================================================
   ARTICLE FOOTER
   ========================================================= */

.single-post-footer {

	display: flex;

	align-items: center;

	justify-content: space-between;

	gap: 30px;

	padding: 30px 0;

	border-top: 1px solid var(--zibol-line);

	border-bottom: 1px solid var(--zibol-line);

}


.single-post-author {

	display: flex;

	flex-direction: column;

	gap: 5px;

}


.author-label {

	font-family: var(--zibol-mono);

	font-size: 9px;

	letter-spacing: .10em;

	color: rgba(11, 15, 42, .45);

}


.single-post-author strong {

	font-family: var(--zibol-display);

	font-size: 13px;

}


.single-post-tags {

	display: flex;

	flex-wrap: wrap;

	gap: 8px;

}


.single-post-tags a {

	padding: 7px 10px;

	background: var(--zibol-paper);

	color: var(--zibol-ink);

	font-family: var(--zibol-mono);

	font-size: 9px;

	text-decoration: none;

}


/* =========================================================
   POST NAVIGATION
   ========================================================= */

.post-navigation {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 30px;

	padding: 45px 0 90px;

}


.post-navigation a {

	font-family: var(--zibol-serif);

	font-size: 21px;

	line-height: 1.35;

	color: var(--zibol-ink);

	text-decoration: none;

}


.post-navigation a:hover {

	color: var(--zibol-lavender);

}


.post-navigation-next {

	text-align: right;

}


/* =========================================================
   ARCHIVES
   ========================================================= */

.archive-header {

	background: var(--zibol-ink);

	color: var(--zibol-white);

	padding: 100px 0 70px;

}


.archive-header h1 {

	font-family: var(--zibol-serif);

	font-size: clamp(44px, 6vw, 70px);

	font-weight: 500;

	line-height: 1;

	letter-spacing: -.035em;

	margin: 0;

}


.archive-header .blog-eyebrow {

	color: var(--zibol-lavender);

}


.archive-description {

	max-width: 650px;

	margin-top: 25px;

	color: rgba(255, 255, 255, .65);

	line-height: 1.7;

}


.archive-description p {

	margin: 0;

}


/* =========================================================
   STANDARD PAGES
   ========================================================= */

.standard-page-header {

	background: var(--zibol-ink);

	color: var(--zibol-white);

	padding: 100px 0 65px;

}


.standard-page-header .blog-eyebrow {

	color: var(--zibol-lavender);

}


.standard-page-header h1 {

	font-family: var(--zibol-serif);

	font-size: clamp(44px, 6vw, 70px);

	font-weight: 500;

	line-height: 1;

	margin: 0;

}


.standard-page-content {

	padding: 75px 0 110px;

	font-family: var(--zibol-sans);

	font-size: 18px;

	line-height: 1.8;

}


/* =========================================================
   EMPTY BLOG
   ========================================================= */

.blog-empty {

	text-align: center;

	max-width: 650px;

	margin: auto;

	padding: 90px 20px;

}


.blog-empty h2 {

	font-family: var(--zibol-serif);

	font-size: 46px;

	font-weight: 500;

	line-height: 1.1;

	margin: 0 0 20px;

}


.blog-empty p {

	color: var(--zibol-slate);

	line-height: 1.7;

}


/* =========================================================
   404
   ========================================================= */

.zibol-404 {

	background: var(--zibol-ink);

	color: var(--zibol-white);

	min-height: 650px;

	display: flex;

	align-items: center;

	padding: 100px 0;

}


.zibol-404-content {

	max-width: 850px;

}


.zibol-404 .blog-eyebrow {

	color: var(--zibol-lavender);

}


.zibol-404 h1 {

	font-family: var(--zibol-serif);

	font-size: clamp(50px, 7vw, 90px);

	font-weight: 500;

	line-height: 1;

	letter-spacing: -.04em;

	margin: 0 0 28px;

}


.zibol-404 p {

	max-width: 600px;

	font-size: 18px;

	line-height: 1.7;

	color: rgba(255, 255, 255, .65);

}


.zibol-404-actions {

	display: flex;

	flex-wrap: wrap;

	gap: 12px;

	margin-top: 32px;

}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

	.blog-post-grid {

		grid-template-columns: 1fr;

	}

}


@media (max-width: 700px) {

	.narrow-wrap {

		width: calc(100% - 32px);

	}


	.blog-hero {

		padding: 90px 0 70px;

	}


	.blog-hero h1 {

		font-size: 48px;

	}


	.blog-posts-section {

		padding: 60px 0 80px;

	}


	.blog-post-content {

		padding: 25px;

	}


	.single-post-header {

		padding: 75px 0 50px;

	}


	.single-post-header h1 {

		font-size: 46px;

	}


	.single-post-content {

		padding: 55px 0;

		font-size: 17px;

	}


	.single-post-content h2 {

		font-size: 34px;

	}


	.single-post-content h3 {

		font-size: 27px;

	}


	.single-post-footer {

		flex-direction: column;

		align-items: flex-start;

	}


	.post-navigation {

		grid-template-columns: 1fr;

	}


	.post-navigation-next {

		text-align: left;

	}


	.archive-header {

		padding: 75px 0 55px;

	}

}

/* =========================================================
   SINGLE POST — MINIMAL AUTHOR
   ========================================================= */

.single-blog-post .single-post-footer {
	margin-top: 56px;
	padding: 20px 0;
	border-top: 1px solid rgba(11, 15, 42, 0.12);
}

.single-blog-post .single-post-author {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
}

.single-blog-post .author-label {
	font-family: "Roboto Mono", monospace;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #0B0F2A;
	opacity: 0.5;
}

.single-blog-post .author-name {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #0B0F2A;
}


/* Smaller article heading */

.single-blog-post .single-post-header h1 {
	font-size: clamp(2.5rem, 5vw, 4.25rem);
	line-height: 1;
}


/* Mobile */

@media (max-width: 600px) {

	.single-blog-post .single-post-header h1 {
		font-size: 2.35rem;
	}

	.single-blog-post .single-post-author {
		gap: 8px;
	}

}

/* =========================================================
   SINGLE POST — MINIMAL AUTHOR
   ========================================================= */

.single-blog-post .single-post-footer {
	background: transparent !important;
	border: 0 !important;
	border-top: 1px solid var(--line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 20px 0 !important;
	margin-top: 56px !important;
}

.single-blog-post .single-post-author {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0;
	background: transparent !important;
}

.single-blog-post .author-label {
	font-family: var(--mono, "Roboto Mono", monospace);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink);
	opacity: 0.5;
}

.single-blog-post .author-name {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink);
}


/* Mobile */

@media (max-width: 600px) {

	.single-blog-post .single-post-footer {
		margin-top: 40px !important;
		padding: 18px 0 !important;
	}

	.single-blog-post .single-post-author {
		gap: 8px;
	}

}

/* =========================================================
   ZIBOL BLOG — FONT SYSTEM
   Matches the original Zibol HTML
   ========================================================= */

html,
body {
	font-family: "Geist", sans-serif;
}

body,
button,
input,
textarea,
select {
	font-family: "Geist", sans-serif;
}

code,
pre,
kbd,
samp,
.mono,
.meta,
.single-post-meta,
.author-label {
	font-family: "Geist Mono", monospace;
}


/* =========================================================
   HEADER — ALWAYS ABOVE PAGE CONTENT
   ========================================================= */

#site-header {
	position: relative;
	z-index: 1000;
}


/* =========================================================
   SINGLE POST TITLE — NO STICKY BEHAVIOUR
   ========================================================= */

.single-blog-post .single-post-header {
	position: static !important;
	top: auto !important;
	z-index: auto !important;
}

.single-blog-post .single-post-header,
.single-blog-post .single-post-header * {
	transform: none;
}


/* Prevent any parent from creating a sticky/overlapping
   stacking context around the single-post title */

.single-blog-post {
	position: relative;
}

.single-blog-post .single-post-header {
	overflow: visible;
}


/* =========================================================
   HEADER NAVIGATION — ABOVE TITLE / CONTENT
   ========================================================= */

#site-header,
#site-header .wrap,
#site-header .nav-bar,
#site-header .links,
#site-header .menu-toggle {
	z-index: 1000;
}