/* Event flyers stapled 2 a brick wall. Shared by /events (the flyer wall) + the homepage (next 3 nights),
   so a night's flyer looks the same everywhere. Needs Permanent Marker + Caveat (+ the site's usual fonts). */
:root{--f-marker:"Permanent Marker","Comic Sans MS",cursive;--f-hand:"Caveat","Comic Sans MS",cursive}
.bricks{position:relative;padding:34px 22px 26px;border:6px solid #2a0d0d;box-shadow:8px 8px 0 var(--ink);
  background-color:#8c3b2e;
  background-image:linear-gradient(#ffffff0d 2px,transparent 2px),linear-gradient(90deg,#3a1410 3px,transparent 3px),linear-gradient(90deg,#3a1410 3px,transparent 3px),linear-gradient(#3a1410 3px,transparent 3px);
  background-size:100% 30px,64px 60px,64px 60px,100% 30px;background-position:0 3px,0 0,32px 30px,0 0}
.bricks::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0,#ff1fb433,transparent 60%),radial-gradient(ellipse at 50% 120%,#0008,transparent 60%)}
.flyers{position:relative;z-index:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:34px 26px;align-items:start}
.flyer{position:relative;transform:rotate(var(--r,0deg));box-shadow:5px 7px 0 #0008;transition:transform .2s}
.flyer:hover{transform:rotate(0) scale(1.02);z-index:3}
.flyer .staple{position:absolute;top:8px;width:18px;height:4px;background:linear-gradient(#eee,#888);border:1px solid #555;z-index:2}
.flyer .staple.l{left:14px;transform:rotate(-8deg)}.flyer .staple.r{right:14px;transform:rotate(6deg)}
.fl-in{padding:18px 14px 12px;display:flex;flex-direction:column;gap:10px}
.fl-badge{position:absolute;top:-14px;right:-10px;z-index:3;font:400 15px/1 var(--f-bubble);color:#fff;text-shadow:1px 1px 0 var(--ink);background:var(--hot);width:64px;height:64px;display:grid;place-items:center;text-align:center;transform:rotate(12deg);pointer-events:none;
  clip-path:polygon(50% 0,61% 18%,82% 8%,79% 31%,100% 35%,84% 52%,98% 71%,75% 72%,73% 95%,55% 82%,38% 100%,32% 77%,9% 87%,17% 63%,0 50%,17% 37%,8% 14%,32% 21%)}
.fl-badge.free{background:#2d8a00}.fl-badge.tonite{background:#ff3b3b;animation:wob 1s infinite}
.fl-photo{aspect-ratio:16/10;border:2px solid var(--ink);overflow:hidden;background:#000}
.fl-photo img{width:100%;height:100%;object-fit:cover}
.fl-date{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fl-date .d{font:400 34px/1 var(--f-bubble)}
.fl-date .m{font:700 12px var(--f-pixel);letter-spacing:.06em}
.fl-title{margin:0;font:400 24px/1.05 var(--f-marker);overflow-wrap:anywhere}
.fl-title a{color:inherit;text-decoration:none}
.fl-title a:hover{text-decoration:underline}
.fl-meta{font:14px/1.5 var(--f-sys);overflow-wrap:anywhere}
.fl-meta a{color:inherit}
.fl-desc{font:700 19px/1.15 var(--f-hand);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
/* buttons: a 2-up grid of big tap targets (never overlapping, always a gap); an odd one out spans the row */
.fl-acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fl-acts .mini{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:8px 10px;font:700 11px/1.2 var(--f-pixel);letter-spacing:.03em;text-align:center;
  color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;box-shadow:2px 2px 0 var(--ink);text-decoration:none;cursor:pointer;min-width:0}
.fl-acts .mini:hover{background:var(--blush);color:var(--ink)}
.fl-acts .mini:active{transform:translateY(1px);box-shadow:1px 1px 0 var(--ink)}
.fl-acts .mini:last-child:nth-child(odd){grid-column:1/-1}
.fl-acts .mini.tix{background:var(--lime)}
.fl-tabs{display:flex;border-top:2px dashed currentColor;margin-top:4px}
.fl-tab{flex:1;min-width:0;height:74px;letter-spacing:.06em;border:0;border-right:2px dashed currentColor;background:transparent;color:inherit;writing-mode:vertical-rl;font:11px/1.1 var(--f-pixel);padding:4px 0;overflow:hidden;cursor:pointer;transition:transform .35s,opacity .35s}
.fl-tab:last-child{border-right:0}
.fl-tab:hover{background:#0000000f}
.fl-tab.torn{transform:translateY(40px) rotate(18deg);opacity:0;pointer-events:none}
/* flyer looks: xerox, neon rave, lemon handout, pink */
.f-xerox{background:#f2f0ea;color:#111}
.f-xerox .fl-photo img{filter:grayscale(1) contrast(1.8) brightness(1.05)}
.f-xerox .fl-in{background:repeating-linear-gradient(0deg,#0000 0 3px,#0000000a 3px 4px)}
.f-xerox .fl-date .d{font-family:var(--f-marker)}
.f-rave{background:linear-gradient(160deg,#16001f,#3d0090 55%,#c4007f);color:#fff;border:2px solid #ff7ad9}
.f-rave .fl-title{font-family:var(--f-bubble);font-size:26px;color:var(--lemon);text-shadow:2px 2px 0 #000}
.f-rave .fl-photo{border-color:#19f0ff;box-shadow:0 0 12px #19f0ff}
.f-rave .fl-photo img{filter:saturate(1.6) hue-rotate(-20deg)}
.f-rave .fl-acts .mini{background:#16001f;color:#fff;border-color:#fff;box-shadow:2px 2px 0 #000}
.f-rave .fl-acts .mini.tix{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.f-lemon{background:var(--lemon);color:var(--ink)}
.f-lemon .fl-photo{transform:rotate(-2deg);border-width:3px}
.f-pink{background:#ff9ce0;color:var(--ink)}
.f-pink .fl-title{font-family:var(--f-script);font-size:32px}
@media (max-width:520px){
  .bricks{padding:30px 14px 20px}
  .flyers{grid-template-columns:1fr;gap:30px}
  .flyer,.flyer:hover{transform:rotate(calc(var(--r,0deg) / 3))}
}