/* The work index, AT guide and member pages share the demo application's
   palette and display face so moving between them does not feel like changing
   sites. work.css is left alone because the member build ships it too. The member
   build ships only work.css and member.css, so this file is mirrored verbatim at
   the top of member.css; a unit test keeps the two identical. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/src/fonts/figtree-latin-ext-wght.woff2") format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/src/fonts/figtree-latin-wght.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/src/fonts/bricolage-grotesque-latin-ext-wght.woff2")
    format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/src/fonts/bricolage-grotesque-latin-wght.woff2")
    format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
:root {
  --ink: #151826;
  --muted: #555b72;
  --rule: #e0e3ee;
  --accent: #1d47d4;
  --soft: #eceef6;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  font-family:
    "Figtree",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  background: #f4f5f9;
}
button {
  border-color: #7c84a0;
  border-radius: 10px;
  font-weight: 600;
}
button.primary {
  background: var(--accent);
  border-color: var(--accent);
}
button.primary:hover {
  background: #1636a8;
}
input,
textarea {
  border-color: #7c84a0;
  border-radius: 10px;
}
.wordmark {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
:is(h1, h2, h3) {
  font-family: var(--display);
  font-weight: 700;
}
h1 {
  font-size: clamp(30px, 3.4vw, 38px);
  letter-spacing: 0;
}
.notice {
  border-radius: 12px;
}
.panel,
.source-card {
  border-radius: 16px;
}
.avatar {
  border-radius: 50%;
}