/* Lab #003 — shared 6x9 print template. GEOMETRY.md is the law encoded here:
   canvas 2775x1875 = 9.25"x6.25" at 300dpi (0.125" bleed each edge);
   safe zone 75px inside canvas; ink-free address block 1200x712.5 at
   right 82.5 / bottom 75 (bleed-inclusive); front bottom 712.5px = the
   opposite-side caution band (nothing address-like lives there).
   House voice at print scale: DM Serif Display + DM Sans, spruce on paper. */

@font-face {
  font-family: "DM Sans";
  src: url("/fonts/dm-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "DM Serif Display";
  src: url("/fonts/dm-serif-display-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --paper: #f7f4ec;
  --paper-deep: #efeadd;
  --ink: #202b25;
  --muted: #5d6b62;
  --spruce: #1e4d3f;
  --spruce-deep: #143528;
  --gold: #b28a34;
  --line: #d9d1bd;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #555; }

.card {
  position: relative;
  width: 2775px;
  height: 1875px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
}
.serif { font-family: "DM Serif Display", Georgia, serif; font-weight: 400; }

/* ---- the shared back skeleton (only .b-lead varies per direction) ---- */
.back .b-copy {
  position: absolute;
  left: 105px;
  top: 105px;
  width: 1310px;
  height: 1665px;
  display: flex;
  flex-direction: column;
}
.back .b-lead {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 88px;
  line-height: 1.22;
  letter-spacing: .002em;
}
.back .b-url {
  margin-top: 56px;
  font-size: 66px;
  font-weight: 700;
  color: var(--spruce);
  letter-spacing: .01em;
}
.back .offer {
  margin-top: 40px;
  font-size: 56px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.back .qrblock {
  margin-top: 64px;
  display: flex;
  align-items: center;
  gap: 52px;
}
.back .qr {
  width: 330px;
  height: 330px;
  display: block;
  background: #fff;
  border: 6px solid var(--ink);
  border-radius: 12px;
}
.back .scan {
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 76px;
  color: var(--ink);
}
.back .sig {
  margin-top: auto;
  font-size: 48px;
  color: var(--muted);
}

/* the ink-free address block: white = no ink laid down. Lob prints here. */
.addr-zone {
  position: absolute;
  width: 1200px;
  height: 712.5px;
  right: 82.5px;
  bottom: 75px;
  background: #fff;
}

/* ---- overlay lever (?overlay=1): the zones draw themselves, labeled ---- */
.ov { display: none; position: absolute; z-index: 9; pointer-events: none; }
html.overlay .ov { display: block; }
.ov-label {
  position: absolute;
  top: -54px;
  left: 0;
  font: 700 38px/1 "DM Sans", sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(20, 53, 40, .92);
  color: #fff;
  padding: 8px 18px;
  border-radius: 8px;
  white-space: nowrap;
}
.ov-trim { inset: 37.5px; border: 3px dashed #c0392b; }
.ov-safe { inset: 75px; border: 3px dashed #2a7ab8; }
.ov-addr {
  width: 1200px; height: 712.5px; right: 82.5px; bottom: 75px;
  border: 4px solid #8e44ad;
  background: repeating-linear-gradient(45deg, rgba(142, 68, 173, .10) 0 18px, transparent 18px 36px);
}
.ov-addr .ov-sample {
  position: absolute;
  left: 90px; bottom: 130px;
  font: 400 46px/1.45 "Courier New", monospace;
  color: #444;
}
.ov-band {
  left: 0; right: 0; bottom: 0; height: 712.5px;
  background: rgba(192, 57, 43, .08);
  border-top: 4px dashed rgba(192, 57, 43, .6);
}
.ov-band .ov-label { top: 12px; left: 12px; background: rgba(192, 57, 43, .9); }