/* Turbo Tap Masters — blog. Sits on top of home.css (tokens, .page, .nav, .foot, .stores).
   Pages are generated by scripts/build-blog.py; bump BLOG_CSS there when this file changes. */

.nav__links a[aria-current] { color: var(--gold-hi); }

/* ── shared: kicker line (category · date · read time) ── */
.kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--muted); margin: 0; }
.kicker .cat {
  font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.kicker a.cat:hover { color: var(--gold-hi); }
.page .kicker { margin-top: 0; color: var(--muted); }

/* ── index ── */
.blog { padding-top: 116px; }
.blog__inner { max-width: 1120px; margin: 0 auto; }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.blog-head > div { max-width: 680px; }
.blog-rss {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
}
.blog-rss svg { color: var(--gold); }
.blog-rss:hover { border-color: var(--gold); color: var(--gold-hi); }

.blog-cats { display: flex; gap: 8px; overflow-x: auto; margin: 32px calc(var(--pad) * -1) 28px; padding: 2px var(--pad) 6px; scrollbar-width: none; }
.blog-cats::-webkit-scrollbar { display: none; }
.blog-cats a {
  flex: none; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px;
}
.blog-cats a:hover { border-color: var(--gold); color: var(--gold-hi); }
.blog-cats a[aria-current] { background: var(--gold); border-color: var(--gold); color: #221503; }
.blog-empty { color: var(--muted); }
.blog [hidden] { display: none !important; } /* the filter hides cards whose own display beats the UA rule */

/* ── cards ── */
.post-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: 22px; background: var(--bg-2);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.post-card:hover { border-color: rgba(242, 182, 50, 0.55); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .post-card, .post-card:hover { transition: none; transform: none; } }
.post-card__art { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-3); }
.post-card__art img { width: 100%; height: 100%; object-fit: cover; }
.post-card__text { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.page .post-card__text p { margin-top: 0; }
.post-card__title { font-size: 24px; line-height: 1.15; margin: 0; color: var(--ink); }
.page .post-card__title { margin-top: 0; color: var(--ink); }
.post-card__title a { color: inherit; text-decoration: none; }
/* the title link covers the whole card */
.post-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card__title a:focus-visible { outline: none; }
.post-card:has(.post-card__title a:focus-visible) { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
.post-card__lead { color: rgba(255, 255, 255, 0.8); font-size: 16px; line-height: 1.55; }

.post-card--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.post-card--featured .post-card__art { aspect-ratio: auto; min-height: 340px; }
.post-card--featured .post-card__text { justify-content: center; padding: 36px 40px; gap: 14px; }
.post-card--featured .post-card__title { font-size: clamp(30px, 3.4vw, 44px); }
.post-card--featured .post-card__lead { font-size: 18px; }
@media (max-width: 860px) {
  .post-card--featured { display: flex; }
  .post-card--featured .post-card__art { aspect-ratio: 16 / 9; min-height: 0; }
  .post-card--featured .post-card__text { padding: 22px 22px 26px; }
}

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 22px; }
.post-grid--two, .post-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 960px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid, .post-grid--two { grid-template-columns: minmax(0, 1fr); } }

/* ── post ── */
.post .page__inner { max-width: 760px; }
.post h1 { margin-top: 14px; }
.post__cover { margin: 36px 0 0; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; background: var(--bg-3); }
.post__cover img { width: 100%; height: 100%; object-fit: cover; }

.post__toc { margin-top: 32px; padding: 20px 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-3); }
.page .post__toc p { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.post__toc ol { padding-left: 20px; }
.page .post__toc li { margin-top: 4px; }
.post__toc a { color: var(--gold-hi); text-decoration: none; font-weight: 700; }
.post__toc a:hover { text-decoration: underline; }

.post__body { font-size: 18px; line-height: 1.7; }
.post__body h2 { scroll-margin-top: 96px; }
.post__body h3 { scroll-margin-top: 96px; }
.post__body a { color: var(--gold-hi); text-underline-offset: 3px; }
.post__body strong { color: var(--ink); }
.post__body code { font-size: 0.9em; padding: 2px 7px; border-radius: 7px; background: var(--bg-3); border: 1px solid rgba(255, 255, 255, 0.08); }
.post__body hr { border: 0; height: 1px; background: var(--line); margin: 48px 0; }
.post__body img { border-radius: 18px; }
.post__figure { margin: 32px 0 0; }
.post__figure img { margin: 0 auto; border: 1px solid var(--line); }
.post__figure figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); text-align: center; }
.post__body blockquote { margin-top: 28px; padding: 6px 0 6px 22px; border-left: 3px solid var(--gold); }
.post__body blockquote p:first-child { margin-top: 0; }
.post__body blockquote p { font-size: 19px; color: var(--ink); }
.post__body .callout { padding: 18px 22px; border-left: 0; border-radius: 18px; border: 1px solid var(--line); background: var(--bg-2); }
.post__body .callout p { font-size: 17px; color: rgba(255, 255, 255, 0.86); }
.post__body .callout strong:first-child { color: var(--gold); }
.post__stores { margin-top: 24px; }

.page .post__byline { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }

.post-more { margin-top: 64px; }
.post-more h2 { margin-top: 0; }
.post-more .post-card__title { font-size: 21px; }
.post-more__all { font-weight: 700; color: var(--gold-hi); text-decoration: none; }
.post-more__all:hover { text-decoration: underline; }