/* The printable pack: letter (4 papers), Nice List certificate, envelope, postcard. Sizes in inches so
   one stylesheet prints on US Letter and, with .a4 on the container, on A4. Based on prototype/sample.html. */
.pack { --pw: 8.5in; --ph: 11in; --ink: #3b2414; --red: #9e1b1b; --green: #1f4d2e; --gold: #b8892b; --navy: #1d3557; }
.pack.a4 { --pw: 8.27in; --ph: 11.69in; }
.pack .sheet { width: var(--pw); height: var(--ph); position: relative; overflow: hidden; color: var(--ink);
  font-family: 'IM Fell English', Georgia, serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; text-align: left; line-height: normal; }
.pack .sheet.wide { width: var(--ph); height: var(--pw); page: wide; }
.pack .sheet p { margin: 0; }

/* letter, shared */
.pack .letter header { position: absolute; top: .75in; left: 0; right: 0; text-align: center; }
.pack .letter .from { font-family: 'Cinzel', serif; letter-spacing: .25em; font-size: 10pt; color: var(--green); }
.pack .letter h1 { font-family: 'Mountains of Christmas', cursive; color: var(--red); font-size: 34pt; margin: 2px 0 0; line-height: 1.2; }
.pack .letter .place { font-style: italic; font-size: 11pt; }
.pack .letter .date { position: absolute; right: 1.05in; top: 1.85in; font-style: italic; font-size: 11pt; }
.pack .letter .body { position: absolute; top: 2.15in; left: 1.05in; right: 1.05in; font-size: 13.2pt; line-height: 1.5; }
.pack .letter .body p { margin: 0 0 .8em; }
.pack .letter .sign { font-family: 'Great Vibes', cursive; font-size: 40pt; color: var(--red); line-height: 1; margin: 2px 0 6px; }
.pack .letter .ps { font-style: italic; }
.pack .holly { position: absolute; width: 1.15in; top: .6in; }
.pack .holly.l { left: .65in; } .pack .holly.r { right: .65in; transform: scaleX(-1); }
.pack .seal { position: absolute; width: 1.35in; right: .85in; bottom: .8in; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
.pack .frame { position: absolute; inset: .45in; }

/* paper: vintage parchment */
.pack .p-vintage { background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(140,95,40,.28), transparent 60%),
    radial-gradient(ellipse at 10% 95%, rgba(140,95,40,.22), transparent 50%),
    radial-gradient(ellipse at 95% 5%, rgba(140,95,40,.18), transparent 45%), #f3e4c4; }
.pack .p-vintage::before { content: ''; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); }
.pack .p-vintage .frame { border: 2px solid rgba(158,27,27,.55); outline: 1px solid rgba(158,27,27,.35); outline-offset: 5px; }

/* paper: North Pole post office (icy blue, airmail border) */
.pack .p-northpole { --ink: #1c2b44; background:
    radial-gradient(ellipse at 50% 0%, #ffffff, transparent 70%),
    linear-gradient(180deg, #eef5fb, #dce9f4); }
.pack .p-northpole::before { content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23b5cde3' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M30 18v24M18 30h24M21.5 21.5l17 17M38.5 21.5l-17 17'/%3E%3Cpath d='M118 96v18M109 105h18M111.6 98.6l12.8 12.8M124.4 98.6l-12.8 12.8'/%3E%3Cpath d='M70 130v12M64 136h12'/%3E%3C/g%3E%3C/svg%3E"); }
.pack .p-northpole .frame { inset: .3in; border: .16in solid transparent;
  border-image: repeating-linear-gradient(45deg, #c62828 0 .22in, #fff .22in .32in, #1d3557 .32in .54in, #fff .54in .64in) 30; }
.pack .p-northpole .from { color: #c62828; }
.pack .p-northpole h1 { font-family: 'Great Vibes', cursive; color: var(--navy); font-size: 44pt; }
.pack .p-northpole .sign { color: var(--navy); }

/* paper: playful (candy-cane border, rounded hand) */
.pack .p-playful { background: #fffaf0; }
.pack .p-playful .frame { inset: .32in; border: .18in solid transparent; border-radius: .35in;
  border-image: repeating-linear-gradient(-45deg, #d62828 0 .16in, #fff .16in .32in) 30; }
.pack .p-playful .body { font-family: 'Patrick Hand', 'Comic Sans MS', cursive; font-size: 15pt; line-height: 1.42; }
.pack .p-playful h1 { color: #1f7a3a; font-size: 40pt; }
.pack .p-playful .from { color: #d62828; }
.pack .p-playful .place, .pack .p-playful .date { font-family: 'Patrick Hand', cursive; font-style: normal; }

/* paper: classic (white, green and gold rules) */
.pack .p-classic { background: #fffdf8; }
.pack .p-classic .frame { border: 3px double var(--gold); box-shadow: inset 0 0 0 6px #fffdf8, inset 0 0 0 7.5px var(--green); }
.pack .p-classic .body { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14.5pt; line-height: 1.42; }
.pack .p-classic h1 { font-family: 'Cinzel', serif; font-weight: 700; color: var(--green); font-size: 30pt; letter-spacing: .06em; margin-top: 6px; }
.pack .p-classic .from { color: var(--gold); }
.pack .p-classic .place, .pack .p-classic .date { font-family: 'Cormorant Garamond', Georgia, serif; }

/* certificate */
.pack .cert { background: #fbf6ea; }
.pack .cert .border { position: absolute; inset: .35in; border: 10px double var(--gold); }
.pack .cert .border2 { position: absolute; inset: .62in; border: 1.5px solid var(--green); }
.pack .cert .inner { position: absolute; inset: .9in 1.1in; text-align: center; }
.pack .cert .kicker { font-family: 'Cinzel', serif; letter-spacing: .3em; color: var(--green); font-size: 12pt; margin-top: .1in; }
.pack .cert h2 { font-family: 'Mountains of Christmas', cursive; color: var(--red); font-size: 54pt; margin: 10px 0 8px; line-height: 1.1; }
.pack .cert .certify { font-size: 15pt; font-style: italic; }
.pack .cert .name { font-family: 'Great Vibes', cursive; font-size: 80pt; margin: 6px 0 0; line-height: 1.05; white-space: nowrap; }
.pack .cert .rule { width: 60%; margin: 0 auto; border-top: 1.5px solid var(--gold); }
.pack .cert .for { font-size: 15pt; margin: 16px auto 0; max-width: 7.4in; line-height: 1.5; }
.pack .cert .given { font-style: italic; font-size: 12pt; margin-top: 14px; }
.pack .cert .sigs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 .3in; }
.pack .cert .sig { width: 3in; text-align: center; font-size: 11pt; white-space: nowrap; }
.pack .cert .sig b { display: block; font-family: 'Great Vibes', cursive; font-weight: 400; font-size: 30pt; color: var(--red); border-bottom: 1px solid var(--ink); line-height: 1.1; }
.pack .cert .goldseal { position: absolute; left: 50%; bottom: -.15in; width: 1.55in; transform: translateX(-50%); }

/* envelope */
.pack .env { background: #fff; }
.pack .env .guide { position: absolute; top: .45in; left: 0; right: 0; text-align: center; font-family: Arial, sans-serif; font-size: 9pt; color: #777; }
.pack .env .face { position: absolute; left: calc((var(--ph) - 9.5in) / 2); top: calc((var(--pw) - 4.125in) / 2); width: 9.5in; height: 4.125in; border: 1px dashed #aaa; background: #f6ecd6; overflow: hidden; }
.pack .env .stripe { position: absolute; inset: 0; border: 9px solid transparent; border-image: repeating-linear-gradient(45deg, var(--red) 0 14px, #fff 14px 28px, var(--green) 28px 42px, #fff 42px 56px) 9; }
.pack .env .sender { position: absolute; left: .45in; top: .35in; font-size: 11pt; line-height: 1.3; }
.pack .env .sender b { font-family: 'Cinzel', serif; font-size: 12pt; color: var(--red); }
.pack .env .stamp { position: absolute; right: .4in; top: .3in; width: 1.05in; height: 1.26in; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.pack .env .postmark { position: absolute; right: 1.15in; top: .35in; width: 1.45in; opacity: .75; transform: rotate(-12deg); }
.pack .env .to { position: absolute; left: 3.6in; top: 1.75in; font-size: 13pt; line-height: 1.35; }
.pack .env .to .nm { font-family: 'Great Vibes', cursive; font-size: 34pt; line-height: 1; }
.pack .env .special { position: absolute; left: .45in; bottom: .35in; font-family: 'Cinzel', serif; color: var(--red); font-size: 13pt; letter-spacing: .12em; border: 2px solid var(--red); padding: 3px 10px; transform: rotate(-3deg); }

/* postcard */
.pack .postcard { background: #f4ead6; }
.pack .postcard .pic { position: absolute; left: calc((var(--ph) - 10in) / 2); top: .5in; width: 10in; height: 6.67in; object-fit: cover; border: 8px solid #fff; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.pack .postcard .pic.empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 1in; font-size: 22pt; color: #7a5a3a; font-style: italic;
  background: repeating-linear-gradient(45deg, #efe2c8 0 .3in, #f7eedb .3in .6in); }
.pack .postcard .caption { position: absolute; left: 0; right: 0; bottom: .45in; text-align: center; font-family: 'Great Vibes', cursive; font-size: 26pt; color: var(--red); }

/* blank printables */
.pack .letter .lines span { display: block; height: .42in; border-bottom: 1px solid rgba(59,36,20,.35); }
.pack .letter .lines { margin: .1in 0 .25in; }
.pack .blankline { display: inline-block; width: 4.6in; border-bottom: 1.5px solid currentColor; height: 1em; vertical-align: -2px; }
.pack .env .to .blankline { width: 3.6in; height: 1.6em; }
.pack .tosanta header { top: .7in; }
.pack .tosanta h1 { font-size: 44pt; }
.pack .tosanta .body { top: 1.95in; font-size: 14pt; line-height: 1.25; }
.pack .tosanta .body p { margin: 0 0 .17in; }
.pack .tosanta .body ol { margin: 0 0 .15in; padding-left: .3in; }
.pack .tosanta .body li { margin-bottom: .12in; }
.pack .tosanta .fill { display: inline-block; border-bottom: 1px solid rgba(59,36,20,.5); height: 1em; vertical-align: -2px; }
.pack .tosanta .w0 { width: .6in; } .pack .tosanta .w2 { width: 2in; } .pack .tosanta .w3 { width: 3.2in; } .pack .tosanta .w4 { width: 3.6in; } .pack .tosanta .w5 { width: 5.6in; }
.pack .tosanta .treats { white-space: nowrap; }
.pack .tosanta .love { margin-top: .1in; }
.pack .tosanta .drawbox { position: absolute; left: 1.05in; right: 1.05in; bottom: .8in; height: 1.55in; border: 1.5px dashed rgba(59,36,20,.4); border-radius: 10px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; font-style: italic; font-size: 10pt; color: rgba(59,36,20,.6); }
.pack.a4 .tosanta .drawbox { height: 2.1in; }

/* free preview watermark */
.pack .wm::after { content: 'PREVIEW  ·  PREVIEW  ·  PREVIEW  ·  PREVIEW'; position: absolute; left: -30%; right: -30%; top: 42%; transform: rotate(-32deg);
  font: 700 46pt Arial, sans-serif; color: rgba(158,27,27,.16); text-align: center; white-space: nowrap; pointer-events: none;
  text-shadow: 0 -2.4in 0 rgba(158,27,27,.16), 0 2.4in 0 rgba(158,27,27,.16), 0 -4.8in 0 rgba(158,27,27,.16), 0 4.8in 0 rgba(158,27,27,.16); }
.pack .wm { user-select: none; -webkit-user-select: none; }

/* on screen, sheets are scaled to fit their box (--k set by pack.js) */
.sheet-box { position: relative; overflow: hidden; margin: 0 auto 16px; box-shadow: 0 4px 18px rgba(0,0,0,.35); border-radius: 2px; }
.sheet-box > .sheet { position: absolute; top: 0; left: 0; transform-origin: 0 0; transform: scale(var(--k, 1)); }
@media print {
  .pack .wm, .preview-only { display: none !important; }
  .sheet-box { width: auto !important; height: auto !important; box-shadow: none; margin: 0; overflow: visible; border-radius: 0; }
  .sheet-box > .sheet { position: relative; transform: none; }
  /* landscape sheets: the wrapper must sit on the same named page, or Chrome adds blank pages around it */
  .sheet-box.wide { page: wide; }
  /* only landscape sheets printed: the default page is set to landscape instead (pack.js callers), no named page */
  .pack.all-wide .sheet, .pack.all-wide .sheet-box { page: auto; }
  .sheet-box.skip { display: none !important; }
  /* a page break before every printed sheet except the first, so no blank page follows the last */
  .sheet-box:not(.skip) ~ .sheet-box > .sheet { break-before: page; }
}