/* The site's kit, loaded before every page's own stylesheet: the only file that names a colour. */

:root {
  color-scheme: light dark;
  --ink: #10302a;
  --ink-2: #0a221d;
  --ink-3: #173f36;
  --ink-text: #10302a;
  --paper: #f7f4ec;
  --sheet: #fffdf8;
  --cream: #efe9dc;
  --line: #e2dccd;
  --line-strong: #cfc6b2;
  --text: #1a1c19;
  --text-2b: #45443d;
  --muted: #69685f;
  --faint: #95917f;
  --gold: #c8a24a;
  --gold-deep: #8a6a1c;
  --gold-soft: #f5ecd2;
  --gold-hi: #e4c877;
  --gold-lo: #a8842f;
  --ok: #2f6b4f;
  --on-ink: #f3efe4;
  --on-ink-muted: rgba(243, 239, 228, 0.62);
  --on-ink-line: rgba(243, 239, 228, 0.3);
  --on-gold: #1d1606;
  --on-cream: #1a1c19;
  --on-cream-muted: #69685f;
  --slip-shadow: 0 1px 0 rgba(16, 48, 42, 0.05), 0 18px 40px -22px rgba(16, 48, 42, 0.35);
  --lift-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  --edge: transparent;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #245c4c;
    --ink-2: #08110f;
    --ink-3: #2d6e5b;
    --ink-text: #9ed3be;
    --paper: #0f1715;
    --sheet: #16211e;
    --cream: #1e2b27;
    --line: #2a3934;
    --line-strong: #3a4b45;
    --text: #ede7d9;
    --text-2b: #cdc7b8;
    --muted: #a9a494;
    --faint: #8f8a7b;
    --gold: #d4b05a;
    --gold-deep: #e3c67e;
    --gold-soft: #3a3120;
    --ok: #86cfa8;
    --on-ink-muted: rgba(243, 239, 228, 0.66);
    --slip-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -20px rgba(0, 0, 0, 0.85);
    --edge: #2a3934;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the mark: two arcs, one per party, around the serif D */
.mark { width: 36px; height: 36px; flex: none; }
.mark .glow { fill: var(--gold); opacity: .35; }
.mark .arc { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; }
.mark .d { font-family: var(--serif); font-weight: 600; fill: currentColor; }
.mark.breathe .glow { animation: breathe 2.8s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes breathe { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .8; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .mark.breathe .glow { animation: none; } }