.lf-eyebrow{font-family:var(--ui);font-size:11px;font-weight:500;letter-spacing:.01em;
  text-transform:none;color:var(--warm)}
.lf-hd p{color:rgba(0,0,0,.68)}

.lf-f > span{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.005em;
  text-transform:none;color:rgba(0,0,0,.74);line-height:1.3;
  /* one line, always: the two selects sit in separate grid cells, so a label
     that wraps drops its own control and nothing else */
  min-height:15px;display:flex;align-items:flex-end;gap:6px;margin-bottom:8px}
.lf-f > span i{font-style:normal;font-weight:400;color:rgba(0,0,0,.42);letter-spacing:.005em}

.lf-f input,.lf-f select,.lf-f textarea{color:#000}
.lf-f input::placeholder,.lf-f textarea::placeholder{color:rgba(0,0,0,.4)}
.lf-fine{color:rgba(0,0,0,.58)}
.lf-fine a{border-bottom-color:rgba(0,0,0,.3)}
.lf-done p{color:rgba(0,0,0,.7)}
.lf-done .ref{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.005em;
  text-transform:none;color:rgba(0,0,0,.5)}

/* below 620px the grid is one column, so a wrapped label costs nothing and the
   pin only gets in the way */
@media(max-width:620px){ .lf-f > span{min-height:0} }

/* the rows close up by 20%. Row gap only: the column gap is what keeps the
   two fields on a row from reading as one control, so it holds at 16px. */
.lf-grid{row-gap:13px}