.drawing {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1rem, 4vw, 2.5rem);
}

/* The sheet: a bordered drawing with registration marks at its corners. */
.sheet {
  position: relative;
  width: min(940px, 100%);
  padding: clamp(1.75rem, 5vw, 3rem);
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}

.sheet-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 860px) {
  .sheet-grid {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
  }

  .plate {
    position: sticky;
    top: clamp(1.75rem, 5vw, 3rem);
  }
}

.plate {
  display: grid;
  gap: 1.25rem;
  align-content: start;
}

.plate-head {
  display: grid;
  gap: .5rem;
}

.lede {
  color: var(--dim);
  font-size: 1rem;
  max-width: 32ch;
}

.spec {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
}

.spec-row dd {
  font-family: var(--font-mono);
  font-size: .82rem;
  text-align: right;
}

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

.sheet-foot a {
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
}

.sheet-foot a:hover {
  color: var(--amber);
  border-bottom-color: var(--amber);
}