/* Blog pages (scripts/build_blog.py). Loaded after landing.css (body.pricing-only):
   the header, footer and buttons come from the landing. */

body.blog-page {
  background-attachment:fixed;
}
.blog-nav {
  align-items:center;
}
.blog-main {
  max-width:1120px;
}

/* Article: one readable column. */
.blog-article {
  max-width:760px;
  margin:0 auto;
}
.blog-article .eyebrow a,.blog-meta {
  color:var(--muted);
}
.blog-article h1 {
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.08;
  letter-spacing:-.04em;
  margin:14px 0 18px;
}
.blog-meta {
  font-size:13px;
  margin-bottom:32px;
}
.blog-hero {
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid var(--line);
  margin-bottom:40px;
}
.blog-body h2 {
  font-size:clamp(24px,2.6vw,32px);
  line-height:1.2;
  letter-spacing:-.025em;
  margin:48px 0 16px;
}
.blog-body h3 {
  font:600 17px/1.4 var(--font);
  margin:28px 0 10px;
}
.blog-body p,.blog-body li {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 80%,rgb(var(--bg-rgb)));
  font-size:17px;
  line-height:1.75;
}
.blog-body p,.blog-body ul,.blog-body ol,.blog-body figure,.blog-body table {
  margin:0 0 20px;
}
.blog-body ul,.blog-body ol {
  padding-inline-start:22px;
}
.blog-body li {
  margin-bottom:8px;
}
.blog-body li::marker {
  color:var(--lilac);
}
.blog-body strong {
  color:var(--white);
  font-weight:600;
}
.blog-body a {
  color:var(--lilac);
  text-decoration:underline;
  text-underline-offset:4px;
  text-decoration-color:rgb(var(--accent-rgb) / .31);
}
.blog-body kbd {
  font:500 13px var(--font);
  padding:2px 7px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgb(var(--fg-rgb) / .05);
}
.blog-body figure img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--line);
}
.blog-body figcaption {
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.blog-body table {
  width:100%;
  border-collapse:collapse;
  font-size:15px;
}
.blog-body th,.blog-body td {
  text-align:start;
  vertical-align:top;
  padding:10px 12px 10px 0;
  border-bottom:1px solid var(--line);
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 80%,rgb(var(--bg-rgb)));
  line-height:1.5;
}
.blog-body th {
  color:var(--white);
  font-weight:600;
}
.blog-cta {
  margin:56px 0 0;
  padding:28px;
  border:1px solid rgb(var(--accent-rgb) / .22);
  border-radius:16px;
  background:rgb(var(--accent-rgb) / .05);
  display:grid;
  gap:20px;
  justify-items:start;
}
.blog-cta p {
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 87%,rgb(var(--bg-rgb)));
  font-size:16px;
  line-height:1.6;
}

/* Index: a grid of article cards. */
.blog-index h1 {
  font-size:clamp(40px,5vw,64px);
  letter-spacing:-.045em;
}
.blog-lead {
  max-width:640px;
  margin:18px 0 48px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}
.blog-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:28px;
}
.blog-card a {
  display:block;
  height:100%;
  padding:14px 14px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  transition:border-color .2s,background-color .2s;
}
.blog-card a:hover {
  border-color:rgb(var(--accent-rgb) / .4);
  background:rgb(var(--accent-rgb) / .04);
}
.blog-card img {
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  margin-bottom:18px;
}
.blog-card h2 {
  font-size:22px;
  line-height:1.25;
  letter-spacing:-.02em;
  margin:0 6px 10px;
}
.blog-card p {
  margin:0 6px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}

@media(max-width:760px) {
  /* The landing hides its header menu on phones; the blog keeps a short one. */
  .blog-page .header nav.blog-nav {
    display:flex;
    gap:14px;
    font-size:13px;
  }
  .blog-page .header nav.blog-nav>a:not(.header-install) {
    display:none;
  }
  .blog-main {
    padding-top:32px;
  }
  .blog-body p,.blog-body li {
    font-size:16px;
  }
  .blog-cta {
    padding:22px;
  }
}

/* Code samples (GLSL in the shader article). */
.blog-body pre {
  margin:0 0 20px;
  padding:18px 20px;
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgb(var(--fg-rgb) / .03);
}
.blog-body code {
  font:400 13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:color-mix(in srgb,rgb(var(--fg-rgb)) 93%,rgb(var(--bg-rgb)));
}
.blog-body p code,.blog-body li code {
  padding:1px 5px;
  border-radius:5px;
  background:rgb(var(--fg-rgb) / .06);
}