/* POLLS: a riso-printed protest poster. Two inks that overprint, huge condensed type, halftone dots. */
@font-face { font-family: 'Anton'; font-style: normal; font-display: swap; font-weight: 400; src: url(/vendor/fonts/anton-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/vendor/fonts/archivo-latin-wght-normal.woff2) format('woff2'); }

:root {
  --font-ui: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Anton', 'Archivo', Impact, sans-serif;
  --head-weight: 400;
  --head-tracking: 0.01em;
  --head-case: uppercase;
  --r-xs: 0px; --r-sm: 2px; --r-md: 2px; --r-lg: 3px; --r-xl: 4px;
  --shell-radius: 0px;
  --btn-radius: 2px;
  --btn-weight: 800;
  --btn-tracking: 0;
  --input-radius: 2px;
  --ink-a: #ff2d78;
  --ink-b: #1737d4;
  --bg: #fbfbf4;
  --surface: #ffffff;
  --surface-2: #f3f3ea;
  --surface-3: #e7e7da;
  --text: #0f1b6e;
  --text-2: #24307f;
  --text-3: #4a5491;
  --text-4: #5b6498;
  --border: rgba(23, 55, 212, .22);
  --border-strong: #1737d4;
  --fill: rgba(23, 55, 212, .06);
  --fill-2: rgba(23, 55, 212, .12);
  --accent: #e0125f;
  --accent-2: #1737d4;
  --accent-grad: linear-gradient(#e0125f, #e0125f);
  --accent-soft: rgba(255, 45, 120, .16);
  --accent-text: #c10d50;
  --on-accent: #ffffff;
  --btn-primary-shadow: 4px 4px 0 var(--ink-b);
  --shell-bg: transparent;
  --shell-line: transparent;
}
:root[data-theme="dark"] {
  --ink-a: #ff5a97;
  --ink-b: #ffd51f;
  --bg: #101566;
  --surface: #171d7c;
  --surface-2: #1d248c;
  --surface-3: #262e9f;
  --text: #fff6ee;
  --text-2: #e2e0f2;
  --text-3: #b9bbe6;
  --text-4: #aeb0df;
  --border: rgba(255, 246, 238, .22);
  --border-strong: #fff6ee;
  --fill: rgba(255, 246, 238, .07);
  --fill-2: rgba(255, 246, 238, .14);
  --accent: #ff5a97;
  --accent-2: #ffd51f;
  --accent-grad: linear-gradient(#ff5a97, #ff5a97);
  --accent-soft: rgba(255, 90, 151, .24);
  --accent-text: #ff8fba;
  --on-accent: #16063a;
}

/* The halftone: a big dot field bleeding off the top right corner of the sheet */
html {
  background-image: radial-gradient(circle, var(--ink-a) 0 34%, transparent 36%);
  background-size: 14px 14px;
  background-attachment: fixed;
  -webkit-mask: none;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(235deg, transparent 0 4%, var(--bg) 26%);
  pointer-events: none;
}
.btn { border-width: 2px; border-color: var(--border-strong); }
.btn-primary { text-transform: uppercase; }
.btn-primary:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink-b); }
.zui-app-hero .zui-brand-icon { display: none; }
.zui-app-hero h1 {
  font-size: clamp(84px, 17vw, 190px);
  line-height: .92;
  color: var(--accent);
  text-shadow: 6px 6px 0 color-mix(in oklab, var(--ink-b) 85%, transparent);
}
.zui-app-hero .subtitle { max-width: 44ch; font-size: 17px; font-weight: 600; color: var(--text); }
.section-title { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: .02em; color: var(--text); }
.tag { border-color: var(--border-strong) !important; border-radius: 0; font-weight: 800; background: var(--surface); }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { border-width: 2px !important; background: var(--surface) !important; }
.footer-note { color: var(--text-3); }
.nav-breadcrumbs .btn, .nav-breadcrumbs .btn-theme-toggle, .btn-outline { background: var(--surface) !important; }
@media (max-width: 700px) {
  body::before { background: linear-gradient(235deg, transparent 0 2%, var(--bg) 16%); }
}
