/* Handbill kit — shared texture. Type and colour belong to each invitation;
 * only the things every one of them needs live here.
 * © Ozvåag LLC
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { -webkit-tap-highlight-color: transparent; }
body.hb-locked { overflow: hidden; height: 100dvh; }
body.hb-noscroll { overflow: hidden; }

/* Film grain over everything, so a flat colour has some tooth. */
.hb-grain::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Printer's crop marks — the invitation remembers it was once a piece of paper. */
.hb-crop { position: fixed; z-index: 16; width: 16px; height: 16px; pointer-events: none;
  border: 0 solid currentColor; opacity: .55; }
.hb-crop.tl { top: 10px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.hb-crop.tr { top: 10px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.hb-crop.bl { bottom: 10px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.hb-crop.br { bottom: 10px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }

/* The line home. Small, bottom, never in the way of the card. */
.hb-credit {
  position: relative; z-index: 18; display: block; margin: 34px auto 20px; width: fit-content;
  padding: 9px 14px; font: 500 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; border-radius: 999px; opacity: .45;
  transition: opacity .2s;
}
.hb-credit:hover { opacity: .9; }
.hb-credit.light { color: #2a2118; }
.hb-credit.dark  { color: #8a8a8a; }

/* A calendar link looks like part of the card it sits in, so only the reset is here. */
.hb-cal { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; }
}