:root {
  --foreground: #3b3b3b;
  --background: #fff;
  --fs-base: 16px;
  --lh-base: 20px;

  /**
   * Tamaño secundario, para lo que no es contenido: el aviso de cookies
   * y su botón. Ver consent.css.
   */
  --fs-small: 13px;
  --lh-small: 16px;
  --max-width: 920px;

  /**
   * Ancho máximo de las fotografías, uno por orientación. No están
   * elegidos para que las tres midan igual de alto, sino para que las
   * verticales pesen más en la página: el grueso del archivo son 3:4 y
   * quedaban pequeñas al lado de una horizontal.
   *
   * La horizontal va atada a --max-width a propósito, para que comparta
   * borde con la columna de texto.
   *
   * Ojo: estos tres números están repetidos en `$caps`, dentro de
   * site/snippets/image.php, que los necesita para escribir el `sizes`
   * del <img>. No hay forma de que el uno lea al otro —`sizes`
   * no acepta var()— así que si se tocan aquí hay que tocarlos allí.
   */
  --width-landscape: var(--max-width);
  --width-square: 700px;
  --width-portrait: 560px;

  /**
   * Alto del menú: dos líneas de texto y el hueco entre ellas. Se
   * calcula en vez de medirse para no depender de JS, así que da por
   * hecho que ni el título ni el menú pasan de una línea.
   */
  --nav-height: calc(2 * var(--lh-base) + var(--fs-base));

  /**
   * Unidad de espaciado de la marca: el ancho de la palabra ITERARE en
   * Untitled Serif. app.js la mide y sobreescribe estos valores en
   * cuanto carga la tipografía; lo de aquí es sólo la aproximación que
   * se usa mientras tanto, y si no hay JS.
   */
  --space-iterare: 4.2324em;
  --space-word: 0.2148em;
}