/* ==========================================================================
   Blog
   --------------------------------------------------------------------------
   Everything is scoped under .eco-blog so it can't be reached by (or reach
   into) style.css, which sets a global `img { width: 100% }`, a global
   `ul { height: 100% }`, restyles bare h1-h5 half a dozen times over and
   paints every `a` the same navy. Article bodies come out of CKEditor as raw
   h2/p/ul/blockquote, so without a scope of our own those global rules decide
   what a post looks like - which is why headings inside posts currently render
   at 14-15px grey.

   Colours are the same tokens navbar.css and footer.css use, so the blog reads
   as one system with the rest of the site.
   ========================================================================== */

.eco-blog {
  /* Surfaces */
  --eco-forest: #2f3f33;
  --eco-forest-deep: #26332a;
  --eco-rule: rgba(47, 63, 51, 0.1);
  --eco-rule-strong: rgba(47, 63, 51, 0.16);
  --eco-sage-tint: #e4ebdc;
  --eco-paper: #fbfaf5;

  /* Brand accents */
  --eco-sage: #acc39b;
  --eco-sage-bright: #c6d9b5;
  --eco-terracotta: #f3987b;
  --eco-terracotta-deep: #f36b42;
  /* Terracotta dark enough to clear 4.5:1 as text on white/paper. */
  --eco-terracotta-ink: #b84e26;
  --eco-sand: #ccb484;

  /* Text */
  --eco-cream: #f8f8f1;
  --eco-ink: #2f3f33;
  --eco-ink-soft: #5a6355;
  --eco-ink-faint: #7a8375;

  --eco-shell: 1180px;
  /* Long-form measure. ~68 characters is the comfortable reading range. */
  --eco-measure: 68ch;

  /* A serif for long-form reading and article titles. Sans stays for UI
     chrome (chips, meta, buttons) so the blog still belongs to the site. */
  --eco-serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;

  --eco-shadow-sm: 0 1px 2px rgba(47, 63, 51, 0.05);
  --eco-shadow-md: 0 12px 26px rgba(47, 63, 51, 0.13);

  background-color: var(--eco-paper);
  color: var(--eco-ink);
  font-size: 1rem;
  line-height: 1.6;
  text-transform: none;
}

.eco-blog *,
.eco-blog *::before,
.eco-blog *::after {
  box-sizing: border-box;
}

/* style.css sets a global `img { width: 100% }`. */
.eco-blog img {
  width: auto;
  max-width: 100%;
  height: auto;
}

.eco-blog svg {
  display: block;
  flex-shrink: 0;
}

/* style.css sets `ul { height: 100%; padding: 0 2px }` for the calendar. */
.eco-blog ul,
.eco-blog ol {
  height: auto;
}

/* One focus ring for every interactive thing in the blog. */
.eco-blog a:focus-visible,
.eco-blog button:focus-visible,
.eco-blog input:focus-visible,
.eco-blog textarea:focus-visible,
.eco-blog select:focus-visible {
  outline: 2px solid var(--eco-terracotta-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.eco-blog__shell {
  width: 100%;
  max-width: var(--eco-shell);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.eco-blog__visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   1. Breadcrumb
   -------------------------------------------------------------------------- */

.blog-crumbs {
  padding: 1rem 0 0;
  font-size: 0.8125rem;
  color: var(--eco-ink-faint);
}

.blog-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-crumbs__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.blog-crumbs__list li + li::before {
  content: "/";
  color: var(--eco-rule-strong);
}

.blog-crumbs a {
  color: var(--eco-ink-soft);
  text-decoration: none;
}

.blog-crumbs a:hover,
.blog-crumbs a:focus {
  color: var(--eco-terracotta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-crumbs__current {
  color: var(--eco-ink-faint);
}

/* --------------------------------------------------------------------------
   2. Page header
   -------------------------------------------------------------------------- */

.blog-hero {
  position: relative;
  overflow: hidden;
  padding: 2.75rem 0 2.5rem;
  background-color: var(--eco-sage-tint);
  background-image:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle at 92% 110%, rgba(172, 195, 155, 0.45), rgba(172, 195, 155, 0) 60%);
  text-align: center;
}

.blog-hero__inner {
  max-width: 46rem;
  margin: 0 auto;
}

.blog-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.7);
  color: var(--eco-forest);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.blog-hero__eyebrow svg {
  color: var(--eco-terracotta-ink);
}

/* style.css pins bare h1 to 22-24px, so the size has to come from here. */
.blog-hero__title {
  margin: 0 0 0.75rem;
  font-family: var(--eco-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--eco-forest);
}

.blog-hero__lead {
  margin: 0 auto;
  max-width: 38rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--eco-ink-soft);
}

.blog-hero__meta {
  margin: 1.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--eco-ink-faint);
}

/* --------------------------------------------------------------------------
   3. Category rail
   -------------------------------------------------------------------------- */

.blog-filters {
  position: relative;
  padding: 1.5rem 0 0.25rem;
}

.blog-filters__label {
  display: block;
  margin-bottom: 0.7rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-ink-faint);
}

/* Horizontal scroll rather than a wrapping heap once there are many
   categories. The scrollbar is hidden but the rail stays keyboard reachable. */
.blog-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 575.98px) {
  .blog-filters__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .blog-filters__list::-webkit-scrollbar {
    display: none;
  }

  .blog-filters__list > li {
    flex: 0 0 auto;
  }
}

.blog-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--eco-rule-strong);
  border-radius: 999px;
  background-color: #fff;
  color: var(--eco-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-chip:hover,
.blog-chip:focus {
  background-color: var(--eco-sage-tint);
  border-color: var(--eco-sage);
  color: var(--eco-forest);
  text-decoration: none;
}

.blog-chip__count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--eco-ink-faint);
}

.blog-chip.is-active {
  background-color: var(--eco-forest);
  border-color: var(--eco-forest);
  color: var(--eco-cream);
}

.blog-chip.is-active .blog-chip__count {
  color: var(--eco-sage-bright);
}

/* --------------------------------------------------------------------------
   4. Section headings
   -------------------------------------------------------------------------- */

.blog-section {
  padding: 2.25rem 0 0;
}

.blog-section--last {
  padding-bottom: 3.5rem;
}

.blog-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1.25rem;
}

.blog-section__title {
  margin: 0;
  font-family: var(--eco-serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--eco-forest);
}

.blog-section__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--eco-ink-faint);
}

/* --------------------------------------------------------------------------
   5. Featured post
   -------------------------------------------------------------------------- */

.blog-featured {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--eco-rule);
  border-radius: 18px;
  background-color: #fff;
  box-shadow: var(--eco-shadow-sm);
  color: var(--eco-ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.blog-featured:hover,
.blog-featured:focus {
  transform: translateY(-3px);
  border-color: var(--eco-rule-strong);
  box-shadow: var(--eco-shadow-md);
  color: var(--eco-ink);
  text-decoration: none;
}

@media (min-width: 768px) {
  .blog-featured {
    grid-template-columns: 1.15fr 1fr;
  }
}

.blog-featured__media {
  position: relative;
  overflow: hidden;
  /* A fixed ratio keeps the row height predictable whatever the host
     uploaded - portrait phone photos included. */
  aspect-ratio: 16 / 10;
  background-color: var(--eco-sage-tint);
}

@media (min-width: 768px) {
  .blog-featured__media {
    aspect-ratio: auto;
    min-height: 340px;
  }
}

.blog-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-featured:hover .blog-featured__media img {
  transform: scale(1.035);
}

.blog-featured__badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  background-color: var(--eco-terracotta-ink);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.blog-featured__body {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.625rem 1.5rem;
}

@media (min-width: 992px) {
  .blog-featured__body {
    padding: 2.25rem 2rem 2rem;
  }
}

.blog-featured__title {
  margin: 0.6rem 0 0.65rem;
  font-family: var(--eco-serif);
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--eco-forest);
}

.blog-featured__excerpt {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--eco-ink-soft);
}

.blog-featured__foot {
  margin-top: auto;
}

.blog-featured__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--eco-terracotta-ink);
}

.blog-featured__more svg {
  transition: transform 0.18s ease;
}

.blog-featured:hover .blog-featured__more svg {
  transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Post grid and cards
   -------------------------------------------------------------------------- */

.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 576px) {
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .blog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.75rem 1.5rem;
  }
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--eco-rule);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: var(--eco-shadow-sm);
  color: var(--eco-ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.post-card:hover,
.post-card:focus {
  transform: translateY(-3px);
  border-color: var(--eco-rule-strong);
  box-shadow: var(--eco-shadow-md);
  color: var(--eco-ink);
  text-decoration: none;
}

.post-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--eco-sage-tint);
}

.post-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.post-card:hover .post-card__media img {
  transform: scale(1.045);
}

/* Placeholder for the (rare) post whose cover image went missing. */
.post-card__media--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--eco-sage);
  background-image: linear-gradient(135deg, #dce8d5, #f4efe1);
}

.post-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.125rem 1.125rem 1rem;
}

.post-card__title {
  margin: 0.55rem 0 0.5rem;
  font-family: var(--eco-serif);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--eco-forest);
}

.post-card__excerpt {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--eco-ink-soft);
}

.post-card__foot {
  margin-top: auto;
}

/* Category pills ---------------------------------------------------------- */

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-tags__item {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background-color: var(--eco-sage-tint);
  color: var(--eco-forest);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
}

a.post-tags__item:hover,
a.post-tags__item:focus {
  background-color: var(--eco-sage);
  color: var(--eco-forest-deep);
  text-decoration: none;
}

/* Byline ------------------------------------------------------------------ */

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--eco-ink-faint);
}

.post-meta__author {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  color: var(--eco-ink-soft);
}

.post-meta__dot {
  color: var(--eco-rule-strong);
}

.post-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.post-meta__item svg {
  color: var(--eco-sage);
}

/* Avatar: a photo when the profile has one, otherwise the initial. */
.eco-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--eco-sage);
  color: var(--eco-forest);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.eco-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eco-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 1.25rem;
}

.eco-avatar--sm {
  width: 34px;
  height: 34px;
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   7. Empty state
   -------------------------------------------------------------------------- */

.blog-empty {
  padding: 3rem 1.5rem;
  border: 1px dashed var(--eco-rule-strong);
  border-radius: 18px;
  background-color: #fff;
  text-align: center;
}

.blog-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: var(--eco-sage-tint);
  color: var(--eco-forest);
}

.blog-empty__title {
  margin: 0 0 0.4rem;
  font-family: var(--eco-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.blog-empty__text {
  margin: 0 auto 1.25rem;
  max-width: 30rem;
  font-size: 0.9375rem;
  color: var(--eco-ink-soft);
}

/* --------------------------------------------------------------------------
   8. Buttons
   -------------------------------------------------------------------------- */

.eco-blog .blog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.65rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: var(--eco-terracotta);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eco-blog .blog-btn:hover,
.eco-blog .blog-btn:focus {
  background-color: var(--eco-terracotta-deep);
  color: #fff;
  text-decoration: none;
}

.eco-blog .blog-btn--ghost {
  background-color: transparent;
  border-color: var(--eco-rule-strong);
  color: var(--eco-ink);
}

.eco-blog .blog-btn--ghost:hover,
.eco-blog .blog-btn--ghost:focus {
  background-color: var(--eco-sage-tint);
  border-color: var(--eco-sage);
  color: var(--eco-forest);
}

.eco-blog .blog-btn--forest {
  background-color: var(--eco-forest);
  color: var(--eco-cream);
}

.eco-blog .blog-btn--forest:hover,
.eco-blog .blog-btn--forest:focus {
  background-color: var(--eco-forest-deep);
  color: var(--eco-cream);
}

.eco-blog .blog-btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   9. Pagination
   -------------------------------------------------------------------------- */

.blog-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.blog-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 40px;
  height: 40px;
  padding: 0 0.7rem;
  border: 1px solid var(--eco-rule-strong);
  border-radius: 999px;
  background-color: #fff;
  color: var(--eco-ink-soft);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-pager__link:hover,
.blog-pager__link:focus {
  background-color: var(--eco-sage-tint);
  border-color: var(--eco-sage);
  color: var(--eco-forest);
  text-decoration: none;
}

.blog-pager__link.is-current {
  background-color: var(--eco-forest);
  border-color: var(--eco-forest);
  color: var(--eco-cream);
  cursor: default;
}

.blog-pager__gap {
  padding: 0 0.25rem;
  color: var(--eco-ink-faint);
}

.blog-pager__status {
  width: 100%;
  margin: 0.85rem 0 0;
  font-size: 0.8125rem;
  color: var(--eco-ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   10. Contribute strip
   --------------------------------------------------------------------------
   Deliberately quiet: the site footer already carries a full "Share your
   region's gems" call to action a few hundred pixels below this one.
   -------------------------------------------------------------------------- */

.blog-invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 3rem;
  padding: 1.5rem 1.625rem;
  border: 1px solid var(--eco-rule);
  border-radius: 16px;
  background-color: var(--eco-sage-tint);
  background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
}

.blog-invite__title {
  margin: 0 0 0.25rem;
  font-family: var(--eco-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.blog-invite__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--eco-ink-soft);
}

/* --------------------------------------------------------------------------
   11. Article layout
   -------------------------------------------------------------------------- */

.article-head {
  padding: 1.75rem 0 0;
  text-align: center;
}

.article-head__inner {
  max-width: 44rem;
  margin: 0 auto;
}

.article-head .post-tags {
  justify-content: center;
  margin-bottom: 0.9rem;
}

.article-head__title {
  margin: 0 0 0.9rem;
  font-family: var(--eco-serif);
  font-size: clamp(1.75rem, 4.2vw, 2.625rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--eco-forest);
}

.article-head .post-meta {
  justify-content: center;
}

.article-head__author {
  color: var(--eco-ink-soft);
  text-decoration: none;
}

.article-head__author:hover,
.article-head__author:focus {
  color: var(--eco-terracotta-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cover ------------------------------------------------------------------- */

.article-cover {
  margin: 1.75rem 0 0;
}

.article-cover__frame {
  overflow: hidden;
  border-radius: 18px;
  background-color: var(--eco-sage-tint);
  box-shadow: var(--eco-shadow-sm);
}

.article-cover img {
  display: block;
  width: 100%;
  max-height: 30rem;
  object-fit: cover;
}

/* Two-column body -------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding: 2.25rem 0 0;
}

@media (min-width: 992px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem;
    align-items: start;
  }
}

.article-main {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   12. Long-form typography
   --------------------------------------------------------------------------
   Post bodies are author-written HTML out of CKEditor: h2/h3, p, ul, ol,
   blockquote, img, table, iframe, and plenty of inline styles. Everything
   below re-establishes sane defaults for that markup, since style.css would
   otherwise render a post heading as 14px grey text.
   -------------------------------------------------------------------------- */

.eco-prose {
  max-width: var(--eco-measure);
  font-family: var(--eco-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2c332d;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .eco-prose {
    font-size: 1.125rem;
  }
}

/* Block spacing. Each direct child carries its own top margin, and the `p`
   rule below deliberately sets only `margin-bottom`: a `.eco-prose p` that
   declared the `margin` shorthand would outrank this selector on specificity
   and collapse every paragraph gap to zero. */
.eco-prose > * {
  margin-top: 1.35rem;
  margin-bottom: 0;
}

.eco-prose > *:first-child {
  margin-top: 0;
}

.eco-prose p {
  margin-bottom: 0;
}

/* Standfirst: the opening paragraph carries a little more weight. */
.eco-prose > p:first-of-type {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--eco-ink);
}

@media (min-width: 768px) {
  .eco-prose > p:first-of-type {
    font-size: 1.25rem;
  }
}

.eco-prose h1,
.eco-prose h2,
.eco-prose h3,
.eco-prose h4,
.eco-prose h5,
.eco-prose h6 {
  margin: 2.5rem 0 0;
  font-family: var(--eco-serif);
  font-weight: 700;
  line-height: 1.3;
  color: var(--eco-forest);
  letter-spacing: -0.005em;
}

.eco-prose h1,
.eco-prose h2 {
  font-size: 1.625rem;
}

.eco-prose h3 {
  font-size: 1.3125rem;
}

.eco-prose h4,
.eco-prose h5,
.eco-prose h6 {
  font-size: 1.125rem;
}

.eco-prose h2 + *,
.eco-prose h3 + *,
.eco-prose h4 + * {
  margin-top: 0.7rem;
}

/* A sage hairline under the main section headings, echoing the footer rules. */
.eco-prose h2 {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--eco-rule);
}

.eco-prose a {
  color: var(--eco-terracotta-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.eco-prose a:hover,
.eco-prose a:focus {
  color: var(--eco-terracotta-deep);
  text-decoration: underline;
}

.eco-prose strong,
.eco-prose b {
  font-weight: 700;
  color: var(--eco-forest);
}

.eco-prose ul,
.eco-prose ol {
  margin: 1.35rem 0 0;
  padding-left: 1.5rem;
}

.eco-prose ul {
  list-style: disc;
}

.eco-prose ol {
  list-style: decimal;
}

.eco-prose li + li {
  margin-top: 0.4rem;
}

.eco-prose li::marker {
  color: var(--eco-sage);
}

.eco-prose blockquote {
  margin: 2rem 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--eco-sage);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--eco-ink-soft);
}

.eco-prose blockquote p {
  margin: 0;
}

.eco-prose blockquote p + p {
  margin-top: 0.75rem;
}

.eco-prose img {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 12px;
}

.eco-prose figure {
  margin: 2rem 0 0;
}

.eco-prose figcaption {
  margin-top: 0.6rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--eco-ink-faint);
  text-align: center;
}

.eco-prose hr {
  margin: 2.5rem 0 0;
  border: 0;
  border-top: 1px solid var(--eco-rule-strong);
}

/* Wide content must scroll inside itself rather than push the page sideways. */
.eco-prose .eco-prose__scroll,
.eco-prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.eco-prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 0.9375rem;
}

.eco-prose th,
.eco-prose td {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--eco-rule-strong);
  text-align: left;
}

.eco-prose th {
  background-color: var(--eco-sage-tint);
  color: var(--eco-forest);
  font-weight: 700;
}

.eco-prose code,
.eco-prose kbd,
.eco-prose samp {
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background-color: var(--eco-sage-tint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875em;
  color: var(--eco-forest-deep);
}

.eco-prose pre {
  margin: 2rem 0 0;
  padding: 1rem 1.125rem;
  overflow-x: auto;
  border-radius: 12px;
  background-color: var(--eco-forest);
  color: var(--eco-cream);
}

.eco-prose pre code {
  padding: 0;
  background: none;
  color: inherit;
}

/* Authors paste bare YouTube/Maps iframes; keep them inside the column. */
.eco-prose iframe,
.eco-prose video,
.eco-prose embed,
.eco-prose object {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-radius: 12px;
}

.eco-prose iframe[src*="youtube"],
.eco-prose iframe[src*="youtu.be"],
.eco-prose iframe[src*="vimeo"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* CKEditor writes width/height attributes and float styles inline; they win
   over the rules above on small screens and cause sideways scroll. */
@media (max-width: 767.98px) {
  .eco-prose img,
  .eco-prose iframe,
  .eco-prose table {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --------------------------------------------------------------------------
   13. Article footer: tags and sharing
   -------------------------------------------------------------------------- */

.article-foot {
  max-width: var(--eco-measure);
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--eco-rule);
}

.article-foot__block + .article-foot__block {
  margin-top: 1.5rem;
}

.article-foot__label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-ink-faint);
}

.share-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--eco-rule-strong);
  border-radius: 999px;
  background-color: #fff;
  color: var(--eco-ink-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.share-btn:hover,
.share-btn:focus {
  background-color: var(--eco-sage-tint);
  border-color: var(--eco-sage);
  color: var(--eco-forest);
  text-decoration: none;
}

.share-btn svg {
  color: var(--eco-ink-faint);
}

.share-btn:hover svg,
.share-btn:focus svg {
  color: var(--eco-forest);
}

.share-btn.is-copied {
  background-color: var(--eco-sage);
  border-color: var(--eco-sage);
  color: var(--eco-forest-deep);
}

/* --------------------------------------------------------------------------
   14. Prev / next
   -------------------------------------------------------------------------- */

.article-nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: var(--eco-measure);
  margin-top: 2.5rem;
}

@media (min-width: 576px) {
  .article-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--eco-rule);
  border-radius: 14px;
  background-color: #fff;
  color: var(--eco-ink);
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.article-nav__link:hover,
.article-nav__link:focus {
  border-color: var(--eco-sage);
  box-shadow: var(--eco-shadow-sm);
  color: var(--eco-ink);
  text-decoration: none;
}

.article-nav__link--next {
  text-align: right;
}

.article-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eco-terracotta-ink);
}

.article-nav__link--next .article-nav__dir {
  justify-content: flex-end;
}

.article-nav__title {
  font-family: var(--eco-serif);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--eco-forest);
}

/* --------------------------------------------------------------------------
   15. Sidebar
   -------------------------------------------------------------------------- */

.article-aside {
  min-width: 0;
}

@media (min-width: 992px) {
  .article-aside {
    position: sticky;
    /* Clears the header, which is not fixed but can be scrolled past. */
    top: 1.5rem;
  }
}

.aside-card {
  padding: 1.25rem;
  border: 1px solid var(--eco-rule);
  border-radius: 16px;
  background-color: #fff;
  box-shadow: var(--eco-shadow-sm);
}

.aside-card + .aside-card {
  margin-top: 1.25rem;
}

.aside-card__title {
  margin: 0 0 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--eco-ink-faint);
}

/* Author ------------------------------------------------------------------ */

.author-card__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.9rem;
}

.author-card__name {
  margin: 0;
  font-family: var(--eco-serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--eco-forest);
}

.author-card__role {
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
  color: var(--eco-ink-faint);
}

.author-card__bio {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--eco-ink-soft);
}

.author-card__actions {
  display: grid;
  gap: 0.5rem;
}

/* Map -------------------------------------------------------------------- */

.aside-map {
  overflow: hidden;
  border-radius: 12px;
  background-image: linear-gradient(135deg, #dce8d5, #f4efe1);
}

/* The map needs an explicit height; Leaflet measures its container. */
.eco-blog #map {
  height: 300px;
  width: 100%;
}

.aside-map__note {
  margin: 0.7rem 0 0;
  font-size: 0.8125rem;
  color: var(--eco-ink-faint);
}

/* Mini post list --------------------------------------------------------- */

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

.mini-list li + li {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--eco-rule);
}

.mini-post {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--eco-ink);
  text-decoration: none;
}

.mini-post:hover,
.mini-post:focus {
  color: var(--eco-ink);
  text-decoration: none;
}

.mini-post__thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 10px;
  background-color: var(--eco-sage-tint);
}

.mini-post__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mini-post__title {
  display: block;
  font-family: var(--eco-serif);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--eco-forest);
}

.mini-post:hover .mini-post__title,
.mini-post:focus .mini-post__title {
  color: var(--eco-terracotta-ink);
}

.mini-post__date {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--eco-ink-faint);
}

/* --------------------------------------------------------------------------
   16. Comments
   -------------------------------------------------------------------------- */

.comments {
  max-width: var(--eco-measure);
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--eco-rule);
}

.comments__title {
  margin: 0 0 1.5rem;
  font-family: var(--eco-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.comment-form {
  padding: 1.375rem;
  border: 1px solid var(--eco-rule);
  border-radius: 16px;
  background-color: var(--eco-sage-tint);
  background-image: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0) 65%);
}

.comment-form__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--eco-forest);
}

/* style.css sets a global `textarea { width: 70% }`. */
.eco-blog .comment-form__field {
  display: block;
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--eco-rule-strong);
  border-radius: 10px;
  background-color: #fff;
  color: var(--eco-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.eco-blog textarea.comment-form__field {
  min-height: 7rem;
  height: auto;
  resize: vertical;
}

.eco-blog .comment-form__field:focus {
  border-color: var(--eco-sage);
  outline: 2px solid var(--eco-terracotta-deep);
  outline-offset: 1px;
}

.eco-blog .comment-form__field::placeholder {
  color: var(--eco-ink-faint);
}

.comment-form__row + .comment-form__row {
  margin-top: 0.85rem;
}

.comment-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
}

.comment-form__hint {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--eco-ink-soft);
}

.comment-form__hint a {
  color: var(--eco-terracotta-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Comment list ----------------------------------------------------------- */

.comment-list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.comment-list__item + .comment-list__item {
  margin-top: 1rem;
}

.comment {
  display: flex;
  gap: 0.85rem;
  padding: 1.125rem;
  border: 1px solid var(--eco-rule);
  border-radius: 14px;
  background-color: #fff;
}

.comment__body {
  min-width: 0;
}

.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.35rem;
}

.comment__author {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.comment__date {
  font-size: 0.75rem;
  color: var(--eco-ink-faint);
}

.comment__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--eco-ink-soft);
  white-space: pre-line;
  overflow-wrap: break-word;
}

/* Replies sit indented under their parent. */
.comment-replies {
  margin: 0.75rem 0 0 1.25rem;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--eco-sage-tint);
  list-style: none;
}

.comment-replies li + li {
  margin-top: 0.75rem;
}

.comments__empty {
  margin: 2rem 0 0;
  font-size: 0.9375rem;
  color: var(--eco-ink-faint);
}

/* --------------------------------------------------------------------------
   17. Related posts
   -------------------------------------------------------------------------- */

.related {
  margin-top: 3.5rem;
  padding: 2.5rem 0 3.5rem;
  border-top: 1px solid var(--eco-rule);
  background-color: #fff;
}

.related__title {
  margin: 0 0 1.5rem;
  font-family: var(--eco-serif);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--eco-forest);
}

/* --------------------------------------------------------------------------
   18. Blog form pages (write, edit, contact author, messages)
   -------------------------------------------------------------------------- */

.blog-form-page {
  padding: 2rem 0 4rem;
}

.blog-form-page__inner {
  max-width: 52rem;
  margin: 0 auto;
}

.blog-form-page__inner--narrow {
  max-width: 38rem;
}

.blog-form-page__title {
  margin: 0 0 0.4rem;
  font-family: var(--eco-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--eco-forest);
}

.blog-form-page__lead {
  margin: 0 0 1.75rem;
  font-size: 1rem;
  color: var(--eco-ink-soft);
}

.blog-form-card {
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--eco-rule);
  border-radius: 18px;
  background-color: #fff;
  box-shadow: var(--eco-shadow-sm);
}

@media (min-width: 768px) {
  .blog-form-card {
    padding: 2rem;
  }
}

/* Django renders these forms with `as_p`, so the selectors have to work on
   plain `<p><label>…</label><input></p>` output. The old templates floated
   every label and input, which is what made the fields sit at random widths. */
.blog-form-card form p,
.blog-form-card form .form-row {
  margin: 0 0 1.25rem;
  overflow: visible;
}

.blog-form-card label {
  display: block;
  float: none;
  clear: none;
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.eco-blog .blog-form-card input[type="text"],
.eco-blog .blog-form-card input[type="email"],
.eco-blog .blog-form-card input[type="url"],
.eco-blog .blog-form-card input[type="number"],
.eco-blog .blog-form-card input[type="file"],
.eco-blog .blog-form-card select,
.eco-blog .blog-form-card textarea {
  display: block;
  float: none;
  clear: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--eco-rule-strong);
  border-radius: 10px;
  background-color: #fff;
  color: var(--eco-ink);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.eco-blog .blog-form-card textarea {
  min-height: 8rem;
  resize: vertical;
}

.eco-blog .blog-form-card input:focus,
.eco-blog .blog-form-card select:focus,
.eco-blog .blog-form-card textarea:focus {
  border-color: var(--eco-sage);
}

.blog-form-card .helptext,
.blog-form-card .form-text {
  display: block;
  float: none;
  clear: none;
  margin: 0.35rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--eco-ink-faint);
}

.blog-form-card .errorlist {
  margin: 0 0 0.4rem;
  padding: 0;
  float: none;
  clear: none;
  list-style: none;
  color: #a3301b;
  font-size: 0.8125rem;
  font-weight: 600;
}

.blog-form-card ul:not(.errorlist) {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

/* Radio/checkbox groups (post status) read better as a stack of choices. */
.blog-form-card ul:not(.errorlist) li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.blog-form-card ul:not(.errorlist) li label {
  margin: 0;
  font-weight: 400;
  font-size: 0.9375rem;
  color: var(--eco-ink-soft);
}

.eco-blog .blog-form-card input[type="radio"],
.eco-blog .blog-form-card input[type="checkbox"] {
  width: auto;
  margin-top: 0.25rem;
}

.blog-form-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--eco-rule);
}

/* Message thread --------------------------------------------------------- */

.msg-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.msg-bubble {
  max-width: 85%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-size: 0.9375rem;
  line-height: 1.55;
}

.msg-bubble--in {
  align-self: flex-start;
  border: 1px solid var(--eco-rule);
  background-color: #fff;
  border-bottom-left-radius: 4px;
}

.msg-bubble--out {
  align-self: flex-end;
  background-color: var(--eco-sage-tint);
  border-bottom-right-radius: 4px;
}

.msg-bubble__who {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--eco-ink-faint);
}

.msg-bubble__text {
  margin: 0;
  color: var(--eco-ink);
  overflow-wrap: break-word;
}

/* Confirmation panel (e-mail sent) --------------------------------------- */

.blog-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--eco-sage);
  border-radius: 16px;
  background-color: var(--eco-sage-tint);
}

.blog-notice__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  color: var(--eco-forest);
}

.blog-notice__title {
  margin: 0 0 0.25rem;
  font-family: var(--eco-serif);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--eco-forest);
}

.blog-notice__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--eco-ink-soft);
}

/* --------------------------------------------------------------------------
   19. Motion preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eco-blog *,
  .eco-blog *::before,
  .eco-blog *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .post-card:hover,
  .blog-featured:hover {
    transform: none;
  }

  .post-card:hover .post-card__media img,
  .blog-featured:hover .blog-featured__media img,
  .blog-featured:hover .blog-featured__more svg {
    transform: none;
  }
}