@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Bungee";
  src: url("/fonts/bungee.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Lilita One";
  src: url("/fonts/lilita-one.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Anton";
  src: url("/fonts/anton.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/fonts/dm-serif-display.woff2") format("woff2");
  font-display: swap;
}

:root {
  --page: #0d0b14;
  --ink: #f4efe6;
  --ink-muted: #b6afc4;
  --gap: 16px;
  --radius: 22px;
  --line: rgba(255, 255, 255, 0.1);
  --line-2: rgba(255, 255, 255, 0.22);
  --line-3: rgba(255, 255, 255, 0.35);
  --line-hover: rgba(255, 255, 255, 0.6);
  --fill: rgba(255, 255, 255, 0.04);
  --fill-2: rgba(255, 255, 255, 0.07);
  --fill-3: rgba(255, 255, 255, 0.16);
  --prose: #ddd7e7;
  --faint: #7d768c;
  --control-bg: rgba(0, 0, 0, 0.25);
  --banner-bg: rgba(22, 18, 32, 0.97);
  --glow-1: rgba(92, 44, 170, 0.42);
  --glow-2: rgba(24, 120, 120, 0.22);
  --accent: #a58bff;
  color-scheme: dark;
  view-transition-name: none;
}

/* Light mode, the default: every page's <html> says data-theme="light".
   public/theme.js switches to dark mode (the tokens above) and back, and each
   page's <head> applies a saved choice before the page is drawn. */
:root[data-theme="light"] {
  --page: #f6f4fa;
  --ink: #17121f;
  --ink-muted: #5c556b;
  --line: rgba(23, 18, 31, 0.12);
  --line-2: rgba(23, 18, 31, 0.2);
  --line-3: rgba(23, 18, 31, 0.35);
  --line-hover: rgba(23, 18, 31, 0.6);
  --fill: rgba(23, 18, 31, 0.035);
  --fill-2: rgba(23, 18, 31, 0.06);
  --fill-3: rgba(23, 18, 31, 0.1);
  --prose: #2e2839;
  --faint: #6c657a;
  --control-bg: rgba(255, 255, 255, 0.7);
  --banner-bg: rgba(255, 255, 255, 0.97);
  --glow-1: rgba(124, 92, 230, 0.16);
  --glow-2: rgba(32, 160, 160, 0.12);
  --accent: #6a48d8;
  color-scheme: light;
}

/* The three dark topic themes get light counterparts; A2J and Pathways are
   already light. Card colors and buttons stay the same in both modes. */
[data-theme="light"] .theme-1 {
  --bg:
    radial-gradient(110% 90% at 100% 0%, rgba(150, 200, 90, 0.45), transparent 60%),
    linear-gradient(160deg, #eaf6e1, #dff0d3);
  --surface: #f1f8ec;
  --border: rgba(30, 100, 50, 0.2);
  --fg: #0f3019;
  --muted: #3b5a44;
}
[data-theme="light"] .theme-2 {
  --bg:
    radial-gradient(90% 85% at 100% 0%, rgba(34, 227, 227, 0.32), transparent 62%),
    #eefbfb;
  --surface: #f3fbfb;
  --border: rgba(20, 140, 140, 0.28);
  --fg: #062628;
  --muted: #2c4f51;
}
[data-theme="light"] .theme-4 {
  --bg:
    radial-gradient(90% 85% at 100% 0%, rgba(255, 79, 163, 0.24), transparent 62%),
    #fdf2f8;
  --surface: #fff6fa;
  --border: rgba(200, 40, 120, 0.22);
  --fg: #2b0b1d;
  --muted: #5b3b4d;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(60vw 50vw at 0% 0%, var(--glow-1), transparent 70%),
    radial-gradient(45vw 40vw at 100% 8%, var(--glow-2), transparent 70%),
    var(--page);
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.wrap {
  width: min(100% - 32px, 1240px);
  margin-inline: auto;
}

/* Header */

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 26px 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.site-nav a {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.icon-external {
  width: 10px;
  height: 10px;
  margin-left: 4px;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.wordmark {
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.motion-toggle {
  display: inline-flex;
  flex: none;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--ink);
  font: 700 13px/1 "Figtree", sans-serif;
  cursor: pointer;
}
.motion-toggle[hidden] {
  display: none;
}
.motion-toggle:hover {
  border-color: var(--line-hover);
}
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.theme-toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line-3);
  border-radius: 50%;
  background: var(--control-bg);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover {
  border-color: var(--line-hover);
}
.theme-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-toggle .icon-moon,
[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}
[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}
.motion-toggle svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.motion-toggle .icon-play,
.motion-paused .motion-toggle .icon-pause {
  display: none;
}
.motion-paused .motion-toggle .icon-play {
  display: block;
}

@media (max-width: 559px) {
  .motion-toggle {
    padding: 9px;
  }
  .motion-toggle .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hero */

.hero {
  padding-block: clamp(36px, 6vw, 58px) clamp(28px, 3.5vw, 40px);
}

.hero h1 {
  margin: 0;
  max-width: 12ch;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(42px, 6.4vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}

.lede {
  margin: 18px 0 0;
  max-width: 29em;
  color: var(--ink-muted);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.45;
}

/* Bento grid. Slot 0 is the large block; the script moves every block one
   slot along the loop 1 -> 0 -> 4 -> 3 -> 2 -> 1 on each rotation. */

.bento {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
  grid-auto-rows: 300px;
}

@media (min-width: 720px) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 360px 270px 270px;
  }
  .block[data-slot="0"] { grid-area: 1 / 1 / 2 / 3; }
  .block[data-slot="1"] { grid-area: 2 / 1; }
  .block[data-slot="2"] { grid-area: 2 / 2; }
  .block[data-slot="3"] { grid-area: 3 / 2; }
  .block[data-slot="4"] { grid-area: 3 / 1; }
}

@media (min-width: 1180px) {
  .bento {
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 280px 280px;
  }
  .block[data-slot="0"] { grid-area: 1 / 1 / 3 / 2; }
  .block[data-slot="1"] { grid-area: 1 / 2; }
  .block[data-slot="2"] { grid-area: 1 / 3; }
  .block[data-slot="3"] { grid-area: 2 / 3; }
  .block[data-slot="4"] { grid-area: 2 / 2; }
}

/* Blocks */

.block {
  container-type: size;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
}

.bento > .block:nth-child(1) { view-transition-name: block-1; }
.bento > .block:nth-child(2) { view-transition-name: block-2; }
.bento > .block:nth-child(3) { view-transition-name: block-3; }
.bento > .block:nth-child(4) { view-transition-name: block-4; }
.bento > .block:nth-child(5) { view-transition-name: block-5; }

.theme-1 {
  --bg:
    radial-gradient(110% 90% at 100% 0%, rgba(120, 160, 70, 0.75), transparent 60%),
    linear-gradient(160deg, #22683a, #155a33 55%, #134e2d);
  --surface: #165a32;
  --border: rgba(255, 255, 255, 0.12);
  --fg: #fff;
  --muted: rgba(255, 255, 255, 0.86);
  --c1: #f6dc7a;
  --c2: #b39a3e;
  --btn: #f2c94c;
  --btn-ink: #1d1704;
  --title-font: "Lilita One", sans-serif;
  --title-scale: 1.12;
}

.theme-2 {
  --bg:
    radial-gradient(90% 85% at 100% 0%, rgba(32, 150, 150, 0.5), transparent 62%),
    #111214;
  --surface: #131517;
  --border: rgba(80, 230, 220, 0.38);
  --fg: #fff;
  --muted: #d4dcdf;
  --c1: #7af5f2;
  --c2: #24a2a3;
  --btn: #22e3e3;
  --btn-ink: #042424;
  --title-font: "Bungee", sans-serif;
  --title-scale: 0.92;
}

.theme-3 {
  --bg:
    radial-gradient(90% 95% at 100% 0%, #d2bfff, transparent 62%),
    #f3effd;
  --surface: #f3effd;
  --border: rgba(110, 70, 220, 0.22);
  --fg: #170c3c;
  --muted: #3b3362;
  --c1: #9a6cff;
  --c2: #5a2fcf;
  --btn: #6d28d9;
  --btn-ink: #fff;
  --title-font: "Archivo", sans-serif;
  --title-stretch: 125%;
  --title-weight: 900;
  --title-scale: 0.94;
}

.theme-4 {
  --bg:
    radial-gradient(90% 85% at 100% 0%, rgba(255, 79, 163, 0.38), transparent 62%),
    linear-gradient(160deg, #161d4a, #0c1233);
  --surface: #111840;
  --border: rgba(255, 120, 190, 0.3);
  --fg: #fff;
  --muted: #d8dbf2;
  --c1: #ff8fca;
  --c2: #cf2f7f;
  --btn: #ff4fa3;
  --btn-ink: #1c0616;
  --title-font: "Anton", sans-serif;
  --title-scale: 1.22;
}

.theme-5 {
  --bg:
    radial-gradient(90% 95% at 100% 0%, #ffcf94, transparent 62%),
    #fff6e8;
  --surface: #fff6e8;
  --border: rgba(220, 110, 30, 0.24);
  --fg: #2a1606;
  --muted: #5a4030;
  --c1: #ffa24d;
  --c2: #e0531a;
  --btn: #c2410c;
  --btn-ink: #fff;
  --title-font: "DM Serif Display", serif;
  --title-scale: 1.14;
}

/* Copy and cards share one set of measurements, taken from the block's
   size, so the same markup reads well as the large block or a small one. */

.copy,
.stack {
  --pad: clamp(18px, 6cqw, 30px);
  --inset: 6cqw;
  --k: 0.4;
  --cw: min(62cqh * 0.5625, 24cqw);
  --sw: calc(var(--cw) * (1 + 2 * var(--k)));
}

@container (min-width: 440px) {
  .copy,
  .stack { --k: 0.55; }
}

.copy {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: calc(100cqw - var(--pad) - var(--inset) - var(--sw) - var(--cw) * 0.25 - 8px);
}

.title {
  margin: 0;
  font-family: var(--title-font);
  font-stretch: var(--title-stretch, 100%);
  font-weight: var(--title-weight, 400);
  font-size: calc(var(--title-size) * var(--title-scale) * var(--title-fit, 1));
  line-height: 1;
  letter-spacing: -0.01em;
  --title-size: clamp(22px, min(8cqw, 13cqh), 52px);
}
.title.is-long {
  --title-fit: 0.74;
}

.desc {
  margin: 0.55em 0 0;
  max-width: 24em;
  color: var(--muted);
  font-size: clamp(13px, min(3.6cqw, 5.5cqh), 19px);
  font-weight: 600;
  line-height: 1.35;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.95em;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: clamp(13px, min(3.4cqw, 5cqh), 16px);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease;
}
.cta svg {
  width: 1em;
  height: 1em;
  transition: transform 0.2s ease;
}
.cta:hover svg {
  transform: translateX(3px);
}

/* Card stack: three phone-shaped cards fanned out. The active card is
   raised and gets new content each time it becomes active. */

.stack {
  --ch: calc(var(--cw) * 16 / 9);
  --step: calc(var(--cw) * var(--k));
  position: absolute;
  top: 50%;
  right: var(--inset);
  width: var(--sw);
  height: var(--ch);
  translate: 0 -50%;
}

/* Tall block (the large block in the three-column layout): cards on top,
   copy underneath. */
@container (aspect-ratio < 1) {
  .copy,
  .stack {
    --k: 0.55;
    --inset: 8cqw;
    --cw: min(46cqh * 0.5625, 30cqw);
  }
  .stack {
    top: 12cqh;
    translate: none;
  }
  .copy {
    width: calc(100cqw - var(--pad) * 2);
  }
}

.card {
  --r: 0deg;
  position: absolute;
  top: 0;
  width: var(--cw);
  height: var(--ch);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: calc(var(--cw) * 0.1);
  overflow: hidden;
  background: var(--c2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
  transform: rotate(var(--r));
  transform-origin: 50% 100%;
  filter: saturate(0.72) brightness(1.06);
  transition:
    transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.7s ease;
}
.card:nth-of-type(1) { --r: -7deg; left: 0; z-index: 3; }
.card:nth-of-type(2) { --r: -1deg; left: var(--step); z-index: 2; }
.card:nth-of-type(3) { --r: 6deg; left: calc(var(--step) * 2); z-index: 1; }

.card.is-active {
  transform: translateY(-5%) rotate(var(--r)) scale(1.08);
  filter: none;
}

.face {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 50% at 85% 8%, rgba(255, 255, 255, 0.55), transparent 62%),
    linear-gradient(165deg, var(--c1), var(--c2));
}
.face[data-look="b"] {
  background:
    radial-gradient(75% 45% at 15% 88%, rgba(255, 255, 255, 0.4), transparent 62%),
    linear-gradient(200deg, var(--c1), var(--c2) 85%);
}
.face[data-look="c"] {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 9%, transparent 9% 18%),
    linear-gradient(180deg, var(--c1), var(--c2));
}
.face[data-look="d"] {
  background:
    radial-gradient(60% 38% at 50% 32%, rgba(255, 255, 255, 0.6), transparent 70%),
    linear-gradient(180deg, var(--c2), var(--c1));
}
.face[data-look="e"] {
  background:
    radial-gradient(120% 70% at 15% 100%, var(--c1), transparent 65%),
    linear-gradient(200deg, var(--c2), var(--c1));
}
.face[data-look="f"] {
  background:
    radial-gradient(70% 40% at 90% 0%, rgba(255, 255, 255, 0.5), transparent 65%),
    linear-gradient(150deg, var(--c1) 0 46%, var(--c2) 46% 100%);
}

/* Candidate portrait, above the caption; initials stand in where there's
   no portrait. */
.face .photo {
  position: absolute;
  top: 6%;
  left: 7%;
  width: 86%;
  height: auto;
  aspect-ratio: 1;
  border-radius: calc(var(--cw) * 0.07);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  object-fit: cover;
}

.mono {
  position: absolute;
  top: 13%;
  inset-inline: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: calc(var(--cw) * 0.3);
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.cap {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 8%;
  margin: 0;
  padding: 0.65em 0.75em;
  border-radius: 0.7em;
  background: rgba(255, 255, 255, 0.95);
  color: #16121d;
  font-size: max(6px, calc(var(--cw) * 0.075));
  font-weight: 600;
  line-height: 1.3;
}
.cap b {
  display: block;
  font-weight: 800;
}
.cap span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

/* Shared bits for the topic, candidate and directory pages */

.section-title {
  margin: 0 0 18px;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.badge {
  display: inline-block;
  padding: 4px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--btn);
  color: var(--btn-ink);
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.03em;
}
.avatar.is-hue {
  background: linear-gradient(145deg, hsl(var(--hue) 80% 62%), hsl(calc(var(--hue) + 45) 70% 40%));
  color: #fff;
}
.avatar img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 9px 16px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
}
a.pill:hover {
  border-color: var(--ink);
}
/* Placeholder for a link whose address isn't real yet. */
.pill.is-off {
  border-style: dashed;
  color: var(--ink-muted);
  cursor: not-allowed;
}
.pill .icon-linkedin {
  width: 15px;
  height: 15px;
  flex: none;
}
.people-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill.is-none {
  padding-inline: 0;
  border-color: transparent;
  color: var(--ink-muted);
}

.text p {
  margin: 0 0 0.8em;
  font-size: 15.5px;
  line-height: 1.6;
}
.text p:last-child {
  margin-bottom: 0;
}
.text .none {
  color: var(--muted);
  font-style: italic;
}

.page-head {
  padding-block: clamp(32px, 5vw, 52px) 8px;
}
.page-head h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(40px, 6vw, 76px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}
.page-head .pill {
  margin-top: 24px;
}

/* Topic pages */

.topic-tabs {
  display: flex;
  gap: 8px;
  margin-inline: -16px;
  padding: 26px 16px 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tab {
  flex: none;
  padding: 8px 16px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.tab:hover {
  border-color: var(--btn);
}
.tab[aria-current="page"] {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
}

.topic-hero {
  height: clamp(320px, 34vw, 420px);
}
.topic-hero .title {
  --title-size: clamp(30px, min(9cqw, 17cqh), 80px);
}
@media (max-width: 719px) {
  .topic-hero {
    height: 460px;
  }
}

.eyebrow {
  margin: 0 0 0.7em;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat {
  margin: 1em 0 0;
  font-size: 14px;
  font-weight: 800;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 28px 0 12px;
}
.filters[hidden] {
  display: none;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  padding: 7px 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 700 13px/1 "Figtree", sans-serif;
  cursor: pointer;
}
.chip span {
  margin-left: 3px;
  opacity: 0.6;
}
.chip:hover {
  border-color: var(--btn);
}
.chip[aria-pressed="true"] {
  border-color: var(--btn);
  background: var(--btn);
  color: var(--btn-ink);
}
.search input {
  width: min(280px, 100%);
  padding: 9px 15px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--fill-2);
  color: var(--ink);
  font: 600 14px "Figtree", sans-serif;
}
.search input::placeholder {
  color: var(--ink-muted);
}
.filter-status {
  min-height: 1.2em;
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 13px;
}

.positions {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) {
  .positions {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.position {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--fg);
  scroll-margin-top: 24px;
}
.position[hidden] {
  display: none;
}
.position:target {
  outline: 3px solid var(--btn);
  outline-offset: 3px;
}
.who {
  display: flex;
  align-items: center;
  gap: 12px;
}
.who > div {
  min-width: 0;
}
.who .badge {
  align-self: flex-start;
  margin-left: auto;
}
.name {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}
.meta {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}
.more {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.4em;
  margin-top: auto;
  padding: 0.5em 1em;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.more svg,
.tile-go svg {
  width: 1em;
  height: 1em;
}
.positions-empty {
  color: var(--ink-muted);
}

/* Position analysis: basis and subject tags, and the "Evidence and limits"
   panel under each summary. */

.tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.tags:empty {
  display: none;
}
.basis {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 12px;
  font-weight: 800;
  cursor: help;
}
.subjects {
  display: contents;
  list-style: none;
}
.subjects li {
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.evidence {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  color: var(--fg);
  font-size: 14.5px;
  line-height: 1.55;
}
.evidence summary {
  font-weight: 800;
  cursor: pointer;
}
.evidence[open] summary {
  margin-bottom: 10px;
}
.evidence p,
.evidence ul {
  margin: 0 0 10px;
}
.evidence ul {
  padding-left: 1.2em;
}
.evidence blockquote {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--btn);
  border-radius: 0 10px 10px 0;
  background: rgba(127, 127, 127, 0.12);
}
.evidence blockquote::before {
  content: "“";
}
.evidence blockquote::after {
  content: "”";
}
.evidence a + a {
  margin-left: 18px;
}
.quote-source {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
}
.basis-line,
.limits-title {
  color: var(--muted);
}
.limits-title {
  font-weight: 800;
}
.evidence a {
  font-weight: 700;
  text-underline-offset: 3px;
}

.topic-scope {
  max-width: 76ch;
  margin-top: 22px;
  color: var(--prose);
  font-size: 15.5px;
  line-height: 1.6;
}
.topic-scope p {
  margin: 0 0 8px;
}
.topic-scope a,
.summary-note a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 3px;
}
.summary-note {
  margin: 0 0 10px;
  color: var(--ink-muted);
  font-size: 13.5px;
  line-height: 1.5;
}

/* Asks candidates to send additions and corrections (see candidateContact()
   in scripts/build.mjs), and says who the forum is for. */

.candidate-contact,
.forum-audience {
  max-width: 76ch;
  margin: 16px 0 0;
  padding: 12px 16px;
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: var(--fill-2);
  color: var(--prose);
  font-size: 14.5px;
  line-height: 1.5;
}
.candidate-contact p,
.forum-audience p {
  margin: 0;
}
.candidate-contact strong,
.forum-audience strong {
  color: var(--ink);
}
.forum-audience {
  max-width: 540px;
  margin-top: 20px;
}
.candidate-contact {
  margin-top: 32px;
}
.candidate-contact a {
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}

/* Candidates whose statements don't address the topic. */

.gaps {
  margin-top: 36px;
}
.gaps-title {
  margin: 0 0 6px;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.gaps-note {
  max-width: 70ch;
  margin: 0 0 14px;
  color: var(--ink-muted);
  font-size: 14px;
}
.gap-list {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.gap {
  scroll-margin-top: 24px;
}
.gap:target a {
  outline: 3px solid var(--btn);
  outline-offset: 2px;
}
.gap a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 10px;
  height: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--fill);
  color: var(--ink);
  text-decoration: none;
}
.gap a:hover {
  border-color: var(--line-3);
}
.gap .avatar {
  grid-row: span 2;
  width: 36px;
  height: 36px;
  font-size: 12px;
}
.gap-name {
  font-size: 14.5px;
  font-weight: 800;
}
.gap-meta {
  color: var(--ink-muted);
  font-size: 12.5px;
  font-weight: 600;
}

.topic-card .tags,
.topic-card .evidence {
  margin-bottom: 18px;
}
.statement-source {
  margin: -6px 0 16px;
  color: var(--ink-muted);
  font-size: 14px;
}
.statement-source a,
.foot .notice a {
  color: inherit;
  text-underline-offset: 3px;
}

.more-topics {
  margin-top: 56px;
}
.tiles {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: transform 0.2s ease;
}
.tile:hover {
  transform: translateY(-3px);
}
.tile-title {
  font-family: var(--title-font);
  font-stretch: var(--title-stretch, 100%);
  font-weight: var(--title-weight, 400);
  font-size: calc(30px * var(--title-scale));
  line-height: 1;
}
.tile-desc {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.tile-go {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  font-size: 14px;
  font-weight: 800;
}

/* Candidate pages */

.crumbs {
  padding-block: 28px 0;
  color: var(--ink-muted);
  font-size: 14px;
}
.crumbs a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.profile {
  display: grid;
  gap: 24px 36px;
  align-items: start;
  padding-block: 24px 44px;
}
@media (min-width: 720px) {
  .profile {
    grid-template-columns: 200px 1fr;
  }
}
.profile-avatar {
  display: grid;
  place-items: center;
  width: min(200px, 48vw);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(145deg, hsl(var(--hue) 80% 62%), hsl(calc(var(--hue) + 45) 70% 40%));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  color: #fff;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(44px, 9vw, 66px);
  letter-spacing: -0.04em;
}
.profile .badge {
  margin-bottom: 14px;
}
.profile h1 {
  margin: 0;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(36px, 5.5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.04em;
}
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 24px;
  margin: 24px 0 0;
}
.facts dt {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.facts dd {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 700;
}
.also {
  margin: 16px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}
.profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.topic-cards {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 900px) {
  .topic-cards {
    grid-template-columns: 1fr 1fr;
  }
  .topic-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
.topic-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  scroll-margin-top: 24px;
}
.topic-card:target {
  outline: 3px solid var(--btn);
  outline-offset: 3px;
}
.topic-card h3 {
  margin: 0;
  font-family: var(--title-font);
  font-stretch: var(--title-stretch, 100%);
  font-weight: var(--title-weight, 400);
  font-size: calc(36px * var(--title-scale));
  line-height: 1;
}
.topic-card .sub {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.topic-card .cta {
  align-self: flex-start;
  margin-top: auto;
  font-size: 14px;
}
.topic-card .text {
  margin-bottom: 20px;
}

.statement {
  margin-top: 52px;
}
/* A candidate's election statement and supplemental statements, side by side
   on wide screens. */
.statement-cards {
  display: grid;
  gap: 28px;
}
@media (min-width: 960px) {
  .statement-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.statement-label {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}
.prose {
  max-width: 72ch;
  overflow-wrap: anywhere;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--fill);
}
.prose p {
  margin: 0 0 1em;
  color: var(--prose);
  font-size: 16.5px;
  line-height: 1.7;
}
.prose p:last-child {
  margin-bottom: 0;
}

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pager a {
  font-weight: 700;
  text-decoration: none;
}
.pager a:hover {
  text-decoration: underline;
}

/* Candidate directory */

.group {
  margin-top: 36px;
}
.group-title {
  margin: 0 0 12px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.group-title span {
  margin-left: 6px;
  opacity: 0.6;
}
.people {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.person {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
  height: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--fill);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.person:hover {
  border-color: var(--line-3);
  background: var(--fill-2);
}
.person .avatar {
  grid-row: span 2;
}
.person-name {
  font-size: 16px;
  font-weight: 800;
}
.person-name .badge {
  margin-left: 6px;
  color: var(--ink-muted);
  font-size: 10px;
}
.person-meta {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 600;
}

/* Footer */

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding-block: 26px 30px;
  color: var(--faint);
  font-size: 13px;
  text-align: center;
}
.foot p {
  margin: 0;
}
.notice {
  max-width: 62ch;
  font-size: 12.5px;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.foot-links > * + *::before {
  content: "·";
  margin-right: 8px;
}
.foot-links a,
.foot-links button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.foot-links a:hover,
.foot-links button:hover,
.foot-links a[aria-current="page"] {
  color: var(--ink);
}


/* Privacy page */

.updated {
  margin: 14px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
}
.legal {
  max-width: 70ch;
  padding-block: 12px 8px;
}
.legal h2 {
  margin: 36px 0 12px;
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.legal p,
.legal li {
  color: var(--prose);
  font-size: 16.5px;
  line-height: 1.7;
}
.legal p {
  margin: 0 0 1em;
}
.legal ul {
  margin: 0 0 1em;
  padding-left: 1.3em;
}
.legal a {
  color: var(--ink);
  text-underline-offset: 3px;
}
.legal code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--fill-2);
  font: 600 0.9em ui-monospace, SFMono-Regular, Menlo, monospace;
}
.legal h3 {
  margin: 28px 0 10px;
  font-size: 18px;
  font-weight: 800;
}
.legal strong {
  color: var(--ink);
}

/* Topics guide (content/topics-guide.md) */

.guide-topic {
  margin-top: 48px;
  scroll-margin-top: 24px;
}
/* Each topic's pill sits between its heading and its explanation and links
   to the topic's page. */
.guide-tag-line {
  margin: 4px 0 16px;
}
.guide a.guide-tag {
  display: inline-block;
  padding: 12px 24px 10px;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-family: var(--title-font);
  font-stretch: var(--title-stretch, 100%);
  font-weight: var(--title-weight, 400);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.guide a.guide-tag:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.table-wrap {
  margin: 0 0 1.4em;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.legal th,
.legal td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.legal th {
  background: var(--fill-2);
  font-size: 13px;
  font-weight: 800;
}
.legal td {
  color: var(--prose);
}
.legal td:first-child {
  min-width: 11em;
  color: var(--ink);
  font-weight: 700;
}
.legal tr:last-child td {
  border-bottom: 0;
}
.guide-link {
  margin-top: 0.8em;
  color: var(--fg);
  font-size: 13px;
  font-weight: 700;
  text-underline-offset: 3px;
}

button.pill {
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}

/* Forum notice board: rises from the lower left (public/notice.js). --lift
   moves it above the cookie banner while that's showing. */

.board {
  --lift: 0px;
  position: fixed;
  z-index: 40;
  bottom: calc(16px + var(--lift));
  left: 16px;
  width: min(300px, calc(100% - 32px));
  padding: 18px 20px 20px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: var(--fg);
  transform: translateY(calc(100% + 40px + var(--lift)));
  transition:
    transform 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.05),
    bottom 0.35s ease;
}
.board.is-up {
  transform: none;
}
.board::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 28px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--btn);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.board-title {
  margin: 0;
  padding-right: 28px;
  font-family: var(--title-font);
  font-size: 25px;
  line-height: 1.05;
}
.board-date {
  margin: 5px 0 14px;
  color: var(--btn);
  font-size: 16px;
  font-weight: 800;
}
.board-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1.05em;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}
.board-cta svg {
  width: 1em;
  height: 1em;
}
.board-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font: 400 20px/1 "Figtree", sans-serif;
  cursor: pointer;
}
.board-close:hover {
  background: rgba(0, 0, 0, 0.45);
}
/* The yellow dates are too faint on light backgrounds. */
[data-theme="light"] .board-date,
[data-theme="light"] .forum-date {
  color: #7a5800;
}
@media (prefers-reduced-motion: reduce) {
  .board {
    transition: none;
  }
}

/* Forum sign-up */

.forum-date {
  margin: 0 0 12px;
  color: #f2c94c;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.signup,
.signup-note {
  max-width: 540px;
  margin-top: 28px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--fill);
}
.signup {
  display: grid;
  gap: 18px;
}
.signup-note {
  font-size: 18px;
  font-weight: 700;
}
.field {
  display: grid;
  gap: 6px;
}
.field label {
  font-size: 14px;
  font-weight: 800;
}
.field label span {
  color: var(--ink-muted);
  font-weight: 600;
}
.field input {
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--fill-2);
  color: var(--ink);
  font: 600 16px "Figtree", sans-serif;
}
.field input:focus-visible {
  border-color: var(--ink);
  outline-offset: 2px;
}
/* Spam trap: off screen for people, still in the form for bots. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--prose);
  font-size: 14px;
  line-height: 1.5;
}
.agree input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #f2c94c;
}
.agree a {
  color: var(--ink);
}
.submit {
  justify-self: start;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: #f2c94c;
  color: #1d1704;
  font: 800 15px/1 "Figtree", sans-serif;
  cursor: pointer;
}
.submit:disabled {
  opacity: 0.6;
  cursor: progress;
}
.form-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.form-status.is-error {
  color: #ffb4b4;
}

/* Cookie consent banner. Accept and Decline carry equal weight. */

.consent {
  position: fixed;
  z-index: 50;
  right: 16px;
  bottom: 16px;
  left: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  max-width: 760px;
  margin-inline: auto;
  padding: 18px 20px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: var(--banner-bg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink);
}
.consent p {
  flex: 1 1 340px;
  margin: 0;
  color: var(--prose);
  font-size: 14px;
  line-height: 1.5;
}
.consent p a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 3px;
}
.consent-actions {
  display: flex;
  gap: 10px;
}
.consent-actions button {
  min-width: 96px;
  padding: 10px 18px;
  border: 1px solid var(--line-3);
  border-radius: 999px;
  background: var(--fill-2);
  color: var(--ink);
  font: 800 14px/1 "Figtree", sans-serif;
  cursor: pointer;
}
.consent-actions button:hover {
  border-color: var(--ink);
  background: var(--fill-3);
}

/* Block rotation uses the View Transitions API. Clip each morphing block to
   its rounded rectangle and let clicks pass through while it runs. */

::view-transition {
  pointer-events: none;
}
::view-transition-group(*) {
  overflow: hidden;
  border-radius: var(--radius);
  animation-duration: 0.65s;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 0.65s;
}