/* Certant Flat — blog.html + blog/*.html local rules.
   Tokens only, .pg-blog- prefix (except .pg-blog-body's prose descendants),
   zero box-shadow. Each rule says why flat.css cannot do it. */

/* An article column also has to hold code and tables; .measure (62ch) is a
   paragraph measure, too narrow for a <pre> or a wide table. */
.pg-blog-col { max-width: 68ch; margin-inline: auto; }

/* flat.css has no image card: the cover bleeds to the card edge and the link
   pins to the bottom of a .split--cards row. */
.pg-blog-card { --pad: 0; overflow: hidden; }
.pg-blog-card__media { aspect-ratio: 16 / 9; background: var(--bg-sunken); overflow: hidden; }
.pg-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-blog-card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-5); }
.pg-blog-card__body .link { margin-top: auto; padding-top: var(--sp-4); }

/* The feature card is the same media/body pattern one size up: media bleeds
   to the panel edge on a wider ratio, and the body carries its own padding
   since the panel's own --pad is zeroed to let the image reach the edge. */
.pg-blog-feature { --pad: 0; overflow: hidden; }
.pg-blog-feature > .split { align-items: stretch; }
.pg-blog-feature__media { aspect-ratio: 16 / 10; background: var(--bg-sunken); overflow: hidden; }
.pg-blog-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.pg-blog-feature__body { display: flex; flex-direction: column; justify-content: center; padding: var(--sp-6); }

/* A 64px round photo next to a name/role/bio block; .hue-row's 40px tile is
   the wrong anchor for a person. */
.pg-blog-author { display: flex; gap: var(--sp-4); align-items: flex-start; }
.pg-blog-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }

/* An icon + text note under the article body; not a list row, not a stat. */
.pg-blog-note { display: flex; gap: var(--sp-3); align-items: flex-start; }
.pg-blog-note .icon { margin-top: 2px; color: var(--fg-3); flex-shrink: 0; }

/* flat.css .section is padding-top only; the index ends on a tint panel, not the ink band that closes every other page. */
.pg-blog-subscribe { padding-bottom: var(--section-gap); }

/* the disabled subscribe button juggled opacity from script; state belongs in CSS. */
.pg-blog-subscribe .btn[disabled] { opacity: 0.7; }

/* .chip is nowrap by design; a multi-word syndicated tag has to wrap rather than push the page sideways. */
.pg-blog-tags .chip { white-space: normal; max-width: 100%; }

/* == Article prose, scoped to .pg-blog-body ============================= */
/* The body carries the system .prose class (rhythm for h2-h4/p/ul/a/strong/hr,
   flat.css §7c) — only what .prose does not reach stays here: code, one mono
   stack for it (the system's single deliberate departure from "one family
   carries everything" — see plan section 5), tables, figures and the embed. */
:root { --pg-blog-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* No coloured left rule, no italic: flat groups with tint blocks, and a
   3px gold border is a banned accent stripe. */
.pg-blog-body blockquote {
  background: var(--bg-tint);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
  color: var(--fg-2);
}

/* .prose spaces paragraphs with p + p, so a paragraph has no margin of its
   own — a code block sitting right after one (frozen body markup, no utility
   class to add) needs to carry its own gap both above and below. */
.pg-blog-body pre {
  background: var(--ink);
  color: var(--on-solid);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  margin: var(--sp-6) 0;
  overflow-x: auto;
  font-size: var(--fs-sm);
  line-height: 1.55;
}
.pg-blog-body code { font-family: var(--pg-blog-mono); }
.pg-blog-body :not(pre) > code {
  background: var(--bg-tint);
  color: var(--fg-1);
  border-radius: var(--r-mark);
  padding: 2px 6px;
  font-size: 0.9em;
  /* an inline SQL/shell snippet can outrun the 390px column with no natural
     break point; wrap it instead of letting the page scroll sideways. */
  overflow-wrap: anywhere;
}

/* the table itself doesn't carry the system .table class (bodies are frozen,
   unclassed markup) so width/collapse/size still have to be set here; the
   width floor is the system's own .table--wide, added on the <table> at
   build time, and the wrapper's own margin covers the gap .prose no longer
   gets from the paragraph before it. */
.pg-blog-body .post-table { margin: var(--sp-6) 0 var(--sp-5); }
.pg-blog-body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.pg-blog-body th, .pg-blog-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.pg-blog-body th { font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--fg-3); }

.pg-blog-body figure { margin: var(--sp-6) 0; }
.pg-blog-body figure img, .pg-blog-body figure video { width: 100%; height: auto; border-radius: var(--r-card); background: var(--bg-sunken); }
.pg-blog-body figcaption { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--fg-3); }

.pg-blog-body .post-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--ink); margin: var(--sp-6) 0; }
.pg-blog-body .post-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }