/* MTL soccer flyer kit — wraps the donated Fall Soccer 2026 art (1054x1511)
   and overlays the TeamSnap registration QR in the goal mouth. Letter pages
   are 816x1056 CSS px (96dpi); the art is contained at its native aspect. */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #444; }
body { font-family: Arial, Helvetica, sans-serif; }

.flyer {
  width: 816px; height: 1056px; margin: 0 auto; overflow: hidden;
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
}
.flyer--ig { width: 1080px; height: 1350px; background: #0f2f56; }

/* The art keeps its native aspect; the sheet is the coordinate space for the
   QR overlay, so percentages hold at any export size. */
.sheet { position: relative; height: 100%; aspect-ratio: 1054 / 1511; }
.sheet img.art { width: 100%; height: 100%; display: block; }

/* Goal-mouth placement, beside "Registration is OPEN!" — covers net only. */
.qr-box {
  position: absolute; right: 4.55%; top: 15.9%; width: 16.15%;
  background: #fff; border-radius: 10px; padding: 7px 7px 5px;
  text-align: center; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.qr-box .scan { font-weight: 700; font-size: 13px; line-height: 1.25; color: #0f2f56; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 5px; }
.qr-box img { width: 100%; display: block; }
.flyer--ig .qr-box { border-radius: 12px; padding: 9px 9px 7px; }
.flyer--ig .qr-box .scan { font-size: 16px; }

@media print { html, body { background: none; } .flyer { margin: 0; } }
@page { size: letter; margin: 0; }