/* An entry ticket: the countdown on the left, the stub on the right, a perforation between. */
.ticket {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  background: var(--paper-hi); box-shadow: var(--shadow-paper);
  border: 1px solid var(--line);
  -webkit-mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 14px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 14px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
}
.ticket-main { padding: clamp(24px, 4vw, 40px) clamp(24px, 5vw, 56px); }
.ticket-stub {
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px);
  border-left: 2px dashed rgba(27, 23, 18, .35);
  display: grid; align-content: center; gap: 6px; text-align: center; min-width: 210px;
}
.ticket-stub .no { font: 400 46px/1 var(--f-display); }
.ticket-stub .kicker { font-size: 11px; }
.ticket-stub .hand { font-size: 24px; color: var(--ink-2); transform: rotate(-3deg); }

.countdown { display: flex; gap: clamp(10px, 3vw, 28px); margin-top: 18px; flex-wrap: wrap; }
.countdown .unit { text-align: center; min-width: 64px; }
.countdown .num {
  display: block; font: 400 clamp(44px, 8vw, 80px)/1 var(--f-display);
  font-variant-numeric: tabular-nums lining-nums;
}
.countdown .lbl { font: 700 12px/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }
.countdown .sep { font: 400 clamp(36px, 6vw, 64px)/1 var(--f-display); color: var(--kraft); align-self: flex-start; }
.countdown-done { font: 600 34px/1.1 var(--f-hand); margin-top: 18px; display: none; }
.ticket.is-live .countdown { display: none; }
.ticket.is-live .countdown-done { display: block; }

@media (max-width: 720px) {
  .ticket { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .ticket-stub { border-left: 0; border-top: 2px dashed rgba(27, 23, 18, .35); min-width: 0; }
  .countdown .sep { display: none; }
  .countdown { justify-content: space-between; gap: 6px; }
  .countdown .unit { min-width: 0; flex: 1; }
  .countdown .lbl { font-size: 10px; letter-spacing: .14em; }
}