/* [ fonts ] */

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

@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/desk/fonts/libre-franklin-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Courier Prime';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/desk/fonts/courier-prime-latin.woff2') format('woff2');
}

/* [ tokens ] */

:root {
  --cb-ground: #EAEDE6;
  --cb-sheet: #F7F8F4;
  --cb-ink: #1A1F20;
  --cb-muted: #5A6360;
  --cb-rule: #C6CDC3;
  --cb-edge: #5A6360;
  --cb-accent: #5B2C6F;
  --cb-accent-weak: #E6DEEC;

  --cb-display: 'Faustina', Georgia, 'Times New Roman', serif;
  --cb-text: 'Libre Franklin', 'Helvetica Neue', Arial, sans-serif;
  --cb-mono: 'Courier Prime', 'Courier New', monospace;

  --cb-t-1: 0.78rem;
  --cb-t-2: 0.89rem;
  --cb-t-3: 1rem;
  --cb-t-4: 1.2rem;
  --cb-t-5: 1.73rem;
  --cb-t-6: 2.49rem;

  --cb-lh-text: 1.6;
  --cb-lh-head: 1.15;
  /* 51rem son los 66ch del cuerpo (1,125rem) medidos una vez y fijados.
     En `ch` no valía: la unidad se resuelve contra el cuerpo de letra de
     cada elemento, así que el sumario, la firma y el texto declaraban la
     misma medida y aterrizaban en tres bordes izquierdos distintos —
     908, 507 y 817 píxeles a 1280. Al cambiar el cuerpo del sitio hay que
     volver a medir este número. */
  --cb-measure: 51rem;

  --cb-s1: 4px;
  --cb-s2: 8px;
  --cb-s3: 12px;
  --cb-s4: 20px;
  --cb-s5: 32px;
  --cb-s6: 52px;
  --cb-s7: 84px;

  --cb-page: 1240px;
  --cb-gutter: 16px;
  --cb-gap: 24px;
  --cb-fast: 120ms;
}

@media (min-width: 900px) {
  :root {
    --cb-t-1: 0.8rem;
    --cb-t-2: 0.9rem;
    --cb-t-4: 1.25rem;
    --cb-t-5: 1.95rem;
    --cb-t-6: 3.05rem;
  }
}

/* [ reset ] */

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--cb-s5);
}

body {
  margin: 0;
  padding: 0;
  background: var(--cb-ground);
  color: var(--cb-ink);
  font-family: var(--cb-text);
  font-size: 1.125rem;
  line-height: var(--cb-lh-text);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img,
svg { max-width: 100%; height: auto; }

figure,
blockquote,
dl,
dd { margin: 0; }

ul,
ol { margin: 0 0 var(--cb-s4); padding-left: var(--cb-s4); }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* [ type ] */

h1,
h2,
h3,
h4 {
  font-family: var(--cb-display);
  font-weight: 700;
  line-height: var(--cb-lh-head);
  margin: 0 0 var(--cb-s3);
  text-wrap: balance;
}

h1 { font-size: var(--cb-t-6); letter-spacing: -0.012em; }
h2 { font-size: var(--cb-t-5); margin-top: var(--cb-s6); }
h3 { font-size: var(--cb-t-4); margin-top: var(--cb-s5); }

p { margin: 0 0 var(--cb-s4); }

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

@media (hover: hover) {
  a:hover { text-decoration-thickness: 2px; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cb-accent);
  outline-offset: 2px;
}

strong { font-weight: 600; }

.cb-mono {
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  letter-spacing: 0.01em;
}

.cb-muted { color: var(--cb-muted); }

.cb-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* [ numbers ] */

table,
.cb-stamp,
.cb-band,
.cb-record,
.cb-contents { font-variant-numeric: tabular-nums; }

/* [ ornament ] */

/* El guilloche: la red de torno que se grababa en los certificados para que
   no se pudieran copiar a mano. Es propio, es decorativo y por eso vive en
   un pseudoelemento — no hay nada que leer ahí. La teja repite sin costura
   porque los periodos de sus curvas dividen su ancho. */
body::before {
  content: '';
  display: block;
  height: 18px;
  background: url('/desk/img/art/guilloche.svg') repeat-x center;
  opacity: 0.85;
}

@media print {
  body::before { display: none; }
}

/* [ page ] */

/* El marco de la página lo lleva `main`, y ningún bloque de dentro lo repite.
   Sin esto un h1 o un párrafo de artículo queda pegado al borde del visor,
   porque .cb-prose y sus vecinos solo centran y limitan la medida. */
main {
  display: block;
  max-width: var(--cb-page);
  margin: 0 auto;
  padding: 0 var(--cb-gutter);
}

/* [ motion ] */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* [ print ] */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .cb-skip,
  .cb-nav,
  .cb-form,
  .cb-filter { display: none; }
  .cb-band { border: 0; padding-left: 0; }
  a[href^="/"]::after,
  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-family: var(--cb-mono);
    font-size: 9pt;
  }
  .cb-table__wrap { overflow: visible; }
}