/* The live flyer: the real flyer art (img/flyer-template.webp, made from the
   Illustrator file with the photos and names removed) with photos and name
   tags laid on top. Positions come straight from the .ai file, where the
   artboard is 1000 x 1000, so 1 unit = 0.1% (and 0.1cqw) of the flyer. */

.flyer {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background: #19191b url(/img/flyer-template.webp) center / 100% 100% no-repeat;
  border-radius: 6px; box-shadow: 0 20px 60px #000a;
  user-select: none;
}
.flyer * { box-sizing: border-box; }
.flyer a { color: inherit; text-decoration: none; }

/* photo circles, sitting inside the template's gold rings */
.f-photo {
  position: absolute; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; text-align: center;
  font-family: 'Luckiest Guy', sans-serif; color: #7a3b12; font-size: 5cqw;
}
.f-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.f-photo .initials { opacity: .55; }
/* small comic circles: drawn here (gold ring, dark-red edge) to match the art */
.f-photo.ring {
  box-sizing: border-box; border: .75cqw solid #f1b443;
  box-shadow: 0 0 0 .32cqw #5c1912, .5cqw .8cqw 1.4cqw #000a;
  background: radial-gradient(circle at 38% 32%, #fbe7a6, #f0c45b 45%, #d79a2e);
}
.f-photo .tba { font-family: 'Luckiest Guy', sans-serif; font-size: 4.5cqw; color: #7a3b12; opacity: .6; }

.f-headlabel { position: absolute; z-index: 2; pointer-events: none; height: auto; }

/* name tags: white box, scratchy black outline, hand lettering */
.f-tag {
  position: absolute; z-index: 2; transform: translateX(-50%) rotate(var(--tilt, 0deg));
  background: #fff; color: #111; white-space: nowrap;
  border: .32cqw solid #111; box-shadow: .12cqw .18cqw 0 #111;
  font-family: 'Flyer Hand', 'Covered By Your Grace', 'Comic Neue', cursive;
  text-transform: uppercase; line-height: 1;
  /* Same height for every tag (like the .ai file), words centred in it. */
  display: flex; align-items: center; justify-content: center;
  height: var(--h); padding: .18em 1.6cqw 0;
  font-size: var(--fs);
  /* The hand lettering is thin on screen; a stroke gives it marker weight. */
  -webkit-text-stroke: .045em #111; paint-order: stroke fill; letter-spacing: .02em;
}
.f-tag .t { display: block; white-space: nowrap; }
.f-tag.head { --fs: 6.8cqw; --h: 7cqw; padding: .18em 2cqw 0; }
.f-tag.small { --fs: 3.5cqw; --h: 4.1cqw; }

/* clickable photos on the public page */
.flyer a.f-person .f-photo { transition: transform .15s, box-shadow .15s; }
.flyer a.f-person:hover .f-photo, .flyer a.f-person:focus-visible .f-photo { transform: scale(1.04); box-shadow: 0 0 0 .8cqw #ffd23f; }
.flyer a.f-person:focus-visible { outline: none; }

/* builder (editable) mode */
.flyer.editable .f-person { all: unset; cursor: pointer; }
.flyer.editable .f-person.empty .f-photo {
  background: #00000040; border: .4cqw dashed #fff9; color: #fff; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2.2cqw; line-height: 1.2;
}
.flyer.editable .f-person:hover .f-photo { box-shadow: 0 0 0 .8cqw #fff8; }
.flyer.editable .f-person.selected .f-photo { box-shadow: 0 0 0 1cqw #3fd6cb; }
.f-status { position: absolute; z-index: 3; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; border: .4cqw solid #111; transform: translate(-50%, -50%); }
.f-status.asked { background: #f0952d; } .f-status.confirmed { background: #4caf6a; }