.pile { position: relative; padding-bottom: 8px; }
.sheet {
  position: relative; margin: 0 var(--gutter); padding: 24px var(--pad) 48px;
  background: var(--bond) var(--tex-bond) 0 0 / 512px 512px;
  box-shadow: var(--shadow-paper);
}
.sheet + .sheet { margin-top: calc(var(--lift) * -1); padding-top: calc(24px + var(--lift)); }
.sheet:nth-of-type(even) { rotate: -.4deg; }
.sheet:nth-of-type(odd) { rotate: .3deg; }
.sheet:last-of-type { margin-bottom: 24px; }
.sheet:nth-of-type(3n+1) { background-position: 137px 61px; }
.sheet:nth-of-type(3n+2) { background-position: 311px 199px; }
.sheet__body > * + * { margin-top: 16px; }
.sheet__body > .form-head + * { margin-top: 16px; }

.form-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding-bottom: 6px; border-bottom: 1px solid var(--carbon); box-shadow: 0 3px 0 -2px var(--bond), 0 3px 0 -1px var(--carbon);
  font: 600 12px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon);
}
.form-head h2 { font: inherit; letter-spacing: inherit; }
.form-head span:last-child { white-space: nowrap; }

.form > div {
  display: grid; grid-template-columns: var(--label-col, 6ch) 1fr; column-gap: 10px; align-items: baseline;
  padding: 4px 0 3px; border-bottom: 1px solid var(--rule);
}
.form dt { font: 600 12px/16px var(--font-printed); letter-spacing: .08em; text-transform: uppercase; color: var(--carbon); }
.form dd { font-size: 16px; line-height: 24px; min-width: 0; }
.memo-rows > div { padding-block: 3px 2px; }
.form--long { --label-col: 11ch; }
.form--slip { --label-col: 15ch; }
@media (max-width: 340px) { .form > div { grid-template-columns: 1fr; --label-col: 9ch; } }

.typed { font-weight: 700; }
.typed .caret-anchor { position: relative; }
.caret {
  position: absolute; left: 0; top: 0; width: .6em; height: 1em; background: var(--carbon); opacity: 0;
  pointer-events: none; z-index: 3; mix-blend-mode: multiply; margin: 0 !important;
}
.sheet__body { position: relative; }

@media (min-width: 760px) {
  .sheet { padding: 32px 32px 56px; margin-inline: 0; }
  .sheet + .sheet { padding-top: calc(32px + var(--lift)); }
  .sheet__body > * + * { margin-top: 20px; }
  .form-head { font-size: 13px; line-height: 18px; }
  .form dt { font-size: 13px; line-height: 18px; }
  .form dd { font-size: 18px; line-height: 28px; }
  .form > div { padding: 5px 0 4px; }
}
@media (min-width: 760px) and (max-width: 1099px) { .sheet { margin-inline: 12px; } }