/*
 * Julitools — un libro abierto sobre el pasto.
 *
 * Referencia: noho.ink (Julian, 26-sep-2026). Papel cálido a la izquierda, un tono más hundido a
 * la derecha, tipografía Switzer apretada. Cada pliego (spread) es un proyecto: texto a la
 * izquierda, imagen a la derecha. El libro es claro a propósito: flota sobre una foto de pasto
 * a pleno día, y un papel oscuro ahí se leería como un hueco.
 */

:root {
  --paper: #f1eee9;
  --paper-2: #e7e3db;
  --paper-3: #dcd7cd;
  --ink: #3c3c3c;
  --ink-2: #625e57;
  --muted: #67625a;
  --line: #d6d0c5;

  --coral: #ff385c;
  --win: #127a3c;
  --win-wash: #dcebdc;
  --soon: #8a6412;
  --soon-wash: #efe3c9;

  --meadow: #56663f;
  --cloth: #2c2b28;

  --r-book: 8px;
  --r-plate: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-page: cubic-bezier(0.65, 0, 0.35, 1);

  --pad-x: clamp(24px, 3vw, 44px);
  --pad-top: clamp(76px, 9vh, 96px);
  --pad-top-text: clamp(112px, 15vh, 140px); /* la columna de texto arranca por debajo de la franja de la marca */
  --pad-bottom: clamp(36px, 5vh, 48px);

  color-scheme: light;
  caret-color: var(--coral);
}

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--meadow);
  color: var(--ink);
  font-family: "Switzer", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

::selection {
  background: color-mix(in srgb, var(--coral) 24%, transparent);
  color: var(--ink);
}

:where(a, button):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  display: block;
  max-width: 100%;
}

/* ------------------------------------------------------------------ el pasto */

.meadow {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--meadow);
}

.meadow__still,
.meadow__wind {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  filter: blur(14px) saturate(1.05);
}

.meadow__wind {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.meadow.is-live .meadow__wind {
  opacity: 1;
}

/* Un velo muy leve para que el libro se separe del fondo sin oscurecer el día. */
.meadow::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgb(20 28 12 / 0.28));
  pointer-events: none;
}

/* ------------------------------------------------------------------ el libro */

.stage {
  position: relative;
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 7vh, 96px) clamp(16px, 6vw, 120px);
}

.book {
  --w: min(1240px, 100%, calc((100svh - 2 * clamp(16px, 7vh, 96px)) * 1.72));
  position: relative;
  width: var(--w);
  aspect-ratio: 1.72 / 1;
  /* La hoja que gira viene hacia la cámara. Con más perspectiva el efecto es más sobrio. */
  perspective: 3000px;
  perspective-origin: 50% 45%;
  isolation: isolate;
}

/* La tapa dura: asoma alrededor de las hojas cuando el libro está abierto, como en un libro de
   verdad, donde el cartón es un poco más grande que el papel. */
.book {
  --board: 12px;
  --cloth: #2c2b28;
}

/* El canto de las hojas visto desde abajo: el libro abierto tiene cuerpo. Se parte en el lomo. */
.book::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 4px;
  right: 4px;
  bottom: -5px;
  height: 5px;
  border-radius: 0 0 6px 6px;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgb(0 0 0 / 0.45) 50%, transparent calc(50% + 1px)),
    repeating-linear-gradient(to bottom, #f4f0e8 0 1px, #d6cebf 1px 2px);
  transition: opacity 0.4s var(--ease-out);
}

.book.is-closed::after {
  opacity: 0;
}

/* Sigue al recorte de la tapa (main.js: --cut-l / --cut-r), para no dejar rastro al abrir y cerrar. */
.book::after {
  clip-path: inset(0 var(--cut-r, 0px) 0 var(--cut-l, 0px));
}

/* Apenas empieza a cerrarse, se van los botones, el grosor lateral y el canto de abajo; con el
   libro cerrado (y mientras se abre) tampoco se ven: asomaban como una línea bajo la tapa. */
.book.is-closing::after {
  opacity: 0;
  transition-duration: 0.18s;
}

.book.is-closing .turner,
.book.is-closing .stack {
  opacity: 0;
  transition-duration: 0.18s;
  pointer-events: none;
}

.book__shadow {
  position: absolute;
  top: calc(var(--board) * -1);
  bottom: calc(var(--board) * -1);
  left: calc(var(--board) * -1);
  right: calc(var(--board) * -1);
  border-radius: 12px;
  background:
    linear-gradient(to right, transparent 49.2%, rgb(0 0 0 / 0.45) 50%, transparent 50.8%),
    radial-gradient(120% 100% at 30% 0%, rgb(255 255 255 / 0.05), transparent 60%),
    var(--cloth);
  box-shadow:
    0 2px 4px rgb(16 22 10 / 0.16),
    0 28px 64px -14px rgb(16 22 10 / 0.5);
  transition: opacity 0.4s var(--ease-out);
}

/* El grosor de las hojas en el borde exterior de cada lado. main.js ajusta el ancho según la
   página: a la izquierda crece lo leído, a la derecha se achica lo que falta. */
.stack {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: -3px;
  width: 6px;
  border-radius: 2px;
  background:
    repeating-linear-gradient(
      to right,
      #f4f0e8 0 1px,
      #cfc6b5 1px 2px
    );
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
  transition:
    width 0.6s var(--ease-out),
    opacity 0.4s var(--ease-out);
}

.stack--left {
  right: calc(100% - 2px);
  border-radius: 3px 0 0 3px;
}

.stack--right {
  left: calc(100% - 2px);
  border-radius: 0 3px 3px 0;
}

.book.is-closed .stack {
  opacity: 0;
}

.pages {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--r-book);
  background: var(--paper-2);
  overflow: clip;
  will-change: clip-path;
}

/* La página nace escondida (ver <head>); main.js la revela con la entrada. */
.intro .stage,
.intro .meadow {
  opacity: 0;
}

.wordmark {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: var(--pad-x);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
}

/* La marca: la ficha lleva la tinta y la "j" va en papel; en la tapa, al revés. */
.logo {
  --tile: var(--ink);
  --glyph: var(--paper);
  width: 26px;
  height: 26px;
  flex: none;
}

.logo--cover {
  --tile: #d9d4c9;
  --glyph: #2c2b28;
  width: 30px;
  height: 30px;
  flex: none;
  margin-right: 10px;
}

.cover__mark--small .logo--cover {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  vertical-align: -4px;
}

/* Pasar página: el número y dos botones cuadrados, arriba a la derecha. Viven fuera de las
   páginas para seguir a la vista con el libro cerrado. */
.turner {
  position: absolute;
  z-index: 7;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.turner__count {
  margin-right: 8px;
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.turner__count > span:first-child {
  display: inline-block;
}

.turner__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(40 36 28 / 0.08);
  transition:
    transform 0.25s var(--ease-out),
    background-color 0.2s,
    color 0.2s;
}

.turner__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.turner__btn:hover:not(:disabled) {
  background: #fbfaf7;
  transform: translateY(-1px);
}

.turner__btn:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

.turner__btn:disabled {
  cursor: default;
  color: color-mix(in srgb, var(--ink) 30%, transparent);
  box-shadow: none;
  background: color-mix(in srgb, #fff 55%, transparent);
}

/* Con el libro cerrado el control se retira: la tapa entera es el botón, con su "Abrir" grabado. */
.turner {
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}

.book.is-closed .turner {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

/* Los bordes del libro. Invisibles: la esquina que se levanta al rozarlos es la señal. */
.edge {
  position: absolute;
  z-index: 6;
  top: 76px;
  bottom: 0;
  width: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.edge--next {
  right: 0;
}

.edge--prev {
  left: 0;
}

.edge[hidden] {
  display: none;
}

/* ------------------------------------------------------------------ pliegos */

.spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
}

.spread.is-active,
.spread.is-under {
  visibility: visible;
}

.spread.is-active {
  z-index: 2;
}

.spread.is-under {
  z-index: 1;
}

.page {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.page--left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: var(--pad-top-text) var(--pad-x) var(--pad-bottom);
  background: var(--paper);
}

.page--right {
  display: grid;
  place-items: center;
  padding: var(--pad-top) clamp(28px, 4.2vw, 64px) clamp(28px, 4vw, 56px);
  background: var(--paper-2);
}

/* La página del video usa todo el alto: el selector va al pie y el video se centra arriba. */
.page--right:has(.gallery) {
  align-items: start;
  padding-top: var(--pad-top);
  padding-bottom: var(--pad-bottom);
}

/* El lomo: una sombra muy leve a cada lado del doblez. Es lo que dice "libro" sin decirlo. */
.page--left::after,
.page--right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36px;
  pointer-events: none;
}

.page--left::after {
  right: 0;
  width: 70px;
  background: linear-gradient(
    to left,
    rgb(40 32 18 / 0.22),
    rgb(40 32 18 / 0.08) 18%,
    rgb(40 32 18 / 0.02) 55%,
    transparent
  );
}

.page--right::before {
  left: 0;
  width: 70px;
  background: linear-gradient(
    to right,
    rgb(40 32 18 / 0.26),
    rgb(40 32 18 / 0.09) 18%,
    rgb(40 32 18 / 0.02) 55%,
    transparent
  );
}

/* El borde exterior de cada hoja recibe un poco más de luz: la hoja se levanta hacia afuera. */
.page--left {
  background:
    linear-gradient(to right, rgb(255 255 255 / 0.35), transparent 8%),
    var(--paper);
}

.page--right {
  background:
    linear-gradient(to left, rgb(255 255 255 / 0.3), transparent 8%),
    var(--paper-2);
}

/* El número de página, abajo en la esquina exterior, como en un libro impreso. */
.folio {
  position: absolute;
  right: clamp(22px, 2.4vw, 34px);
  bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ------------------------------------------------------------------ texto */

.display {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.25rem, 1rem + 3.3vw, 4rem);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.signature {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(60 50 30 / 0.12);
}

.entry {
  display: grid;
  gap: 22px;
}

.lead {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.05rem, 0.9rem + 0.35vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Título y estado en una fila: el título abre la página y el estado se lee al lado, como una
   nota, alineado a su línea de base. Si no cabe, el estado baja debajo del título. */
.titling {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 18px;
  row-gap: 10px;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  margin: 0;
  transform: translateY(-0.35em); /* la píldora sube hasta el centro óptico de la x del título */
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: var(--win-wash);
  color: var(--win);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.status--soon {
  background: var(--soon-wash);
  color: var(--soon);
}


.facts {
  display: grid;
  gap: 0;
  margin: 14px 0 0;
  max-width: 44ch;
  border-top: 1px solid var(--line);
}

.facts > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}

.facts dt {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

.facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* El botón va pegado al contenido, no al piso: sube con la tabla y el vacío queda al final. */
  margin-top: 14px;
  margin-bottom: auto;
  height: 50px;
  padding: 0 18px 0 16px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: background-color 0.25s;
}

.cta__mark {
  width: 22px;
  height: 22px;
  margin-right: 2px;
}

.cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease-out);
}

.cta:hover {
  background: #262626;
}

.cta:hover svg {
  transform: translate(2px, -2px);
}

.backlink {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s;
}

.backlink:hover {
  text-decoration-color: var(--ink);
}

/* ------------------------------------------------------------------ índice */

.toc {
  width: 100%;
  max-width: 480px;
}

.toc__title {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.toc__row {
  display: grid;
  grid-template-columns: 112px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
}

.toc__thumb {
  width: 112px;
  height: auto;
  aspect-ratio: 1380 / 840;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(40 36 28 / 0.1);
  transition:
    transform 0.45s var(--ease-out),
    box-shadow 0.45s var(--ease-out);
}

.toc__thumb--blank {
  display: block;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line);
}

.toc__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.toc__name {
  display: flex;
  align-items: center;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.toc__desc {
  font-size: 14px;
  color: var(--muted);
}

.toc__page {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  transition:
    color 0.2s,
    transform 0.35s var(--ease-out);
}

.toc__row:hover .toc__thumb {
  transform: translateY(-2px) rotate(-1.2deg);
  box-shadow: 0 8px 18px -6px rgb(40 36 28 / 0.35);
}

.toc__row:hover .toc__page {
  color: var(--ink);
  transform: translateX(-3px);
}

/* ------------------------------------------------------------------ láminas */

.plate {
  margin: 0;
  width: 100%;
  display: grid;
  gap: 12px;
}

.plate img {
  width: 100%;
  height: auto;
  border-radius: var(--r-plate);
  box-shadow:
    0 1px 2px rgb(30 26 20 / 0.12),
    0 18px 36px -14px rgb(30 26 20 / 0.45);
}

.plate figcaption {
  font-size: 13px;
  color: var(--muted);
}

.blank {
  width: 100%;
  aspect-ratio: 1380 / 840;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--line);
  border-radius: var(--r-plate);
}

.blank p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* ------------------------------------------------------------------ la hoja que pasa */

/*
 * La hoja son doce tiras verticales encadenadas: cada una gira un poco respecto a la anterior, y
 * la suma es una hoja que se comba como el papel. main.js pone el ángulo de cada tira en cada
 * cuadro; aquí solo vive la anatomía.
 */
.leaf {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 50%;
  transform-style: preserve-3d;
  pointer-events: none;
}

.leaf--fwd {
  left: 50%;
}

.leaf--back {
  left: 0;
}

.strip {
  position: absolute;
  top: 0;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left center;
  will-change: transform;
}

.leaf--back .strip {
  transform-origin: right center;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: filter;
}

.face--back {
  transform: rotateY(180deg);
}

.face > .page {
  position: absolute;
  top: 0;
  margin: 0;
}

/* La sombra que la hoja levantada proyecta sobre la página de abajo. */
.cast {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.cast--right {
  background: linear-gradient(to right, rgb(30 24 14 / 0.32), rgb(30 24 14 / 0.06) 70%, transparent);
}

.cast--left {
  background: linear-gradient(to left, rgb(30 24 14 / 0.32), rgb(30 24 14 / 0.06) 70%, transparent);
}

/* ------------------------------------------------------------------ la tapa */

/* La tapa plana solo existe un instante, bajo el libro de pie mientras se acuesta: sin grosor
   propio, para que el relevo sea exacto. */
.cover.is-flat {
  box-shadow: none;
}

.cover {
  container-type: inline-size;
  background:
    radial-gradient(120% 100% at 30% 0%, rgb(255 255 255 / 0.06), transparent 60%),
    linear-gradient(to bottom, rgb(255 255 255 / 0.02), transparent 40%),
    #2c2b28;
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

/* El lomo redondeado y, a un dedo, la ranura donde dobla la tapa. */
.cover__spine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / 0.45),
      rgb(255 255 255 / 0.08) 22%,
      transparent 42%,
      transparent 60%,
      rgb(0 0 0 / 0.5) 64%,
      rgb(255 255 255 / 0.07) 70%,
      transparent 80%
    );
}

/* La costura: un hilo gris punteado a un dedo del borde, con su sombra un pelo corrida, como en
   una tapa de tela cosida a mano. */
.cover__stitch {
  position: absolute;
  inset: 16px 16px 16px 40px;
  border: 1.5px dashed rgb(0 0 0 / 0.5);
  border-radius: 3px;
  pointer-events: none;
}

.cover__stitch::before {
  content: "";
  position: absolute;
  inset: -1px;
  transform: translate(-1px, -1px);
  border: 1.5px dashed rgb(205 199 188 / 0.62);
  border-radius: 3px;
}

.cover.is-flat {
  cursor: pointer;
}

/* El libro de pie tiene su propio botón. */
.cover__open,
.cover__restart {
  display: none !important;
}

.cover.is-flat:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -8px;
}

.cover__open {
  position: absolute;
  right: 34px;
  bottom: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #a8a396;
  text-shadow:
    0 -1px 0 rgb(0 0 0 / 0.5),
    0 1px 0 rgb(255 255 255 / 0.06);
  transition: color 0.3s var(--ease-out);
}

.cover__open svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease-out);
}

.cover.is-flat:hover .cover__open {
  color: #d9d4c9;
}

.cover.is-flat:hover .cover__open svg {
  transform: translateX(3px);
}

/* La contratapa: el lomo a la derecha, la marca pequeña y centrada, y una salida al inicio. */
.cover--back .cover__spine {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}

.cover--back .cover__stitch {
  inset: 16px 40px 16px 16px;
}

/* Con más peso que .cover__mark, que viene después en el archivo. */
.cover--back .cover__mark--small {
  left: 50%;
  bottom: auto;
  top: 44px;
  transform: translateX(-50%);
  font-size: 17px;
  letter-spacing: -0.03em;
}

.cover__restart {
  position: absolute;
  left: 34px;
  bottom: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: -6px -8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a8a396;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-shadow:
    0 -1px 0 rgb(0 0 0 / 0.5),
    0 1px 0 rgb(255 255 255 / 0.06);
  cursor: pointer;
  transition: color 0.3s var(--ease-out);
}

.cover__restart svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--ease-out);
}

.cover__restart:hover {
  color: #d9d4c9;
}

.cover__restart:hover svg {
  transform: translateX(-3px);
}

.cover__restart:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* La portada como la de un libro: título grande arriba, la frase debajo, el autor al pie. */
.cover:not(.cover--back) .cover__mark {
  top: 13cqw;
  bottom: auto;
  left: 11cqw;
  font-size: clamp(26px, 10.5cqw, 64px);
  letter-spacing: -0.05em;
}

.cover:not(.cover--back) .cover__mark .logo--cover {
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.22em;
  vertical-align: -0.14em;
}

.cover__tagline {
  position: absolute;
  top: calc(13cqw + clamp(26px, 10.5cqw, 64px) + 4cqw);
  left: 11cqw;
  right: 8cqw;
  max-width: 20ch;
  font-size: clamp(12px, 3.2cqw, 20px);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #a8a396;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.5);
}

.cover__author {
  position: absolute;
  left: 11cqw;
  bottom: 7cqw;
  font-size: clamp(10px, 2.1cqw, 13px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #cfc9bd;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.5);
}

.cover__mark {
  position: absolute;
  left: var(--pad-x);
  bottom: 40px;
  display: inline-flex;
  align-items: center;
  font-size: clamp(26px, 2.4vw, 34px);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: #d9d4c9;
  /* Grabada en la tela: una luz arriba y una sombra abajo. */
  text-shadow:
    0 -1px 0 rgb(0 0 0 / 0.55),
    0 1px 0 rgb(255 255 255 / 0.07);
}

/* ------------------------------------------------------------------ los links */

/* El pie de la página 4: las redes encima de la firma, todo a la izquierda. */
.colophon {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.2s;
}

.link svg {
  width: 20px;
  height: 20px;
}

.link:hover {
  color: var(--coral);
}

/* ------------------------------------------------------------------ el mosaico */

.display--wide {
  max-width: 11ch;
}

.page--mosaic {
  align-items: start;
  padding: var(--pad-top-text) 0 var(--pad-bottom) clamp(28px, 4.2vw, 64px);
  overflow: hidden;
}

/*
 * Siete fotos en tres filas escalonadas, como en noho: dos, tres (corridas a la derecha y la
 * última sangrando por el borde de la página), dos. Retratos 4:5 y un fondo cálido detrás
 * mientras la foto carga o si falta.
 */
.mosaic {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 18px);
  width: calc(100% + clamp(28px, 4.2vw, 64px) * 0.6);
  align-self: center;
}

.tile {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  background: var(--paper-3);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(40 36 28 / 0.08);
}

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}

.tile.is-empty img {
  display: none;
}

.tile:hover img {
  transform: scale(1.03);
}

.tile--1 { grid-column: 1; grid-row: 1; }
.tile--2 { grid-column: 2; grid-row: 1; }
.tile--3 { grid-column: 2; grid-row: 2; }
.tile--4 { grid-column: 3; grid-row: 2; }
.tile--5 { grid-column: 4; grid-row: 2; }
.tile--6 { grid-column: 1; grid-row: 3; }
.tile--7 { grid-column: 2; grid-row: 3; }

/* Puntos de foco, para que el recorte no corte cabezas. */
.tile--1 img { object-position: 50% 40%; }
.tile--2 img { object-position: 50% 35%; }
.tile--3 img { object-position: 50% 20%; }
.tile--4 img { object-position: 50% 45%; }
.tile--5 img { object-position: 50% 30%; }
.tile--6 img { object-position: 50% 40%; }
.tile--7 img { object-position: 50% 35%; }

/* ------------------------------------------------------------------ la galería */

.mark {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin-right: 0.28em;
  vertical-align: -0.06em;
}

.display--brand {
  display: flex;
  align-items: center;
  gap: 0.02em;
}

.display--brand .mark {
  width: 0.72em;
  height: 0.72em;
  margin-right: 0.18em;
}

/* El video centrado en un alto fijo (--stage-h, lo mide main.js) y el selector PC | Móvil al
   pie, centrado: así el selector nunca se mueve y PC y Móvil ocupan el mismo sitio. */
.gallery {
  --stage-h: clamp(300px, 52vh, 460px);
  position: relative;
  width: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 20px;
  align-self: stretch;
}

.gallery__foot {
  display: flex;
  justify-content: center;
}

.gallery__stage {
  position: relative;
  width: 100%;
  height: var(--stage-h);
  display: grid;
  place-items: center;
}

.reel {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r-plate);
  box-shadow:
    0 1px 2px rgb(30 26 20 / 0.12),
    0 18px 36px -14px rgb(30 26 20 / 0.45);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.6s var(--ease-out);
}

.reel__video {
  display: block;
  max-width: 100%;
  max-height: var(--stage-h);
  width: auto;
  height: auto;
  background: #12161f;
}

.reel:hover {
  transform: scale(1.01);
}

/* El celular: en vertical, con un bisel oscuro fino como marco. */
.gallery.is-mob .reel {
  border-radius: 22px;
  box-shadow:
    0 0 0 5px #17181c,
    0 0 0 6px rgb(255 255 255 / 0.08),
    0 22px 40px -16px rgb(30 26 20 / 0.5);
}

.gallery.is-mob .reel__video {
  height: var(--stage-h);
  width: auto;
}

/* La ficha "demo", como la etiqueta "video" de Awwwards: borde fino, fondo translúcido. */
.reel__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgb(255 255 255 / 0.55);
  background: rgb(0 0 0 / 0.28);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
  transition: opacity 0.35s var(--ease-out);
}

.reel.is-playing .reel__chip {
  opacity: 0.6;
}

/* Una línea de progreso al pie, muy fina. */
.reel__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgb(255 255 255 / 0.18);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}

.reel__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--coral);
  transform-origin: left center;
  transform: scaleX(0);
}

.reel.is-playing .reel__bar {
  opacity: 1;
}

/* PC | Móvil */
.seg {
  display: inline-flex;
  flex: none;
  padding: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper-3) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgb(60 50 30 / 0.08);
}

.seg__btn {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease-out),
    color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}

.seg__btn.is-on {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(40 36 28 / 0.12);
}

/* ------------------------------------------------------------------ celular acostado */

/* La escena se arma a un alto de diseño fijo y main.js la escala para llenar la pantalla. */
.is-fit .stage {
  position: fixed;
  top: 0;
  left: 0;
  padding: 10px 16px;
  transform-origin: 0 0;
}

.is-fit .book {
  /* Deja espacio a los lados para las flechas de página. */
  --w: min(1240px, calc(100% - 250px), calc((640px - 20px) * 1.72));
}

/* Pasar página en el celular: dos botones grandes a los lados del libro, no dentro de él. */
.is-fit .turner,
.is-fit .book.is-closed .turner,
.is-fit .book.is-closing .turner {
  top: 50%;
  right: -128px;
  left: -128px;
  height: 0;
  justify-content: space-between;
  transform: none;
  pointer-events: none;
}

.is-fit .turner__btn {
  width: 96px;
  height: 96px;
  margin-top: -48px;
  border-radius: 24px;
  pointer-events: auto;
  background: rgb(241 238 233 / 0.94);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.15),
    0 18px 36px -12px rgb(10 16 6 / 0.55);
}

.is-fit .turner__btn svg {
  width: 40px;
  height: 40px;
  stroke-width: 2.2;
}

.is-fit .turner__btn:disabled {
  opacity: 0;
}

/* El número de página va bajo la flecha de "adelante", sobre el pasto. */
.is-fit .turner__count {
  position: absolute;
  right: 0;
  top: 66px;
  width: 96px;
  margin: 0;
  text-align: center;
  font-size: 22px;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}

/* Con el libro cerrado o guardado, las flechas no reciben toques (quedarían invisibles encima
   del botón "Comenzar"). */
.book.is-shelved *,
.is-fit .book.is-closed .turner__btn,
.is-fit .book.is-closing .turner__btn {
  pointer-events: none !important;
}

/* Los bordes que pasan página al tocar el libro, más anchos para el dedo. */
.is-fit .edge {
  width: 64px;
}

/* ------------------------------------------------------------------ gira tu celular */

.rotate {
  display: none;
}

@media (orientation: portrait) and (max-width: 760px) and (pointer: coarse) {
  .rotate {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: #fff;
    background: rgb(16 22 10 / 0.45);
  }

  .stage {
    visibility: hidden;
  }
}

.rotate__device {
  position: relative;
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
}

/* El celular: de pie, gira a acostado, se abre el libro adentro, y vuelve a empezar. */
.rotate__phone {
  position: relative;
  width: 62px;
  height: 108px;
  border-radius: 14px;
  border: 3px solid #fff;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 18px 8px;
  animation: rotate-phone 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.rotate__page {
  width: 16px;
  height: 22px;
  border-radius: 2px;
  background: #f1eee9;
  opacity: 0;
  animation: rotate-page 3.2s ease-out infinite;
}

.rotate__page--l {
  transform-origin: right center;
}

.rotate__page--r {
  transform-origin: left center;
}

.rotate__arrow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rotate-arrow 3.2s ease-in-out infinite;
}

@keyframes rotate-phone {
  0%,
  15% {
    transform: rotate(0deg);
  }
  45%,
  88% {
    transform: rotate(-90deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes rotate-page {
  0%,
  48% {
    opacity: 0;
    transform: rotate(90deg) scaleX(0.2);
  }
  60%,
  86% {
    opacity: 1;
    transform: rotate(90deg) scaleX(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: rotate(90deg) scaleX(1);
  }
}

@keyframes rotate-arrow {
  0%,
  10% {
    opacity: 0;
  }
  22%,
  40% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.rotate__title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.rotate__text {
  margin: 0;
  max-width: 28ch;
  font-size: 15px;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .rotate__phone,
  .rotate__page,
  .rotate__arrow {
    animation: none;
  }

  .rotate__phone {
    transform: rotate(-90deg);
  }

  .rotate__page {
    opacity: 1;
    transform: rotate(90deg);
  }
}

/* ------------------------------------------------------------------ el libro de pie */

.book.is-shelved {
  opacity: 0 !important;
  pointer-events: none;
}

.tome {
  position: absolute;
  z-index: 10;
  perspective: 1800px;
  perspective-origin: 50% 42%;
}

.tome__pose,
.tome__sway {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.tome__pose {
  cursor: pointer;
  will-change: transform;
}

/* Un balanceo lento, como un objeto que flota: nunca se queda quieto del todo. */
.tome__sway.is-swaying {
  animation: tome-sway 11s ease-in-out infinite;
}

@keyframes tome-sway {
  0%,
  100% {
    transform: rotateY(0deg) translateY(0);
  }
  30% {
    transform: rotateY(5deg) translateY(-4px);
  }
  70% {
    transform: rotateY(-4deg) translateY(2px);
  }
}

.tome__face,
.tome__spine,
.tome__edge {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.tome__face {
  inset: 0;
}

.tome__front {
  transform: translateZ(calc(var(--d) / 2));
}

.tome__back {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
}

.tome__face > .cover {
  position: absolute;
  inset: 0;
}

.tome__front > .cover {
  border-radius: 0 var(--r) var(--r) 0;
}

.tome__back > .cover {
  border-radius: var(--r) 0 0 var(--r);
}

/* El lomo: tela redondeada, con dos nervios y el título de arriba abajo. */
.tome__spine {
  top: 0;
  left: calc(50% - var(--d) / 2);
  width: var(--d);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--d) * 0.55) 0 calc(var(--d) * 0.5);
  border-radius: 3px;
  color: #d9d4c9;
  background:
    linear-gradient(
      to right,
      rgb(0 0 0 / 0.5),
      rgb(255 255 255 / 0.1) 30%,
      rgb(255 255 255 / 0.05) 55%,
      rgb(0 0 0 / 0.45)
    ),
    var(--cloth);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.55);
}

.tome__spine::before,
.tome__spine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(0 0 0 / 0.35));
}

.tome__spine::before {
  top: calc(var(--d) * 1.9);
}

.tome__spine::after {
  bottom: calc(var(--d) * 1.9);
}

.logo--spine {
  --tile: #d9d4c9;
  --glyph: #2c2b28;
  width: calc(var(--d) * 0.5);
  height: calc(var(--d) * 0.5);
}

.tome__title {
  writing-mode: vertical-rl;
  font-size: calc(var(--d) * 0.52);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.tome__author {
  writing-mode: vertical-rl;
  font-size: calc(var(--d) * 0.24);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a396;
}

/* El canto de las hojas: un poco más adentro que las tapas, como en un libro de tapa dura. */
.tome__edge {
  background-color: #efe9dd;
}

.tome__edge--fore {
  top: 5px;
  left: calc(50% - (var(--d) - 6px) / 2);
  width: calc(var(--d) - 6px);
  height: calc(100% - 10px);
  background: repeating-linear-gradient(to right, #f5f1e8 0 1px, #d6cdbc 1px 2px);
  box-shadow: inset 0 0 14px rgb(60 48 28 / 0.18);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 4px));
}

.tome__edge--top,
.tome__edge--bottom {
  top: calc(50% - (var(--d) - 6px) / 2);
  left: 2px;
  width: calc(100% - 6px);
  height: calc(var(--d) - 6px);
  background: repeating-linear-gradient(to bottom, #f5f1e8 0 1px, #d6cdbc 1px 2px);
  box-shadow: inset 0 0 12px rgb(60 48 28 / 0.15);
}

.tome__edge--top {
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 4px));
}

.tome__edge--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 4px));
}

/* La sombra en el piso. */
.tome__floor {
  position: absolute;
  left: 50%;
  width: calc(var(--w) * 0.72);
  height: 44px;
  transform: translateX(-46%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(6 10 3 / 0.72), rgb(6 10 3 / 0.25) 60%, transparent);
  filter: blur(5px);
  pointer-events: none;
}

.tome__cta {
  position: absolute;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px 0 26px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.15),
    0 14px 30px -10px rgb(10 16 6 / 0.55);
  transition:
    transform 0.35s var(--ease-out),
    background-color 0.2s;
}

.tome__cta--back {
  padding: 0 26px 0 22px;
}

.tome__cta svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease-out);
}

.tome__cta:hover {
  background: #fff;
  transform: translateX(-50%) translateY(-1px);
}

.tome__cta--front:hover svg {
  transform: translateX(3px);
}

.tome__cta--back:hover svg {
  transform: translateX(-3px);
}

.tome__cta:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Celular acostado: al lado del libro y grande (las medidas son de maqueta; la escena se
   escala ~0,6, así que esto queda de unos 58px de alto en la pantalla). */
.tome__cta--aside {
  height: 96px;
  gap: 18px;
  padding: 0 42px 0 48px;
  font-size: 32px;
  transform: translateY(-50%);
  box-shadow:
    0 2px 4px rgb(0 0 0 / 0.15),
    0 22px 44px -14px rgb(10 16 6 / 0.6);
}

.tome__cta--aside.tome__cta--back {
  padding: 0 48px 0 42px;
}

.tome__cta--aside svg {
  width: 32px;
  height: 32px;
  stroke-width: 2.2;
}

.tome__cta--aside:hover {
  transform: translateY(calc(-50% - 1px));
}

/* ------------------------------------------------------------------ celular */

@media (max-width: 760px) and (orientation: portrait), (max-width: 760px) and (min-height: 521px) {
  body {
    overflow: hidden;
  }

  .stage {
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .book {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    perspective: none;
  }

  .edge,
  .stack,
  .folio {
    display: none;
  }

  .book__shadow {
    inset: 0;
    background: none;
  }

  .book::after {
    display: none;
  }

  .wordmark {
    top: 22px;
    left: 20px;
  }

  .turner {
    top: 14px;
    right: 14px;
  }

  .spread {
    grid-template-columns: 1fr;
    /* Una hoja a la vez: la izquierda, y con .show-right la derecha. Cada una ocupa la pantalla. */
    grid-template-rows: minmax(100%, max-content);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    scrollbar-width: none;
  }

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

  .page {
    min-height: auto;
  }

  .spread .page--right,
  .spread.show-right .page--left {
    display: none;
  }

  .spread.show-right .page--right {
    display: grid;
  }

  .page--left {
    padding: 92px 20px 28px;
    gap: 28px;
  }

  .page--right,
  .page--right:has(.gallery) {
    place-items: center stretch;
    padding: 84px 20px 32px;
  }

  .page--mosaic {
    place-items: start stretch;
  }


  .page--left::after,
  .page--right::before {
    display: none;
  }

  .display {
    font-size: clamp(2.3rem, 10.5vw, 3rem);
  }

  .toc__row {
    grid-template-columns: 88px 1fr auto;
    gap: 14px;
  }

  .toc__thumb {
    width: 88px;
  }

  .toc__name {
    font-size: 19px;
  }

  .facts > div {
    grid-template-columns: 6.5em 1fr;
    gap: 12px;
  }

  .cta {
    align-self: stretch;
    justify-content: center;
  }

  .gallery {
    --stage-h: calc((100vw - 64px) * 840 / 1380);
  }

  .gallery__stage {
    align-self: center;
  }

  .gallery.is-mob {
    --stage-h: 70vh;
  }

  .page--mosaic {
    padding: 24px 20px 28px;
  }

  .mosaic {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tile { grid-column: auto !important; grid-row: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .meadow__wind {
    transition: none;
  }
}