/* ── Atari pixel font (used only for the display face; monospace fallback) ── */
@font-face {
  font-family: "wl-pixel";
  src: url("atari-font.woff2") format("woff2");
  font-display: swap;
}

/* ── THEME VARIABLES ───────────────────────────────────────────────────────
   :root = Minimalist Light (also the no-JS / no-localStorage default).
   data-mode="dark"   → palette swap.
   data-style="…"     → typography + shape (+ light palette for vintage/atari).
   Combined selectors pin each non-minimalist style's DARK palette.
   --font drives body; --font-display drives titles/buttons and defaults to
   --font, so each theme's display face follows its body face unless it
   overrides it (only Atari does, to keep the pixel font as a signature). */
:root {
  --bg: #ffffff;  --surface: #f7f7f8;  --border: #e4e4e7;
  --text: #18181b; --text-muted: #5b616e; --text-dim: #9ca3af;
  --accent: #18181b; --on-accent: #ffffff; --thumb-bg: #ffffff;
  --c-funded: #2563eb; --c-donation: #7c3aed; --c-fulfilled: #059669;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font);
  --h1-size: 30px; --h1-weight: 700;
  --radius: 12px; --btn-radius: 999px; --border-w: 1px;
  --shadow: 0 1px 3px rgba(0,0,0,.07);
}
[data-mode="dark"] {                       /* Minimalist Dark */
  --bg: #0b0b0c; --surface: #161618; --border: #2a2a2e;
  --text: #ededed; --text-muted: #a1a1aa; --text-dim: #6b7280;
  --accent: #fafafa; --on-accent: #0b0b0c;
  --c-funded: #60a5fa; --c-donation: #a78bfa; --c-fulfilled: #34d399;
  --shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Vintage — warm paper, serif */
[data-style="vintage"] {
  --font: Georgia, "Times New Roman", serif;
  --radius: 4px; --btn-radius: 4px; --shadow: 0 1px 2px rgba(80,60,40,.18);
  --bg: #f3e9d2; --surface: #faf3e0; --border: #d8c5a0;
  --text: #3b2f1e; --text-muted: #6f5d3f; --text-dim: #a08f6f;
  --accent: #8a5a2b; --on-accent: #faf3e0; --thumb-bg: #fffdf6;
  --c-funded: #8a5a2b; --c-donation: #7a3b6b; --c-fulfilled: #4f7a3b;
}
[data-style="vintage"][data-mode="dark"] {  /* dark academia */
  --bg: #211a12; --surface: #2c2218; --border: #4a3a26;
  --text: #ecddc4; --text-muted: #b8a585; --text-dim: #8a7a5c;
  --accent: #c79a5b; --on-accent: #211a12; --thumb-bg: #f3e9d2;
  --c-funded: #c79a5b; --c-donation: #c98bb0; --c-fulfilled: #9ec27a;
}

/* Atari — blocky, high-contrast, square; pixel font for display, mono for body */
[data-style="atari"] {
  --font: "Courier New", ui-monospace, monospace;
  --font-display: "wl-pixel", "Courier New", monospace;
  --radius: 0; --btn-radius: 0; --border-w: 3px; --shadow: none;
  --bg: #d7d2c4; --surface: #ffffff; --border: #111111;
  --text: #111111; --text-muted: #3a3a3a; --text-dim: #777777;
  --accent: #d62828; --on-accent: #ffffff; --thumb-bg: #ffffff;
  --c-funded: #1d4ed8; --c-donation: #b91c1c; --c-fulfilled: #15803d;
  --h1-size: 19px; --h1-weight: 400;
}
[data-style="atari"][data-mode="dark"] {    /* neon on black */
  --bg: #000000; --surface: #0a0a0a; --border: #00ff66;
  --text: #00ff66; --text-muted: #00cc55; --text-dim: #088a3a;
  --accent: #ff2e88; --on-accent: #000000; --thumb-bg: #ffffff;
  --c-funded: #29adff; --c-donation: #ff2e88; --c-fulfilled: #00ff66;
}

/* ── reset / layout ─────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.55 var(--font); background: var(--bg); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header { padding: 28px 24px 0; max-width: 1100px; margin: 0 auto; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px; max-width: 1100px; margin: 24px auto 0; padding: 0 24px 48px;
}
footer { max-width: 1100px; margin: 0 auto; padding: 0 24px 28px; color: var(--text-muted); font-size: 13px; }

/* ── header text ────────────────────────────────────────────────────────── */
h1 { font-family: var(--font-display); font-size: var(--h1-size); font-weight: var(--h1-weight);
     margin: .1em 0 0; line-height: 1.15; letter-spacing: -.01em; }
.subtitle { color: var(--text-muted); margin: .25em 0 .7em; font-size: 15px; }
.intro { margin: .5em 0 0; max-width: 66ch; }
.intro.facts { color: var(--text-muted); font-size: 15px; }

/* ── theme switcher (quiet, top-right) ──────────────────────────────────── */
.theme-switch { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.theme-switch .styles { display: flex; gap: 4px; }
.theme-switch button {
  font-family: var(--font-display); font-size: 12px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: var(--border-w) solid var(--border); border-radius: var(--btn-radius);
  padding: 4px 9px;
}
.theme-switch button:hover { color: var(--text); }
.theme-switch button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mode-toggle { line-height: 1; font-size: 14px; }

/* ── filter bar ─────────────────────────────────────────────────────────── */
.filters { margin-top: 18px; padding-top: 16px; border-top: var(--border-w) solid var(--border); }
.filters button {
  font-family: var(--font-display); font-size: 13px; background: var(--surface); color: var(--text);
  border: var(--border-w) solid var(--border); border-radius: var(--btn-radius);
  padding: 6px 14px; margin: 4px 4px 0 0; cursor: pointer;
}
.filters button:hover { border-color: var(--accent); }
.filters button.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ── legend (below tabs) ────────────────────────────────────────────────── */
.legend-block { margin-top: 16px; }
.legend, .notice { color: var(--text-muted); margin: .3em 0; font-size: 14px; }
.legend .b-funded, .legend .b-donation, .legend .b-fulfilled { font-weight: 700; }

/* ── card ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  border: var(--border-w) solid var(--border); box-shadow: var(--shadow);
  border-left: 3px solid transparent;
}
.card:has(.thanks) { border-left-color: var(--c-fulfilled); opacity: .72; }
.card.hide { display: none; }
.thumb {
  background: var(--surface); border: var(--border-w) solid var(--border);
  border-radius: var(--radius); height: 160px; margin: 0 0 10px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.thumb:has(img) { background: var(--thumb-bg); }   /* white box only behind real photos */
.thumb img { max-width: 100%; max-height: 100%; }
.noimg { color: var(--text-dim); font-size: 13px; }
.card h3 { font-family: var(--font-display); margin: 10px 0 2px; font-size: 17px; line-height: 1.2; }
.cat { color: var(--text-muted); margin: 0 0 8px; font-size: 13px; }

/* ── status count chips ─────────────────────────────────────────────────── */
.counts { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.b-funded    { color: var(--c-funded); }
.b-donation  { color: var(--c-donation); }
.b-fulfilled { color: var(--c-fulfilled); }
.b-total     { color: var(--text-muted); }

/* ── pricing / notes ────────────────────────────────────────────────────── */
.price { font-weight: 700; margin: 8px 0 0; }
.usd   { color: var(--text-muted); font-weight: 400; }
.notes { font-size: 14px; margin: 8px 0 0; }
.notes ul { margin: .4em 0; padding-left: 1.2em; }
.notes a { color: var(--c-funded); }

/* ── action buttons ─────────────────────────────────────────────────────── */
.actions { margin-top: 12px; }
.cta {
  font-family: var(--font-display); font-size: 13px; display: inline-block;
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; border-radius: var(--btn-radius); padding: 7px 13px; margin-top: 8px; font-weight: 600;
}
.cta.form { background: transparent; color: var(--accent); border: var(--border-w) solid var(--accent); }
.cta + .cta { margin-left: 6px; }
.thanks { font-family: var(--font-display); color: var(--c-fulfilled); font-weight: 700; font-size: 13px; }