/* berrueta.uy — Revista. Gloock + Geologica, self-hosted. */

@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/gloock-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: "Geologica";
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/geologica-300-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;
}

:root {
  /* Color por uso */
  --c-bg: #FAFAF8;          /* fondo de home, juegos y páginas */
  --c-bg-blog: #EEF0F6;     /* fondo de blog.berrueta.uy */
  --c-bg-print: #EFEADF;    /* papel dentro del marco de canvas */
  --c-text: #111111;        /* texto, etiquetas, filetes, bordes, palabra del logo */
  --c-text-blog: #14182B;   /* texto y filetes en el blog */
  --c-text-2: #5A5A5A;      /* texto secundario (blog: #5A6078); solo con --fs-small o mayor */
  --c-accent: #2335C9;      /* links, activo, botón primario, ";" del logo, paño del pool */
  --c-on-accent: #FAFAF8;   /* texto sobre acento */
  --c-focus: #2335C9;

  /* Fuentes */
  --f-display: "Gloock", Georgia, serif;
  --f-text: "Geologica", system-ui, sans-serif;

  /* Escala tipográfica: desktop (mobile ≤760px más abajo) */
  --fs-num: 96px;   --lh-num: 0.9;    /* número de sección 01–05, Gloock 400 */
  --fs-h1: 56px;    --lh-h1: 1.05;    /* título de página y de post, Gloock 400 */
  --fs-h2: 40px;    --lh-h2: 1.1;     /* título destacado de índice; título de juego en desktop */
  --fs-h3: 24px;    --lh-h3: 1.2;     /* título de ítem de lista; título de juego en celular */
  --fs-game: var(--fs-h2); --lh-game: var(--lh-h2); /* título de página de juego */
  --fs-data: 32px;  --lh-data: 1;     /* valor de panel de datos, Gloock 400 */
  --fs-lead: 20px;  --lh-lead: 1.5;   /* bajada, Geologica 300 */
  --fs-body: 19px;  --lh-body: 1.65;  /* lectura, Geologica 300 */
  --fs-ui: 15px;    --lh-ui: 1.2;     /* nav, botones, links sueltos, Geologica 500 */
  --fs-small: 13px; --lh-small: 1.4;  /* crédito, ayuda, pie, Geologica 400 */
  --fs-label: 12px; --lh-label: 1.2;  /* etiqueta, Geologica 500, MAYÚSCULAS, +0.08em */

  /* Espaciado: base 4 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* Grilla y medidas */
  --page-max: 1320px;
  --page-pad: 56px;
  --gutter: 24px;
  --measure: 680px;        /* ancho de lectura del blog */
  --rule: 1px solid var(--c-text);
  --tap: 44px;             /* alto mínimo de todo lo que se toca */
  --header-h: 72px;
  --header-layout-h: 72px;
  --logo-h: 28px;
  --u-offset: 3px;         /* separación del subrayado de un link */
  --u-offset-nav: 6px;     /* separación del subrayado del ítem activo del nav */
  --ink-line: 1.2px;       /* contorno de bola del Pool y línea de pieza del Tetris */
  --panel-h: calc(var(--fs-label) + var(--sp-1) + var(--fs-data) + 2 * var(--sp-3));
  --frame-max-h: calc(
    100dvh
    - var(--header-layout-h)
    - var(--tap)
    - var(--panel-h)
    - var(--tap)
    - var(--sp-6)
  );

  /* Movimiento (de docs/motion/MOTION-MARCA.md) */
  --dur-hover: 150ms;
  --dur-stamp: 140ms;   /* sello del Tetris; el logo queda quieto */
  --dur-roll: 200ms;    /* rodillo */
  --ease: cubic-bezier(.2, 0, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-hover: 0ms; --dur-stamp: 0ms; --dur-roll: 0ms; }
}

@media (max-width: 760px) {
  :root {
    --fs-num: 44px; --fs-h1: 36px; --fs-h2: 28px; --fs-h3: 20px;
    --fs-game: var(--fs-h3); --lh-game: var(--lh-h3);
    --fs-data: 24px; --fs-lead: 18px; --fs-body: 17px;
    --page-pad: 20px; --gutter: 16px;
    --header-h: 56px; --header-layout-h: 100px; --logo-h: 22px;
  }
}


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

html {
  background: var(--c-bg);
  color: var(--c-text);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-text);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 720px) {
  body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
}

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

.skip {
  position: absolute;
  left: var(--page-pad);
  top: 0;
  transform: translateY(-120%);
  background: var(--c-bg);
  color: var(--c-text);
  padding: 0.5rem 0.75rem;
  z-index: 2;
}

.skip:focus {
  transform: none;
}

.page,
.tool-page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--page-pad);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  min-height: var(--header-h);
  margin: 0 0 var(--sp-8);
  padding: 0;
  box-sizing: border-box;
  border-bottom: var(--rule);
}

.name {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: var(--tap);
  line-height: 0;
  text-decoration: none;
}

.brand-logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

@media (min-width: 720px) {
  .brand-logo {
    height: var(--logo-h);
  }
}

.nav {
  min-width: 0;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav::-webkit-scrollbar {
  display: none;
}

.nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem 1.15rem;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--sp-1);
  color: var(--c-text);
  font-weight: 500;
  font-size: var(--fs-ui);
  line-height: var(--lh-ui);
  white-space: nowrap;
  text-decoration: none;
}

.nav a[aria-current="page"],
.rv-top nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: var(--u-offset-nav);
  text-decoration-color: var(--c-accent);
}

.ext {
  margin-left: 0.28em;
  font-size: 0.85em;
}

.band {
  display: block;
}

.band + .band {
  margin-top: 3rem;
}

.band-mark {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 1.25rem;
}

.num {
  margin: 0;
  color: var(--c-accent);
  font-family: var(--f-display);
  font-size: var(--fs-num);
  font-weight: 400;
  line-height: 0.85;
}

.kicker {
  margin: 0;
  color: var(--c-accent);
  font-family: var(--f-text);
  font-size: var(--fs-ui);
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .band {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .band + .band {
    margin-top: 5rem;
  }

  .band-mark {
    display: block;
    grid-column: 1 / 4;
    margin: 0;
  }

  .num {
    font-size: var(--fs-num);
  }

  .kicker {
    margin-top: 0.65rem;
  }

  .band-main {
    grid-column: 4 / 13;
    min-width: 0;
  }
}

.when {
  display: block;
  color: var(--c-accent);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.lead-title,
.card h3,
h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 400;
}

.lead-title {
  margin: 0.55rem 0 1rem;
  font-size: var(--fs-h2);
  line-height: 1.05;
}

.lead .dek {
  max-width: 38rem;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.filete {
  margin: 1.75rem 0 1.5rem;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
}

.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem 24px;
}

.card h3 {
  margin: 0.4rem 0 0.45rem;
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.dek {
  margin: 0;
  color: var(--c-text);
  font-weight: 300;
}

.card .dek,
.index .dek,
.excerpt {
  color: var(--c-text-2);
  font-size: 17px;
  line-height: 1.5;
}

@media (min-width: 720px) {
  .lead-title {
    font-size: var(--fs-h2);
  }

  .lead .dek {
    font-size: var(--fs-lead);
    line-height: 1.65;
  }

  .cards {
    grid-template-columns: 1fr 1fr;
  }

  .card h3 {
    font-size: var(--fs-h3);
  }
}

h1 {
  margin: 0 0 1.25rem;
  font-size: var(--fs-h1);
  line-height: 1.05;
}

h2:not(.kicker) {
  margin: 2rem 0 0.75rem;
  font-size: var(--fs-h2);
  line-height: 1.15;
}

h3:not(.lead-title) {
  font-family: var(--f-display);
}

@media (min-width: 720px) {
  h1 {
    font-size: var(--fs-h1);
  }
}

.list,
.index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.index > li,
.list > li {
  margin: 0 0 1.15rem;
}

.entry-title,
.index a,
.list a {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.entry-line {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
}

.entry-date,
.meta,
.year-mark,
.search label,
.site-footer,
.note,
#count,
.empty {
  color: var(--c-accent);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.year-mark {
  margin: 0 0 0.35rem;
  font-family: var(--f-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.empty,
.note,
.site-footer,
#count {
  color: var(--c-text-2);
  letter-spacing: 0.04em;
}

.excerpt,
.lede {
  margin: 0.35rem 0 0;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

.lede {
  margin-top: 0;
  margin-bottom: 1.5rem;
  max-width: 40rem;
  color: var(--c-text);
  font-size: 19px;
  line-height: 1.6;
}

.year-group + .year-group {
  margin-top: 1.5rem;
}

.group + .group {
  margin-top: 2rem;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: var(--sp-16);
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--c-text) 22%, transparent);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  font-weight: 500;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--c-text);
}

.prose {
  max-width: 40rem;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
}

@media (min-width: 720px) {
  .prose {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }
}

.prose p {
  margin: 0 0 1rem;
}

.prose h2,
.prose h3 {
  font-weight: 400;
}

blockquote {
  margin: 1rem 0;
  padding-left: 1rem;
  border-left: 1px solid var(--c-accent);
  font-family: var(--f-display);
}

code,
pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--code-bg);
}

code {
  padding: 0.05em 0.25em;
}

pre {
  padding: 0.75rem 1rem;
  overflow: auto;
}

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

.work {
  width: 100%;
  max-width: 64rem;
}

.search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}

.search input {
  flex: 1 1 12rem;
  min-height: var(--tap);
  padding: 0.25rem 0;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
}

.search button {
  min-height: var(--tap);
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
}

a {
  color: var(--c-text);
  text-decoration-thickness: var(--underline);
  text-underline-offset: var(--u-offset);
  text-decoration-color: transparent;
}

a:hover,
a:focus-visible {
  text-decoration-line: underline;
  text-decoration-color: var(--c-text);
}

.nav a:hover,
.nav a:focus-visible,
.name:hover,
.name:focus-visible {
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

::selection {
  background: var(--c-text);
  color: var(--c-bg);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
  animation-timing-function: ease-out;
}

@media (max-width: 760px) {
  .site-header {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    height: auto;
    min-height: calc(var(--header-h) + var(--tap));
    gap: 0;
  }

  .site-header .name {
    height: var(--header-h);
    min-height: var(--header-h);
  }

  .site-header .nav {
    width: calc(100% + 2 * var(--page-pad));
    height: var(--tap);
    min-height: var(--tap);
    margin-left: calc(var(--page-pad) * -1);
    margin-right: calc(var(--page-pad) * -1);
    padding-inline: var(--page-pad);
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sp-6)), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - var(--sp-6)), transparent 100%);
  }

  .site-header .nav ul {
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    height: var(--tap);
    gap: var(--sp-4);
  }

  .site-header .nav a {
    flex: none;
    padding-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Nav móvil: margen de página y desplazamiento horizontal accesible. */
@media (max-width: 760px) {
  .site-header .nav { justify-content: flex-start; width: 100%; padding-inline: var(--page-pad); box-sizing: border-box; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .site-header .nav::-webkit-scrollbar { display: none; }
  .site-header .nav ul { justify-content: flex-start; width: max-content; gap: var(--sp-4); }
  .site-header .nav a { flex: none; }
}

@media (max-width: 760px) {
  .site-footer a[href^="mailto:"] { min-height: 24px; padding: 3px 2px; }
  .list .entry-title { display: inline-flex; align-items: center; min-height: 44px; }
}