/* MO(MEN)TUM grey look for the older pages (/morning, /book, /portal, /transparency, /admin).
   Everything black and white with grain. Gold (#f4d03f) is the one colour: the (MEN) in the wordmark and
   the one thing on the page that moves you. See ~/Momentum/docs/momentum-look.md.
   Loaded AFTER each page's own styles so it wins. */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;700;800&display=swap");

:root {
  --bg: #000;
  --bg-2: #0b0b0b;
  --bg-3: #141414;
  --white: #f4f4f2;
  --fg: #f4f4f2;
  --ink: #d9d9d6;
  --muted: #a3a3a0;
  --mute: #a3a3a0;
  --border: rgba(255, 255, 255, 0.16);
  --line: rgba(255, 255, 255, 0.22);
  --accent: #f4d03f;
  /* Old gold becomes white. Red and green become greys: receipts say IN and OUT with words and signs, not colour. */
  --gold: #f4f4f2;
  --gold-d: #a3a3a0;
  --red: #d6d6d3;
  --green: #f4f4f2;
  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --chrome: "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}
body { background: #000 !important; }
body, button, input, textarea, select { font-family: var(--body); letter-spacing: 0; }
h1, h2, h3, h4 { text-transform: uppercase; letter-spacing: 0.01em; }
::selection { background: #f4f4f2; color: #000; }

/* Film grain over everything, same as the home page. */
body::after {
  content: "";
  position: fixed;
  inset: -60%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 -0.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: mo-grain 0.9s steps(5) infinite;
}
@keyframes mo-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* Square, flat, no glow. */
:where(div, section, article, header, footer, nav, a, button, input, textarea, select, table, img, li, form, ul, details, summary, figure) { border-radius: 0; }
* { text-shadow: none; }

/* Photos go grey too. */
img:not([src*="badge"]) { filter: grayscale(1) contrast(1.15); }

/* Buttons: white on black. The one main button on a page gets .is-gold. */
.is-gold, .btn.is-gold, a.is-gold { background: #f4d03f !important; color: #000 !important; border-color: #f4d03f !important; }
.is-gold:hover { background: transparent !important; color: #f4d03f !important; }
.men { color: #f4d03f; }
:focus-visible { outline: 2px solid #f4d03f; outline-offset: 3px; }

/* Page specifics: the one gold thing on each page. */
.stat-value.gold { color: #f4d03f; }             /* transparency: what goes to the cause */
.portal-card--checkin { border-color: #f4d03f; } /* portal: the one place to start */
[class*="icon"] { filter: grayscale(1); }