/* Brandon Baker, product posts (layout: product). Loaded after post.css on
   those posts only. It adds the block under the header that says what the
   project runs on and where to get it, galleries of real screenshots, and
   "More open source from Baker" before the Sources. Tokens only, no
   shadows, no red: the post header and everything post.css draws stay as
   they are.

   Width. Text keeps the reading measure. A gallery takes the whole band at
   every width, so screenshots get room. */
@media (max-width: 1119.98px) {
  .post .prose { max-width: none; }
  .post .prose > :not(.gallery) { max-width: var(--measure); }
}
@media (min-width: 1120px) { .prose > .gallery { grid-column: 1 / -1; } }

/* The block sits close under the header: it finishes the first screen. */
.post-head + .prose { margin-top: clamp(32px, 3.5vw, 48px); }
.prose > :where(.gallery) + *, .prose > * + :where(.gallery) { margin-top: calc(var(--flow) * 2); }

/* -- Where to get it ------------------------------------------------------- */
/* A line of text (what it runs on), then the links in one column, one per
   line, each led by its icon (Baker, 2026-10-21). Links carry the site's
   underline; the icon stays plain. */
.get { display: grid; gap: var(--space-sm); }
.prose .get-text { color: var(--ink-2); }
.prose .get-links { display: grid; justify-items: start; row-gap: 0; }
.prose .get-links > li { padding: 0; }
.prose .get-links > li::before { content: none; }
.prose .get-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min);
  font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; border-radius: var(--radius-xs);
}
.get-link > span, .more a > span {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--ink-3);
  overflow-wrap: anywhere;
}
.get-link:hover > span, .more a:hover > span { text-decoration-color: var(--ink); }
.get-link:focus-visible, .more a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.get-icon { width: 20px; height: 20px; flex: none; color: var(--ink-2); }

/* -- Galleries --------------------------------------------------------------- */
/* Screenshots side by side at one height, so a phone, an e-ink tablet and a
   desktop window line up whatever their shapes. Widths follow each image's
   --r, and the row never grows past the shortest image's own height (--h)
   or most of the screen. Where a row would make them too small to read, it
   becomes a strip that scrolls sideways, one screenshot at a time, running
   to the edges of the screen. */
.gallery { --gap: clamp(12px, 1.4vw, 20px); --cap: min(var(--h), 70svh); --strip: min(var(--h), 62svh); container: gallery / inline-size; }
.gallery-track {
  display: flex; gap: var(--gap); align-items: flex-start;
  margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) var(--space-sm);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad);
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
}
.gallery-track:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prose .gallery .shot { max-width: none; flex: none; width: min(85%, calc(var(--r) * var(--strip))); scroll-snap-align: start; }
.gallery-cap { margin-top: var(--space-md); max-width: var(--measure); }

/* A row once each screenshot gets about 200px or more. Grow factors are
   scaled up: if they summed under 1, flex would hand out only part of the row. */
@container gallery (min-width: 480px) {
  .gallery[data-n="2"] > .gallery-track { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; max-width: calc(var(--sum) * var(--cap) + (var(--n) - 1) * var(--gap)); }
  .prose .gallery[data-n="2"] .shot { flex: calc(var(--r) * 100) 1 0; width: auto; min-width: 0; }
}
@container gallery (min-width: 680px) {
  .gallery[data-n="3"] > .gallery-track { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; max-width: calc(var(--sum) * var(--cap) + (var(--n) - 1) * var(--gap)); }
  .prose .gallery[data-n="3"] .shot { flex: calc(var(--r) * 100) 1 0; width: auto; min-width: 0; }
}
@container gallery (min-width: 900px) {
  .gallery:is([data-n="4"], [data-n="5"]) > .gallery-track { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; max-width: calc(var(--sum) * var(--cap) + (var(--n) - 1) * var(--gap)); }
  .prose .gallery:is([data-n="4"], [data-n="5"]) .shot { flex: calc(var(--r) * 100) 1 0; width: auto; min-width: 0; }
}

/* -- More open source from Baker -------------------------------------------- */
/* Closes the article like Sources and the note after it: a rule, a small
   heading, then each project's name (its repository), its own one-line
   description, and its docs and the post about it. */
/* Projects two to a row where they fit, one column on smaller screens
   (Baker, 2026-10-21). The block takes the whole band, like a gallery. */
.more { margin-top: clamp(56px, 7vw, 96px); padding-top: var(--space-xl); border-top: 1px solid var(--rule); container: more / inline-size; }
@container more (min-width: 640px) {
  .more-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3xl); align-items: start; }
  .more-desc { max-width: var(--measure); }
}
.more h2 { font-size: var(--fs-heading-sm); line-height: 1.4; font-weight: var(--fw-semibold); color: var(--ink); }
.more-list { margin-top: var(--space-sm); display: grid; gap: var(--space-lg); }
.more a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap-min); color: var(--ink); text-decoration: none; border-radius: var(--radius-xs); }
.more-name { font-size: var(--fs-body-lg); line-height: 1.4; font-weight: var(--fw-semibold); }
.more-desc { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.more-links { display: flex; flex-wrap: wrap; column-gap: var(--space-2xl); }
.more-links a { font-size: var(--fs-body-md); line-height: 1.4; }
.more .get-icon { width: 18px; height: 18px; }
.more-links .get-icon { color: var(--ink-3); }