/* One look for the whole site: the data story's (site/story/). Every page loads this after its own styles, so these values win.
   Tokens first (both naming schemes the pages use), then the parts every page shares: type, buttons, fields, cards, header, colour blocks with wavy edges. */
:root{
  --bg:#fcfcfb;--paper:#fff;--ink:#121212;--ink2:#4a4a4a;--muted:#5f5f5c;--mut:#5f5f5c;--faint:#a3a39e;
  --line:#e2e2df;--line-2:#cfcfca;--rule:#e2e2df;--soft:#f4f3ef;--panel:#f4f3ef;--hl:#ffe08a;
  --serif:"Source Serif Pro",Georgia,"Times New Roman",serif;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  /* who is who: the story's palette (checked for colour-blind separation) */
  --woman:#d6457e;--nonbinary:#6d3fb0;--unclear:#e8a317;--org:#6f7782;--ad:#1f9e74;--man:#2a6fbd;
  --c-woman:#d6457e;--c-nb:#6d3fb0;--c-unclear:#e8a317;--c-man:#2a6fbd;
  --ok:#1f9e74;--bad:#b3261e;--focus:#2a6fbd;
  /* the soft colour blocks */
  --t1:#f9eef3;--t2:#ebf2f9;--t3:#edf4ee;--t4:#f8f2e1;--t5:#ffe9c2;
  --r1:4px;--r2:6px;--shadow:none;
}

/* type: serif for what is read, sans for what is used */
body{font-family:var(--sans)}
h1,h2,.panel h2{font-family:var(--serif);font-weight:700;letter-spacing:-.02em}
h1{line-height:1.05}
h3,.eyebrow,.kick{font-family:var(--sans)}
.lede,.say{font-family:var(--serif)}
a{text-underline-offset:3px}

/* buttons: black, square, bold. Chips and toggles stay pills. */
button,a.btn,.btn,a.go{font-family:var(--sans)}
button{font-weight:700;border-radius:2px}
button:hover:not(:disabled){background:#000}
button.ghost,button.link{font-weight:500}
button.ghost{background:var(--paper);border-color:var(--ink);border-radius:2px}
button.ghost:hover:not(:disabled){background:var(--soft);border-color:var(--ink)}
.chip,.tg,.pick button,.seg button,.cbtog{font-weight:500;border-radius:99px}
.chip,.tg,.cbtog{border-color:var(--ink)}
.chip[aria-pressed=true],.tg[aria-pressed=true]{background:var(--ink);color:#fff}
.seg{background:none;border:1px solid var(--ink);padding:0;gap:0;border-radius:99px;overflow:hidden}
.seg button{border-radius:0;min-height:34px;padding:.3em 1em}
.seg button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
a.btn,.btn,.blk a.go{background:var(--ink);color:#fff;text-decoration:none;font-weight:700;border-radius:2px;padding:.85em 1.7em;display:inline-block}
.blk a.go:hover,a.btn:hover{background:#000;color:#fff}
select,input[type=number],input[type=text],input[type=month]{border-color:var(--ink);border-radius:2px;background:var(--paper)}

/* surfaces */
.card{border-radius:var(--r2);box-shadow:none;border:1px solid var(--line-2)}
.callout,.note,.betacard{border-left:4px solid var(--ink);border-top:0;border-right:0;border-bottom:0;border-radius:0;background:var(--soft)}
.top{border-bottom:1px solid var(--ink)}
.logo{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
.bar{border-top:1px solid var(--ink)}
.kick,.blk .k{font-weight:700;letter-spacing:.14em;text-transform:uppercase}
footer{border-top:1px solid var(--ink)}

/* the colour blocks (front page and static pages): soft tints, wavy edges */
.band{position:relative;background:var(--b,var(--t1))}
.band[data-t="1"]{--b:var(--t1)}.band[data-t="2"]{--b:var(--t2)}.band[data-t="3"]{--b:var(--t3)}.band[data-t="4"]{--b:var(--t4)}.band[data-t="5"]{--b:var(--t5)}
.band .wv{position:absolute;left:0;right:0;top:-1px;height:52px;line-height:0;pointer-events:none}
.band .wv svg{width:100%;height:100%;display:block}.band .wv path{fill:var(--pv,var(--bg))}