/* Wordmark de PokeWarden.
 *
 * Va como HTML y CSS, no como imagen: nítido en cualquier densidad de pantalla,
 * pesa cero bytes extra, y el texto sigue siendo texto para lectores de
 * pantalla y buscadores.
 *
 * UNA SOLA CAPA: la cara en amarillo pleno más un BARRIDO en amarillo oscuro
 * hacia abajo y a la derecha, que es el espesor de la letra. Sin contorno y sin
 * sombra proyectada.
 *
 * POR QUÉ UN BARRIDO Y NO UNA COPIA DESPLAZADA. Una extrusión es el barrido de
 * la letra a lo largo de TODO el vector de profundidad. Con una sola copia
 * corrida se obtienen solo los dos extremos y entre medio quedan huecos: en las
 * diagonales de la W, la k y la A el espesor se cortaba, y en las letras
 * redondas se leía como una franja pegada debajo. Apilando pasos de 0.007em se
 * rellena el barrido completo y el problema desaparece en toda letra.
 *
 * Los pasos van en `em`, así que todo escala con el tamaño de letra.
 *
 * Intentos anteriores, todos descartados y anotados para no repetirlos:
 *   - `text-shadow` sobre una capa con `-webkit-text-stroke`: dibuja la sombra
 *     del glifo SIN el trazo, así que no cerraba la silueta.
 *   - `drop-shadow` apilados: se encadenan, cada uno le hace sombra al
 *     anterior, y salían tres bandas de color en vez de dos.
 *   - Una capa de canto desplazada: los huecos en diagonales descritos arriba.
 */

.pw-logo {
  position: relative;
  display: inline-block;
  font-family: "Titan One", system-ui, sans-serif;
  font-size: var(--pw-logo-size, 56px);
  line-height: 1.35;
  white-space: nowrap;
  font-weight: 400;
  color: var(--pw-yellow, #FFCB05);
  /* El arco lo aplica JS letra por letra. Sin JS el logo se ve recto y se lee
     perfectamente igual. */
}

.pw-logo > span { display: block; }
.pw-logo span span { display: inline-block; }

.pw-logo__cara {
  text-shadow:
    0.0043em 0.0070em 0 #E0A006,
    0.0087em 0.0140em 0 #E0A006,
    0.0130em 0.0210em 0 #E0A006,
    0.0174em 0.0280em 0 #E0A006,
    0.0217em 0.0350em 0 #E0A006,
    0.0260em 0.0420em 0 #E0A006,
    0.0304em 0.0490em 0 #E0A006,
    0.0347em 0.0560em 0 #E0A006,
    0.0391em 0.0630em 0 #E0A006,
    0.0434em 0.0700em 0 #E0A006,
    0.0477em 0.0770em 0 #E0A006,
    0.0521em 0.0840em 0 #E0A006,
    0.0564em 0.0910em 0 #E0A006,
    0.0608em 0.0980em 0 #E0A006,
    0.0651em 0.1050em 0 #E0A006;
}