/* What is printed on each piece. Every length is a multiple of --u, the length of one physical inch, so the
   same markup draws the board on screen (--u in px), in the thumbnails (a few px) and on paper (--u: 1in). */
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans.ttf') format('truetype'); font-weight: 100 900; font-display: swap; }

.paper { position: absolute; inset: 0; overflow: hidden; background: #fff; }
.paper.is-bare { background: transparent; overflow: visible; }

/* Title: one or a few lines, sized to fill the piece. */
.pc-title { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: pre; line-height: 1.04; font-family: 'Public Sans', Arial, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
.pc-title.serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; letter-spacing: -0.01em; }

/* Text block: a heading and body copy set in points. */
.pc-text { position: absolute; inset: calc(var(--u) * 0.45) calc(var(--u) * 0.5); overflow: hidden; color: #1c2a35;
  font-family: 'Public Sans', Arial, sans-serif; font-size: calc(var(--u) * var(--pt, 18) / 72); line-height: 1.36; }
.pc-text h4 { margin: 0 0 0.32em; font-size: 1.5em; line-height: 1.1; font-weight: 760; letter-spacing: -0.015em; color: #20394c; }
.pc-text p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.pc-text .hint { color: #8796a3; font-style: italic; }

/* A page from the slideshow: the picture fills the sheet. */
.pc-page { position: absolute; inset: 0; }
.pc-page img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A page whose picture isn't ready yet: a hatched slot with its name. */
.pc-ph { position: absolute; inset: calc(var(--u) * 0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 0.18);
  border: max(1px, calc(var(--u) * 0.04)) dashed #a9b8c4; color: #637b8e; text-align: center;
  background: repeating-linear-gradient(-45deg, #eef3f6 0 calc(var(--u) * 0.22), #f8fafb 0 calc(var(--u) * 0.44));
  font: 600 calc(var(--u) * 0.42) / 1.15 'Public Sans', Arial, sans-serif; padding: calc(var(--u) * 0.3); }
.pc-ph svg { width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.pc-ph small { display: block; font-weight: 450; font-size: 0.72em; color: #7b8f9f; }