/* ============================================
   BLOG POST — JPP
   Blog listing and post-specific styles
============================================ */

/* ============================================
   BLOG LISTING — blog/index.html
============================================ */
/* HERO */
.blog-hero { padding: 160px 48px 80px; text-align: center; }
.blog-hero h1 { font-family: var(--font-serif); font-size: clamp(42px, 5vw, 72px); font-weight: 400; color: #f5f0e8; margin-bottom: 16px; letter-spacing: -0.02em; }
.blog-hero p { font-size: 19px; color: #b8a48c; max-width: 540px; margin: 0 auto; }

/* FEATURED (top 3) */
.featured-section { padding: 0 48px 80px; }
.featured-section .section-label { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 32px; display: block; }
.featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.featured-card { display: block; border-radius: 3px; overflow: hidden; border: 1px solid rgba(212,165,116,0.1); transition: border-color 0.3s, transform 0.3s; }
.featured-card:hover { border-color: rgba(212,165,116,0.3); transform: translateY(-4px); }
.featured-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.featured-body { padding: 24px; }
.featured-title { font-family: var(--font-serif); font-size: 24px; font-weight: 400; color: #f5f0e8; line-height: 1.2; margin-bottom: 8px; }
.featured-card:hover .featured-title { color: var(--accent); }
.featured-desc { font-size: 16px; color: #a89a8c; line-height: 1.6; }

/* ORIGINS SERIES */
.origins-section { padding: 80px 48px; background: #1c1a16; border-top: 1px solid rgba(212,165,116,0.08); border-bottom: 1px solid rgba(212,165,116,0.08); }
.origins-inner { max-width: 1200px; margin: 0 auto; }
.origins-section h2 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 44px); font-weight: 400; color: #f5f0e8; margin-bottom: 8px; text-align: center; }
.origins-sub { font-size: 19px; color: #b8a48c; text-align: center; margin-bottom: 48px; }
.origins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.origins-card { display: block; border-radius: 3px; overflow: hidden; border: 1px solid rgba(212,165,116,0.1); transition: border-color 0.3s, transform 0.3s; }
.origins-card:hover { border-color: rgba(212,165,116,0.3); transform: translateY(-4px); }
.origins-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.origins-title { font-family: var(--font-serif); font-size: 24px; font-weight: 400; color: #e8ddd0; padding: 20px; line-height: 1.25; }
.origins-card:hover .origins-title { color: var(--accent); }
.origins-desc { font-size: 16px; color: #a89a8c; padding: 0 20px 20px; line-height: 1.5; }

/* ALL ARTICLES */
.all-section { padding: 80px 48px; }
.all-section h2 { font-family: var(--font-serif); font-size: clamp(28px, 4vw, 44px); font-weight: 400; color: #f5f0e8; margin-bottom: 48px; text-align: center; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; }
.article-card { display: block; border-radius: 3px; overflow: hidden; border: 1px solid rgba(212,165,116,0.08); transition: border-color 0.3s, transform 0.3s; }
.article-card:hover { border-color: rgba(212,165,116,0.28); transform: translateY(-3px); }
.article-img-wrap { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.article-body { padding: 22px; }
.article-title { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: #e8ddd0; line-height: 1.25; margin-bottom: 6px; }
.article-card:hover .article-title { color: var(--accent); }
.article-desc { font-size: 15px; color: #8a7c6e; line-height: 1.55; }

/* BLOG FOOTER */
.blog-footer { background: #0d0b09; padding: 56px 48px 40px; border-top: 1px solid rgba(212,165,116,0.08); }
.blog-footer-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.blog-footer-wordmark { font-family: var(--font-serif); font-size: 20px; color: var(--accent); }
.blog-footer-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.blog-footer-links a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #4a4540; transition: color 0.2s; }
.blog-footer-links a:hover { color: var(--accent); }
.blog-footer-copy { width: 100%; font-size: 12px; color: #2e2a26; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.04); }

/* ============================================
   INDIVIDUAL BLOG POST
============================================ */

/* HERO — background image + text overlay */
.post-hero {
  position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
}
.post-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(10,8,6,0.3) 0%,
    rgba(10,8,6,0.4) 40%,
    rgba(10,8,6,0.75) 70%,
    rgba(10,8,6,0.95) 100%
  );
}
.post-hero-content {
  position: relative; z-index: 1;
  width: 100%; max-width: 980px; margin: 0 auto;
  padding-top: 72px; padding-bottom: 0; padding-left: 48px; padding-right: 48px;
}
.post-breadcrumb {
  font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 24px;
}
.post-breadcrumb a { color: var(--accent); }
.post-breadcrumb a:hover { opacity: 0.75; }
.post-breadcrumb-sep { color: rgba(212,165,116,0.35); margin: 0 10px; }
.post-title {
  font-family: var(--font-serif); font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 400; line-height: 1.08; color: #f5f0e8;
  margin-bottom: 28px; letter-spacing: -0.01em;
}
.post-meta {
  display: flex; align-items: center; flex-wrap: wrap;
  font-family: var(--font-sans); font-size: 18px; font-weight: 300; letter-spacing: 0.03em;
}
.post-meta-item { color: var(--accent); }
.post-meta-dot { color: rgba(212,165,116,0.3); margin: 0 12px; }

/* ARTICLE BODY — warm white */
.post-body-wrap { background: #fafaf8; }
.post-body { max-width: 760px; margin: 0 auto; padding: 72px 48px 96px; }

/* H1 in body = article title */
.post-body > h1:first-child { font-family: var(--font-serif); font-size: clamp(32px, 4vw, 50px); font-weight: 400; color: #1a1612; line-height: 1.1; margin: 0 0 48px; letter-spacing: -0.02em; }

/* H2 = major section break */
.post-body h2 { font-family: var(--font-serif); font-size: clamp(30px, 5vw, 38px); font-weight: 400; color: #1a1612; line-height: 1.15; margin: 100px 0 28px; letter-spacing: -0.01em; padding-top: 12px; border-top: 1px solid rgba(212,165,116,0.2); }

/* H3 = subsection */
.post-body h3 { font-family: var(--font-serif); font-size: clamp(26px, 4vw, 36px); font-weight: 400; color: #2a2018; line-height: 1.2; margin: 72px 0 20px; letter-spacing: -0.01em; }
.post-body h4 { font-family: var(--font-serif); font-size: clamp(24px, 3.5vw, 32px); font-weight: 400; color: #2a2018; line-height: 1.2; margin: 64px 0 16px; letter-spacing: -0.01em; }
.post-body h4 strong { font-weight: 400; }

/* BODY COPY */
.post-body p { font-size: 19px; line-height: 1.95; color: #3a3330; margin: 0 0 32px; }
.post-body h2+p, .post-body h3+p { margin-top: 4px; }

/* LISTS */
.post-body ul, .post-body ol { padding-left: 28px; margin: 28px 0 36px; }
.post-body li { font-size: 19px; line-height: 1.85; color: #3a3330; margin-bottom: 20px; padding-bottom: 0; }
.post-body li p { margin: 0; padding: 0; }
.post-body li:last-child { margin-bottom: 0; }

/* BLOCKQUOTES */
.post-body blockquote { border-left: 3px solid #d4a574; padding: 28px 36px; margin: 56px 0; background: rgba(212,165,116,0.05); border-radius: 0 2px 2px 0; }
.post-body blockquote p { font-family: var(--font-serif); font-size: 24px; font-style: italic; color: #2a2018; margin: 0; line-height: 1.55; letter-spacing: -0.01em; }

/* INLINE */
.post-body b { color: #1a1612; font-weight: 500 !important; }
.post-body p b:only-child { font-size: 19px; font-weight: 400; display: block; margin-bottom: 12px; }
.post-body em, .post-body i { font-style: italic; color: #4a3a2a; }

/* LINKS */
.post-body a { color: #8b6740; border-bottom: 1px solid rgba(212,165,116,0.5); padding-bottom: 1px; transition: all 0.2s; text-decoration: none; }
.post-body a *{ text-decoration: none !important; }
.post-body a:hover { color: #d4a574; border-color: #d4a574; }

/* HR */
.post-body hr { border: none; border-top: 1px solid rgba(212,165,116,0.2); margin: 64px 0; }

/* IMAGES */
.post-body img { max-width: 100%; height: auto; border-radius: 2px; margin: 48px 0; display: block; }

/* TABLE OF CONTENTS */
.post-toc { background: rgba(212,165,116,0.06); border: 1px solid rgba(212,165,116,0.18); border-radius: 3px; padding: 28px 32px; margin: 0 0 56px; }
.post-toc-label { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, #d4a574); margin-bottom: 16px; display: block; }
.post-toc ol { padding-left: 20px; margin: 0; }
.post-toc li { font-size: 16px; line-height: 1.65; color: #5a4a3a; margin-bottom: 10px; }
.post-toc li:last-child { margin-bottom: 0; }
.post-toc a { color: #8b6740 !important; border-bottom: none !important; }
.post-toc a:hover { color: var(--accent, #d4a574) !important; }

/* INLINE CTA / CALL HIGHLIGHT */
.post-inline-cta { background: #1c1a16; border: 1px solid rgba(212,165,116,0.2); border-radius: 3px; padding: 32px 36px; margin: 56px 0; text-align: center; }
.post-inline-cta p { font-size: 17px; color: #b8a48c; margin: 0 0 20px; line-height: 1.65; }
.post-inline-cta a { display: inline-block; background: var(--accent, #d4a574); color: #141210; font-family: var(--font-sans, 'Jost', sans-serif); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 14px 32px; border: none; border-radius: 1px; text-decoration: none !important; border-bottom: none !important; }

/* POST CTA */
.post-cta { background: #1c1a16; padding: 72px 48px; text-align: center; border-top: 1px solid rgba(212,165,116,0.1); }
.post-cta-inner { max-width: 540px; margin: 0 auto; }
.post-cta h3 { font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: #f5f0e8; margin-bottom: 12px; }
.post-cta p { font-size: 15px; color: #7a6d5e; margin-bottom: 36px; line-height: 1.7; }
.post-cta-form { display: flex; gap: 12px; max-width: 480px; margin: 0 auto; flex-wrap: wrap; }
.post-cta-form input { flex: 1; min-width: 220px; padding: 14px 18px; background: rgba(255,255,255,0.05); border: 1px solid rgba(212,165,116,0.25); border-radius: 1px; color: #e8ddd0; font-family: var(--font-sans); font-size: 14px; outline: none; }
.post-cta-form input::placeholder { color: rgba(232,221,208,0.25); }
.post-cta-form button { background: var(--accent); color: #141210; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; padding: 14px 28px; border: none; border-radius: 1px; cursor: pointer; }
.post-cta-fine { font-size: 12px; color: #3d3530; margin-top: 16px; }

/* POST FOOTER */
.post-footer { background: #0d0b09; padding: 56px 48px 40px; border-top: 1px solid rgba(212,165,116,0.08); }
.post-footer-inner { max-width: 1160px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.post-footer-wordmark { font-family: var(--font-serif); font-size: 20px; color: var(--accent); }
.post-footer-links { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.post-footer-links a { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #4a4540; transition: color 0.2s; }
.post-footer-links a:hover { color: var(--accent); }
.post-footer-copy { width: 100%; font-size: 12px; color: #2e2a26; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.04); }

/* RELATED POSTS */
.related-section { background: #141210; padding: 72px 48px; border-top: 1px solid rgba(212,165,116,0.1); }
.related-inner { max-width: 960px; margin: 0 auto; }
.related-heading { font-family: var(--font-serif); font-size: 28px; font-weight: 400; color: #f5f0e8; margin-bottom: 36px; text-align: center; letter-spacing: -0.01em; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.related-card { display: block; border-radius: 3px; overflow: hidden; border: 1px solid rgba(212,165,116,0.12); transition: border-color 0.3s, transform 0.3s; text-decoration: none; }
.related-card:hover { border-color: rgba(212,165,116,0.3); transform: translateY(-4px); }
.related-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.related-title { font-family: var(--font-serif); font-size: 20px; font-weight: 400; color: #e8ddd0; padding: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.related-card:hover .related-title { color: #d4a574; }

/* ============================================
   RESPONSIVE — Blog
============================================ */
@media (max-width: 768px) {
  .blog-hero { padding: 120px 24px 60px; }
  .featured-section { padding: 0 24px 60px; }
  .featured-grid { grid-template-columns: 1fr; }
  .origins-section { padding: 60px 24px; }
  .origins-grid { grid-template-columns: 1fr; }
  .all-section { padding: 60px 24px; }
  .articles-grid { grid-template-columns: 1fr; }
  .blog-footer { padding: 40px 24px 32px; }
  .blog-footer-inner { flex-direction: column; align-items: flex-start; }

  .post-hero { min-height: 60vw; }
  .post-hero-content { padding: 88px 24px 52px; }
  .post-title { font-size: clamp(26px, 7vw, 42px); }
  .post-body { padding: 40px 20px 64px; }
  .post-cta { padding: 56px 24px; }
  .post-footer { padding: 40px 24px 32px; }
  .post-footer-inner { flex-direction: column; align-items: flex-start; }
  .post-body h2 { font-size: 28px !important; }
  .post-body h3 { font-size: 24px !important; }
  .post-body h4 { font-size: 22px !important; }
  .post-breadcrumb { font-size: 11px; letter-spacing: 0.08em; }
  .post-meta { font-size: 11px; }
  .post-meta-dot { margin: 0 6px; }

  .related-section { padding: 56px 24px; }
  .related-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .related-title { font-size: 18px; padding: 16px; }
}

@media (max-width: 480px) {
  .origins-grid { grid-template-columns: 1fr; }
}