/* JDC Info Night — colours and type from the "Be in the Know" flyer. */
:root {
  --cream: #f8f2eb;
  --paper: #fffaf4;
  --maroon: #7b1113;
  --maroon-2: #5e0d0f;
  --rose: #a86a66;
  --peach: #e3bba3;
  --peach-soft: #f1ddd0;
  --ink: #3b1a17;
  --muted: #8a6b64;
  --green: #6f8a55;
  --gold: #c58f3d;
  --slate: #5b6e86;
  --plum: #7f4f7a;
  --ok: #3f7d4e;
  --bad: #b23a2e;
  --opt-0: #7b1113;   /* maroon */
  --opt-1: #a86a66;   /* rose */
  --opt-2: #6f8a55;   /* sage (trees) */
  --opt-3: #c58f3d;   /* gold (window light) */
  --opt-4: #5b6e86;   /* slate (glass) */
  --opt-5: #7f4f7a;   /* plum */
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cream); color: var(--ink);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .head { font-family: "Montserrat", "Open Sans", system-ui, sans-serif; color: var(--maroon); margin: 0; }
button, input, textarea { font: inherit; }
[hidden] { display: none !important; }

/* The flyer's double peach frame */
.frame { position: fixed; inset: 0; border: clamp(8px, 1.1vw, 18px) solid var(--peach); pointer-events: none; z-index: 50; }
.frame::after { content: ''; position: absolute; inset: clamp(6px, 0.7vw, 12px); border: 2px solid var(--peach); }

.opt-0 { --c: var(--opt-0); } .opt-1 { --c: var(--opt-1); } .opt-2 { --c: var(--opt-2); }
.opt-3 { --c: var(--opt-3); } .opt-4 { --c: var(--opt-4); } .opt-5 { --c: var(--opt-5); }
.letter { display: inline-grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.22); font-weight: 800;
  font-family: "Montserrat", sans-serif; flex: 0 0 auto; }

@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pulse { 50% { transform: scale(1.04); } }