/* Fenstur guide and SEO refinements - August 2026 */
.blog-index__hero,
.blog-article__header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 18%, rgba(170, 90, 53, .34), transparent 29%),
    linear-gradient(135deg, #17241e 0%, #20342b 62%, #294238 100%);
  color: var(--white);
}

.blog-index__hero {
  width: var(--page);
  margin: clamp(18px, 3vw, 42px) auto 0;
  padding: clamp(76px, 10vw, 145px) clamp(30px, 7vw, 105px);
  border-radius: 24px 24px 88px 24px;
  box-shadow: 0 28px 70px rgba(22, 34, 28, .16);
}

.blog-article__header {
  width: var(--page);
  margin: clamp(18px, 3vw, 42px) auto 0;
  padding: clamp(60px, 8vw, 112px) clamp(30px, 7vw, 105px) clamp(105px, 12vw, 165px);
  border-radius: 24px 24px 92px 24px;
  box-shadow: 0 28px 70px rgba(22, 34, 28, .14);
}

.blog-index__hero::after,
.blog-article__header::after {
  content: "";
  position: absolute;
  width: clamp(180px, 26vw, 430px);
  aspect-ratio: 1;
  right: clamp(-170px, -8vw, -70px);
  bottom: clamp(-250px, -14vw, -120px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 34px rgba(255, 255, 255, .025), 0 0 0 68px rgba(255, 255, 255, .018);
  pointer-events: none;
}

.blog-index__hero > *,
.blog-article__header > * {
  position: relative;
  z-index: 1;
}

.blog-index__hero h1,
.blog-article__header h1 {
  max-width: 1040px;
}

.blog-index__hero > p:last-child,
.blog-article__dek,
.blog-article__header nav {
  color: #e1e6e1;
}

.blog-article__header nav a {
  color: #f5eee5;
}

.blog-article__hero {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 80px), 1340px);
  max-height: 720px;
  margin: clamp(-82px, -6vw, -52px) auto 0;
  border: 9px solid var(--paper);
  border-radius: 52px 16px 52px 16px;
  overflow: hidden;
  box-shadow: 0 30px 75px rgba(29, 37, 33, .2);
}

.blog-article__hero img {
  height: min(54vw, 680px);
}

.blog-article__layout {
  padding-top: clamp(90px, 11vw, 160px);
}

.blog-choice-grid,
.blog-figure-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 34px 0 16px;
}

.blog-choice-grid article {
  min-height: 245px;
  padding: 30px;
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-radius: 24px 8px 24px 8px;
}

.blog-choice-grid article:nth-child(2) {
  background: #20342b;
  border-color: #20342b;
}

.blog-choice-grid article:nth-child(2) h3,
.blog-choice-grid article:nth-child(2) p,
.blog-choice-grid article:nth-child(2) li {
  color: #f5f0e8;
}

.blog-choice-grid h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: clamp(27px, 2.6vw, 38px);
  font-weight: 400;
  line-height: 1.08;
}

.blog-choice-grid p,
.blog-choice-grid li {
  font-size: 16px;
  line-height: 1.65;
}

.blog-choice-grid ul {
  margin-top: 14px;
}

.blog-callout {
  margin: 34px 0;
  padding: 28px 30px;
  background: #efe4d7;
  border-left: 4px solid var(--copper);
  border-radius: 6px 22px 22px 6px;
}

.blog-callout strong {
  display: block;
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 16px;
}

.blog-callout p {
  margin: 0;
  font-size: 16px;
}

.blog-figure-pair figure {
  margin: 0;
  padding: 20px;
  background: #f2eee7;
  border-radius: 28px 10px 28px 10px;
}

.blog-figure-pair img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.blog-figure-pair figcaption {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.blog-detail-figure {
  margin: clamp(1.75rem, 4vw, 3rem) 0;
  padding: clamp(.75rem, 2vw, 1.25rem);
  background: #f4efe8;
  border-radius: 2.25rem .75rem 2.25rem .75rem;
  box-shadow: 0 1.25rem 3rem rgba(25, 48, 40, .12);
}

.blog-detail-figure img {
  display: block;
  width: 100%;
  max-height: 42rem;
  object-fit: contain;
  border-radius: 1.65rem .45rem 1.65rem .45rem;
  background: #fff;
}

.blog-detail-figure figcaption {
  padding: .85rem .45rem .2rem;
  color: #53625c;
  font-size: .92rem;
  line-height: 1.5;
}

.blog-detail-figure--damage {
  max-width: 42rem;
}

.blog-article__body a:not(.button) {
  color: var(--copper-dark);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.blog-article__body p + p,
.blog-article__body p + ul,
.blog-article__body ul + p {
  margin-top: 20px;
}

.blog-article__body li + li {
  margin-top: 7px;
}

.blog-card {
  border-top: 0;
}

.blog-card__image {
  border-radius: 30px 10px 30px 10px;
  box-shadow: 0 18px 45px rgba(29, 37, 33, .1);
}

.blog-card__copy {
  padding: 0 10px;
}

@media (max-width: 900px) {
  .blog-index__hero,
  .blog-article__header {
    border-radius: 18px 18px 58px 18px;
  }

  .blog-article__hero {
    width: calc(100% - 38px);
    border-width: 6px;
    border-radius: 34px 10px 34px 10px;
  }
}

@media (max-width: 620px) {
  .blog-index__hero,
  .blog-article__header {
    width: calc(100% - 24px);
    margin-top: 12px;
    padding-inline: 24px;
    border-radius: 14px 14px 42px 14px;
  }

  .blog-article__header {
    padding-bottom: 92px;
  }

  .blog-article__hero {
    width: calc(100% - 28px);
    margin-top: -54px;
    border-radius: 28px 8px 28px 8px;
  }

  .blog-article__hero img {
    height: 64vw;
  }

  .blog-choice-grid,
  .blog-figure-pair {
    grid-template-columns: 1fr;
  }

  .blog-choice-grid article {
    min-height: 0;
    padding: 26px 23px;
  }

  .blog-callout {
    padding: 24px 22px;
  }
}