.content-page .grain {
  opacity: 0.028;
}

.content-header {
  background: rgba(246, 242, 234, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--line);
}

.content-main {
  min-height: 100vh;
  padding-top: 6rem;
}

.content-hero {
  padding: 3rem var(--pad-x) 2rem;
  max-width: 980px;
}

.content-title {
  max-width: 14ch;
}

.content-intro {
  max-width: 60ch;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.12rem);
}

.content-meta {
  margin-top: 1.2rem;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.content-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.content-tags li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 0.95rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.content-grid-section,
.content-body-section,
.related-section,
.content-cta {
  padding: 0 0 4rem;
}

.content-grid,
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 0 var(--pad-x);
}

.content-card {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 253, 248, 0.88);
  padding: 1.6rem;
  box-shadow: 0 16px 38px rgba(23, 19, 14, 0.08);
}

.content-card-kicker {
  margin-bottom: 0.75rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.content-card h2 {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
}

.content-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.content-card-link {
  display: inline-block;
  margin-top: 1.2rem;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 700;
}

.content-article {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.prose h2,
.prose h3 {
  margin-top: 2.5rem;
  margin-bottom: 0.9rem;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.72;
}

.prose ul {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 1rem 0;
}

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

.content-faq {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.related-columns {
  display: grid;
  gap: 3rem;
}

.related-columns h2 {
  padding: 0 var(--pad-x);
  margin-bottom: 1rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.content-cta-inner {
  margin: 0 var(--pad-x);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(50% 45% at 15% 20%, rgba(154, 47, 31, 0.07), transparent 70%),
    rgba(255, 253, 248, 0.88);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-soft);
}

.content-cta-inner h2 {
  margin-bottom: 1rem;
  max-width: 12ch;
}

.content-cta-inner p {
  max-width: 56ch;
  margin-bottom: 1.5rem;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .content-grid,
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .content-main {
    padding-top: 5.6rem;
  }
}

@media (max-width: 720px) {
  .content-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .content-hero {
    padding-top: 2rem;
  }

  .content-title {
    max-width: none;
  }
}