/**
 * A single e-paper page.
 *
 * Each page is an image at its own natural pixel size; the reader scales it
 * with a CSS transform, so zooming stays sharp down to the original pixels.
 */

:root {
	--pbbep-accent: #8a1c1c;
	--pbbep-paper: #fbf8f1;
	--pbbep-serif: "Noto Serif Devanagari", "Tiro Devanagari Marathi", "Mukta", "Nirmala UI", "Kohinoor Devanagari", Georgia, serif;
}

.pbbep-page {
	box-sizing: border-box;
	position: relative;
	display: block;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(20, 16, 12, 0.08), 0 12px 40px rgba(20, 16, 12, 0.14);
}

.pbbep-page-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ---------- Clickable regions ---------- */

/*
 * Marked by hand on each page: the paper's own "continued on page 4" pointers,
 * and any region linked to a story on the website.
 */
.pbbep-hotspot {
	position: absolute;
	display: block;
	border-radius: 2px;
	background: transparent;
	box-shadow: inset 0 0 0 2px transparent;
	transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pbbep-hotspot:hover,
.pbbep-hotspot:focus-visible {
	background: color-mix( in srgb, var(--pbbep-accent) 14%, transparent );
	box-shadow: inset 0 0 0 2px var(--pbbep-accent);
	outline: none;
}

/* Without color-mix the hover would be invisible, so fall back to a tint. */
@supports not ( background: color-mix( in srgb, red 10%, transparent ) ) {
	.pbbep-hotspot:hover,
	.pbbep-hotspot:focus-visible {
		background: rgba(138, 28, 28, 0.14);
	}
}