/* =========================================================
   BeautyUni — blog styles (loaded only on /blog pages, after beautyuni.css).
   Uses the tokens defined in split.css.
   ========================================================= */

/* ---------- blog ---------- */
.post { max-width: 820px; margin-inline: auto; }
.post .kicker a { color: inherit; text-decoration: none; }
.post h1 { font-size: var(--step-4); line-height: 1.1; margin-bottom: 18px; }
.post .lede { max-width: none; margin-bottom: 18px; }
.post__meta { font-size: var(--step--1); margin: 0 0 28px; }
.post__cover { margin: 0 0 32px; }
.post__cover img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.post__body img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post__body p { margin: 0 0 1.1em; }
.post__body blockquote { margin: 1.6em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--plum); color: #35313a; font-size: var(--step-1); }
.post__body blockquote p { margin: 0; }
.post__back { margin-top: 48px; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 0 0 32px; background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 4vw, 40px); margin-top: 48px; }
.post-card { border-top: 2px solid var(--ink); padding-top: 18px; }
.post-card > a { display: block; color: inherit; text-decoration: none; }
.post-card__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; margin-bottom: 16px; border-radius: var(--radius); }
.post-card__meta { display: block; font-size: var(--step--1); color: var(--muted); margin-bottom: 8px; }
.post-card h2 { font-size: var(--step-1); margin: 0 0 8px; }
.post-card p { margin: 0 0 12px; color: var(--muted); font-size: var(--step--1); }
.post-card:hover h2 { color: var(--plum); }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }