/* compat.css (plan v2, step 3): the pages not yet rewritten keep their old bodies, styled by marketing.css and their
   inline critical CSS. Loaded after site.css on those pages only, it points the old palette's tokens at the new one
   so an old body reads on the night ground under the new header. It goes when the last old page is rewritten. */
:root {
  --indigo: var(--ink); --indigo-2: var(--accent-ink); --indigo-3: var(--accent-ink);
  --saffron: var(--signal); --saffron-2: var(--accent); --gold-2: var(--accent); --vermillion: var(--signal);
  --cream: var(--ground-2); --ivory: var(--ink);
  --surface-0: var(--ground); --surface-1: var(--ground-2); --surface-2: var(--raised); --surface-3: var(--raised);
  --glass-border: var(--rule); --line-1: var(--rule); --line-2: var(--rule-strong);
  --ink-1: var(--ink); --ink-muted: var(--ink-3); --ink-inverse: var(--on-accent);
  --sh-1: none; --sh-2: none; --sh-3: none; --sh-glow-saffron: none;
  --font-sans: var(--font-text);
}
main#main-content { color: var(--ink-2); }
main#main-content :is(h1, h2, h3, h4) { color: var(--ink); }
main#main-content a:not([class]) { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.gradient-text { background: none; -webkit-text-fill-color: currentColor; color: var(--accent); }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-strong); backdrop-filter: none; }
.mkt-mesh, .mkt-mandala-bg, .mandala-accent { display: none; }
/* the old rules that paint a background with a token now light: the skip link, buttons, chips, the newsletter */
.skip-link, .btn--indigo, .btn--gold, .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.newsletter { background: var(--band); border: 1px solid var(--rule); }
.newsletter form { flex-wrap: wrap; }
.newsletter input { min-width: 0; flex: 1 1 200px; color: var(--band-ink); }
@media (max-width: 640px) { .newsletter { padding: 32px 20px; } }
/* the posts' h2 is inline-block (its rule as wide as the words) and some posts follow it with bare text */
.article-body h2 { display: block; width: fit-content; }