/* This campaign's own stylesheet. The system it sits on is campaignlanding,
   https://github.com/nelsonblaha/campaignlanding, the same one chucodata.org
   runs on. Anything here that stops being about these particular words and
   starts being about how a campaign page works belongs upstream instead.

   What is here: the accent, which is violet rather than the system's amber, and
   the headline's measured width. The token shape follows docs/theming.md in
   that repo: the dark palette on bare :root, then only the tokens that change,
   once for an unstated light preference and once for an explicit one. */

:root {
  /* How wide the headline runs per 1px of font size, measured in headless Chrome
     at 1440px: 23.75 including the mark, so the system's 24.0 already fits.
     The eyebrow line is longer than the system's example, so it needs its own
     ratio or it runs off the right edge of a phone. */
  --eyebrow-ratio: 32.5;

  --accent:      #B39DF2;
  --accent-soft: #2A2340;
  --btn-ink:     #170F2E;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --accent:      #5E3FBF;
    --accent-soft: #ECE6FB;
    --btn-ink:     #FFFFFF;
  }
}

:root[data-theme="light"] {
  --accent:      #5E3FBF;
  --accent-soft: #ECE6FB;
  --btn-ink:     #FFFFFF;
}

/* Each language's headline and eyebrow, measured in headless Chrome at 1440px
   with the text laid out on one line (2026-10-21), plus a little room for a font
   that renders a hair wider elsewhere. English is above: 23.85 fits the system's
   24.0. Japanese and Chinese characters are a full em in every common font, so
   their numbers travel better than the Latin ones. */
html[lang="es"]      { --h1-ratio: 26.5; --eyebrow-ratio: 37.5; }
html[lang="pt"]      { --h1-ratio: 27.6; --eyebrow-ratio: 35.2; }
html[lang="id"]      { --h1-ratio: 28.2; --eyebrow-ratio: 38.2; }
html[lang="ja"]      { --h1-ratio: 24.6; --eyebrow-ratio: 23.4; }
html[lang="zh-Hant"] { --h1-ratio: 17.0; --eyebrow-ratio: 17.4; }

/* The link back to the chat for people who have signed in there (the
   member-bar markup at the top of each page explains how it knows). It scrolls
   away with the page; the section nav below it is what sticks. */
.member-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem 1.25rem;
  padding: 1.1rem 1rem;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
}
.member-bar[hidden] { display: none; }
.member-bar .btn { font-size: 1rem; }