body { font-family: Arial, "Helvetica Neue", sans-serif; }
.header { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.brand { min-width: 0; }
.brand-tagline { line-height: 1.5; }
.vi-blog-languages {
  display: flex; align-items: center; gap: 10px;
  margin-left: auto; white-space: nowrap;
}
.vi-blog-languages a, .vi-blog-nav a {
  color: #9dd9ff; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.vi-blog-nav {
  display: flex; flex-wrap: wrap; flex-basis: 100%;
  gap: 4px 22px; align-items: center;
}
.vi-blog-nav a { white-space: nowrap; }
.blog-hero h1 {
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.35; letter-spacing: -.015em;
}
.blog-hero p { line-height: 1.8; }
.vi-translation-note {
  margin-top: 16px; padding: 16px 18px;
  border-left: 3px solid #7cc7ff; background: rgba(124,199,255,.05);
}
.vi-blog-filters[hidden], .post-card[hidden] { display: none !important; }
.vi-blog-filters .rubrics button {
  font: inherit; color: inherit; cursor: pointer;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid rgba(124,199,255,.3); background: rgba(12,20,38,.6);
  line-height: 1.5;
}
.vi-blog-filters .rubrics button[aria-pressed="true"] {
  color: #fff; border-color: #7cc7ff; background: rgba(74,163,255,.22);
}
.vi-blog-count { margin: 12px 0 20px; font-size: 14px; color: #b8c9de; }
.vi-source-label { color: #9dd9ff; font-size: 12px; margin: 0 0 10px; }
.post-card h2 { line-height: 1.4; }
.post-card p, .blog-editor p, .footer-copy { line-height: 1.7; }
.post-card, .post-card-body, .blog-editor p { min-width: 0; }
h1, h2, p, .brand-tagline, .footer-links a { overflow-wrap: anywhere; }
.blog-editor { display: flex; gap: 16px; align-items: center; margin-top: 28px; }
.blog-editor-photo { flex: 0 0 64px; }
.blog-editor-photo img { border-radius: 50%; width: 64px; height: 64px; }
.footer-links { flex-wrap: wrap; }
:focus-visible { outline: 2px solid #9dd9ff; outline-offset: 4px; }
@media (max-width: 640px) {
  .header { gap: 12px; }
  .vi-blog-nav { gap: 2px 16px; }
  .blog-editor { align-items: flex-start; }
}