.table {
  display: grid;
  justify-items: center;
  /* Without this the two rows stretch to fill 100svh and the colophon
     drifts far below the sheet on a short page. */
  align-content: start;
  min-height: 100svh;
  padding: clamp(1.25rem, 5vw, 3.5rem) clamp(.75rem, 4vw, 2rem) clamp(2rem, 6vw, 3.5rem);
}

/* The sheet: a print lying on a dark table, set down a touch off-square. */
.sheet {
  width: min(880px, 100%);
  padding: clamp(1rem, 3vw, 1.5rem);
  background: var(--sheet);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .28) inset,
    0 24px 60px rgba(0, 0, 0, .55),
    0 3px 10px rgba(0, 0, 0, .4);
  rotate: -.35deg;
}

.sheet-head {
  display: grid;
  gap: .35rem;
  padding: 1.25rem clamp(.25rem, 2vw, .75rem) 1.5rem;
}

.sheet-head h1 {
  font-size: clamp(2.1rem, 7vw, 3.4rem);
}

.sheet-head .trade {
  max-width: 34ch;
  color: var(--dim);
  font-size: clamp(.95rem, 2.4vw, 1.05rem);
}

/* The contact sheet grid never collapses to one column — the grid is the
   whole point of the format. */
.frames {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.6rem, 2.5vw, 1rem);
}

@media (min-width: 720px) {
  .frames {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.sheet-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: clamp(1.25rem, 4vw, 1.75rem);
  padding: 1rem clamp(.25rem, 2vw, .75rem) .25rem;
  border-top: 1px solid var(--rule);
}

.colophon {
  margin-top: 1.5rem;
  color: rgba(233, 229, 221, .45);
  text-align: center;
}

.colophon a {
  color: rgba(233, 229, 221, .72);
  border-bottom: 1px solid rgba(233, 229, 221, .3);
}

.colophon a:hover {
  color: var(--edge);
  border-bottom-color: var(--edge);
}