/* ===== BLOG PAGE ===== */
/* Text sits directly on the crimson gradient — same family as the landing page.
   The gradient is SOFT (darkest->lightest span is small, no bright band) and
   SPREAD (one sweep per 300vh, so it cannot read as repeating lines).
   170deg matches the landing page's gradient direction.

   Above the gradient sits a seamless OCTAGON tile (八字 = 8 characters = 8
   sides). Each octagon is LINKED to its four neighbours by short edge bars —
   beads on a chain — in both axes. It repeats every 54.6px in both axes, so
   the pattern covers the ENTIRE page, not just the first screen. The old
   square .bg-grid overlay is removed from blog.php — the octagon replaces it. */
body {
  background-color: #3A0000; /* base under everything — never white */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20viewBox%3D%220%200%2054.627%2054.627%22%20width%3D%2254.627%22%20height%3D%2254.627%22%3E%3Cg%20stroke%3D%22rgba(212,160,23,0.07)%22%20stroke-width%3D%221%22%3E%3Cpath%20d%3D%22M%2046.627,35.314%20L%2035.314,46.627%20L%2019.314,46.627%20L%208.000,35.314%20L%208.000,19.314%20L%2019.314,8.000%20L%2035.314,8.000%20L%2046.627,19.314%20Z%22%20fill%3D%22none%22/%3E%3Cline%20x1%3D%228.000%22%20y1%3D%2227.314%22%20x2%3D%220.000%22%20y2%3D%2227.314%22/%3E%3Cline%20x1%3D%2246.627%22%20y1%3D%2227.314%22%20x2%3D%2254.627%22%20y2%3D%2227.314%22/%3E%3Cline%20x1%3D%2227.314%22%20y1%3D%228.000%22%20x2%3D%2227.314%22%20y2%3D%220.000%22/%3E%3Cline%20x1%3D%2227.314%22%20y1%3D%2246.627%22%20x2%3D%2227.314%22%20y2%3D%2254.627%22/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(170deg, #3A0000 0%, #4E0606 30%, #5C0000 50%, #4E0606 70%, #3A0000 100%);
  background-size: 54.627px 54.627px, 100% 300vh;
  background-repeat: repeat, repeat-y;
  background-attachment: scroll, scroll;
}

.blog-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 145px 24px 0; /* Same as .main — clears the fixed logo overlay */
  position: relative;
  z-index: 1; /* Above .bg-grid */
}

/* ===== HERO (index) ===== */
.blog-hero {
  text-align: center;
  padding: 20px 0 36px;
  animation: temple-reveal 0.8s ease-out;
}

.blog-hero-title {
  font-family: var(--font-cn);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--parchment);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 14px;
}

.blog-hero-sub {
  color: var(--gold-dark);
  font-size: 15px;
  max-width: 520px;
  margin: 0 auto 14px;
  line-height: 1.7;
}

/* ===== YEAR SWITCHER ===== */
.blog-years {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 28px;
}

.blog-years a {
  font-size: 12px;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--gold-dark);
  border: 1px solid rgba(165, 124, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  transition: all 0.3s ease;
}

.blog-years a:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.blog-years a.is-active {
  background: rgba(212, 160, 23, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.blog-archive-note {
  text-align: center;
  color: var(--parchment-muted);
  font-size: 12px;
  font-style: italic;
  margin: -16px 0 24px;
}

/* ===== ARTICLE CARD (index) ===== */
.blog-index {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 8px 0 40px;
}

/* Subtle dark card — crimson-tinted, NOT parchment. Matches landing feature cards. */
.blog-card {
  display: block;
  background: rgba(255, 248, 220, 0.04);
  border: 1px solid rgba(165, 124, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 24px 22px;
  text-decoration: none;
  transition: all 0.4s ease;
}

.blog-card:hover {
  border-color: var(--gold-dark);
  background: rgba(255, 248, 220, 0.07);
  box-shadow: 0 0 16px var(--incense-glow);
}

.blog-card-title {
  font-family: var(--font-cn);
  font-size: 18px;
  font-weight: 600;
  color: var(--parchment);
  margin-bottom: 6px;
  line-height: 1.4;
}

.blog-card-meta {
  font-size: 11px;
  color: var(--gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.blog-card-excerpt {
  font-size: 13px;
  color: var(--parchment);
  opacity: 0.85; /* light parchment on dark card — readable */
  line-height: 1.6;
  margin-bottom: 12px;
}

.blog-card-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold);
}

.blog-card:hover .blog-card-link {
  color: var(--gold-bright);
}

/* ===== ARTICLE PAGE ===== */
/* No card background — text sits directly on the crimson gradient,
   exactly like the landing page. Light text = readable on dark red. */
.blog-breadcrumb {
  margin-bottom: 20px;
}

.blog-breadcrumb a {
  color: var(--gold-dark);
  font-size: 13px;
  text-decoration: none;
}

.blog-breadcrumb a:hover {
  color: var(--gold);
}

.blog-article {
  padding: 16px 0 48px;
}

.blog-article-title {
  font-family: var(--font-cn);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--parchment);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
}

.blog-article-meta {
  font-size: 12px;
  color: var(--gold-dark);
  letter-spacing: 0.5px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(165, 124, 0, 0.25);
}

.blog-archived-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(212, 160, 23, 0.5);
  border-radius: 999px;
  padding: 2px 10px;
  vertical-align: middle;
}

.blog-section {
  margin-bottom: 32px;
}

.blog-section h2 {
  font-family: var(--font-cn);
  font-size: 21px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 12px;
  line-height: 1.4;
}

.blog-section p {
  font-size: 15px;
  color: var(--parchment);
  line-height: 1.85;
  margin-bottom: 14px;
  opacity: 0.92;
}

/* ===== FAQ ===== */
.blog-faq {
  margin-bottom: 22px;
}

.blog-faq h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 6px;
}

.blog-faq p {
  font-size: 14px;
  color: var(--parchment);
  line-height: 1.75;
  opacity: 0.88;
}

/* ===== CTA BOX (on gradient, outside card) ===== */
.blog-cta-box {
  text-align: center;
  padding: 40px 0 56px;
}

.blog-cta-box h2 {
  font-family: var(--font-cn);
  font-size: 22px;
  font-weight: 600;
  color: var(--parchment);
  margin-bottom: 8px;
}

.blog-cta-box p {
  color: var(--parchment-muted);
  font-size: 13px;
  margin-bottom: 22px;
}

/* ===== 404 ===== */
.blog-404 {
  text-align: center;
  padding: 80px 0;
}

.blog-404 h1 {
  font-family: var(--font-cn);
  font-size: 28px;
  color: var(--parchment);
  margin-bottom: 12px;
}

.blog-404 p {
  color: var(--parchment-muted);
  font-size: 14px;
  margin-bottom: 24px;
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  .blog-page {
    padding-top: 90px; /* no nav bar — just the logo overlay */
    padding-left: 16px;
    padding-right: 16px;
  }

  .blog-hero {
    padding: 10px 0 24px;
  }

  .blog-hero-title {
    font-size: 24px;
  }

  .blog-hero-sub {
    font-size: 13.5px;
  }

  .blog-article {
    padding: 28px 20px 36px;
  }

  .blog-article-title {
    font-size: 22px;
  }

  .blog-section h2 {
    font-size: 18px;
  }

  .blog-section p {
    font-size: 14px;
    line-height: 1.8;
  }

  .blog-card {
    padding: 20px 16px;
  }

  .blog-card-title {
    font-size: 16px;
  }
}