/* site-fixes.css — repo-owned corrections to the homepage styles.
 *
 * styles/*.css is pulled from Claude Design and a pull overwrites it whole, so
 * fixes that must survive a pull live here, loaded after it by index.html (the
 * same reason newsletter.js and lectures-link.js exist). If Design ever adopts
 * one of these, delete it from here.
 */

/* ── Keyboard focus (2026-10-03) ──────────────────────────────────────────────
   No homepage control had a focus style, and the newsletter field removed the
   browser's ring outright (outline:none + a 1px border-colour change), so a
   keyboard user could not see where they were. Same idiom as the gallery
   pages: a 2px orange ring, keyboard-only via :focus-visible. It reads on paper
   and on the navy sections, and it is the only visible edge the gradient
   primary button has, since its border is transparent under data-accent="on". */
a:focus-visible,
button:focus-visible,
.ro-btn:focus-visible,
.ro-news-form input:focus-visible,
.ro-news-form button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* ── Marketing Machine brand card (2026-10-03) ────────────────────────────────
   MM's brand moved to its newsletter palette: magenta #FF00EE, acid yellow
   #F8F812, square corners. The card still showed the old orange→pink gradient.
   Like the FounderMode card, it now wears the brand's real colours.
   Contrast, measured: magenta on the #0E0E12 veil is comfortably legible.
   Yellow on magenta is 2.84:1, so yellow is decorative only (the rule under
   the name), never text that has to be read. */
.is-brand-mm .ro-brand-name {
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  color: #FF00EE;
}
.is-brand-mm .ro-brand-name::after {
  content: ''; display: block;
  width: 56px; height: 3px; margin-top: 12px;
  background: #F8F812;
}
.is-brand-mm .ro-brand-foot { color: #FF00EE; }
.ro-making-card.is-brand-mm:hover { border-color: #FF00EE; }