/* The member badge, served from philwebring.org under a stable name.
 * Presentation config, so it sits beside template.html and style.css
 * rather than at the repo root with the ring mechanics: what it holds
 * is a look, not a behaviour.
 *
 * A member's page carries the four links and one <link> to this file,
 * so the ring's look lives HERE, in one place, for every site that
 * wears it.  Change this file, `publish ring', and every member's badge
 * changes.  This is the one ring file that must never carry a
 * content-hashed name: member sites link it by name.
 *
 * Caddy serves it no-cache and Cloudflare passes that through, so a
 * change here reaches every badge on the next page load.  That holds
 * only while the zone's Browser Cache TTL stays on "Respect Existing
 * Headers" (set 2026-08-23).  A fixed value there overrides the origin
 * for .css and pins the old look in visitors' browsers for hours --
 * which is what it did before, and the symptom is a published change
 * that a hard reload shows but a normal reload does not.
 *
 * Understated on purpose.  A badge sits at the foot of somebody else's
 * page, so it takes as little as it can: no rule, no box, no color of
 * its own.  It inherits the page's text color, and it asks for the
 * page's monospace face if that page has one.
 *
 * PORTABILITY.  Members host their sites on Google Sites, WordPress,
 * and other builders, not only on hand-written HTML.  Two rules follow
 * from that, and both are load-bearing:
 *
 *   1. The row is laid out in normal inline flow, NOT with flex.  A
 *      flex row ignores `text-align', which is the only alignment
 *      control most site builders expose, so a flex badge cannot be
 *      centered by the person who pasted it.  In inline flow the badge
 *      obeys whatever alignment its container carries, and it does so
 *      whether or not this file loads at all.
 *
 *   2. The gaps are margins, not `gap'.  font-size: 0 on the row
 *      collapses the whitespace between the four links to nothing, so
 *      the margins below are the whole of the spacing and the badge
 *      measures the same whether the snippet is on one line or four.
 *      Each link then states its own size again.
 */
.philwebring {
  /* One row, close together: an arrow, the ring's mark, `random', an
   * arrow.  The gaps are well under a nav's, so the four read as a
   * badge rather than as a second menu. */
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0;
  margin-top: 3rem;
}

.philwebring a {
  font-size: 0.85rem;
  color: inherit;
  text-decoration: none;
}

/* The arrows stand off from the pair they flank, while the mark and
 * `random' stay tight to each other: two things in the middle, one hop
 * on either side. */
.philwebring a:nth-child(1) { margin-right: 1rem; }
.philwebring a:nth-child(3) { margin-left: 0.5rem; }
.philwebring a:nth-child(4) { margin-left: 1rem; }

/* The ring's home.  The markup still says "philwebring" -- that is the
 * name a screen reader announces, and what shows if this file never
 * loads.  The glyph is set here so the mark can change for every member
 * at once, without anyone pasting new markup into their site. */
.philwebring a:nth-child(2) { font-size: 0; }
.philwebring a:nth-child(2)::before {
  content: "\03C6";
  font-size: 1.15rem;
}

/* `random' is a word among three glyphs, so it is set smaller. */
.philwebring a:nth-child(3) { font-size: 0.75rem; }