/* 
 * Pulitzer Ghost Theme
 * Version: 1.0.3
 * Author: Anders Norén
 * License: MIT
 */

/* ==========================================================================
   CSS Variables (Ghost-adapted from WordPress theme.json)
   ========================================================================== */

:root {
	/* Colors */
	--color-base: #FFFFFF;
	--color-base-2: #F9F9F9;
	--color-contrast: #191716;
	--color-contrast-2: #666666;
	--color-contrast-3: #767676;
	--color-contrast-4: #DADADA;
	--color-contrast-5: #EEEEEE;
	
	/* Typography */
	--font-body: "Newsreader", ui-serif, "Times New Roman", serif;
	--font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--font-serif: ui-serif, "Times New Roman", serif;
	
	--font-size-xx-small: 12px;
	--font-size-x-small: 14px;
	--font-size-small: 16px;
	--font-size-medium: 18px;
	--font-size-large: 21px;
	--font-size-x-large: 24px;
	--font-size-xx-large: 32px;
	
	/* Spacing */
	--spacing-10: 4px;
	--spacing-20: 8px;
	--spacing-30: 12px;
	--spacing-40: 16px;
	--spacing-50: 24px;
	--spacing-60: 32px;
	--spacing-70: clamp(32px, 4.8vw, 48px);
	--spacing-80: clamp(48px, 6.4vw, 64px);
	--spacing-90: clamp(64px, 9.6vw, 96px);
	--spacing-100: clamp(64px, 12.8vw, 128px);
	
	/* Layout */
	--content-width: 608px;
	--wide-width: 818px;
	--body-margin: 24px;
	
	/* Border */
	--border-radius: 4px;
	--border-radius-large: 8px;
}


/* ==========================================================================
   Base Styles
   ========================================================================== */

body {
	background-color: var(--color-base);
	color: var(--color-contrast);
	font-family: var(--font-body);
	font-size: var(--font-size-medium);
	font-weight: 400;
	line-height: 1.5;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0 var(--body-margin);
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	transition: color .1s linear, opacity .1s linear;
}

a:hover {
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: var(--border-radius-large);
}

::placeholder {
	color: var(--color-contrast-2);
}


/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-sans);
	line-height: 1.5;
	margin: var(--spacing-70) 0 var(--spacing-50) 0;
}

h1 {
	font-size: var(--font-size-large);
	font-weight: 500;
}

h2 {
	font-size: var(--font-size-medium);
	font-weight: 500;
}

h3 {
	font-size: var(--font-size-small);
	font-weight: 600;
}

h4 {
	font-size: var(--font-size-x-small);
	font-weight: 700;
}

h5 {
	font-family: var(--font-body);
	font-size: var(--font-size-medium);
	font-weight: 700;
}

h6 {
	font-family: var(--font-body);
	font-size: var(--font-size-medium);
	font-style: italic;
}

p {
	margin: 0 0 var(--spacing-50) 0;
}


/* ==========================================================================
   Layout Containers
   ========================================================================== */

.container {
	max-width: var(--content-width);
	margin: 0 auto;
}

.container-wide {
	max-width: var(--wide-width);
	margin: 0 auto;
}

.site-main {
	padding: var(--spacing-100) 0;
}


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	border-bottom: 1px solid var(--color-contrast-5);
	padding: var(--spacing-60) 0;
}

.header-inner {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--spacing-50);
}

.header-left {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--spacing-40);
	flex: 1;
}

.header-right {
	display: flex;
	align-items: center;
	flex-basis: 1em;
	justify-content: flex-end;
}

.site-branding {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}

.site-title {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 500;
	line-height: inherit;
	margin: 0;
}

.site-title a {
	text-decoration: none;
}

.site-title a:hover {
	text-decoration: underline;
}

.site-description {
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	line-height: inherit;
	margin: 0;
}

.site-logo img {
	width: 128px;
	height: auto;
	border-radius: 90px;
}

.site-nav {
	display: flex;
	gap: var(--spacing-50);
}

.site-nav a {
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	text-decoration: none;
}

.site-nav a:hover {
	text-decoration: underline;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	padding-top: var(--spacing-80);
	padding-bottom: var(--spacing-60);
}

.footer-section {
	display: flex;
	gap: var(--spacing-50);
	padding: var(--spacing-80) 0;
	border-top: 1px solid var(--color-contrast-5);
}

.footer-section:first-child {
	border-top: 1px solid var(--color-contrast-5);
}

.footer-section:last-of-type {
	border-bottom: 1px solid var(--color-contrast-5);
}

.footer-column-narrow {
	flex-basis: 30%;
}

.footer-column-wide {
	flex: 1;
}

.footer-title {
	font-size: var(--font-size-small);
	font-weight: 500;
	margin: 0;
}

.footer-newsletter input {
	background-color: var(--color-base);
	border: 1px solid var(--color-contrast-4);
	border-radius: var(--border-radius);
	color: inherit;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	line-height: 1.5;
	padding: .75em 1em;
	margin-bottom: var(--spacing-40);
	width: 100%;
}

.footer-newsletter .button-primary {
	background-color: var(--color-contrast);
	border: none;
	border-radius: var(--border-radius);
	color: var(--color-base);
	cursor: pointer;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 500;
	line-height: 1.5;
	padding: .75em 1.25em;
	transition: opacity .1s linear;
	width: 100%;
}

.footer-newsletter .button-primary:hover {
	opacity: 0.8;
}

.social-links {
	display: flex;
	gap: var(--spacing-50);
}

.social-link {
	color: var(--color-base);
	background-color: var(--color-contrast);
	border-radius: var(--border-radius);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 500;
	padding: .5em 1em;
	text-decoration: none;
}

.social-link:hover {
	opacity: 0.8;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-20);
	padding-top: var(--spacing-60);
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-x-small);
}

.footer-copyright {
	display: flex;
	gap: 0.275em;
}

.site-title-small {
	font-weight: 400;
}

.footer-credits a {
	color: var(--color-contrast-2);
}


/* ==========================================================================
   Post Feed
   ========================================================================== */

.post-feed {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-100);
}

.post-card {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
}

.post-card-title {
	font-size: var(--font-size-small);
	font-weight: 500;
	margin: 0;
}

.post-card-title a {
	text-decoration: none;
}

.post-card-title a:hover {
	text-decoration: underline;
}

.post-card-meta {
	display: flex;
	align-items: center;
	gap: var(--spacing-20);
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
}

.meta-separator {
	color: var(--color-contrast-2);
}

.post-card-date {
	color: var(--color-contrast-2);
	text-decoration: none;
}

.post-card-excerpt {
	margin: var(--spacing-30) 0 0 0;
	line-height: inherit;
}

.post-card-footer {
	font-family: var(--font-sans);
	margin-top: var(--spacing-30);
}

.comment-count {
	color: var(--color-contrast-2);
	font-size: var(--font-size-xx-small);
	font-weight: 600;
	text-decoration: none;
	padding-left: 1.5714285714em;
	position: relative;
}

@supports(mask-image: url()) {
	.comment-count:before {
		background: currentColor;
		content: "";
		display: block;
		height: 1.1428571429em;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99554 13.1943C6.25588 13.9238 7.73847 14.1699 9.16691 13.887C10.5953 13.604 11.8721 12.8112 12.7592 11.6564C13.6463 10.5016 14.0831 9.06361 13.9883 7.61051C13.8934 6.15741 13.2734 4.78839 12.2437 3.75871C11.214 2.72902 9.84497 2.10895 8.39187 2.01409C6.93876 1.91924 5.50076 2.35607 4.34595 3.24316C3.19114 4.13024 2.39835 5.40703 2.11539 6.83547C1.83243 8.26391 2.07862 9.7465 2.80804 11.0068L2.02617 13.3412C1.99679 13.4293 1.99253 13.5238 2.01386 13.6142C2.03519 13.7046 2.08127 13.7873 2.14694 13.8529C2.2126 13.9186 2.29526 13.9647 2.38565 13.986C2.47603 14.0074 2.57057 14.0031 2.65867 13.9737L4.99554 13.1943Z' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99554 13.1943C6.25588 13.9238 7.73847 14.1699 9.16691 13.887C10.5953 13.604 11.8721 12.8112 12.7592 11.6564C13.6463 10.5016 14.0831 9.06361 13.9883 7.61051C13.8934 6.15741 13.2734 4.78839 12.2437 3.75871C11.214 2.72902 9.84497 2.10895 8.39187 2.01409C6.93876 1.91924 5.50076 2.35607 4.34595 3.24316C3.19114 4.13024 2.39835 5.40703 2.11539 6.83547C1.83243 8.26391 2.07862 9.7465 2.80804 11.0068L2.02617 13.3412C1.99679 13.4293 1.99253 13.5238 2.01386 13.6142C2.03519 13.7046 2.08127 13.7873 2.14694 13.8529C2.2126 13.9186 2.29526 13.9647 2.38565 13.986C2.47603 14.0074 2.57057 14.0031 2.65867 13.9737L4.99554 13.1943Z' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		-webkit-mask-position: center;
		mask-position: center;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1.1428571429em;
	}

	.comment-count:hover:before {
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99554 13.1943C6.25588 13.9238 7.73847 14.1699 9.16691 13.887C10.5953 13.604 11.8721 12.8112 12.7592 11.6564C13.6463 10.5016 14.0831 9.06361 13.9883 7.61051C13.8934 6.15741 13.2734 4.78839 12.2437 3.75871C11.214 2.72902 9.84497 2.10895 8.39187 2.01409C6.93876 1.91924 5.50076 2.35607 4.34595 3.24316C3.19114 4.13024 2.39835 5.40703 2.11539 6.83547C1.83243 8.26391 2.07862 9.7465 2.80804 11.0068L2.02617 13.3412C1.99679 13.4293 1.99253 13.5238 2.01386 13.6142C2.03519 13.7046 2.08127 13.7873 2.14694 13.8529C2.2126 13.9186 2.29526 13.9647 2.38565 13.986C2.47603 14.0074 2.57057 14.0031 2.65867 13.9737L4.99554 13.1943Z' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.99554 13.1943C6.25588 13.9238 7.73847 14.1699 9.16691 13.887C10.5953 13.604 11.8721 12.8112 12.7592 11.6564C13.6463 10.5016 14.0831 9.06361 13.9883 7.61051C13.8934 6.15741 13.2734 4.78839 12.2437 3.75871C11.214 2.72902 9.84497 2.10895 8.39187 2.01409C6.93876 1.91924 5.50076 2.35607 4.34595 3.24316C3.19114 4.13024 2.39835 5.40703 2.11539 6.83547C1.83243 8.26391 2.07862 9.7465 2.80804 11.0068L2.02617 13.3412C1.99679 13.4293 1.99253 13.5238 2.01386 13.6142C2.03519 13.7046 2.08127 13.7873 2.14694 13.8529C2.2126 13.9186 2.29526 13.9647 2.38565 13.986C2.47603 14.0074 2.57057 14.0031 2.65867 13.9737L4.99554 13.1943Z' stroke='currentColor' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	}
}


/* ==========================================================================
   Single Post / Page
   ========================================================================== */

.post-single,
.page {
	margin-bottom: var(--spacing-100);
}

.post-header,
.page-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-30);
	padding-top: var(--spacing-50);
	margin-bottom: var(--spacing-40);
}

.post-title,
.page-title {
	font-size: var(--font-size-large);
	font-weight: 500;
	margin: 0;
}

.post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-20);
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
}

.post-date {
	color: var(--color-contrast-2);
	text-decoration: none;
}

.post-date:hover {
	text-decoration: underline;
}

.post-tag {
	color: var(--color-contrast-2);
	text-decoration: none;
}

.post-tag:hover {
	text-decoration: underline;
}

.post-featured-image,
.page-featured-image {
	margin-bottom: var(--spacing-40);
}

.post-featured-image img,
.page-featured-image img {
	width: 100%;
	height: auto;
}

.post-content,
.page-content {
	margin-bottom: var(--spacing-70);
}

.post-content ul,
.post-content ol,
.page-content ul,
.page-content ol {
	margin: var(--spacing-60) 0;
	padding-left: var(--spacing-50);
}

.post-content li,
.page-content li {
	margin-bottom: var(--spacing-30);
}

.post-content blockquote,
.page-content blockquote {
	border-left: 1px solid currentColor;
	font-style: italic;
	line-height: inherit;
	margin: var(--spacing-80) 0;
	padding: var(--spacing-10) var(--spacing-50);
}

.post-content pre,
.page-content pre {
	background-color: var(--color-base);
	border: 1px solid var(--color-contrast-5);
	border-radius: var(--border-radius-large);
	color: var(--color-contrast);
	font-size: var(--font-size-small);
	line-height: 1.5;
	margin: var(--spacing-80) 0;
	overflow-x: auto;
	padding: var(--spacing-60);
}

.post-content code,
.page-content code {
	background-color: var(--color-base-2);
	border-radius: var(--border-radius);
	font-size: 0.9em;
	padding: 0.2em 0.4em;
}

.post-content pre code,
.page-content pre code {
	background: none;
	padding: 0;
}


/* ==========================================================================
   Post Footer
   ========================================================================== */

.post-footer {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-70);
	margin-top: var(--spacing-70);
	padding-top: var(--spacing-70);
	border-top: 1px solid var(--color-contrast-5);
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-30);
}

.post-tag-pill {
	background-color: var(--color-contrast);
	border-radius: 100px;
	color: var(--color-base);
	font-family: var(--font-sans);
	font-size: var(--font-size-x-small);
	font-weight: 500;
	padding: 0.5em 1em;
	text-decoration: none;
}

.post-tag-pill:hover {
	opacity: 0.8;
}

.post-sharing {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-40);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
}

.sharing-label {
	font-weight: 500;
}

.share-link {
	color: var(--color-contrast-2);
	font-weight: 500;
	text-decoration: none;
}

.share-link:hover {
	text-decoration: underline;
}


/* ==========================================================================
   Author Section
   ========================================================================== */

.post-author {
	margin: var(--spacing-100) 0;
	padding: var(--spacing-70) 0;
	border-top: 1px solid var(--color-contrast-5);
	border-bottom: 1px solid var(--color-contrast-5);
}

.author-info {
	display: flex;
	gap: var(--spacing-50);
}

.author-avatar {
	width: 80px;
	height: 80px;
	border-radius: 90px;
	border: 1px solid var(--color-contrast-5);
	flex-shrink: 0;
}

.author-details {
	flex: 1;
}

.author-name {
	font-size: var(--font-size-small);
	font-weight: 500;
	margin: 0 0 var(--spacing-20) 0;
}

.author-name a {
	text-decoration: none;
}

.author-name a:hover {
	text-decoration: underline;
}

.author-bio {
	color: var(--color-contrast-2);
	font-size: var(--font-size-small);
	margin: 0;
}


/* ==========================================================================
   Post Navigation
   ========================================================================== */

.post-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--spacing-50);
	margin-top: var(--spacing-100);
}

.post-nav-prev,
.post-nav-next {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-10);
	flex: 1;
	min-width: 0;
	text-decoration: none;
}

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

.nav-label {
	color: var(--color-contrast-2);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 500;
}

.nav-title {
	color: var(--color-contrast);
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: 500;
}

.post-nav-prev:hover .nav-title,
.post-nav-next:hover .nav-title {
	text-decoration: underline;
}


/* ==========================================================================
   Ghost Content API - Image Width Classes
   ========================================================================== */

/* Add required Ghost image width classes */
.kg-width-wide {
	position: relative;
	width: 100vw;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	max-width: var(--wide-width);
}

.kg-width