/* ──────────────────────────────────────────────────────────────────────────
   BRAND LOGO — SINGLE SOURCE OF TRUTH (dot + wordmark geometry)

   The size of the logo comes from the CONTAINER's font-size (inherited from the
   heading, or set per context). The dot is a ::before pseudo-element ON the
   wordmark text, so it lives inside the text box: it inherits the wordmark's
   font-size and baseline and therefore scales AND aligns with the "m" on every
   device — including Android Chrome font-boosting, which only inflates elements
   that contain text (an empty sibling <span> can never track it).

   Markup (everywhere):
     <a class="brand"><span class="name">mechoulam</span></a>

   Locked 2026-06-12 via frontend/PROTOTYPE-brand-logo.html:
     dot 0.45em · gap 0.1em · circle, centred on the x-height
   ────────────────────────────────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  /* NB: do NOT set font-size here. It inherits by default; an explicit value
     would override each context's `.brand { font-size: … }` (brand.css loads
     last), collapsing the wordmark to the body size. Size is set per context. */
  color: inherit;
  text-decoration: none;
}

.brand .name {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-weight: 800;
  letter-spacing: -0.045em;
  color: #1d1d1d;
  font-size: 1em;
}

/* The orange dot — generated content of the wordmark, so it boosts/scales with
   the text. vertical-align:middle centres it on the wordmark's x-height. */
.brand .name::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.1em;            /* gap dot↔text */
  background: var(--orange, #bf3f17);
  border-radius: 50%;
  vertical-align: middle;
}