/* Name styles: typeface, weight, case and spacing for "Maxime Rijvers".
   The style is chosen in the editor (Name) and stored as nameStyle in data/content.json.
   --name-small is the size in the top-left corner; each typeface needs a slightly different size to look the same. */

/* Grotesk: bold capitals, like an agency */
.name {
  --name-small: 13px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Didone: high-contrast capitals, like a fashion masthead */
[data-name-style='didone'] .name {
  --name-small: 15px;
  font-family: 'Bodoni Moda', 'Bodoni 72', Didot, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Italic serif: soft and literary, surname in italics */
[data-name-style='italic'] .name {
  --name-small: 19px;
  font-family: 'Instrument Serif', 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: none;
}

[data-name-style='italic'] .name .name__last {
  font-style: italic;
}

/* Spaced: light, airy capitals */
[data-name-style='spaced'] .name {
  --name-small: 11px;
  font-family: 'Jost', Futura, 'Helvetica Neue', sans-serif;
  font-weight: 300;
  letter-spacing: 0.2em;
}

/* Serif: the same serif as the rest of the site */
[data-name-style='serif'] .name {
  --name-small: 17px;
  font-family: 'Newsreader', 'Times New Roman', serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
}

/* Mono: typewriter capitals, like a contact-sheet label */
[data-name-style='mono'] .name {
  --name-small: 12px;
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-weight: 500;
  letter-spacing: -0.04em;
}