diff --git a/www/css/core.css b/www/css/core.css
index f4826da9..5d0d654d 100644
--- a/www/css/core.css
+++ b/www/css/core.css
@@ -2061,6 +2061,141 @@ abbr.acronym{
 	font-variant: all-small-caps;
 }
 
+.downloads-container{
+	display: flex;
+}
+
+.downloads-container figure + div{
+	padding-left: 1rem;
+}
+
+.ebook figure.small{
+	--size: 1rem;
+}
+
+.ebook figure,
+.ebook figure.medium{
+	--size: 1.5rem;
+}
+
+.ebook figure.large{
+	--size: 2rem;
+	margin-top: 2rem;
+}
+
+.ebook figure.xlarge{
+	--size: 2.5rem;
+	margin-top: 2rem;
+}
+
+.ebook figure.xxlarge{
+	--size: 3rem;
+	margin-top: 2rem;
+}
+
+.ebook figure{
+	transform: skewY(-10deg) scale(.75);
+	font-size: 0;
+	width: 242px;
+	box-sizing: border-box;
+	margin-left: -2rem;
+	align-self: flex-start;
+}
+
+.ebook figure img{ /* cover */
+	/* override previous cascade */
+	width: auto;
+	border-radius: 0 3px 3px 0;
+	border: 2px solid #222;
+	border-left: none;
+	transition: transform .5s, filter .5s;
+}
+
+.ebook figure .spine{ /* spine */
+	content: '';
+	position: absolute;
+	width: var(--size);
+	height: 100%;
+	top: 0;
+	left: calc(-1 * var(--size));
+	background: #222;
+	transform-origin: right;
+	transform: skewY(45deg);
+	z-index: -1;
+	transition: transform .5s;
+}
+
+.ebook figure .spine::before{ /* spine logo */
+	content: '';
+	filter: invert(100%);
+	background: no-repeat center/calc(var(--size) - .5rem) var(--size) url('/images/logo-small.svg');
+	top: calc(50% - (2rem / 2));
+	position: absolute;
+	height: calc(var(--size) + .5rem);
+	width: var(--size);
+}
+
+.ebook figure .spine::after{ /* pages */
+	content: '';
+	position: absolute;
+	width: var(--size);
+	height: 235px;
+	background: url('/images/pages-texture.svg') #efefef;
+	background-size: .5rem; /* needed to prevent visual glitch in FF */
+	top: -234px;
+	left: 0;
+	transform-origin: bottom;
+	transform: skewX(-45deg);
+	border-left: 1px solid #222;
+	transition: none; /* prevent animation on load */
+}
+
+.ebook figure::after{ /* back board */
+	content: '';
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	background: #222;
+	top: 0;
+	left: calc(-1 * var(--size));
+	transform: translateY(calc(-1 * var(--size)));
+	z-index: -2;
+	border-top-right-radius: 3px;
+	transition: transform .5s;
+}
+
+.ebook figure::before{ /* shadow */
+	content: '';
+	background: rgba(0, 0, 0, .5);
+	position: absolute;
+	top: calc(353px - var(--size));
+	left: calc(-1 * var(--size));
+	height: calc(1.25rem + var(--size));
+	width: calc(100% + var(--size) + .25rem);
+	transform: skewX(45deg);
+	filter: blur(10px);
+	z-index: -1;
+	border-radius: 2rem;
+	transition: transform .5s;
+}
+
+.ebook .downloads-container:hover figure img{
+	filter: brightness(1.15);
+	transform: translateY(-.5rem);
+}
+
+.ebook .downloads-container:hover figure::after{
+	transform: translateY(calc(-1 * (var(--size) + .5rem)));
+}
+
+.ebook .downloads-container:hover figure .spine{
+	transform: skewY(45deg) translateY(-.5rem);
+}
+
+.ebook .downloads-container:hover figure::before{
+	transform: skewX(45deg) scale(1.05);
+}
+
 @media (hover: none) and (pointer: coarse){ /* target ipads and smartphones without a mouse */
 	/* For iPad, unset the height so it matches the other elements */
 	select[multiple]{
@@ -2215,6 +2350,21 @@ abbr.acronym{
 		margin-left: 2rem;
 		padding-top: 0;
 	}
+
+	.ebook figure{
+		transform: skewY(-10deg) scale(.5);
+		margin-top: -1rem;
+	}
+
+	.ebook figure.large,
+	.ebook figure.xlarge,
+	.ebook figure.xxlarge{
+		margin-top: 0;
+	}
+
+	.downloads-container figure + div{
+		padding-left: 0;
+	}
 }
 
 @media(max-width: 900px){
@@ -2396,6 +2546,12 @@ abbr.acronym{
 	}
 }
 
+@media(max-width: 580px){
+	.ebook figure{
+		display: none;
+	}
+}
+
 @media(max-width: 550px){
 	form[action="/ebooks"]{
 		grid-template-columns: auto auto 1fr;
@@ -2685,7 +2841,27 @@ abbr.acronym{
 	input[type="search"]:focus,
 	input[type="search"]:hover,
 	select:focus,
-	select:hover{
+	select:hover,
+	.ebook figure::before,
+	.ebook figure::after,
+	.ebook figure img,
+	.ebook figure .spine{
 		transition: none;
 	}
+
+	.ebook .downloads-container:hover figure img{
+		transform: none;
+	}
+
+	.ebook .downloads-container:hover figure::after{
+		transform: translateY(-1.5rem);
+	}
+
+	.ebook .downloads-container:hover figure .spine{
+		transform: skewY(45deg);
+	}
+
+	.ebook .downloads-container:hover figure::before{
+		transform: skewX(45deg);
+	}
 }
diff --git a/www/ebooks/ebook.php b/www/ebooks/ebook.php
index d7221508..477357d9 100644
--- a/www/ebooks/ebook.php
+++ b/www/ebooks/ebook.php
@@ -99,10 +99,11 @@ catch(InvalidEbookException $ex){
 			<picture>
 				<? if($ebook->HeroImage2xAvifUrl !== null){ ?><source srcset="<?= $ebook->HeroImage2xAvifUrl ?> 2x, <?= $ebook->HeroImageAvifUrl ?> 1x" type="image/avif"/><? } ?>
 				<source srcset="<?= $ebook->HeroImage2xUrl ?> 2x, <?= $ebook->HeroImageUrl ?> 1x" type="image/jpg"/>
-				<img src="<?= $ebook->HeroImage2xUrl ?>" role="presentation" alt="" height="439" width="1318" />
+				<img src="<?= $ebook->HeroImage2xUrl ?>" alt="" height="439" width="1318" />
 			</picture>
 		</header>
 
+
 		<aside id="reading-ease">
 			<p><?= number_format($ebook->WordCount) ?> words (<?= $ebook->ReadingTime ?>) with a reading ease of <?= $ebook->ReadingEase ?> (<?= $ebook->ReadingEaseDescription ?>)</p>
 			<? if($ebook->ContributorsHtml !== null){ ?>
@@ -171,74 +172,87 @@ catch(InvalidEbookException $ex){
 			<?= $ebook->GenerateContributorsRdfa() ?>
 			<h2>Read free</h2>
 			<p class="us-pd-warning">This ebook is only thought to be free of copyright restrictions in the United States. It may still be under copyright in other countries. If you’re not located in the United States, you must check your local laws to verify that the contents of this ebook are free of copyright restrictions in the country you’re located in before downloading or using this ebook.</p>
-			<section id="download">
-				<h3>Download for ereaders</h3>
-				<ul>
-					<? /* Leave the @download attribute empty to have the browser use the target filename in the save-as dialog */ ?>
-					<? if($ebook->EpubUrl !== null){ ?>
-					<li property="schema:encoding" typeof="schema:MediaObject">
-						<meta property="schema:description" content="epub"/>
-						<meta property="schema:encodingFormat" content="application/epub+zip"/>
-						<p>
-							<span><a property="schema:contentUrl" href="<?= $ebook->EpubUrl ?>" class="epub" download="">Compatible epub</a></span> <span>—</span> <span>All devices and apps except Kindles and Kobos.</span>
-						</p>
-					</li>
-					<? } ?>
 
-					<? if($ebook->Azw3Url !== null){ ?>
-					<li property="schema:encoding" typeof="schema:MediaObject">
-						<meta property="schema:encodingFormat" content="application/x-mobipocket-ebook"/>
-						<p>
-							<span><a property="schema:contentUrl" href="<?= $ebook->Azw3Url ?>" class="amazon" download=""><span property="schema:description">azw3</span></a></span> <span>—</span> <span>Kindle devices and apps.<? if($ebook->KindleCoverUrl !== null){ ?> Also download the <a href="<?= $ebook->KindleCoverUrl ?>">Kindle cover thumbnail</a> to see the cover in your Kindle’s library. You may be interested in our <a href="/help/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? }else{ ?> Also see our <a href="/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? } ?></span>
-						</p>
-					</li>
-					<? } ?>
+			<div class="downloads-container">
+				<figure class="<? if($ebook->WordCount < 100000){ ?>small<? }elseif($ebook->WordCount >= 100000 && $ebook->WordCount < 200000){ ?>medium<? }elseif($ebook->WordCount >= 200000 && $ebook->WordCount <= 300000){ ?>large<? }elseif($ebook->WordCount >= 300000 && $ebook->WordCount < 400000){ ?>xlarge<? }elseif($ebook->WordCount >= 400000){ ?>xxlarge<? } ?>">
+					<picture>
+						<source srcset="<?= $ebook->CoverImage2xAvifUrl ?> 2x, <?= $ebook->CoverImageAvifUrl ?> 1x" type="image/avif"/>
+						<source srcset="<?= $ebook->CoverImage2xUrl ?> 2x, <?= $ebook->CoverImageUrl ?> 1x" type="image/jpg"/>
+						<img src="<?= $ebook->CoverImageUrl ?>" alt="" height="363" width="242"/>
+					</picture>
+					<div class="spine" />
+				</figure>
+				<div>
+					<section id="download">
+						<h3>Download for ereaders</h3>
+						<ul>
+							<? /* Leave the @download attribute empty to have the browser use the target filename in the save-as dialog */ ?>
+							<? if($ebook->EpubUrl !== null){ ?>
+							<li property="schema:encoding" typeof="schema:MediaObject">
+								<meta property="schema:description" content="epub"/>
+								<meta property="schema:encodingFormat" content="application/epub+zip"/>
+								<p>
+									<span><a property="schema:contentUrl" href="<?= $ebook->EpubUrl ?>" class="epub" download="">Compatible epub</a></span> <span>—</span> <span>All devices and apps except Kindles and Kobos.</span>
+								</p>
+							</li>
+							<? } ?>
 
-					<? if($ebook->KepubUrl !== null){ ?>
-					<li property="schema:encoding" typeof="schema:MediaObject">
-						<meta property="schema:encodingFormat" content="application/kepub+zip"/>
-						<p>
-							<span><a property="schema:contentUrl" href="<?= $ebook->KepubUrl ?>" class="kobo" download=""><span property="schema:description">kepub</span></a></span> <span>—</span> <span>Kobo devices and apps.</span>
-						</p>
-					</li>
-					<? } ?>
+							<? if($ebook->Azw3Url !== null){ ?>
+							<li property="schema:encoding" typeof="schema:MediaObject">
+								<meta property="schema:encodingFormat" content="application/x-mobipocket-ebook"/>
+								<p>
+									<span><a property="schema:contentUrl" href="<?= $ebook->Azw3Url ?>" class="amazon" download=""><span property="schema:description">azw3</span></a></span> <span>—</span> <span>Kindle devices and apps.<? if($ebook->KindleCoverUrl !== null){ ?> Also download the <a href="<?= $ebook->KindleCoverUrl ?>">Kindle cover thumbnail</a> to see the cover in your Kindle’s library. You may be interested in our <a href="/help/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? }else{ ?> Also see our <a href="/how-to-use-our-ebooks#kindle-faq">Kindle FAQ</a>.<? } ?></span>
+								</p>
+							</li>
+							<? } ?>
 
-					<? if($ebook->AdvancedEpubUrl !== null){ ?>
-					<li property="schema:encoding" typeof="schema:MediaObject">
-						<meta property="schema:encodingFormat" content="application/epub+zip"/>
-						<p>
-							<span><a property="schema:contentUrl" href="<?= $ebook->AdvancedEpubUrl ?>" class="epub" download=""><span property="schema:description">Advanced epub</span></a></span> <span>—</span> <span>An advanced format that uses the latest technology not yet fully supported by most ereaders.</span>
-						</p>
-					</li>
+							<? if($ebook->KepubUrl !== null){ ?>
+							<li property="schema:encoding" typeof="schema:MediaObject">
+								<meta property="schema:encodingFormat" content="application/kepub+zip"/>
+								<p>
+									<span><a property="schema:contentUrl" href="<?= $ebook->KepubUrl ?>" class="kobo" download=""><span property="schema:description">kepub</span></a></span> <span>—</span> <span>Kobo devices and apps.</span>
+								</p>
+							</li>
+							<? } ?>
+
+							<? if($ebook->AdvancedEpubUrl !== null){ ?>
+							<li property="schema:encoding" typeof="schema:MediaObject">
+								<meta property="schema:encodingFormat" content="application/epub+zip"/>
+								<p>
+									<span><a property="schema:contentUrl" href="<?= $ebook->AdvancedEpubUrl ?>" class="epub" download=""><span property="schema:description">Advanced epub</span></a></span> <span>—</span> <span>An advanced format that uses the latest technology not yet fully supported by most ereaders.</span>
+								</p>
+							</li>
+							<? } ?>
+						</ul>
+						<aside>
+							<p>Read about <a href="/help/how-to-use-our-ebooks#which-file-to-download">which file to download</a> and <a href="/help/how-to-use-our-ebooks#transferring-to-your-ereader">how to transfer them to your ereader</a>.</p>
+						</aside>
+					</section>
+					<? if($ebook->TextUrl !== null || $ebook->TextSinglePageUrl !== null){ ?>
+					<section id="read-online">
+						<h3>Read online</h3>
+						<ul>
+							<? if($ebook->TextUrl !== null){ ?>
+							<li>
+								<p>
+									<a href="<?= $ebook->TextUrl ?>" class="list">Start from the table of contents</a>
+								</p>
+							</li>
+							<? } ?>
+							<? if($ebook->TextSinglePageUrl !== null){ ?>
+							<li property="schema:encoding" typeof="schema:mediaObject">
+								<meta property="schema:description" content="XHTML"/>
+								<meta property="schema:encodingFormat" content="application/xhtml+xml"/>
+								<p>
+									<a property="schema:contentUrl" href="<?= $ebook->TextSinglePageUrl ?>" class="page">Read on one page</a>
+								</p>
+							</li>
+							<? } ?>
+						</ul>
+					</section>
 					<? } ?>
-				</ul>
-				<aside>
-					<p>Read about <a href="/help/how-to-use-our-ebooks#which-file-to-download">which file to download</a> and <a href="/help/how-to-use-our-ebooks#transferring-to-your-ereader">how to transfer them to your ereader</a>.</p>
-				</aside>
-			</section>
-			<? if($ebook->TextUrl !== null || $ebook->TextSinglePageUrl !== null){ ?>
-			<section id="read-online">
-				<h3>Read online</h3>
-				<ul>
-					<? if($ebook->TextUrl !== null){ ?>
-					<li>
-						<p>
-							<a href="<?= $ebook->TextUrl ?>" class="list">Start from the table of contents</a>
-						</p>
-					</li>
-					<? } ?>
-					<? if($ebook->TextSinglePageUrl !== null){ ?>
-					<li property="schema:encoding" typeof="schema:mediaObject">
-						<meta property="schema:description" content="XHTML"/>
-						<meta property="schema:encodingFormat" content="application/xhtml+xml"/>
-						<p>
-							<a property="schema:contentUrl" href="<?= $ebook->TextSinglePageUrl ?>" class="page">Read on one page</a>
-						</p>
-					</li>
-					<? } ?>
-				</ul>
-			</section>
-			<? } ?>
+				</div>
+			</div>
 		</section>
 		<? } ?>
 
diff --git a/www/images/pages-texture.svg b/www/images/pages-texture.svg
new file mode 100644
index 00000000..03fe5a83
--- /dev/null
+++ b/www/images/pages-texture.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="8"
+   height="10"
+   viewBox="0 0 8 10"
+   version="1.1"
+   id="svg821"
+   xmlns="http://www.w3.org/2000/svg"
+   >
+    <path
+       style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 4.5,0 V 10"
+       />
+    <path
+       style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 2.5,1.4e-4 v 10"
+     />
+    <path
+       style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 6.5000001,0 V 10"
+       />
+    <path
+       style="fill:none;stroke:#dddddd;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="M 0.5,0 V 10"/>
+</svg>