/* Hoja de los artículos. Comparte techo con `_legal.css` pero es otra cosa:
   allá el trabajo es que se lea un documento, acá es que se lea un texto
   largo con gusto.

   Son HTML sueltos, no vistas de la app, por la misma razón que las legales:
   un artículo tiene que poder leerse aunque el bundle falle, y tiene que poder
   enlazarse y encontrarse en un buscador. */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/anton-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-var-latin.woff2') format('woff2');
}

:root {
  --surface: #0a0a0c;
  --ink: #f2f4f6;
  --ink-body: #c3c9d1;
  --ink-mute: #7a828d;
  --line: rgba(242, 244, 246, 0.14);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0 1.5rem;
  padding-left: max(1.5rem, env(safe-area-inset-left));
  padding-right: max(1.5rem, env(safe-area-inset-right));
  background: var(--surface);
  color: var(--ink-body);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Primer foco de la página. Invisible hasta que se tabula, que es cuando
   sirve: quien navega con teclado no tiene que recorrer la cabecera entera. */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.8rem;
  text-decoration: none;
}

.saltar:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.7);
  outline-offset: 3px;
}

/* --- la tapa --------------------------------------------------------------- */

.tapa {
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  padding-block: 2.5rem 0;
}

.tapa__marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.tapa__marca img {
  display: block;
  width: auto;
  height: 1.75rem;
}

.tapa__etiqueta {
  margin: 5rem 0 1.25rem;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

/* `line-height: 1.09` es el piso MEDIDO de Anton: su tinta ocupa 1,045em, así
   que por debajo de eso las líneas se pisan. Es el mismo número del sitio. */
.tapa h1 {
  margin: 0 0 4.5rem;
  max-width: 20ch;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(2.4rem, 6.5vw, 4.5rem);
  line-height: 1.09;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* --- el cuerpo ------------------------------------------------------------- */

.cuerpo {
  width: 100%;
  /* 36rem, no 52: la columna del TEXTO es más angosta que la de la tapa. El
     titular puede ocupar el ancho; un párrafo largo a 52rem pasa de 100
     caracteres por línea y el ojo pierde el renglón al volver. Acá son ~72. */
  max-width: 36rem;
  margin: 0 auto;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
  font-size: 1.06rem;
  line-height: 1.75;
}

.cuerpo p {
  margin: 0 0 1.6rem;
}

/* La entrada carga el sentido: va un punto más grande y en el gris claro. */
.cuerpo__entrada {
  font-size: 1.22rem;
  line-height: 1.65;
  color: var(--ink);
}

.cuerpo h2 {
  margin: 3.5rem 0 1.2rem;
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* El remate. Va suelto y más grande porque es la frase que queda. */
.cuerpo__cierre {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* --- el pie ---------------------------------------------------------------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  width: 100%;
  max-width: 36rem;
  margin: 5rem auto 0;
  padding-block: 2rem 4rem;
  border-top: 1px solid var(--line);
}

.pie a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -0.7rem;
  font-size: 0.8rem;
  color: var(--ink-mute);
  text-decoration: none;
  transition: color 300ms var(--ease);
}

.pie a:hover {
  color: var(--ink);
}