/* ------------------------------------------------------------- Tipografías
   Se sirven desde este mismo dominio. Ningún visitante hace una petición a
   Google al abrir la página, así que su dirección IP no sale de aquí.
   Los archivos y sus licencias (SIL Open Font License 1.1) están en
   /fuentes/. Oswald y Source Sans 3 son variables: un solo archivo cubre
   todos los pesos que usa la web.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("/fuentes/oswald.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fuentes/source-sans-3.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fuentes/ibm-plex-mono-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fuentes/ibm-plex-mono-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   LETRA MUERTA · Elías Bardal
   Página de reserva. Una sola vista, estática, sin JavaScript.
   Identidad de expediente de papel archivado: tres tintas y nada más.
   Negro tinta, papel hueso y carmín, que se reserva para el título.
   Sin sombras, sin degradados, sin animaciones, sin iconos.
   ========================================================================== */

:root {
  --tinta:  #141414;
  --papel:  #EDE7DA;
  --carmin: #8C1D18;

  --medida: 34rem;   /* ancho de la columna de lectura */
  --ritmo:  1.15rem; /* separación vertical base */

  --serif-no: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --titulos:  "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --mono:     "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* 125 % del tamaño base del navegador = 20 px, respetando la preferencia
     de quien haya agrandado la letra en su sistema. */
  font-size: 125%;
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--papel);
  /* Grano de papel: ruido fractal en tinta, muy por debajo del umbral
     visible. Es la única imagen del sitio y viaja dentro del propio CSS. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%3E%3Cfilter%20id='t'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.8'%20numOctaves='4'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='matrix'%20values='0%200%200%200%200.078%200%200%200%200%200.078%200%200%200%200%200.078%200.33%200.33%200.33%200%20-0.12'/%3E%3C/filter%3E%3Crect%20width='200'%20height='200'%20filter='url%28%23t%29'%20opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  color: var(--tinta);
  font-family: var(--serif-no);
  font-size: 1rem;
  line-height: 1.5;
}

::selection {
  background-color: var(--tinta);
  color: var(--papel);
}

/* --- Foco: anillo de tinta por fuera del elemento, siempre sobre papel ---- */

:focus { outline: 3px solid var(--tinta); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* --------------------------------------------------------------- Estructura
   La hoja se compone como la portadilla de un libro: el título arriba y el
   pie de imprenta abajo del todo, con el papel entero en medio. */

.hoja {
  display: flex;
  flex-direction: column;
  max-width: var(--medida);
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: 2rem 1rem 2rem;
}

@media (min-width: 640px) {
  .hoja {
    padding: 3rem 2.2rem 2.5rem;
    border-left: 1px solid var(--tinta);
    border-right: 1px solid var(--tinta);
  }
}

/* ---------------------------------------------------------------- Portada */

.portada {
  margin: 0 0 calc(var(--ritmo) * 1.6);
  padding-bottom: 0.7rem;
  border-bottom: 4px double var(--tinta);
}

.titular {
  margin: 0 0 0.35rem;
  font-family: var(--titulos);
  font-weight: 600;
  /* 40 px en móvil, 44 px o más en cuanto hay sitio, 64 px como techo. */
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--carmin);
}

.autoria {
  margin: 0;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- Cuerpo */

.entrada {
  margin: 0 0 var(--ritmo);
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.5;
}

a {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover,
a:focus { text-decoration-thickness: 3px; }

/* -------------------------------------------------------------------- Pie
   margin-top: auto lo empuja al final de la hoja, como el pie de imprenta. */

.pie {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tinta);
}

.pie p { margin: 0; }

.rotulo {
  margin: 0 0 0.2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.direccion {
  font-family: var(--mono);
  font-size: 1rem;
}

/* Móvil bajo y estrecho: se aprieta el ritmo vertical. La condición lleva
   también el ancho para que en escritorio el título no baje de los 44 px,
   por corta que sea la ventana. */
@media (max-width: 620px) and (max-height: 780px) {
  :root { --ritmo: 0.9rem; }
  .hoja { padding-top: 1.4rem; }
  .titular { font-size: 1.7rem; }
}