/**
 * Canvas Blog Styles
 *
 * Enqueued as `canvas-blog` only on blog archive and single post pages.
 * All base entry/grid/timeline/tagcloud styles live in assets/css/style.css.
 * This file contains layout-variant overrides, WordPress-specific controls,
 * single-post reading bar, share card, related posts, and pagination.
 *
 * Depends on: canvas-style (assets/css/style.css), Bootstrap 5
 *
 * @package Canvas
 * @since   1.0.0
 */

/* ================================================================
   1. CSS Custom Properties: Blog Tokens
================================================================ */
:root {
	/* List-1 overlay card */
	--cnvs-blog-overlay-offset:   -6rem;
	--cnvs-blog-overlay-maxw:     90%;
	--cnvs-blog-overlay-radius:   0.25rem;
	--cnvs-blog-overlay-z:        1;

	/* Load-more button */
	--cnvs-blog-loadmore-mt:      3rem;
	--cnvs-blog-loadmore-mb:      1rem;

	/* Infinite scroll sentinel */
	--cnvs-blog-sentinel-h:       1px;

	/* Single post reading bar */
	--cnvs-blog-rbar-min-height:  3rem;

	/* Article share card */
	--cnvs-blog-share-gap:        0.375rem;

	/* Related posts */
	--cnvs-blog-related-gap:      1.5rem;

	/* Post navigation */
	--cnvs-blog-nav-my:           3rem;

	/* Author card */
	--cnvs-blog-author-avatar:    5rem;
}

/* ================================================================
   2. Post Grid Container  (#posts)
   Applies to: archive.php main post loop.
   Note: .post-grid, .grid-container, .grid-inner styles live
         in style.css. This only adds the ID-level override.
================================================================ */
#posts {
	/* Ensure the grid element resets so Isotope can measure it. */
	overflow: visible;
}

/* ================================================================
   3. List-1 Layout: Overlay Card  (.entry-content-wrap)
   Floats the content block up over the bottom of the image.
   The inline-style fallback in blog-entry-list-1.php is superseded
   by this rule once blog.css is loaded.
================================================================ */
.entry-content-wrap {
	position: relative;
	background: #fff;
	margin-top: var(--cnvs-blog-overlay-offset);
	max-width: var(--cnvs-blog-overlay-maxw);
	margin-left: auto;
	margin-right: auto;
	padding: 1.5rem 2rem;
	padding-bottom: 0;
	border-radius: var(--cnvs-blog-overlay-radius);
	z-index: var(--cnvs-blog-overlay-z);
}

/* Prevent the separator line from .entry::after overlapping the
   overlay card on list-1 entries. */
.entry:has(.entry-content-wrap)::after {
	margin-top: 0;
}

/* The overlay card is pulled up over the bottom of the image, so the image's
   own bottom margin would push the two apart again. Scoped to the layout that
   overlays, so every other entry keeps the gap. */
.entry:has(.entry-content-wrap) .entry-image {
	margin-bottom: 0;
}

/* The card's own title scale: larger, lighter and unshouted, against the
   archive's default small-caps heading. */
.entry:has(.entry-content-wrap) .entry-title h2 {
	text-transform: none;
	letter-spacing: 0;
	font-size: 2rem;
	font-weight: 500;
}

/* ================================================================
   4. List-2  (.grid-inner.row.g-0): Horizontal Card
   Image left (col-md-4) / content right (col-md-8).
   Bootstrap .row + .g-0 handles the gutters; we only tighten
   the image display so it fills its column height.
================================================================ */
.grid-inner.row.g-0 .entry-image {
	margin-bottom: 0;
	height: 100%;
}

.grid-inner.row.g-0 .entry-image > a,
.grid-inner.row.g-0 .entry-image img {
	height: 100%;
	object-fit: cover;
}

/* On small screens (< md) stack vertically: remove height stretching. */
@media (max-width: 767.98px) {
	.grid-inner.row.g-0 .entry-image,
	.grid-inner.row.g-0 .entry-image > a,
	.grid-inner.row.g-0 .entry-image img {
		height: auto;
	}
}

/* ================================================================
   5. List-3 Featured Card  (.grid-inner.bg-white.p-5.rounded.shadow-sm)
   object-fit override so the fixed-height thumbnail fills its box.
================================================================ */
/* object-fit itself is owned by the style.css .object-cover utility
   (declared there with !important: a local copy could never win anyway).
   Only the sizing additions live here. */
.grid-inner .object-cover {
	width: 100%;
	display: block;
}

/* ================================================================
   6. Small-Alt Layout  (horizontal small card)
   Image col-md-4, content col-md-8. Ensure image does not shrink
   on mobile and that .entry-image fills the column.
================================================================ */
.grid-inner.row > [class*="col-md-"] > .entry-image {
	margin-bottom: 0;
}

@media (max-width: 767.98px) {
	.grid-inner.row > [class*="col-md-"] > .entry-image {
		margin-bottom: 1rem;
	}
}

/* ================================================================
   7. Timeline Layout: Additions
   Core .post-timeline, .entry-timeline, .timeline-border,
   .timeline-divider, .entry-date-section already defined in style.css.
   Here we only add the WordPress-specific border element.
================================================================ */
.post-timeline .timeline-border {
	pointer-events: none;
}

/* ================================================================
   8. Masonry: #posts.grid-container
   Isotope adds inline width/transform. Ensure items have no
   bottom overlap before JS initializes.
================================================================ */
#posts.grid-container {
	overflow: visible;
	transition: height 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	#posts.grid-container {
		transition: none;
	}
}

#posts.grid-container .entry {
	/* Isotope absolutely positions entries; ensure they paint correctly. */
	will-change: transform;
}

/* ================================================================
   9. Pagination: Load More  (.canvas-pagination-load-more)
================================================================ */
.canvas-pagination-load-more {
	display: flex;
	justify-content: center;
	margin-top: var(--cnvs-blog-loadmore-mt);
	margin-bottom: var(--cnvs-blog-loadmore-mb);
}

.canvas-load-more-btn {
	--cnvs-btn-bg:     var(--cnvs-contrast-100);
	--cnvs-btn-color:  var(--cnvs-contrast-900);

	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 2rem;
	background-color: var(--cnvs-btn-bg);
	color: var(--cnvs-btn-color);
	font-size: 0.9375rem;
	font-weight: 500;
	border: 2px solid transparent;
	border-radius: 0.25rem;
	cursor: pointer;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.canvas-load-more-btn {
		transition: none;
	}
}

.canvas-load-more-btn:hover,
.canvas-load-more-btn:focus-visible {
	background-color: var(--cnvs-themecolor);
	border-color: var(--cnvs-themecolor);
	color: #fff;
	outline: none;
}

.canvas-load-more-btn:disabled,
.canvas-load-more-btn[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Spinner while loading */
.canvas-load-more-btn .canvas-spinner {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: cnvs-btn-spin 0.65s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.canvas-load-more-btn .canvas-spinner {
		animation: none;
		border-top-color: currentColor;
		opacity: 0.5;
	}
}

@keyframes cnvs-btn-spin {
	to { transform: rotate(360deg); }
}

/* ================================================================
   10. Pagination: Infinite Scroll Sentinel
   A 1 px transparent element at the bottom of the post list.
   The IntersectionObserver in blog.js watches this.
================================================================ */
.canvas-infinite-sentinel {
	display: block;
	width: 100%;
	height: var(--cnvs-blog-sentinel-h);
	visibility: hidden;
	pointer-events: none;
}

/* ================================================================
   11. Single Post  (.single-post)
   Structural additions beyond what style.css provides.
================================================================ */
.single-post {
	/* Prevent footer overlap when there are no comments. */
	padding-bottom: 1px;
}

/* ================================================================
   12. Reading Bar  (.font-sizer, reading time card)
   The card itself is .card.border-default. We only add the
   font-sizer button sizing to avoid icon scaling issues.
================================================================ */
.font-sizer {
	display: inline-flex;
	align-items: center;
	gap: 0.125rem;
}

.font-sizer .font-size-minus,
.font-sizer .font-size-plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ================================================================
   13. Article Share Card  (#cnvs-article-share)
================================================================ */
#cnvs-article-share {
	scroll-margin-top: 5rem;
}

#cnvs-article-share .d-flex {
	gap: var(--cnvs-blog-share-gap);
	flex-wrap: wrap;
}

/* si-small size is set in style.css; here we just tighten the
   spacing between icons inside the share card. */
#cnvs-article-share .social-icon {
	margin-right: 0;
}

/* ================================================================
   14. Post Navigation  (.post-navigation row)
   The navigation row uses Bootstrap cols. We add hover color
   tokens so the links match the theme's interactive color.
================================================================ */
.single-post .post-navigation-row {
	margin-top: var(--cnvs-blog-nav-my);
	margin-bottom: var(--cnvs-blog-nav-my);
}

/* Prev/next link color. */
.single-post .post-navigation-row a {
	color: var(--cnvs-heading-color);
	text-decoration: none;
	transition: color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.single-post .post-navigation-row a {
		transition: none;
	}
}

.single-post .post-navigation-row a:hover {
	color: var(--cnvs-themecolor);
}

/* ================================================================
   15. Author Card  (.card.border-default.mb-6 inside .single-post)
   The .square.square-md sets width/height via style.css.
   We only ensure the avatar img fills the square correctly.
================================================================ */
.single-post .card .rounded-circle.square {
	object-fit: cover;
	object-position: center;
}

/* ================================================================
   16. Related Posts  (.related-posts)
================================================================ */
.related-posts {
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Ensure entry-image thumbnails in .posts-md entries keep aspect. */
.related-posts .entry-image img {
	object-fit: cover;
	object-position: center;
}

/* ================================================================
   17. posts-md  (.posts-md): used by related posts row
   Core .posts-md rules in style.css reset margin/padding.
   Here we keep thumbnail proportions intact.
================================================================ */
.posts-md .entry-image .square {
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: center;
	   object-position: center;
}

/* ================================================================
   18. Bootstrap-Compatible Gutter + Column-Margin Utilities
   .gutter-{n} and .col-mb-{n} are defined in style.css.
   No duplicate declarations here: only blog-page-specific
   overrides that tighten or expand spacing in post loop rows.
================================================================ */

/* The standard blog list row uses gutter-30 (style.css).
   On very small screens collapse horizontal gutter. */
@media (max-width: 575.98px) {
	#posts.row {
		--bs-gutter-x: 0;
	}
}

/* ================================================================
   19. Responsive Overrides
================================================================ */

/* lg: 992 px */
@media (min-width: 992px) {

	/* Load More button sits below a multi-column post grid. */
	.canvas-pagination-load-more {
		margin-top: 4rem;
	}
}

/* ================================================================
   20. Dark-mode token overrides
   Canvas respects .not-dark / .dark context classes.
================================================================ */
.dark .entry-content-wrap,
[data-bs-theme="dark"] .entry-content-wrap {
	background: var(--cnvs-contrast-100, #1a1a1a);
}

.dark .canvas-load-more-btn {
	--cnvs-btn-bg:    var(--cnvs-contrast-200);
	--cnvs-btn-color: var(--cnvs-contrast-900);
}

/* ================================================================
   21. Print
   Hide interactive controls that make no sense on paper.
================================================================ */
@media print {
	.canvas-pagination-load-more,
	.font-sizer,
	#cnvs-article-share,
	.single-post .post-navigation-row {
		display: none !important;
	}
}

/* ------------------------------------------------------------------
   11. Editorial archives: chips, overlay cards, magazine rails,
       split feed, taxonomy/author heroes, archive lists, search
   ------------------------------------------------------------------ */


/* Post Chip
-----------------------------------------------------------------*/
.entry-chip {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  background-color: rgba(var(--cnvs-themecolor-rgb), 0.12);
  color: var(--cnvs-themecolor);
  transition: background-color 0.2s ease, color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {

  .entry-chip {
    transition: none;
  }
}


a.entry-chip:hover {
  background-color: var(--cnvs-themecolor);
  color: #fff;
}


.entry-chip-light {
  background-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  backdrop-filter: blur(4px);
}


a.entry-chip-light:hover {
  background-color: #fff;
  color: var(--cnvs-contrast-900);
}


/* Post Card Overlay
-----------------------------------------------------------------*/
.post-card-overlay {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: 0.625rem;
  background-color: var(--cnvs-contrast-200);
}

.post-card-overlay img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {

  .post-card-overlay img {
    transition: none;
  }
}

.post-card-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 72%);
}

.post-card-overlay:hover img {
  transform: scale(1.06);
}


.post-card-overlay-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 1.75rem;
  color: #fff;
}

.post-card-overlay-content h2, .post-card-overlay-content .h2,
.post-card-overlay-content h3,
.post-card-overlay-content .h3,
.post-card-overlay-content h4,
.post-card-overlay-content .h4 {
  color: #fff;
  margin-bottom: 0.5rem;
}

.post-card-overlay-content .entry-meta,
.post-card-overlay-content .entry-meta li,
.post-card-overlay-content .entry-meta a {
  color: rgba(255, 255, 255, 0.75);
  border: none;
}


.post-card-overlay-xs,
.post-card-overlay-sm,
.post-card-overlay-md,
.post-card-overlay-lg,
.post-card-overlay-tall {
  height: 100%;
}


.post-card-overlay-xs {
  min-height: 220px;
}


.post-card-overlay-sm {
  min-height: 280px;
}


.post-card-overlay-md {
  min-height: 320px;
}


.post-card-overlay-lg {
  min-height: 400px;
}


.post-card-overlay-tall {
  min-height: 460px;
}
@media (max-width: 767.98px) {

  .post-card-overlay-content {
    padding: 1.25rem;
  }
}

/* Post Magazine Rails
-----------------------------------------------------------------*/
.magazine-rail-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnvs-heading-color);
}

.magazine-rail-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--cnvs-contrast-200);
}


.magazine-rank {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cnvs-contrast-300);
  font-variant-numeric: tabular-nums;
}


/* Post Split Feed
-----------------------------------------------------------------*/
.split-feed-wrap {
  overflow: visible;
}


.split-feed-media {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--cnvs-contrast-100);
}

.split-feed-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {

  .split-feed-media img {
    transition: none;
  }
}

.split-feed-media img.active {
  opacity: 1;
}


.split-feed-item {
  display: block;
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--cnvs-contrast-200);
  transition: opacity 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {

  .split-feed-item {
    transition: none;
  }
}

.split-feed-item:last-child {
  border-bottom: 0;
}


.split-feed-list.has-active .split-feed-item {
  opacity: 0.45;
}

.split-feed-list.has-active .split-feed-item.active {
  opacity: 1;
}
@media (max-width: 991.98px) {

  .split-feed-media {
    position: static;
    height: 320px;
  }

  .split-feed-list.has-active .split-feed-item {
    opacity: 1;
  }

  .split-feed-item {
    padding: 2rem 0;
  }
}


.issue-kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cnvs-contrast-500);
  margin-bottom: 0.625rem;
}


.newsletter-inline {
  container-type: inline-size;
  padding: 2.5rem;
  border-radius: 0.75rem;
  background-color: var(--cnvs-contrast-100);
  border: 1px solid var(--cnvs-contrast-200);
}


.newsletter-inline-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}


.newsletter-inline-copy,
.newsletter-inline-form {
  flex: 1 1 0;
  min-width: 0;
}


/* Post Taxonomy & Author Archives
-----------------------------------------------------------------*/
.taxonomy-hero,
.author-hero {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--cnvs-contrast-200);
  margin-bottom: 3.5rem;
}


.taxonomy-count {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cnvs-contrast-500);
}


.author-hero-avatar {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  object-fit: cover;
}


.author-stat {
  display: flex;
  flex-direction: column;
}

.author-stat strong {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cnvs-heading-color);
}

.author-stat span {
  font-size: 0.8125rem;
  color: var(--cnvs-contrast-500);
}


.archive-year {
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--cnvs-contrast-200);
}

.archive-year:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}


.archive-year-label {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cnvs-contrast-300);
  font-variant-numeric: tabular-nums;
}


.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.archive-list li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.875rem 0;
  border-bottom: 1px dashed var(--cnvs-contrast-200);
}

.archive-list li:last-child {
  border-bottom: 0;
}

.archive-list time {
  flex: 0 0 5.5rem;
  font-size: 0.8125rem;
  color: var(--cnvs-contrast-500);
  font-variant-numeric: tabular-nums;
}

.archive-list a {
  color: var(--cnvs-heading-color);
  font-weight: 500;
}

.archive-list a:hover {
  color: var(--cnvs-themecolor);
}


.search-empty {
  padding: 4.5rem 2rem;
  text-align: center;
  border: 1px dashed var(--cnvs-contrast-300);
  border-radius: 0.75rem;
}

.search-empty i {
  font-size: 3rem;
  color: var(--cnvs-contrast-300);
  margin-bottom: 1.25rem;
  display: block;
}


.search-term {
  background-color: rgba(var(--cnvs-themecolor-rgb), 0.18);
  border-radius: 0.1875rem;
  padding: 0 0.1875rem;
}


.line-clamp-2,
.line-clamp-3,
.line-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.line-clamp-2 {
  -webkit-line-clamp: 2;
}


.line-clamp-3 {
  -webkit-line-clamp: 3;
}


.line-clamp-4 {
  -webkit-line-clamp: 4;
}

@container (max-width: 560px) {

	.newsletter-inline {
		padding: 1.75rem;
	}

	.newsletter-inline-inner {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}

	.newsletter-inline-form .input-group {
		flex-direction: column;
		gap: 0.5rem;
	}

	.newsletter-inline-form .input-group > .form-control,
	.newsletter-inline-form .input-group > .btn {
		width: 100%;
		margin-left: 0;
		border-radius: var(--bs-border-radius);
	}
}

/* ================================================================
   Editorial Single Post
   ================================================================ */

/* Post Reading Progress
-----------------------------------------------------------------*/
.reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 3px;
	z-index: 300;
	pointer-events: none;
	background-color: rgba(var(--cnvs-contrast-rgb), 0.08);
}

.reading-progress-bar {
	width: 0;
	height: 100%;
	background-color: var(--cnvs-themecolor);
	transition: width 0.08s linear;
}
@media (prefers-reduced-motion: reduce) {

	.reading-progress-bar {
		transition: none;
	}
}

/* Post Table of Contents
-----------------------------------------------------------------*/
.is-expanded-menu .post-toc {
	position: sticky;
	top: calc(var(--cnvs-header-height-shrink) + 30px);
}

.post-toc-heading {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cnvs-contrast-500);
	margin-bottom: 1rem;
}

.post-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 2px solid var(--cnvs-contrast-200);
	max-height: calc(100vh - var(--cnvs-header-height) - 120px);
	overflow-y: auto;
}

.post-toc-list a {
	display: block;
	margin-left: -2px;
	padding: 0.4rem 0 0.4rem 1rem;
	border-left: 2px solid transparent;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--cnvs-contrast-600);
	transition: color 0.2s ease, border-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {

	.post-toc-list a {
		transition: none;
	}
}

.post-toc-list a:hover {
	color: var(--cnvs-contrast-900);
}

.post-toc-list a.active {
	color: var(--cnvs-themecolor);
	border-left-color: var(--cnvs-themecolor);
	font-weight: 500;
}

.post-toc-list .toc-level-3 a {
	padding-left: 2rem;
	font-size: 0.8125rem;
}

/* Post Share Rail
-----------------------------------------------------------------*/
.share-rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

.is-expanded-menu .share-rail {
	position: sticky;
	top: calc(var(--cnvs-header-height-shrink) + 30px);
}

.share-rail-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cnvs-contrast-500);
	margin-bottom: 0.25rem;
}

@media (max-width: 991.98px) {

	.share-rail {
		position: static;
		flex-direction: row;
		justify-content: center;
		margin-bottom: 2rem;
	}

	.share-rail-label {
		margin: 0 0.5rem 0 0;
		align-self: center;
	}
}

/* Post Longread
-----------------------------------------------------------------*/
.longread-body {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--cnvs-contrast-700);
}

.longread-body p,
.longread-body ul,
.longread-body ol,
.longread-body figure,
.longread-body blockquote {
	margin-bottom: 1.75rem;
}

.longread-body h2, .longread-body .h2 {
	margin-top: 3.5rem;
	margin-bottom: 1.25rem;
	font-size: 1.75rem;
	line-height: 1.3;
}

.longread-body h3, .longread-body .h3 {
	margin-top: 2.5rem;
	margin-bottom: 1rem;
	font-size: 1.3125rem;
	line-height: 1.4;
}

.longread-lead {
	font-size: 1.375rem;
	line-height: 1.65;
	color: var(--cnvs-contrast-800);
}

.longread-dropcap > p:first-of-type::first-letter,
p.longread-dropcap::first-letter {
	float: left;
	font-size: 4.5rem;
	line-height: 0.82;
	font-weight: 700;
	padding: 0.35rem 0.625rem 0 0;
	color: var(--cnvs-heading-color);
}

.longread-wide {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
}

.longread-pullquote {
	margin: 3rem auto;
	padding: 0 0 0 1.5rem;
	border-left: 3px solid var(--cnvs-themecolor);
	font-size: 1.5rem;
	line-height: 1.45;
	font-weight: 500;
	color: var(--cnvs-heading-color);
}

.longread-pullquote cite {
	display: block;
	margin-top: 0.875rem;
	font-size: 0.9375rem;
	font-style: normal;
	font-weight: 400;
	color: var(--cnvs-contrast-500);
}

.longread-note {
	padding: 1.25rem 1.5rem;
	border-radius: 0.5rem;
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.07);
	border-left: 3px solid var(--cnvs-themecolor);
	font-size: 1rem;
	line-height: 1.7;
}

/* Post Photo Essay
-----------------------------------------------------------------*/
.photo-essay-figure {
	margin-bottom: 3.5rem;
}

.photo-essay-figure img {
	width: 100%;
	border-radius: 0.5rem;
}

.photo-essay-figure figcaption {
	margin-top: 0.875rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--cnvs-contrast-500);
}

.photo-essay-figure figcaption strong {
	color: var(--cnvs-contrast-800);
	font-weight: 600;
}

.photo-essay-full {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.photo-essay-full img {
	border-radius: 0;
}

.photo-essay-full figcaption {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	padding: 0 1rem;
}

/* Post Interview
-----------------------------------------------------------------*/
.qa-item {
	padding-bottom: 2.25rem;
	margin-bottom: 2.25rem;
	border-bottom: 1px solid var(--cnvs-contrast-200);
}

.qa-item:last-child {
	border-bottom: 0;
}

.qa-question {
	display: flex;
	gap: 1rem;
	margin-bottom: 1.125rem;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--cnvs-heading-color);
}

.qa-answer {
	display: flex;
	gap: 1rem;
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--cnvs-contrast-700);
}

.qa-answer p:last-child {
	margin-bottom: 0;
}

.qa-marker {
	flex: 0 0 1.75rem;
	width: 1.75rem;
	height: 1.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

.qa-question .qa-marker {
	background-color: var(--cnvs-heading-color);
	color: var(--cnvs-contrast-0);
}

.qa-answer .qa-marker {
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.14);
	color: var(--cnvs-themecolor);
}

/* Post Newsletter Issue
-----------------------------------------------------------------*/
.issue-header {
	padding-bottom: 2rem;
	margin-bottom: 3rem;
	border-bottom: 2px solid var(--cnvs-contrast-900);
}

.issue-number {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
	margin-bottom: 0.75rem;
}

.issue-section {
	padding-top: 2.5rem;
	margin-top: 2.5rem;
	border-top: 1px solid var(--cnvs-contrast-200);
}

.issue-section:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Post Immersive Hero
-----------------------------------------------------------------*/
.immersive-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 78vh;
	padding: 4rem 0;
	background-size: cover;
	background-position: center;
	color: #fff;
}

.immersive-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.15) 100%);
}

.immersive-hero .container {
	position: relative;
	z-index: 2;
}

.immersive-hero h1, .immersive-hero .h1 {
	color: #fff;
	font-size: clamp(2rem, 5vw, 3.75rem);
	line-height: 1.12;
	margin-bottom: 1.25rem;
}

.immersive-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.82);
}

.immersive-meta a {
	color: #fff;
}

.post-meta-bar {
	z-index: 12;
	padding: 0.875rem 0;
	background-color: var(--cnvs-body-bg);
	border-bottom: 1px solid var(--cnvs-contrast-200);
}

.is-expanded-menu .post-meta-bar {
	position: sticky;
	top: var(--cnvs-header-height-shrink);
}

/* Post Single Furniture
-----------------------------------------------------------------*/
.related-post-card .entry-image {
	overflow: hidden;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}

.related-post-card .entry-image img {
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {

	.related-post-card .entry-image img {
		transition: none;
	}
}

.related-post-card:hover .entry-image img {
	transform: scale(1.05);
}

.related-post-card h4, .related-post-card .h4 {
	font-size: 1.0625rem;
	line-height: 1.45;
	margin-bottom: 0.5rem;
}

.post-author-card {
	padding: 2rem;
	border-radius: 0.75rem;
	background-color: var(--cnvs-contrast-100);
	border: 1px solid var(--cnvs-contrast-200);
}

.post-nav-card {
	display: block;
	padding: 1.5rem;
	height: 100%;
	border: 1px solid var(--cnvs-contrast-200);
	border-radius: 0.625rem;
	transition: border-color 0.25s ease, background-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {

	.post-nav-card {
		transition: none;
	}
}

.post-nav-card:hover {
	border-color: var(--cnvs-themecolor);
	background-color: rgba(var(--cnvs-themecolor-rgb), 0.04);
}

.post-nav-card span {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cnvs-contrast-500);
	margin-bottom: 0.5rem;
}

.post-nav-card strong {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--cnvs-heading-color);
}