/* FreeMuseumDay brand tokens + logo classes
   Mark: the Golden Ticket — a gold admission ticket, tilted, star-punched.
   Drop this in once and use the custom properties everywhere. */

:root {
  --fmd-ink: #322450;      /* aubergine — evening gallery */
  --fmd-gold: #dfa32a;     /* the ticket */
  --fmd-green: #2e9963;    /* open / free today */
  --fmd-mist: #ece7f3;
  --fmd-ground: #faf7f1;   /* cream gallery wall */
  --fmd-white: #ffffff;

  --fmd-text: #322450;
  --fmd-text-muted: #655d70;
  --fmd-text-on-ink: #faf7f1;
  --fmd-muted-on-ink: #b4a9cb;
  --fmd-accent-deep: #1e7a4d;

  --fmd-font: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fmd-wordmark-tracking: -0.03em;

  --fmd-radius: 10px;
  --fmd-radius-card: 12px;
  --fmd-radius-pill: 999px;
}

/* Wordmark — "Free" heavy, "MuseumDay" regular. Never re-weight, never letterspace. */
.fmd-wordmark {
  font-family: var(--fmd-font);
  font-weight: 800;
  letter-spacing: var(--fmd-wordmark-tracking);
  line-height: 1;
  color: var(--fmd-text);
  white-space: nowrap;
}
.fmd-wordmark span { font-weight: 400; }
.fmd-wordmark--on-ink { color: var(--fmd-text-on-ink); }

.fmd-tagline {
  font-family: var(--fmd-font);
  font-weight: 700;
  font-size: 0.26em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fmd-accent-deep);
}

/* The mark — the Golden Ticket.
   Every part is a percentage of one square, so 16px and 512px are ONE drawing.
   The whole ticket group tilts -8°; the notches (which read as the classic
   ticket punch-outs) take the chip ground color via --fmd-notch. */
.fmd-mark {
  --fmd-mark: 64px;
  --fmd-notch: var(--fmd-ground);
  position: relative;
  flex: none;
  width: var(--fmd-mark);
  height: var(--fmd-mark);
  font-size: var(--fmd-mark);
  border-radius: 50%;
  overflow: hidden;
  background: var(--fmd-ground);
}
.fmd-mark > * { position: absolute; box-sizing: border-box; }

.fmd-mark__body  { left: 14%;   top: 30%;   width: 72%; height: 40%; border-radius: 12% / 22%; background: var(--fmd-gold); transform: rotate(-8deg); }
.fmd-mark__notch-a { left: 8.4%;  top: 49%;  width: 12%; height: 12%; border-radius: 50%; background: var(--fmd-notch); }
.fmd-mark__notch-b { left: 79.7%; top: 39%;  width: 12%; height: 12%; border-radius: 50%; background: var(--fmd-notch); }
.fmd-mark__perf  { left: 60.6%; top: 34.5%; width: 2.6%; height: 28%; transform: rotate(-8deg);
  background: repeating-linear-gradient(to bottom, var(--fmd-ink) 0 14%, transparent 14% 34%); }
.fmd-mark__star  { left: 27%;  top: 41%;  width: 21%; height: 21%; background: var(--fmd-ink); transform: rotate(-8deg);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

/* On the dark ground the chip inverts; the gold holds. */
.fmd-mark--on-ink { background: var(--fmd-ink); --fmd-notch: var(--fmd-ink); }

/* One color, for foil and single-plate print. */
.fmd-mark--mono { background: var(--fmd-ink); --fmd-notch: var(--fmd-ink); }
.fmd-mark--mono .fmd-mark__body { background: var(--fmd-ground); }
.fmd-mark--mono .fmd-mark__perf { background: repeating-linear-gradient(to bottom, var(--fmd-ink) 0 14%, transparent 14% 34%); }

/* Below 32px: drop the perforation, grow the star. */
.fmd-mark--simple .fmd-mark__perf { display: none; }
.fmd-mark--simple .fmd-mark__star { left: 38%; top: 38%; width: 26%; height: 26%; }

/* Lockups. Clear space on every side = 25% of the mark. */
.fmd-lockup {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 32px;
  text-decoration: none;
}
.fmd-lockup .fmd-mark { --fmd-mark: 1.15em; }
.fmd-lockup__text { display: flex; flex-direction: column; gap: 0.16em; }
.fmd-lockup .fmd-wordmark { font-size: 1em; }
.fmd-lockup--stacked { flex-direction: column; align-items: flex-start; gap: 0.5em; }