/* ===============================================
TABLE OF CONTENTS
==================================================
1. Single Story
2. Showcase Story
3. Further Reading
4. Related Stories
5. Responsive
================================================== */

/* ===============================================
1. SINGLE STORY
================================================== */
.single-story {}
.single-story .story {}
.single-story .story .taxonomy-meta {
	text-align: center;
	margin-bottom: 3rem;
}
.single-story .story .taxonomy-meta .breadcrumb-section, 
.single-story .story .taxonomy-meta .breadcrumb-topic, 
.single-story .story .taxonomy-meta .breadcrumb-type {
	font-family: var(--font-courier);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 1px;
	color: var(--color-pink);
	text-transform: uppercase;
	text-decoration: underline;
	text-decoration-color: var(--color-pink);
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
	text-decoration-style: dotted;
	text-decoration-skip-ink: none;
}

.single-story .story h1 {
	font-family: var(--font-crimson);
	font-weight: 200;
	font-size: 2.2rem;
	margin-left: 40px;
	margin-right: 40px;
	text-align: center;
	text-transform: uppercase;
}
.single-story .story .excerpt {
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem 2rem;
	text-align: center;
}
.single-story .story .excerpt p {
	font-family: var(--font-garamond);
	font-size: 1.4rem;
	font-weight: 300;
	line-height: 2.2rem;
	margin-block-start: 0 !important;
	margin-block-end: 1em !important;
}
.single-story .story .metadata {
	margin: 0 auto 4rem;
	text-align: center;
}
.single-story .story .metadata .reading-time {}
.single-story .story .metadata .author {
	margin: 0 auto 15px;
	margin-right: auto;
	margin-left: auto;
	font-family: var(--font-lato);
	font-size: 0.9rem;
	font-weight: bold;
	letter-spacing: 0.9px;
	text-transform: capitalize;
	color: var(--color-black);
}
.single-story .story .metadata .author a { text-decoration: none; color: var(--color-black); }
.single-story .story .metadata .author a:hover { text-decoration: underline; }
.single-story .story .metadata .date {
	font-family: var(--font-cutive);
	font-size: 0.8rem;
	font-weight: var(--weight-semi-bold);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-black-6);
}

.single-story .story-tags, 
.single-story .location-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	padding: 0 30px;
}
.single-story .location-tags { margin-top: 3rem; }
.single-story .story-tags .story-tag, 
.single-story .location-tags .location-tag {
	padding: 5px 12px;
	font-size: 0.8rem;
	line-height: 1.2;
	white-space: nowrap;
	color: var(--color-black-2);	
	border-radius: 0;
	border: 1px solid var(--color-black-2);
	background: transparent;
	font-family: var(--font-lato);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.single-story .story-tags a.story-tag, 
.single-story .location-tags a.location-tag {
	text-decoration: none;
	color: var(--color-black);
}

.single-story .story .featured-image {
	position: relative;
	left: 50%;
	max-width: 100vw;
	margin: 2rem 0;
	text-align: center;
	transform: translateX(-50%);
	width: 100vw;
}
.single-story .story .featured-image img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}

.single-story .story .actions {
	display: flex;
	justify-content: center;
	gap: 30px;
	padding-bottom: 1.5rem;
	margin-bottom: 3rem;
	border-bottom: 0.5px solid var(--color-black);
}
.share-toggle,
.save-toggle, 
.saved-posts {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}
.share-toggle path, 
.saved-posts path {
	transition: all 0.2s ease;
	fill: var(--color-black);
	stroke: var(--color-black);
	stroke-width: 0.5;
}
.save-toggle .save-icon path, 
.saved-posts .save-icon path {
	transition: all 0.2s ease;
	stroke: var(--color-black);
	fill: none;
	stroke-width: 1;
}
.save-toggle .save-text,
.share-toggle .share-text {
	padding-top: 5px;
	font-family: var(--font-courier);
	font-size: 0.9rem;
	text-transform: uppercase;
	color: var(--color-black);
	transition: color 0.2s ease;
}
.save-toggle .save-post,
.share-toggle .share-post, 
.saved-posts .share-post {
	z-index: 99;
	display: flex;
	align-items: center;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}
.dark-theme .header-right .save-toggle .save-icon path, 
.dark-theme .header-right .saved-posts .save-icon path {
	stroke: var(--color-grey-lt);
}
.save-toggle:hover .save-icon path,
.save-toggle:hover .save-text,
.share-toggle:hover .share-icon path,
.share-toggle:hover .share-text, 
.saved-posts:hover .save-icon path {
	color: var(--color-pink);
	fill: none;
	stroke: var(--color-pink);
}
.save-toggle .save-post.saved .save-icon path {
	fill: var(--color-pink);
	stroke: var(--color-pink);
}
.save-toggle .save-post.saved ~ .save-text {
	color: var(--color-pink);
}
.single-story .story .actions .share-toggle .meks_ess {
	position: absolute !important;
	top: calc(100% + 0.5rem) !important;
	z-index: 1000;
	display: none !important;
	padding: 0.5rem;
	border: 0.5px solid var(--color-black-4);
	border-radius: 10px;
	box-shadow: 6px 6px 12px rgba(0,0,0,0.1) !important;
	background: var(--color-white);
	left: 50% !important;
}
.single-story .story .actions .share-toggle .meks_ess.active {
	display: block !important;
	padding: 1rem;
	text-align: left;
}
.single-story .story .actions .share-toggle .meks_ess::before {
	margin-bottom: 1rem;
	font-weight: 600;
	border-bottom: 0.5px solid var(--color-black-4);
	display: block;
	text-align: center;
}
.single-story .story .actions .share-toggle .meks_ess .meks_ess-item {
	font-family: var(--font-courier) !important;
	display: block !important;
	width: 100% !important;
	font-size: 0.9rem !important;
	color: var(--color-black) !important;
	border-bottom: 1px dashed var(--color-black-4) !important;
}
.single-story .story .actions .share-toggle .meks_ess .meks_ess-item:hover, 
.single-story .story .actions .share-toggle .meks_ess a.meks_ess-item:hover {
	background-image: none !important;
	border-bottom: 1px dashed var(--color-black-4) !important;
	box-shadow: none !important;
}
.single-story .story .actions .share-toggle .meks_ess .meks_ess-item span {
	margin-left: 20px !important;
}
.single-story .story .actions .share-toggle .meks_ess .meks_ess-item:last-child {
	border-bottom: 0 !important;
}

.single-story .story .content {
	max-width: 900px;
	margin: auto;
	padding: 30px;
}
.single-story .story .content h2, 
.single-story .story .content h3, 
.single-story .story .content h4 {
	margin-top: 3rem;
}
.single-story .story .content p, 
.single-story .story .content ul li, 
.single-story .story .content ol li {
	margin-block-start: 1.5rem !important;
	margin-block-end: 1.5rem !important;
	font-family: var(--font-spectral);
	font-size: 1.2rem; /* 1.1 domine, 1.25 garamond, 1.15 palatino, 1.2 spectral */
	font-weight: 300; /* 400 garamond */
	line-height: 1.7;
	letter-spacing: 0.3px;
}

.wp-block-separator {
	background-color: var(--color-black);
	height: 0.5px;
	border: none;
	margin-top: 4rem;
	margin-bottom: 4rem;
}
.wp-block-separator.fancy {
	position: relative;
	border: none;
	height: 30px;
	margin: 4rem 0;
	font-size: 0.85rem;
	background: none;
}
.wp-block-separator.fancy::before {
	content: "❖ ❖ ❖";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 0.5em;
	color: var(--color-black-3);
}

.single-story .story .pullquote {
	font-family: var(--font-lato) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    line-height: 1.6 !important;
    letter-spacing: 0.14em !important;
	text-align: center !important;
    text-transform: uppercase;
    max-width: 660px;
    margin: 0 auto;
	padding: 50px 0;
}

.single-story .story .content .callout, 
.single-story .story .content .recipe-card {
	background-color: var(--callout);
	text-align: left;
	padding: 20px 40px !important;
}
.single-story .story .content .callout h3, 
.single-story .story .content .recipe-card h3 {
	text-align: center;
	margin: 0;
	padding: 20px 0 10px;
	line-height: 1rem;
}
.single-story .story .content .callout p, 
.single-story .story .content .recipe-card p {
	font-family: var(--font-times);
	font-size: 1.1rem;
	line-height: 1.7rem;
	width: 100%;
}

.anchor-offset {
	scroll-margin-top: 80px;
}

/*
.single-story .featured-image .media-attribution a, 
.single-story .story .content a {
	text-decoration: none;
	color: var(--color-black-3);
	background-color: transparent !important;
	padding-bottom: 2px;
	box-shadow: inset 0 -2.5px 0 -1px var(--color-black);
	transition: box-shadow 0.1s ease-out;
	-webkit-transition: box-shadow 0.08s ease-out;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.single-story .featured-image .media-attribution a:hover, 
.single-story .story .content a:hover {
	color: var(--color-black-3);
	background-color: transparent !important;
	border-bottom: none !important;
	box-shadow: inset 0 -23px 0 -1px var(--color-grey-lt);
}
*/
.single-story .story .content a:not(.wp-block-gallery a, .related-link a) {
	text-decoration: underline;
	text-decoration-color: var(--color-black);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
	text-decoration-style: solid;
	text-decoration-skip-ink: none;
} 
.single-story .story .content a:hover {
	text-decoration-color: var(--color-pink);
}

.single-story .story .content .related-link, 
.single-story .story .content .related-link a {
	font-family: var(--font-courier);
	font-size: 0.9rem;
	font-weight: 200;
	letter-spacing: none;
}
.single-story .story .content .related-link a {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-black);
	text-underline-offset: 0.2em;
	text-decoration-skip-ink: none;
}
.single-story .story .content .related-link a:hover {
	text-decoration-color: var(--color-black);
}

.single-story .story .content .wp-block-footnotes, 
.single-story .story .content .wp-block-footnotes li {
	font-size: 1rem !important;
	line-height: 1.4rem;
}
.single-story .story .content .wp-block-footnotes a, 
.single-story .story .content .wp-block-footnotes a:hover {
	text-decoration: none;
}

.single-story .related-tags {
	width: 100%;
	margin: 0;
	padding: 3rem 0 4rem;
}

/* ===============================================
2. SHOWCASE STORY
================================================== */
.showcase {
	color: var(--color-off-white);
	background-color: var(--color-black);
}
.showcase * {
	color: inherit !important;
} 
.showcase h1 {
	color: var(--color-white) !important;
}
.showcase.story, 
.showcase .story {
	border-bottom: 1px solid var(--color-black-4) !important;
}
.showcase .taxonomy-meta a.breadcrumb-section, 
.showcase .taxonomy-meta a.breadcrumb-topic, 
.showcase .taxonomy-meta a.breadcrumb-type {
	color: var(--color-pink) !important;
}
.showcase .metadata .date {
	color: var(--color-black-6) !important;
}
.showcase.related-tags { background-color: var(--color-black-2); }
.showcase .story-tags .story-tag, 
.showcase .location-tags .location-tag {
	color: var(--color-pink) !important;
	background-color: transparent;
	border: 1px solid var(--color-pink);
}
.showcase a.story-tag, 
.showcase a.location-tag {
	color: var(--color-pink);
}
.showcase .wp-block-quote {
	background-color: var(--color-black-3);
}
.showcase .wp-block-image h2, 
.showcase .wp-block-image h3, 
.showcase .wp-block-image h4, 
.showcase .wp-block-image h5, 
.showcase .wp-block-image p {
	background-color: var(--color-black-8);
}
.showcase .content a {
	color: var(--color-off-white) !important;
	text-decoration-color: var(--color-black-6) !important;
} 
.showcase .content a:hover {
	text-decoration-color: var(--color-pink) !important;
} 
.showcase .media-caption {
	color: var(--color-off-white) !important;
}
.showcase .media-attribution {
	color: var(--color-black-6) !important;
}
.showcase .media-caption a, 
.showcase .media-attribution a, 
.showcase .media-caption a:hover, 
.showcase .media-attribution a:hover {
	color: var(--color-grey-dk) !important;
}
.showcase.related-stories {
	background-color: var(--color-black-2);
	border-top: 1px solid var(--color-black-4) !important;
}
.showcase.related-stories .story:hover {
	background-color: transparent !important;
}
.showcase.related-stories .story .story-text::after {
	content: '';
	position: absolute;
	top: 15px;
	bottom: 0;
	right: 0;
	width: 0.5px;
	background-color: var(--color-black-6);
}
.showcase.related-stories .breadcrumbs, 
.showcase.related-stories .reading-time {
	color: var(--color-grey-dk) !important;
}
.showcase .share-toggle path {
	fill: var(--color-off-white) !important;
}
.showcase .share-toggle path {
	fill: var(--color-off-white) !important;
	stroke: var(--color-off-white) !important;
}
.showcase .save-toggle .save-icon path {
	transition: all 0.2s ease;
	stroke: var(--color-off-white);
	fill: none;
	stroke-width: 1;
}

/* ===============================================
3. FURTHER READING
================================================== */
.further-reading, 
.further-reading-all {
	width: 100%;
    margin: 3rem 0 2rem;
    padding: 3rem 0 0;
	border-top: 0.5px solid var(--color-grey-dk);
}
.further-reading-all { 
	border-top: none; 
	margin: 0 !important;
}
.further-reading-all .section-heading, 
.further-reading ~ .further-reading .section-heading {
	display: none;
}
.further-reading-card {
	margin: 2rem 0 0 0 !important;
	display: flex; 
	gap: 30px; 
	margin: 0;
}
.further-reading-card-media { flex: 0 0 220px; }
.further-reading-card-media img { 
	border: 1px solid rgba(0, 0, 0, 0.12); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.6s ease, transform 0.6s ease;
}
.further-reading-card-media img:hover {
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}
.further-reading-card-content { flex: 1; }
.further-reading-card-title { 
	margin: 0 !important; 
	line-height: 2.2rem !important;
}
.further-reading-card-title a { 
	/* background: var(--color-pink-lt) !important;
	text-decoration: none !important;  */
	text-decoration: underline !important;
	text-decoration-color: var(--color-pink) !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 6px !important;
	color: inherit !important; 
	border-bottom: none !important;
}
.further-reading-card-byline { 
	font-family: var(--font-courier);
	font-size: 0.85rem; 
	color: var(--color-black-8); 
	margin: 8px 0; 
}
.further-reading-card-description {
	font-size: 1.1rem !important; 
	margin: 0; 
	font-weight: 300 !important;
	line-height: 1.6 !important;
}
.further-reading-buy-btn {
	display: flex !important;
	border: 1px solid var(--color-black) !important;
	align-items: center !important;
    justify-content: center !important;
	width: 100% !important;
	margin: 15px auto !important;
	padding: 10px 15px !important;
	font-family: var(--font-lato) !important;
	text-decoration: none !important;
	color: inherit !important;
	font-size: 0.9rem !important;
	line-height: 1.7 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em !important;
	transition: background-color 0.2s ease, color 0.2s ease !important;
}
.further-reading-buy-btn:hover {
	background-color: var(--color-black) !important;
	color: var(--color-white) !important;
}

.further-reading-linked-stories {}
.further-reading-linked-stories .title { 
	font-family: var(--font-courier);
	font-size: 0.85rem; 
	font-weight: 600;
	text-transform: uppercase;
	color: var(--color-black-3); 
	margin: 8px 0; 
}
.further-reading-linked-stories ul {
	margin: 5px 0 0; 
	padding: 0; 
	font-size: 0.9em;
	list-style: none;
}
.further-reading-linked-stories ul li {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--font-crimson) !important;
}
.further-reading-linked-stories ul li a {
	text-decoration: none !important;
}

/* ===============================================
4. RELATED STORIES
================================================== */
.related-stories {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	width: 101vw; /* 100% */
	margin: 0;
	padding: 3rem 0 0;
	gap: var(--g);
	border-top: 0.5px solid var(--color-grey-dk);
}
.related-stories > article.story:nth-of-type(n + 7) {
	display: none;
}
.related-stories .story {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	transition: background-color 0.3s ease, filter 0.3s ease;
	border-bottom: 0.5px solid var(--color-grey-dk);
}
.related-stories .story:hover {
	background-color: var(--color-white) !important;
	filter: brightness(0.97);
}
.related-stories .story .featured-image {
	background-color: transparent;
}
.related-stories .story .featured-image::after {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0);
	transition: background-color 0.3s ease;
	content: "";
}
.related-stories .story:hover .featured-image::after {
	background-color: rgba(0, 0, 0, 0.1);
	mix-blend-mode: multiply;
}
.related-stories .story .story-media {
	z-index: 2;
	padding-right: 2px !important;
}
.related-stories .story .featured-image {
	aspect-ratio: 1 / 1;
}
.related-stories .story .story-text {
	position: relative;
	padding: 10px 15px;
	margin-bottom: 2rem;
	flex-grow: 1;
}
.related-stories .story .story-text::after {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 0;
	right: 0;
	width: 0.5px;
	background-color: var(--color-grey-dk);
}
.related-stories .story .story-text h2 {
	font-size: 1rem;
	margin: 0;
}
.related-stories .story .story-text .excerpt, 
.related-stories .story .story-text .reading-time {
	display: none;
}
.related-stories .breadcrumb-section, 
.related-stories .breadcrumb-topic, 
.related-stories .breadcrumb-type {
	font-size: 0.7rem;
	color: var(--color-black-6);
	border-bottom: none;
}
.related-stories .breadcrumb-section, 
.related-stories .breadcrumb-section + .slash {
	display: none;
}

.related-stories .story-text .reading-time {
	display: none;
}

/* ===============================================
5. RESPONSIVE
================================================== */
/* Single Story Responsive */
@media (max-width: 800px) {
	.single-story .story .excerpt p {
		font-size: 1.6rem;
	}
	.single-story .story .content p, 
	.single-story .story .content ul li, 
	.single-story .story .content ol li {
		font-size: 1.25rem; /* 1.15 domine, 1.3 garamond, 1.15 palatino, 1.25 spectral */
		font-weight: 400; 
		line-height: 1.6;
		letter-spacing: 0.2px;
	}
	.single-story .story .content .callout p, 
	.single-story .story .content .recipe-card p {
		font-size: 1rem;
	}
}

/* Further Reading Responsive */
@media (max-width: 800px) {
    .further-reading-card {
        flex-direction: column;
        gap: 15px;
    }
    .further-reading-card-media {
        flex: 1 1 auto;
        width: 100%;
    }
	.further-reading-card-title {
		text-align: center !important;
	}
	.further-reading-card-title a { 
		background: none !important;
		text-decoration: underline !important;
		text-decoration-color: var(--color-pink) !important;
		text-decoration-thickness: 2px;
		text-underline-offset: 6px;
}
	.further-reading-card-byline { 
		text-align: center !important;
		font-size: 0.95rem; 
	}
	.further-reading-card-description {
		font-size: 1.1rem !important; 
		line-height: 1.5;
	}
	.further-reading-buy-btn {
		padding: 15px 20px !important;
		font-weight: 600 !important;
	}
}

/* Related Stories Responsive */
@media (max-width: 1300px) {
	.related-stories {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.related-stories > article.story:nth-of-type(n + 6) {
		display: none;
	}
	.related-stories .breadcrumb-type, 
	.related-stories .breadcrumb-topic + .slash {
		display: none;
	}
}
@media (max-width: 1000px) {
	.related-stories {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.related-stories > article.story:nth-of-type(n + 5) {
		display: none;
	}
}
@media (max-width: 700px) {
	.related-stories {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.related-stories > article.story:nth-of-type(n + 4) {
		display: none;
	}
}