.nav a[aria-current="page"]::after { transform: scaleX(1); }

.post-hero {
  position: relative;
  padding: 56px 0 40px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 143, 181, .22), transparent 42%),
    radial-gradient(circle at 6% 90%, rgba(255, 214, 228, .5), transparent 40%),
    linear-gradient(180deg, #fff5f8 0%, #fff 100%);
}
.post-hero-inner { max-width: 1120px; }
.post-crumb { margin: 0 0 6px; font-size: 14px; color: var(--muted); }
.post-crumb a:hover { color: var(--pink-deep); }
.post-crumb span { margin: 0 8px; color: #d6c3ba; }
.post-hero h1 {
  max-width: 860px; margin: 12px 0 14px;
  font-size: clamp(30px, 4vw, 44px); text-transform: none;
}
.post-lead { max-width: 720px; margin: 0 0 18px; font-size: 18px; color: #44403c; }
.post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 0; font-size: 14px; color: var(--muted);
}

.post-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start;
  padding: 8px 0 72px;
}
.post-cover {
  margin: 0 0 32px; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 24px; background: #fde7ef;
  box-shadow: 0 20px 50px rgba(159, 18, 57, .1);
}
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-content { font-size: 17px; line-height: 1.8; color: #292524; }
.post-content h2 {
  margin: 40px 0 12px; font-size: clamp(22px, 2.4vw, 26px); line-height: 1.3;
  letter-spacing: -0.02em; text-transform: none; scroll-margin-top: 96px;
}
.post-content p { margin: 0 0 16px; }
.post-content ul { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; list-style: none; }
.post-content li { position: relative; padding-left: 26px; }
.post-content li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
}
.post-content a { color: var(--pink-deep); font-weight: 600; border-bottom: 1px solid rgba(232, 67, 128, .35); }
.post-content a:hover { border-bottom-color: var(--pink-deep); }
.post-tip {
  margin: 24px 0; padding: 18px 22px; border-radius: 16px;
  background: #fff5f8; border-left: 4px solid var(--pink);
}
.post-tip p { margin: 0; }

.post-aside { position: sticky; top: 96px; display: grid; gap: 20px; }
.post-toc, .post-cta-card {
  padding: 22px; border: 1px solid #f6dfe7; border-radius: 20px; background: #fff;
  box-shadow: 0 12px 32px rgba(159, 18, 57, .06);
}
.post-aside-title { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.post-toc ol { display: grid; gap: 8px; margin: 0; padding-left: 20px; font-size: 14px; color: var(--muted); }
.post-toc a:hover { color: var(--pink-deep); }
.post-cta-card { background: linear-gradient(160deg, #fff0f5 0%, #fff 70%); }
.post-cta-card p:not(.post-aside-title) { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.post-cta-card .btn { width: 100%; }
.post-cta-qr {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed #f3cdda;
  font-size: 13px; font-weight: 600; line-height: 1.45;
}
.post-cta-qr img {
  width: 72px; height: 72px; flex-shrink: 0; padding: 4px;
  border: 1px solid #f6dfe7; border-radius: 12px; background: #fff; object-fit: contain;
}
.post-cta-qr:hover span { color: var(--pink-deep); }

.post-related { padding: 64px 0 72px; background: linear-gradient(180deg, #fff5f8 0%, #fff 100%); }

.blog-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.blog-filter button {
  padding: 8px 18px; border: 1px solid #f3cdda; border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.blog-filter button:hover { border-color: var(--pink); color: var(--pink-deep); }
.blog-filter button.is-active { background: var(--pink); border-color: var(--pink); color: #fff; }

.blog-list { padding: 16px 0 80px; }
.post-feature {
  display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: 32px; overflow: hidden;
  border: 1px solid #f6dfe7; border-radius: 24px; background: #fff;
  box-shadow: 0 16px 40px rgba(159, 18, 57, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.post-feature:hover { transform: translateY(-4px); box-shadow: 0 24px 52px rgba(159, 18, 57, .14); }
.post-feature[hidden] { display: none; }
.post-feature-img { margin: 0; min-height: 340px; overflow: hidden; background: #fde7ef; }
.post-feature-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post-feature:hover .post-feature-img img { transform: scale(1.04); }
.post-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 36px 40px; }
.post-feature-body h2 {
  margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.3;
  letter-spacing: -0.02em; text-transform: none;
}
.post-feature-body > p:not(.post-card-meta) { margin: 0; color: var(--muted); }
.post-feature-body .btn { align-self: flex-start; margin-top: 6px; }
.blog-empty { margin: 0; padding: 40px 0; text-align: center; color: var(--muted); }

@media (max-width: 960px) {
  .post-layout { grid-template-columns: 1fr; gap: 32px; }
  .post-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-feature { grid-template-columns: 1fr; }
  .post-feature-img { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .post-hero { padding: 36px 0 28px; }
  .post-lead { font-size: 16px; }
  .post-content { font-size: 16px; }
  .post-cover { border-radius: 18px; margin-bottom: 24px; }
  .post-aside { grid-template-columns: 1fr; }
  .post-feature-body { padding: 24px 22px 26px; }
  .post-related { padding: 48px 0 56px; }
  .blog-list { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-feature, .post-feature-img img, .blog-filter button { transition: none; }
}