/* The printable tools: a form, a live preview on paper, and a print sheet that replaces the page when printing.
   The paper is sized in real inches: a 5 x 7 in card, two to a landscape sheet, or an 8 x 10 in sign. Both fit
   US Letter and A4. */
@font-face { font-family:"Cedarville Cursive"; src:url(/fonts/CedarvilleCursive-Regular.woff2) format("woff2"); font-display:swap; }

.maker { margin:22px 0 8px; padding:22px; border-radius:18px; background:rgba(217,211,209,.06); }
.maker label { display:block; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--pearl); }
.maker .field { margin-bottom:16px; }
.maker input, .maker textarea, .maker select { width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(131,133,133,.45); background:rgba(0,0,0,.25); color:var(--pearl); font:inherit; font-size:16px; }
.maker textarea { min-height:280px; line-height:1.45; resize:vertical; }
.maker textarea.short { min-height:84px; }
.maker input:focus, .maker textarea:focus, .maker select:focus { outline:2px solid var(--ember); outline-offset:1px; }
.guide .maker .hint { margin:6px 0 0; font-size:14px; line-height:1.45; color:var(--grey); }
.guide .maker .hint.bad { color:var(--ember); }
.actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:4px; }
.print-btn { appearance:none; border:0; cursor:pointer; background:var(--ember); color:var(--ink); font:inherit; font-weight:700; font-size:16px; padding:13px 22px; border-radius:999px; text-decoration:none; }
.print-btn[disabled] { opacity:.4; cursor:not-allowed; }
.alt-link { font-size:15px; }

.preview { margin:24px 0 8px; overflow:hidden; }
.scaler { transform-origin:top left; width:max-content; }

/* The paper itself: always ink on white, whatever the site's theme. */
.paper { background:#fff; color:#16191a; display:flex; flex-direction:column; overflow:hidden; text-align:center; box-shadow:0 8px 34px rgba(0,0,0,.45); -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.guide .paper p { margin:0; color:inherit; font-size:inherit; line-height:1.35; }
.paper > * { flex:none; }
.paper .names { font-family:"Cedarville Cursive",cursive; }
.paper .qr { display:block; image-rendering:pixelated; }
.paper .qr-empty { display:flex; align-items:center; justify-content:center; border:2px dashed #9a9d9d; border-radius:10px; color:#6d7070; font-weight:500; line-height:1.3; }

.card { width:480px; height:672px; padding:28px 32px 24px; }
.card .top { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#b84a1c; }
.card .top span:last-child { color:#16191a; letter-spacing:.03em; text-transform:none; font-size:14px; font-weight:500; }
.card .names { font-size:32px; line-height:1.15; margin-top:12px; }
.card h2.title { margin:12px 0 0; font-size:27px; line-height:1.12; font-weight:700; letter-spacing:-.01em; color:#16191a; }
.guide .card p.msg { margin-top:9px; font-size:14px; color:#3d4142; text-wrap:balance; }
.guide .card ul.hunt { list-style:none; margin:14px 0 0; padding:0; text-align:left; flex:1 1 0; min-height:0; overflow:hidden; }
.guide .card ul.hunt li { display:flex; gap:10px; align-items:flex-start; margin:0 0 .46em; color:#16191a; font-size:inherit; line-height:1.24; }
.card ul.hunt i { flex:none; width:.95em; height:.95em; margin-top:.1em; border:1.5px solid #16191a; border-radius:3px; }
.card .foot { flex:none; display:flex; gap:14px; align-items:center; justify-content:center; margin-top:8px; text-align:left; }
.card .foot .qr, .card .foot .qr-empty { width:180px; height:180px; flex:none; margin:-14px 0 -14px -14px; } /* the code itself about 1.5 in, the guide's minimum; the margin eats its white border */
.guide .card .foot p { font-size:14px; color:#3d4142; }
.guide .card .foot p strong { display:block; font-size:16px; color:#16191a; }

.sign { width:768px; height:960px; padding:58px 64px 46px; align-items:center; }
.sign .names { font-size:58px; line-height:1.15; }
.sign h2.title { margin:14px 0 0; font-size:58px; line-height:1.08; font-weight:700; letter-spacing:-.02em; color:#16191a; text-wrap:balance; }
.guide .sign p.msg { margin-top:18px; font-size:26px; line-height:1.3; color:#3d4142; text-wrap:balance; }
.sign .qr-wrap { flex:1 1 0; min-height:0; display:flex; align-items:center; justify-content:center; }
.sign .qr, .sign .qr-empty { width:470px; height:470px; }
.sign .qr-empty { font-size:24px; padding:40px; }
.guide .sign p.how { font-size:19px; color:#5a5e5f; }

.print-sheet { display:none; }

@media (max-width:420px) { .maker { padding:16px; } }

@media print {
  html, body { background:#fff !important; padding:0 !important; margin:0 !important; }
  body > main { display:none !important; }
  .print-sheet { display:flex; align-items:center; justify-content:center; gap:0; width:100%; height:100vh; background:#fff; break-after:avoid; page-break-after:avoid; overflow:hidden; }
  .print-sheet .paper { box-shadow:none; outline:1px dashed #c4c6c6; outline-offset:0; flex:none; }
}