/* Espantitos · lector de muestras
 *
 * Two screens only: the grid that picks a book, and the page that reads it.
 * Palette and faces come from ../_kit/tokens.css — nothing is redefined here,
 * because a second copy of #DF7F1B is a second thing to keep in sync.
 *
 * The reading screen is PAPER, not ground: cempasúchil is the cover colour and
 * a page of body text on it is unreadable at length. The grid keeps the ground,
 * so the two screens read as the outside and the inside of the same object.
 */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-read);
  color: var(--esp-ink);
  background: var(--esp-ground);

  /* One measure for the whole reading screen. Derived from the reading size so
     the column, the next/prev bar and the note stay on the same left edge at
     every viewport — three separate max-widths drift apart the moment the type
     scales. */
  --texto: clamp(1.06rem, .98rem + .4vw, 1.2rem);
  --ancho: calc(var(--texto) * 34);
}

a { color: inherit; }

/* ══ 1 · LA REJILLA ══════════════════════════════════════════════════════ */

.cabecera {
  padding: clamp(2rem, 7vw, 4.5rem) 1.25rem 0;
  text-align: center;
}

.cabecera .linea {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .34em;
  text-indent: .34em;             /* letter-spacing pads the right; put it back */
}

.cabecera h1 {
  margin: .15em 0 0;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1;
}

.cabecera .sub {
  margin: .7em 0 0;
  font-family: var(--font-sans);
  font-size: .95rem;
  letter-spacing: .06em;
  font-variant-numeric: var(--num-tabular);
  opacity: .72;
}

/* Un estado por sección. El nombre va con regla, no con recuadro: la rejilla ya
   trae mucho borde y el marco de cada portada es la forma que manda. */
.estado {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 5vw, 2.5rem);
}

.estado + .estado { margin-top: clamp(2rem, 6vw, 3.5rem); }

.titulo-estado {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3em 1em;
  margin: clamp(2rem, 6vw, 3rem) 0 0;
  padding-bottom: .45em;
  border-bottom: 1.5px solid var(--esp-ink);
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  line-height: 1.1;
}

.titulo-estado .cuantas {
  font-family: var(--font-sans);
  font-size: .8rem;
  letter-spacing: .12em;
  font-variant-numeric: var(--num-tabular);
  opacity: .62;
}

.estado .rejilla { padding-left: 0; padding-right: 0; }

.rejilla {
  display: grid;
  gap: clamp(1.4rem, 4vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 68rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1rem, 5vw, 2.5rem);
}

.carta {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-formation);
}

/* The cover carries the hover, not the card: the book lifts off the table. */
.carta .portada {
  display: block;
  box-shadow: 0 1px 2px rgb(0 0 0 / .28), 0 10px 22px -8px rgb(0 0 0 / .42);
  transition: transform var(--dur-base) var(--ease-formation),
              box-shadow var(--dur-base) var(--ease-formation);
}

.carta img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 140 / 216;        /* the trim, so a slow SVG never reflows the grid */
}

.carta:hover .portada,
.carta:focus-visible .portada {
  transform: translateY(-6px) rotate(-.5deg);
  box-shadow: 0 2px 3px rgb(0 0 0 / .3), 0 22px 34px -12px rgb(0 0 0 / .5);
}

.carta:focus-visible { outline: none; }
.carta:focus-visible .portada { outline: 2px solid var(--esp-ink); outline-offset: 4px; }

.carta .pie { display: block; line-height: 1.35; }

.carta .t {
  display: block;
  font-family: var(--font-disp);
  font-size: 1.12rem;
}

.carta .d {
  display: block;
  margin-top: .25em;
  font-family: var(--font-sans);
  font-size: .82rem;
  letter-spacing: .04em;
  font-variant-numeric: var(--num-tabular);
  opacity: .66;
}

/* ══ 2 · LA LECTURA ══════════════════════════════════════════════════════ */

.lectura {
  background: var(--esp-paper);
}

.avance {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  background: var(--esp-ground);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 2;
}

.barra {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem clamp(1rem, 5vw, 2rem);
  background: color-mix(in srgb, var(--esp-paper) 92%, transparent);
  backdrop-filter: blur(6px);
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .12em;
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  text-decoration: none;
  padding: .3em .1em;
}

.volver:hover span, .volver:focus-visible span { text-decoration: underline; }

.fraccion { font-variant-numeric: var(--num-tabular); opacity: .6; }

.cuento {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(2rem, 8vw, 4rem) clamp(1.15rem, 5vw, 2rem) 0;
  font-size: var(--texto);
  line-height: 1.68;
}

.cuento h1 {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 400;
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.08;
  text-transform: none;
}

.cuento .epigrafe {
  margin: .6em 0 0;
  font-family: var(--font-sans);
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .6;
}

.cuento .regla {
  width: 3.5rem;
  margin: 2.2rem 0 2.6rem;
  border: 0;
  border-top: 2px solid var(--esp-ink);
}

.cuento h2 {
  margin: 2.8em 0 1.1em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.cuento h2 .num::after { content: '·'; margin: 0 .6em; opacity: .5; }
.cuento h2 .nom { opacity: .78; }

.cuento p { margin: 0 0 1.25em; }

/* Hanging raya: the dash sits in the margin so the spoken lines form a visible
   column down the page, which is how a Spanish book prints dialogue. */
.cuento p.dialogo { padding-left: 1.1em; text-indent: -1.1em; }

.cuento hr {
  width: 100%;
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--esp-ink) 22%, transparent);
}

.cuento strong { font-weight: 600; }

.siguiente {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--ancho);
  margin: 3.5rem auto 0;
  padding: 1.6rem clamp(1.15rem, 5vw, 2rem);
  border-top: 1px solid color-mix(in srgb, var(--esp-ink) 22%, transparent);
  font-family: var(--font-sans);
  font-size: .88rem;
}

.ir { text-decoration: none; }
.ir:hover, .ir:focus-visible { text-decoration: underline; }

/* ══ 3 · LA NOTA ═════════════════════════════════════════════════════════ */

.nota {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 2.5rem clamp(1.15rem, 5vw, 2rem) 3.5rem;
  font-family: var(--font-sans);
  font-size: .82rem;
  line-height: 1.6;
  opacity: .66;
}

.index .nota { text-align: center; max-width: 30rem; }

.nota .pie-serifeus {
  margin-top: 1.6em;
  font-family: var(--font-disp);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .carta, .carta .portada { transition: none; }
  .carta:hover .portada, .carta:focus-visible .portada { transform: none; }
}