/* Enviya blog: index + long-form articles.
   Loaded after enviya.css; reuses its :root tokens (colours, fonts). */

.blog-main { padding-top: 108px; padding-bottom: 96px; min-height: 74vh; position: relative; }
.blog-main::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, 92vw); height: 440px; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, rgba(226, 198, 203, .45), transparent 70%);
}

.blog-label { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; color: var(--gold-text); text-transform: uppercase; margin-bottom: 14px; }

/* ── index header ── */
.blog-head { max-width: 720px; margin: 0 auto 44px; }
.blog-head h1 { font-family: var(--serif); font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 600; line-height: 1.08; margin-bottom: 14px; }
.blog-head p { color: var(--ink2); font-size: 1.12rem; max-width: 620px; }

/* ── index list ── */
.post-list { max-width: 720px; margin: 0 auto; display: grid; gap: 16px; }
.post-card {
  display: block; padding: 28px 30px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: border-color .3s, transform .3s, box-shadow .3s;
}
.post-card:hover { border-color: var(--blush); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.post-card .uc-label { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; color: var(--gold-text); text-transform: uppercase; margin-bottom: 10px; }
.post-card h2 { font-family: var(--serif); font-size: clamp(1.35rem, 3.4vw, 1.7rem); font-weight: 600; line-height: 1.2; margin-bottom: 8px; color: var(--ink); }
.post-card p { color: var(--ink2); font-size: .98rem; margin: 0; }

/* ── article ── */
.post { max-width: 720px; margin: 0 auto; }
.post-header { margin-bottom: 40px; }
.post-header h1 { font-family: var(--serif); font-size: clamp(2rem, 5.4vw, 3.1rem); font-weight: 600; line-height: 1.1; margin-bottom: 16px; }
.post-meta { font-family: var(--mono); font-size: .76rem; color: var(--ink3); letter-spacing: .08em; }
.post-header::after { content: ''; display: block; width: 100%; height: 1px; margin-top: 30px; background: linear-gradient(90deg, var(--blush), transparent); }

.post-body { font-size: 1.075rem; line-height: 1.78; color: var(--ink); }
.post-body p { margin: 0 0 22px; }
.post-body h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.6vw, 2rem); font-weight: 600; line-height: 1.2; margin: 44px 0 14px; }
.post-body a { color: var(--mauve-deep); text-decoration: underline; text-decoration-color: var(--blush); text-underline-offset: 3px; }
.post-body a:hover { text-decoration-color: var(--mauve); }
.post-body strong { font-weight: 700; color: var(--ink); }
.post-body ul { list-style: none; margin: 0 0 22px; padding: 0; }
.post-body li { position: relative; padding-left: 24px; margin-bottom: 12px; line-height: 1.7; }
.post-body li::before { content: '✦'; position: absolute; left: 0; top: .05em; color: var(--gold); font-size: .82rem; }

/* ── article CTA ── */
.post-cta { margin-top: 52px; padding: 38px 34px; border: 1px solid var(--line); border-radius: var(--r-card-lg); background: var(--blush-soft); text-align: center; }
.post-cta .blog-label { margin-bottom: 10px; }
.post-cta h2 { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 600; margin-bottom: 12px; }
.post-cta p { color: var(--ink2); font-size: 1rem; max-width: 480px; margin: 0 auto 22px; }
.post-cta .store-buttons { justify-content: center; }

.post-back { display: inline-block; margin-top: 44px; font-family: var(--mono); font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.post-back:hover { color: var(--mauve-deep); }
.post-back::before { content: '← '; }