body.blog-body {
  background: radial-gradient(circle at top left, rgba(179, 83, 50, 0.08), transparent 55%), radial-gradient(circle at bottom right, rgba(19, 71, 51, 0.08), transparent 55%), var(--color-bg);
}

.blog-main {
  padding-top: calc(var(--header-height-mobile) * 0.2);
}

@media (min-width: 1024px) {
  .blog-main {
    padding-top: calc(var(--header-height-desktop) * 0.2);
  }
}

.hero--blog {
  position: relative;
}

.hero-inner--blog {
  align-items: stretch;
}

.hero-copy--blog {
  max-width: 40rem;
}

.hero-media--blog {
  min-width: 0;
}

.hero-panel--blog-primary {
  position: relative;
}

.hero-panel--blog-primary::before {
  content: "";
  position: absolute;
  inset: 0.6rem;
  border-radius: var(--radius-xl);
  border: var(--border-width-hairline) dashed rgba(179, 83, 50, 0.35);
  opacity: 0.7;
  pointer-events: none;
}

.hero-panel-title {
  font-size: var(--text-2xl);
}

.hero-panel-text {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--color-text-soft);
}

.hero-panel-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.hero-panel-list li + li {
  margin-top: 0.15em;
}

.hero-mosaic--blog {
  max-height: 32rem;
}

.hero-mosaic-image {
  border-radius: var(--radius-lg);
}

.hero-actions--blog .btn {
  max-width: 100%;
}

@media (max-width: 767.98px) {
  .hero-mosaic--blog {
    max-height: none;
  }
}

.blog-section {
  position: relative;
}

.blog-section--latest::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(179, 83, 50, 0.25), rgba(19, 71, 51, 0.25));
}

.section-header--blog {
  max-width: 46rem;
}

.blog-grid {
  display: grid;
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-lg);
}

.blog-card {
  position: relative;
  min-width: 0;
}

.blog-card-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  border: var(--border-width-hairline) solid var(--color-border-subtle);
  box-shadow: var(--shadow-subtle);
}

.blog-card--feature .blog-card-inner {
  background: radial-gradient(circle at top left, rgba(179, 83, 50, 0.16), transparent 55%), var(--color-surface);
}

.blog-card--portrait .blog-card-inner {
  background: radial-gradient(circle at bottom right, rgba(19, 71, 51, 0.12), transparent 55%), var(--color-surface);
}

.blog-card--landscape .blog-card-inner,
.blog-card--note .blog-card-inner {
  background: var(--color-surface);
}

.blog-card-header {
  min-width: 0;
}

.blog-card-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.blog-card-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
}

.blog-card-meta {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.blog-card-body {
  font-size: var(--text-md);
}

.blog-card-body p {
  margin-bottom: var(--space-sm);
}

.blog-card-list {
  margin: 0;
  padding-left: 1.1em;
  font-size: var(--text-sm);
  color: var(--color-text-soft);
}

.blog-card-list li + li {
  margin-top: 0.15em;
}

.blog-card-footer {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

.blog-card-tag {
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: var(--border-width-hairline) solid rgba(60, 40, 20, 0.18);
  font-size: var(--text-xs);
  color: var(--color-text-soft);
  white-space: nowrap;
}

.blog-card[data-grid-accent="terracotta"] .blog-card-tag {
  border-color: rgba(179, 83, 50, 0.6);
  color: var(--color-accent-terracotta);
}

.blog-card[data-grid-accent="forest"] .blog-card-tag {
  border-color: rgba(19, 71, 51, 0.6);
  color: var(--color-accent-forest);
}

.blog-card[data-grid-accent="soft"] .blog-card-inner {
  background: linear-gradient(135deg, rgba(179, 83, 50, 0.08), rgba(19, 71, 51, 0.06));
}

@media (min-width: 1024px) {
  .blog-card--feature {
    grid-column: span 2;
  }
}

.featured-topics {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: var(--space-xl);
  align-items: start;
}

.featured-topic-inner {
  padding: var(--space-lg);
}

.featured-topic--wide .featured-topic-inner {
  height: 100%;
}

.featured-topic-header {
  min-width: 0;
}

.featured-topic-kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.featured-topic-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.featured-topic-text {
  font-family: var(--font-serif);
  font-size: var(--text-md);
  color: var(--color-text-soft);
}

.featured-topic-meta-row {
  font-size: var(--text-xs);
}

.featured-topic-pill {
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  border: var(--border-width-hairline) solid rgba(60, 40, 20, 0.18);
  background-color: rgba(253, 248, 240, 0.9);
}

.featured-topic-grid {
  align-self: stretch;
}

.featured-topic-grid .featured-topic-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.featured-topic-grid .featured-topic-text {
  flex: 1 1 auto;
}

@media (max-width: 1023.98px) {
  .featured-topics {
    grid-template-columns: minmax(0, 1fr);
  }
}

.newsletter-shell {
  padding: var(--space-xl);
}

.newsletter-layout {
  min-width: 0;
}

.newsletter-form {
  min-width: 0;
}

.newsletter-actions .btn {
  max-width: 100%;
}

.newsletter-legal {
  margin-top: var(--space-sm);
}

@media (max-width: 767.98px) {
  .newsletter-shell {
    padding: var(--space-lg);
  }
}

.blog-section,
.hero--blog,
.blog-card-inner,
.featured-topic-inner,
.newsletter-shell {
  border-radius: var(--radius-xl);
}

.blog-section--latest .blog-grid,
.blog-section--featured .featured-topics,
.blog-section--newsletter .newsletter-layout {
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

.blog-section--latest[data-section-active="false"] .blog-grid,
.blog-section--featured[data-section-active="false"] .featured-topics,
.blog-section--newsletter[data-section-active="false"] .newsletter-layout {
  opacity: 0;
  transform: translateY(12px);
}

.blog-section--latest[data-section-active="true"] .blog-grid,
.blog-section--featured[data-section-active="true"] .featured-topics,
.blog-section--newsletter[data-section-active="true"] .newsletter-layout {
  opacity: 1;
  transform: translateY(0);
}