/* Article cards and the card grid (Blog list and single article "Keep reading"). Ported from the artifact's index + pages.css, scoped
   under .gx; rem converted to px for legacy pages. Plain CSS on purpose. */
.gx .blog__grid {
  display:grid;
  gap:var(--space-10);
}
.gx .post__link {
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:var(--space-4);
  height:100%;
  color:var(--color-text);
  text-decoration:none;
}
.gx .post__link:active {
  opacity:.85;
}
.gx .post__link:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .post__meta {
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding-top:var(--space-3);
  border-top:var(--border-hair) solid var(--color-border-strong);
  transition:border-color var(--dur-base) var(--ease-out);
  font-family:var(--font-mono);
  font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
}
.gx .post__tag {
  color:var(--color-accent-active);
}
.gx .post__read {
  color:var(--color-text-muted);
}
.gx .post__read:before {
  content:"/";
  margin-right:var(--space-3);
  color:var(--color-border-strong);
}
.gx .post__arrow {
  display:grid;
  place-items:center;
  width:var(--space-8);
  height:var(--space-8);
  margin-left:auto;
  border:var(--border-hair) solid var(--color-border-strong);
  border-radius:var(--radius-full);
  transition:background-color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.gx .post__arrow svg {
  width:var(--space-3);
  height:var(--space-3);
  fill:none;
  stroke:currentColor;
  stroke-width:var(--stroke-icon);
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform var(--dur-base) var(--ease-out);
}
.gx .post__link:hover .post__meta {
  border-color:var(--color-text);
}
.gx .post__link:hover .post__arrow {
  background:var(--color-inverse-bg);
  border-color:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .post__link:hover .post__arrow svg {
  transform:rotate(45deg);
}
.gx .post__media {
  position:relative;
  display:block;
  aspect-ratio:1200 / 630;
  border-radius:var(--radius-md);
  overflow:hidden;
}
.gx .post__media>.post__photo {
  position:absolute;
  inset:0;
  transition:transform var(--dur-slow) var(--ease-out);
}
.gx .post__link:hover .post__media>.post__photo {
  transform:scale(var(--hover-scale));
}
.gx .post__title {
  font-size:var(--text-xl);
  font-weight:var(--weight-medium);
  letter-spacing:var(--tracking-snug);
  line-height:var(--leading-snug);
  text-wrap:balance;
}
@media(prefers-reduced-motion:reduce) {
  .gx .post__media>.post__photo,.gx .post__arrow svg {
    transition:none;
  }
}
@media(min-width:768px) {
  .gx .blog__grid {
    grid-template-columns:repeat(3,1fr);
    gap:var(--space-6);
  }
}
.gx .pg-grid {
  margin:0;
  padding:0;
  list-style:none;
}