/* The print page. Everything on the paper is sized in millimetres so it comes out the same on any printer. */

#sheets { overflow-x: auto; padding-bottom: 20px; }

/* One sheet of A4, shown on screen with the printer's margin as padding. */
.paper {
  box-sizing: content-box;
  display: grid;
  align-content: start;
  margin: 0 auto 24px;
  background: #fff;
  color: #3b0a14;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.paper.a4 { width: 190mm; min-height: 277mm; padding: 10mm; grid-auto-rows: 65mm; gap: 4mm; }
.paper.band { width: 281mm; min-height: 194mm; padding: 8mm; grid-auto-rows: 22.5mm; gap: 1mm; }

/* ---------- A4 pass: 190mm x 65mm ---------- */
.pass {
  position: relative;
  display: grid;
  grid-template-columns: 17mm minmax(0, 1fr) 50mm;
  overflow: hidden;
  border: .5mm solid #3b0a14;
  border-radius: 4mm;
  background: linear-gradient(135deg, #fffaf0, #ffe9bf);
}
.pass::after {
  content: '';
  position: absolute;
  inset: 1.2mm;
  border: .25mm solid #c98f2b;
  border-radius: 3mm;
  pointer-events: none;
}
.pass-stub { display: grid; place-items: center; background: linear-gradient(180deg, #d0142c, #8f0d22); color: #f1cf7a; }
.pass-stub span {
  max-height: 58mm;
  overflow: hidden;
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 400 11pt var(--display);
  letter-spacing: .14em;
  white-space: nowrap;
}
.pass-main { display: flex; flex-direction: column; min-width: 0; padding: 5mm 6mm 4.5mm; }
.pass-eyebrow { font: 600 6.5pt var(--body); letter-spacing: .24em; text-transform: uppercase; color: #a3331c; }
.pass-event { font: 400 25pt/1.1 var(--display); color: #b3122a; }
.pass-rule {
  height: 2mm;
  margin: 1.5mm 0 2mm;
  background: radial-gradient(circle at 1mm 1mm, #c98f2b 0 .55mm, transparent .65mm) 0 0 / 3mm 2mm repeat-x;
}
.pass-guest { font: 400 15pt/1.2 var(--display); }
.pass-by { font: 400 7.5pt var(--body); color: #6b2a1a; }
.pass-event, .pass-guest, .pass-by { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pass-facts { display: flex; gap: 6mm; margin: auto 0 0; }
.pass-facts div { min-width: 0; }
.pass-facts dt { font: 600 5.5pt var(--body); letter-spacing: .2em; text-transform: uppercase; color: #a3331c; }
.pass-facts dd { margin: 0; font: 600 8.5pt/1.25 var(--body); }
.pass-qr {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 1.2mm;
  padding: 3mm;
  border-left: .4mm dashed #b98a4a;
  text-align: center;
}
.pass-qr img { display: block; width: 40mm; height: 40mm; }
.pass-qr b { font: 600 9.5pt ui-monospace, Consolas, monospace; letter-spacing: .1em; }
.pass-qr span { font: 400 6pt var(--body); letter-spacing: .14em; text-transform: uppercase; color: #6b2a1a; }

/* ---------- wristband: 281mm x 22.5mm ---------- */
.band { display: flex; overflow: hidden; border: .2mm dashed #8a6a4a; background: #fff8e6; }
.band-tab {
  flex: 0 0 16mm;
  display: grid;
  place-items: center;
  border-right: .2mm dashed #8a6a4a;
  background: repeating-linear-gradient(45deg, #e6e6e6 0 1mm, #fff 1mm 2mm);
}
.band-tab span { font: 600 5pt var(--body); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: #666; }
.band-art {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5mm;
  color: #f1cf7a;
  background:
    radial-gradient(circle at 1.5mm 1.5mm, rgba(255, 184, 28, .5) 0 .5mm, transparent .6mm) 0 0 / 4mm 4mm,
    linear-gradient(90deg, #8f0d22, #d0142c);
}
.band-art b { font: 400 14pt/1.15 var(--display); }
.band-art span { font: 500 6.5pt var(--body); color: #fff4dc; }
.band-art.tail {
  align-items: flex-end;
  background:
    radial-gradient(circle at 1.5mm 1.5mm, rgba(255, 184, 28, .5) 0 .5mm, transparent .6mm) 0 0 / 4mm 4mm,
    linear-gradient(270deg, #8f0d22, #d0142c);
}
.band-art.tail span { font: 400 10pt var(--display); letter-spacing: .08em; color: #f1cf7a; }
.band-qr { flex: 0 0 22.5mm; display: grid; place-items: center; background: #fff; }
.band-qr img { display: block; width: 18mm; height: 18mm; }
.band-who { flex: 0 0 62mm; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 3mm; }
.band-who b { font: 600 9.5pt/1.2 var(--body); }
.band-who span { font: 400 6.5pt var(--body); color: #6b2a1a; }
.band-who code { font: 600 7.5pt ui-monospace, Consolas, monospace; letter-spacing: .08em; }
.band-art b, .band-art span, .band-who b, .band-who span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@media print {
  html, body { overflow: visible; max-width: none; min-height: 0; background: #fff; }
  .topbar, .block-head, #tip, .toast, .gate { display: none !important; }
  .staff main { max-width: none; margin: 0; padding: 0; }
  /* A scrolling box would be printed as a single clipped page. */
  #sheets { overflow: visible; padding: 0; }
  .paper { min-height: 0; margin: 0; padding: 0; box-shadow: none; break-after: page; break-inside: avoid; }
  .paper:last-child { break-after: auto; }
}