/* Portada: un banco de trabajo, no un portfolio.
   Referencia visual: papel milimetrado y tinta de rotring. */

:root {
  --papel: #f1f3f2;
  --retícula-fina: rgba(31, 58, 66, 0.055);
  --retícula-gruesa: rgba(31, 58, 66, 0.11);
  --tinta: #16232b;
  --tinta-suave: #5c6b73;
  --verde: #2f6f62;
  --medida: 34rem;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo,
    Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #13181a;
    --retícula-fina: rgba(180, 210, 205, 0.05);
    --retícula-gruesa: rgba(180, 210, 205, 0.1);
    --tinta: #e6ebe9;
    --tinta-suave: #8c9a9e;
    --verde: #6fb3a0;
  }
}

body {
  background-color: var(--papel);
  /* La retícula es información, no adorno: marca la escala de 8 px
     sobre la que está construida toda la página. */
  background-image: linear-gradient(var(--retícula-fina) 1px, transparent 1px),
    linear-gradient(90deg, var(--retícula-fina) 1px, transparent 1px),
    linear-gradient(var(--retícula-gruesa) 1px, transparent 1px),
    linear-gradient(90deg, var(--retícula-gruesa) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

.lámina {
  max-width: var(--medida);
  margin: 0 auto;
  padding: 12vh 24px 96px;
}

.cabecera {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--retícula-gruesa);
}

.nombre {
  font-family: var(--mono);
  font-size: clamp(1.55rem, 5.5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.nombre span {
  color: var(--verde);
}

.entradilla {
  margin-top: 20px;
  max-width: 30rem;
  color: var(--tinta-suave);
}

.entradilla + .entradilla {
  margin-top: 12px;
}

.rótulo {
  margin: 64px 0 8px;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tinta-suave);
}

.índice {
  border-top: 1px solid var(--retícula-gruesa);
}

.pieza {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 24px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--retícula-gruesa);
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.pieza:hover,
.pieza:focus-visible {
  background-color: var(--retícula-fina);
}

.pieza h2 {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--verde);
}

.pieza p {
  grid-column: 1 / -1;
  max-width: 28rem;
  color: var(--tinta-suave);
  font-size: 0.94rem;
}

.fecha {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}

.pie {
  margin-top: 72px;
  font-size: 0.86rem;
  color: var(--tinta-suave);
}

.pie a {
  color: var(--verde);
  text-underline-offset: 3px;
}