/* Single blog article (single-post.php). Ported from the artifact's article pages (pages.css + legal.css), scoped under .gx.
   Shared header/CTA rules live in pg-common.scss, the "Keep reading" cards in pg-cards.scss. rem is converted to px because
   legacy pages run under a fluid root font-size. Plain CSS on purpose. */
.gx .pg-articlepage {
  background: var(--color-bg);
}
.gx .legal__back {
  display:inline-flex;
  align-items:center;
  gap:var(--space-2);
  min-height:var(--control-h);
  margin-bottom:var(--space-6);
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
  font-size:var(--text-sm);
  text-decoration:none;
  transition:color var(--dur-fast) var(--ease-out);
}
.gx .legal__back svg {
  width:var(--space-4);
  height:var(--space-4);
}
.gx .legal__back:hover {
  color:var(--color-text);
}
.gx .legal__back:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .legal__body {
  color:var(--color-text-subtle);
  font-size:var(--text-md);
  line-height:var(--leading-normal);
}
.gx .legal__body>*+* {
  margin-top:var(--space-4);
}
.gx .legal__body h2,.gx .legal__body h3,.gx .legal__body h4,.gx .legal__body h5 {
  color:var(--color-text);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-snug);
  scroll-margin-top:calc(var(--header-h) + var(--space-6));
}
.gx .legal__body h2 {
  margin-top:var(--space-12);
  font-size:var(--text-2xl);
}
.gx .legal__body h3 {
  margin-top:var(--space-10);
  font-size:var(--text-xl);
}
.gx .legal__body h4 {
  margin-top:var(--space-8);
  font-size:var(--text-lg);
}
.gx .legal__body h5 {
  margin-top:var(--space-6);
  font-size:var(--text-md);
  font-weight:var(--weight-medium);
}
.gx .legal__body>h2:first-child,.gx .legal__body>h3:first-child,.gx .legal__body>h4:first-child {
  margin-top:0;
}
.gx .legal__body strong {
  color:var(--color-text);
  font-weight:var(--weight-medium);
}
.gx .legal__body ul {
  display:grid;
  gap:var(--space-3);
  padding-left:var(--space-5);
  list-style:disc;
}
.gx .legal__body ul ul {
  margin-top:var(--space-3);
  list-style:circle;
}
.gx .legal__body li::marker {
  color:var(--color-text-muted);
}
.gx .legal__body a {
  color:var(--color-text);
  text-decoration:underline;
  text-underline-offset:.2em;
  text-decoration-color:var(--color-border-strong);
  border-radius:var(--radius-xs);
  transition:text-decoration-color var(--dur-fast) var(--ease-out);
}
.gx .legal__body a:hover {
  text-decoration-color:currentColor;
}
.gx .legal__body a:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
@media print {
  .gx .header,.gx .footer,.gx .legal__toc,.gx .legal__more,.gx .legal__back,.gx .legal__skip {
    display:none!important;
  }
  .gx .legal__body {
    color:#000;
  }
}
.gx .pg-article {
  padding-block:var(--space-12) var(--space-16);
}
.gx .pg-article__head {
  max-width:calc(736px + var(--gutter) * 2);
}
.gx .pg-article__meta {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-3);
  color:var(--color-text-muted);
  font-family:var(--font-mono);
  font-size:var(--text-mono-xs);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
}
.gx .pg-article__title {
  margin-top:var(--space-4);
  font-size:var(--text-3xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-snug);
  text-wrap:balance;
}
.gx .pg-article__lead {
  margin-top:var(--space-4);
  color:var(--color-text-subtle);
  font-size:var(--text-lg);
}
.gx .pg-article__img {
  display:block;
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  margin:var(--space-10) auto;
  border-radius:var(--radius-lg);
  object-fit:cover;
}
.gx .pg-article__body {
  max-width:736px;
  margin-inline:auto;
}
.gx .pg-callout {
  display:grid;
  justify-items:start;
  gap:var(--space-4);
  margin-top:var(--space-10)!important;
  padding:var(--space-6);
  border-radius:var(--radius-lg);
  background:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .pg-callout p {
  font-size:var(--text-lg);
}
.gx .pg-related {
  padding-block:var(--space-16);
  border-top:var(--border-hair) solid var(--color-border);
}
.gx .pg-related__title {
  margin-bottom:var(--space-8);
  font-size:var(--text-2xl);
  letter-spacing:var(--tracking-snug);
}

/* Photo layout of the article body (not in the artifact's sample articles) */
.gx .pg-article__body img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:var(--radius-lg);
}

/* v196: breadcrumbs, byline, contents list, share row, author box, author page (ported from the artifact's pages.css) */
.gx .pg-article__img {display:block;width:100%;height:auto;max-width:960px;aspect-ratio:16/9;margin:var(--space-10) auto;border-radius:var(--radius-lg);object-fit:cover}
.gx .pg-crumbs ol {display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0;padding:0;list-style:none;color:var(--color-text-muted);font-size:var(--text-sm)}
.gx .pg-crumbs li+li::before {content:"/";margin-right:var(--space-2);color:var(--color-border-strong)}
.gx .pg-crumbs a {color:inherit;text-decoration:none;border-radius:var(--radius-xs)}
.gx .pg-crumbs a:hover {color:var(--color-text);text-decoration:underline;text-underline-offset:.2em}
.gx .pg-toc {padding:var(--space-5) var(--space-6);border-radius:var(--radius-lg)}
.gx .pg-toc__t {margin-bottom:var(--space-3);color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.gx .pg-crumbs a:focus-visible, .gx .pg-article__tag:focus-visible, .gx .pg-byline a:focus-visible, .gx .pg-authorbox a:focus-visible, .gx .pg-toc a:focus-visible, .gx .pg-alist__a:focus-visible, .gx .pg-video__btn:focus-visible {outline:var(--border-focus) solid var(--color-focus);outline-offset:var(--focus-offset)}
.gx .pg-article__tag {text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.gx .pg-article__tag:hover {background:var(--color-inverse-bg);color:var(--color-inverse-text)}
.gx .pg-byline {display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-6);border-top:var(--border-hair) solid var(--color-border)}
.gx .pg-byline__name {font-size:var(--text-sm);color:var(--color-text-subtle)}
.gx .pg-byline__name a {color:var(--color-text);font-weight:var(--weight-medium);text-decoration:underline;text-decoration-color:var(--color-border-strong);text-underline-offset:.2em;border-radius:var(--radius-xs)}
.gx .pg-byline__name a:hover {text-decoration-color:currentColor}
.gx .pg-byline__meta {margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-sm)}
.gx .pg-avatar {display:grid;place-items:center;flex:none;width:var(--space-10);height:var(--space-10);border-radius:var(--radius-full);background:var(--color-inverse-bg);color:var(--color-inverse-text);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono)}
.gx .pg-avatar--photo {overflow:hidden;background:var(--color-border)}
.gx .pg-avatar--photo img {display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.gx .pg-avatar--lg {width:var(--space-16);height:var(--space-16);font-size:var(--text-sm)}
.gx .pg-avatar--xl {width:var(--space-24);height:var(--space-24);font-size:var(--text-lg)}
.gx .pg-article__fig {max-width:960px;margin:var(--space-10) auto}
.gx .pg-article__fig .pg-article__img {margin:0}
.gx .pg-article__fig figcaption, .gx .pg-fig figcaption, .gx .pg-video figcaption {margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm)}
.gx .pg-quote {margin-block:var(--space-10)!important;padding-left:var(--space-6);border-left:var(--border-focus) solid var(--color-accent)}
.gx .pg-quote p {color:var(--color-text);font-size:var(--text-xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-snug)}
.gx .pg-quote footer {margin-top:var(--space-3);color:var(--color-text-muted);font-size:var(--text-sm)}
.gx .pg-quote cite {color:var(--color-text);font-style:normal;font-weight:var(--weight-medium)}
.gx .pg-fig, .gx .pg-video {margin-block:var(--space-10)!important}
.gx .pg-fig img {display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg)}
.gx .pg-video__btn {position:relative;display:block;width:100%;padding:0;border:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-inverse-bg);cursor:pointer}
.gx .pg-video__btn img {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.8;transition:opacity var(--dur-fast) var(--ease-out)}
.gx .pg-video__btn:hover img {opacity:.65}
.gx .pg-video__btn:active .pg-video__play {transform:translate(-50%,-50%) scale(.96)}
.gx .pg-video__play {position:absolute;left:50%;top:50%;display:grid;place-items:center;width:var(--space-16);height:var(--space-16);border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-on-accent);transform:translate(-50%,-50%);transition:transform var(--dur-fast) var(--ease-out)}
.gx .pg-video__play svg {width:var(--space-6);height:var(--space-6);margin-left:var(--space-0-5)}
.gx .pg-video__len {position:absolute;right:var(--space-3);bottom:var(--space-3);padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-sm);background:var(--color-inverse-bg);color:var(--color-inverse-text);font-family:var(--font-mono);font-size:var(--text-mono-xs)}
.gx .pg-video__note:empty {display:none}
.gx .pg-video__note {margin-top:var(--space-2);color:var(--color-text-subtle);font-size:var(--text-sm)}
.gx .pg-table {margin-block:var(--space-8)!important;overflow-x:auto;border:var(--border-hair) solid var(--color-border);border-radius:var(--radius-lg)}
.gx .pg-table:focus-visible {outline:var(--border-focus) solid var(--color-focus);outline-offset:var(--focus-offset)}
.gx .pg-table table {width:100%;min-width:512px;border-collapse:collapse;font-size:var(--text-sm)}
.gx .pg-table caption {padding:var(--space-3) var(--space-4);text-align:left;color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.gx .pg-table th, .gx .pg-table td {padding:var(--space-3) var(--space-4);border-top:var(--border-hair) solid var(--color-border);text-align:left;vertical-align:top}
.gx .pg-table thead th {background:var(--color-bg-sunken);color:var(--color-text);font-weight:var(--weight-medium)}
.gx .pg-table tbody th {color:var(--color-text);font-weight:var(--weight-medium)}
.gx .pg-toc {border:var(--border-hair) solid var(--color-border)}
.gx .pg-toc ol {display:grid;gap:var(--space-2);padding-left:var(--space-5)}
.gx .pg-toc a {color:var(--color-text);text-decoration:none;border-radius:var(--radius-xs)}
.gx .pg-toc a:hover {text-decoration:underline;text-underline-offset:.2em}
.gx .pg-share {margin-top:var(--space-12)!important;padding-top:var(--space-8);border-top:var(--border-hair) solid var(--color-border)}
.gx .pg-share__t {margin:0!important;font-size:var(--text-md)!important;font-weight:var(--weight-medium)}
.gx .legal__body .pg-share__list {display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4);padding:0;list-style:none}
.gx .pg-share__list li[hidden] {display:none}
.gx .legal__body .pg-share__list .pg-chip {border-radius:var(--radius-full);color:var(--color-text);text-decoration:none}
.gx .legal__body .pg-share__list .pg-chip:hover {background:var(--color-bg-sunken)}
.gx .pg-share__status {margin-top:var(--space-3);color:var(--color-text-subtle);font-size:var(--text-sm)}
.gx .pg-share__status:empty {display:none}
.gx .pg-authorbox {display:flex;gap:var(--space-4);margin-top:var(--space-8)!important;padding:var(--space-6);border-radius:var(--radius-lg);background:var(--color-bg-raised);border:var(--border-hair) solid var(--color-border)}
.gx .pg-authorbox__k {color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-mono-xs);letter-spacing:var(--tracking-mono);text-transform:uppercase}
.gx .pg-authorbox__name {margin:var(--space-1) 0 0!important;font-size:var(--text-lg)!important}
.gx .pg-authorbox__name a {text-decoration:none!important}
.gx .pg-authorbox__name a:hover {text-decoration:underline!important}
.gx .pg-authorbox__role {color:var(--color-text-muted);font-size:var(--text-sm)}
.gx .pg-authorbox__bio {margin-top:var(--space-3);font-size:var(--text-sm)}
.gx .pg-author {max-width:calc(736px + var(--gutter) * 2);padding-block:var(--space-12) var(--space-16)}
.gx .pg-author__head {display:flex;align-items:center;gap:var(--space-5);margin-top:var(--space-8)}
.gx .pg-author__name {font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-snug)}
.gx .pg-author__role {margin-top:var(--space-1);color:var(--color-text-muted)}
.gx .pg-author__bio {margin-top:var(--space-6);color:var(--color-text-subtle);font-size:var(--text-lg)}
.gx .pg-author__posts {margin-top:var(--space-12)}
.gx .pg-alist {display:grid;margin-top:var(--space-4);padding:0;list-style:none;border-top:var(--border-hair) solid var(--color-border)}
.gx .pg-alist li {border-bottom:var(--border-hair) solid var(--color-border)}
.gx .pg-alist__a {display:grid;gap:var(--space-2);justify-items:start;padding-block:var(--space-5);color:var(--color-text);text-decoration:none;border-radius:var(--radius-xs)}
.gx .pg-alist__a:hover .pg-alist__t {text-decoration:underline;text-underline-offset:.2em}
.gx .pg-alist__t {font-size:var(--text-xl);line-height:var(--leading-snug)}
.gx .pg-alist__m {color:var(--color-text-muted);font-size:var(--text-sm)}
@media (prefers-reduced-motion:reduce) {
  .gx .pg-video__btn img, .gx .pg-video__play, .gx .pg-article__tag {transition:none}
}
.gx .pg-crumbs a:active, .gx .pg-article__tag:active, .gx .pg-alist__a:active .pg-alist__t {color:var(--color-text-subtle);text-decoration-color:currentColor}
.gx .pg-share__list .pg-chip:active {background:var(--color-border);transform:scale(var(--press-scale))}
@media (prefers-reduced-motion:reduce) {
  .gx .pg-share__list .pg-chip:active {transform:none}
}

/* chip base (also used by the share row; same rules as the blog filter) */
.gx .pg-chip {
  display:inline-flex;
  align-items:center;
  min-height:var(--control-h);
  padding-inline:var(--space-4);
  border:var(--border-hair) solid var(--color-border-strong);
  border-radius:var(--radius-full);
  background:transparent;
  color:var(--color-text);
  font:inherit;
  font-size:var(--text-sm);
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.gx .pg-chip:hover {
  background:var(--color-bg-sunken);
}
.gx .pg-chip:active {
  background:var(--cream-200);
}
.gx .pg-chip:focus-visible {
  outline:var(--border-focus) solid var(--color-focus);
  outline-offset:var(--focus-offset);
}
.gx .pg-chip[aria-pressed="true"] {
  background:var(--color-inverse-bg);
  border-color:var(--color-inverse-bg);
  color:var(--color-inverse-text);
}
.gx .pg-chip:disabled {
  opacity:.5;
  cursor:not-allowed;
}

/* v196 pressed state of topic and share chips (changes doc 12a) */
.gx .pg-chip:not([aria-pressed="true"]):active, .gx .pg-share__list .pg-chip:active {background:var(--color-border);transform:scale(var(--press-scale))}
@media (prefers-reduced-motion:reduce) {
  .gx .pg-chip:active, .gx .pg-share__list .pg-chip:active {transform:none}
}