.site-main--single {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background-color: var(--color-gray-100);
}

/* Top banner */
.single-post-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.single-post-banner--compact {
  background-color: var(--color-teal);
  border-bottom: var(--border-width) solid var(--color-black);
}

.single-post-banner--media .single-post-banner__media {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(11rem, 42vw, 22rem);
  overflow: hidden;
  background-color: #f0ebe3;
}

.single-post-banner__image {
  position: absolute;
  inset: 0;
  display: block;
  float: none;
  width: 100%;
  min-width: 100%;
  max-width: none;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center;
}

.single-post-banner__bar {
  background-color: var(--color-teal);
}

.single-post-banner--media .single-post-banner__bar {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.single-post-banner__inner {
  max-width: calc(var(--layout-max) + var(--container-padding) * 2);
  margin-inline: auto;
  padding: var(--space-sm) var(--container-padding);
}

.single-post-banner--media .single-post-banner__inner {
  padding-top: var(--space-md);
}

.single-post-banner__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-yellow);
  pointer-events: auto;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.single-post-banner--compact .single-post-banner__back {
  color: var(--color-black);
}

.single-post-banner__back:hover,
.single-post-banner__back:focus-visible {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 184, 76, 0.5);
  outline: none;
}

.single-post-banner--compact .single-post-banner__back:hover,
.single-post-banner--compact .single-post-banner__back:focus-visible {
  background-color: rgba(0, 0, 0, 0.06);
  border-color: var(--color-black);
}

/* Article container */
.single-post__container {
  clear: both;
  width: 100%;
  max-width: calc(var(--container-max) + var(--container-padding) * 2);
  margin-inline: auto;
  padding: var(--space-lg) var(--container-padding) var(--space-2xl);
}

.single-post {
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.single-post::after {
  content: '';
  display: block;
  height: 4px;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background-color: var(--color-yellow);
}

.single-post__content-wrap {
  padding: var(--space-xl) var(--space-lg);
}

.single-post__category {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.single-post__category:hover,
.single-post__category:focus-visible {
  opacity: 0.75;
  outline: none;
}

.single-post__category-mark {
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-yellow);
  flex-shrink: 0;
}

.single-post__category-name {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-teal-dark);
}

.single-post__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.single-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-gray-200);
}

.single-post__date,
.single-post__stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-gray-muted);
}

.single-post__stat--like {
  gap: var(--space-xs);
  min-width: 0;
  width: auto;
  color: var(--color-gray-muted);
  cursor: pointer;
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.single-post__stat--like:hover,
.single-post__stat--like:focus-visible {
  color: var(--color-blue-hero);
  outline: none;
  transform: scale(1.05);
}

.single-post__stat--like.is-liked,
.single-post__stat--like:disabled {
  color: #e25555;
  cursor: default;
  transform: none;
}

.single-post__stat--like.is-liked svg path,
.single-post__stat--like:disabled svg path {
  fill: currentColor;
}

.single-post__stat--like.is-loading {
  opacity: 0.6;
}

.single-post__stat--link {
  transition: color var(--transition-fast);
}

.single-post__stat--link:hover,
.single-post__stat--link:focus-visible {
  color: var(--color-blue-hero);
  outline: none;
}

.single-post__body {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--color-black);
}

.single-post__body > *:first-child {
  margin-top: 0;
}

.single-post__body > *:last-child {
  margin-bottom: 0;
}

.single-post__body h2,
.single-post__body h3,
.single-post__body h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.3;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.single-post__body p {
  margin-bottom: var(--space-md);
}

.single-post__body a {
  color: var(--color-blue-hero);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.single-post__body a:hover,
.single-post__body a:focus-visible {
  color: var(--color-black);
  outline: none;
}

.single-post__body ul,
.single-post__body ol {
  margin-bottom: var(--space-md);
  padding-left: var(--space-xl);
}

.single-post__body li {
  margin-bottom: var(--space-sm);
}

.single-post__body blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--color-yellow);
  background-color: var(--color-gray-100);
  font-style: italic;
}

.single-post__body .wp-block-image,
.single-post__body figure {
  margin-block: var(--space-lg);
  max-width: none;
  width: 100%;
}

.single-post__body .wp-block-image img,
.single-post__body figure img,
.single-post__body img {
  display: block;
  float: none;
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: var(--radius-md);
}

.single-post__body .wp-block-image img,
.single-post__body figure img {
  margin-block: 0;
}

.single-post__body > img,
.single-post__body p img {
  margin-block: var(--space-lg);
}

.single-post__body .alignleft,
.single-post__body .alignright,
.single-post__body .aligncenter,
.single-post__body .wp-block-image.alignleft,
.single-post__body .wp-block-image.alignright,
.single-post__body .wp-block-image.aligncenter {
  float: none;
  margin-inline: 0;
  width: 100%;
  max-width: none;
  text-align: inherit;
}

.single-post__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-gray-200);
}

.single-post__share-label {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray-text);
}

.single-post__share {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.single-post__share-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.single-post__share-link:hover,
.single-post__share-link:focus-visible {
  background-color: var(--color-teal);
  outline: none;
  transform: scale(1.05);
}

.single-post__share-link--copy.is-copied {
  background-color: var(--color-teal);
  color: var(--color-blue-hero);
}

.single-post__nav {
  display: grid;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.single-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.single-post__nav-link:hover,
.single-post__nav-link:focus-visible {
  border-color: var(--color-teal);
  background-color: var(--color-white);
  outline: none;
}

.single-post__nav-link--next {
  text-align: right;
}

.single-post__nav-direction {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-teal-dark);
}

.single-post__nav-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-black);
}

.single-post__comments {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
}

.single-post__comments .comments-title,
.single-post__comments .comment-reply-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 800;
}

.single-post__comments .comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.single-post__comments .comment {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-sm);
}

.single-post__comments .comment-author {
  font-family: var(--font-heading);
  font-weight: 700;
}

.single-post__comments .comment-meta {
  font-size: var(--text-sm);
  color: var(--color-gray-muted);
  margin-bottom: var(--space-sm);
}

.single-post__comments input[type="text"],
.single-post__comments input[type="email"],
.single-post__comments input[type="url"],
.single-post__comments textarea {
  width: 100%;
  padding: var(--space-md);
  border: var(--border-width) solid var(--color-gray-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
}

.single-post__comments input[type="submit"] {
  padding: var(--space-md) var(--space-xl);
  background-color: var(--color-yellow);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-weight: 800;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.single-post__comments input[type="submit"]:hover,
.single-post__comments input[type="submit"]:focus-visible {
  background-color: var(--color-yellow-hover);
  outline: none;
}