/* La muesca que cuelga del borde de arriba (el botón Portada de la portada y
   el Índice del libreto), como la de la pantalla de un MacBook: muy
   redondeada abajo y con hombros cóncavos arriba, desde los que la línea
   sigue por el borde hasta los lados. El color lo pone cada página (--muesca
   el relleno, --muesca-borde el borde), y también dónde va.

   El relleno y el borde se pintan cada uno de una vez, de un solo color, y la
   forma la da una máscara hecha de piezas (los hombros, el cuerpo, las curvas
   de abajo, las líneas). Las piezas pueden pisarse sin que se note; pintadas
   por separado, con el cristal translúcido, se veía una costura donde se
   juntaban, porque la muesca no cae en píxeles enteros. */

/* Registradas como colores, para que el cambio al pasar el ratón se anime */
@property --muesca {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

@property --muesca-borde {
  syntax: '<color>';
  inherits: true;
  initial-value: transparent;
}

:root {
  --radio-muesca: 18px;
  --hombro: 14px;
}

.muesca {
  isolation: isolate;
  border: 0;
  border-radius: 0 0 var(--radio-muesca) var(--radio-muesca);
  background: none;
}

.muesca::before,
.muesca::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

/* El relleno: el cuerpo (arriba recto, abajo con sus dos curvas) y, a los
   lados, los hombros, cuadraditos a los que les falta un cuarto de círculo.
   Llega hasta el filo de fuera del borde, que va encima */
.muesca::before {
  left: calc(1px - var(--hombro));
  right: calc(1px - var(--hombro));
  background: var(--muesca);
  mask:
    radial-gradient(circle at 0 100%, transparent calc(var(--hombro) - 1.25px), #000 calc(var(--hombro) - 0.75px)) left top / var(--hombro) var(--hombro) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--hombro) - 1.25px), #000 calc(var(--hombro) - 0.75px)) right top / var(--hombro) var(--hombro) no-repeat,
    linear-gradient(#000, #000) calc(var(--hombro) - 1px) 0 / calc(100% - 2 * var(--hombro) + 2px) calc(100% - var(--radio-muesca) + 1px) no-repeat,
    linear-gradient(#000, #000) calc(var(--hombro) - 1px + var(--radio-muesca) - 1px) 100% / calc(100% - 2 * var(--hombro) + 2px - 2 * var(--radio-muesca) + 2px) var(--radio-muesca) no-repeat,
    radial-gradient(circle at 100% 0, #000 calc(var(--radio-muesca) - 0.25px), transparent calc(var(--radio-muesca) + 0.25px)) calc(var(--hombro) - 1px) 100% / var(--radio-muesca) var(--radio-muesca) no-repeat,
    radial-gradient(circle at 0 0, #000 calc(var(--radio-muesca) - 0.25px), transparent calc(var(--radio-muesca) + 0.25px)) right calc(var(--hombro) - 1px) bottom / var(--radio-muesca) var(--radio-muesca) no-repeat;
}

/* El borde, de 1px: la línea de arriba desde los lados hasta los hombros,
   sus curvas, los lados del cuerpo, las curvas de abajo y el fondo. Se
   extiende una pantalla por cada lado: lo que sobra no se ve (donde la
   muesca va dentro de algo, lo recorta su caja) */
.muesca::after {
  left: -100vw;
  right: -100vw;
  background: var(--muesca-borde);
  mask:
    linear-gradient(#000, #000) left top / calc(100vw + 1px - var(--hombro)) 1px no-repeat,
    linear-gradient(#000, #000) right top / calc(100vw + 1px - var(--hombro)) 1px no-repeat,
    radial-gradient(circle at 0 100%, transparent calc(var(--hombro) - 1.25px), #000 calc(var(--hombro) - 0.75px) calc(var(--hombro) - 0.25px), transparent calc(var(--hombro) + 0.25px)) calc(100vw + 1px - var(--hombro)) top / var(--hombro) var(--hombro) no-repeat,
    radial-gradient(circle at 100% 100%, transparent calc(var(--hombro) - 1.25px), #000 calc(var(--hombro) - 0.75px) calc(var(--hombro) - 0.25px), transparent calc(var(--hombro) + 0.25px)) right calc(100vw + 1px - var(--hombro)) top / var(--hombro) var(--hombro) no-repeat,
    linear-gradient(#000, #000) 100vw calc(var(--hombro) - 1px) / 1px calc(100% - var(--hombro) - var(--radio-muesca) + 2px) no-repeat,
    linear-gradient(#000, #000) right 100vw top calc(var(--hombro) - 1px) / 1px calc(100% - var(--hombro) - var(--radio-muesca) + 2px) no-repeat,
    linear-gradient(#000, #000) calc(100vw + var(--radio-muesca) - 1px) 100% / calc(100% - 200vw - 2 * var(--radio-muesca) + 2px) 1px no-repeat,
    radial-gradient(circle at 100% 0, transparent calc(var(--radio-muesca) - 1.25px), #000 calc(var(--radio-muesca) - 0.75px) calc(var(--radio-muesca) - 0.25px), transparent calc(var(--radio-muesca) + 0.25px)) 100vw 100% / var(--radio-muesca) var(--radio-muesca) no-repeat,
    radial-gradient(circle at 0 0, transparent calc(var(--radio-muesca) - 1.25px), #000 calc(var(--radio-muesca) - 0.75px) calc(var(--radio-muesca) - 0.25px), transparent calc(var(--radio-muesca) + 0.25px)) right 100vw bottom / var(--radio-muesca) var(--radio-muesca) no-repeat;
}