:root {
  --night: #f7f5f1;
  --ink: #171323;
  --muted: #746c7d;
  --line: rgba(23, 19, 35, .13);
  --cyan: #7448f4;
  --pink: #ff685d;
}

html { color-scheme: light; }
body {
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
  color: var(--ink);
  background: #f7f5f1;
  font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 7%, rgba(255, 104, 93, .2), transparent 26rem),
    radial-gradient(circle at 5% 52%, rgba(116, 72, 244, .14), transparent 25rem),
    linear-gradient(180deg, #fbfaf7 0%, #f6f1ff 58%, #fff8e5 100%);
}

.page::before { display: none; }
.blog-main { padding: 78px 0 104px; }
.blog-intro h1 {
  color: var(--ink);
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
}
.blog-intro h1 em { color: #7448f4; }
.blog-intro p { color: #746c7d; }

.nav-actions a.current,
.nav-actions a[aria-current="page"] { color: #7448f4; position: relative; }
.nav-actions a.current::after,
.nav-actions a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: #ff685d;
}

.blog-filter {
  color: #665e6e;
  border-color: rgba(23, 19, 35, .13);
  background: rgba(255, 255, 255, .64);
}
.blog-filter:hover { color: #171323; border-color: rgba(116, 72, 244, .38); background: #fff; }
.blog-filter:focus-visible,
.post-link:focus-visible,
.article-back:focus-visible,
.article-breadcrumb a:focus-visible { outline-color: #7448f4; }
.blog-filter[aria-pressed="true"] {
  color: #fff;
  border-color: #7448f4;
  background: #7448f4;
  box-shadow: 0 8px 22px rgba(116, 72, 244, .2);
}
.blog-search {
  color: #7448f4;
  border-color: rgba(23, 19, 35, .13);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 30px rgba(65, 44, 112, .07);
}
.blog-search:focus-within {
  border-color: rgba(116, 72, 244, .48);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(116, 72, 244, .08), 0 14px 34px rgba(65, 44, 112, .1);
}
.blog-search input { color: #171323; }
.blog-search input::placeholder { color: #9a929f; }
.blog-search-clear { color: #665e6e; background: rgba(116, 72, 244, .08); }
.post-count { color: #8c8493; }

.featured-post,
.post-card {
  border-color: rgba(23, 19, 35, .11);
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 28px 72px rgba(65, 44, 112, .12);
  backdrop-filter: blur(16px);
}
.featured-post:hover,
.post-card:hover { border-color: rgba(116, 72, 244, .26); box-shadow: 0 34px 84px rgba(65, 44, 112, .17); }
.featured-media,
.post-media,
.article-cover { background: #e8e2ef; }
.featured-media::after,
.post-media::after { background: linear-gradient(180deg, transparent 66%, rgba(23, 19, 35, .18)); }
.featured-copy h2,
.post-card h2,
.article-header h1,
.article-body h2 {
  color: #171323;
  font-family: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
}
.featured-copy p,
.post-card p { color: #746c7d; }
.post-kicker { color: #8c8493; }
.post-kicker .category {
  color: #5d38ca;
  border-color: rgba(116, 72, 244, .2);
  background: rgba(116, 72, 244, .08);
}
.post-kicker .dot::before { color: #aaa2b0; }
.post-link {
  color: #fff;
  background: #171323;
  box-shadow: 0 12px 28px rgba(23, 19, 35, .16);
}
.post-link:hover { box-shadow: 0 16px 34px rgba(116, 72, 244, .22); }
.post-card-cta { color: #5d38ca; }
.post-card-cta .ui-icon { border-color: rgba(116, 72, 244, .2); background: rgba(116, 72, 244, .06); }
.blog-empty { color: #746c7d; border-color: rgba(23, 19, 35, .16); background: rgba(255, 255, 255, .54); }

.article-breadcrumb { color: #948c9c; }
.article-breadcrumb a { color: #6f6677; }
.article-breadcrumb a:hover,
.article-back:hover { color: #7448f4; }
.article-breadcrumb-separator { color: rgba(23, 19, 35, .24); }
.article-breadcrumb [aria-current="page"] { color: #342e3a; }
.article-back { color: #665e6e; }
.article-header .article-excerpt { color: #746c7d; }
.article-cover { border-color: rgba(23, 19, 35, .12); box-shadow: 0 26px 70px rgba(65, 44, 112, .13); }
.article-body p { color: #5f5768; }
.article-body .lead { color: #2d2732; }
.article-body blockquote { color: #5d38ca; border-color: #ff685d; }
.requires-js { color: #665e6e; background: rgba(255, 255, 255, .6); }
.blog-main + .site-footer { margin-top: 0; }

@media (max-width: 640px) {
  .blog-main { padding: 48px 0 72px; }
  .blog-intro h1 { white-space: normal; font-size: clamp(38px, 12vw, 56px); }
  .featured-copy h2 { min-height: 0; max-height: none; }
}