:root {
  --label-width: 20%;
}
[lang="es"] {
  /* Spanish tends to use slightly more characters */
  --label-width: 30%;
}

.container {
  width: 60ch;
  max-width: 90%;
  margin: 2em auto;
}
main {
  width: 100%;
}

h1 {
  color: var(--col-text-emphasis);
}
h2 {
  color: var(--col-lavendergrey);
}

label[for] {
  cursor: pointer;
}
label:not(.plain) {
  font-weight: 700;
  color: var(--col-text-emphasis);
}
.flex.row {
  flex-flow: row wrap;
}
.flex .instruct, .flex .error {
  margin: 0;
  flex: 0 1 100%;
}
.field.flex.row label {
  flex: 1 0 var(--label-width);
  align-content: center;
}
.field {
  padding: 1em;
  margin-left: -1em;
  margin-right: -1em;
}
.field.flex.row > :is(input:not([type=radio], [type=checkbox]), select, button, span) {
  flex: 1 1 calc(100% - (var(--label-width) + 10%));
}
.other.flex.row > input[type=text] {
  flex: 1 0 65%;
}
textarea {
  width: 100%;
}

.field > span > * + * {
  margin-left: 1ch;
}