/* The admission ticket, styled like a wallet pass: poster + title, date / time / seats, perforation, QR stub.
   Used by index.html and ticket.html. Page sets --tk-hole to its own background so the cut-outs match. */
.tk{--tk-bg:#f5f5f7;--tk-ink:#1d1d1f;--tk-soft:#6e6e73;--tk-accent:#a8782a;
  position:relative;width:min(380px,100%);margin:0 auto;background:var(--tk-bg);color:var(--tk-ink);border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.55);font-family:var(--font,-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter","Helvetica Neue",Arial,sans-serif);
  animation:tkin .6s cubic-bezier(.28,.11,.32,1) both}
.tk-top{display:flex;gap:14px;padding:22px 22px 16px}
.tk-poster{width:84px;flex:none;aspect-ratio:2/3;border-radius:8px;overflow:hidden;background:#d2d2d7;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.tk-poster img{width:100%;height:100%;object-fit:cover;display:block}
.tk-brand{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--tk-accent);font-weight:600}
.tk-title{font-weight:700;font-size:22px;line-height:1.1;letter-spacing:-.02em;margin:6px 0;overflow-wrap:anywhere;text-wrap:balance}
.tk-sub{font-size:12px;color:var(--tk-soft)}
.tk-fields{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:4px 12px;padding:4px 22px 18px;margin:0}
.tk-fields dt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--tk-soft);font-weight:600}
.tk-fields dd{margin:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.tk-fields .wide{grid-column:1/-1;margin-top:8px}
.tk-fields .wide dd{font-size:16px}
.tk-perf{position:relative;height:0;border-top:2px dashed rgba(29,29,31,.2);margin:0 18px}
.tk-perf::before,.tk-perf::after{content:"";position:absolute;top:-13px;width:24px;height:24px;border-radius:50%;background:var(--tk-hole,#000)}
.tk-perf::before{left:-31px}.tk-perf::after{right:-31px}
.tk-stub{display:flex;gap:16px;align-items:center;padding:18px 22px 22px}
.tk-qr{width:104px;height:104px;flex:none;background:#fff;padding:7px;border-radius:10px}
.tk-qr svg{width:100%;height:100%;display:block}
.tk-qr svg path,.tk-qr svg rect[fill="black"]{fill:var(--tk-ink)}
.tk-code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:22px;font-weight:600;letter-spacing:.1em}
.tk-note{font-size:12px;color:var(--tk-soft);margin-top:4px}
.tk-state{display:inline-block;margin-top:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--tk-ink);color:var(--tk-bg)}
.tk-state.past{background:#8e8e93}
.tk-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
@keyframes tkin{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (max-width:360px){.tk-top{padding:18px 16px 12px}.tk-fields{padding:4px 16px 14px}.tk-stub{padding:14px 16px 18px}.tk-qr{width:88px;height:88px}}
@media (prefers-reduced-motion:reduce){.tk{animation:none}}