* { box-sizing: border-box; }
html { color: #00383e; background: #f5f8f6; font: 1rem/1.55 system-ui, sans-serif; }
body { margin: 0; }
header { background: #00383e; color: white; border-bottom: .3rem solid #00ae9d; }
main, header nav { max-width: 58rem; padding: 1rem clamp(1rem, 4vw, 3rem); margin: auto; }
main { padding-block: clamp(2rem, 5vw, 4rem); }
header a { color: white; text-decoration: none; }
header span { margin-inline: .5rem; color: #00ae9d; }
a { color: #005e58; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #ad5200; outline-offset: 3px; }
.kicker { text-transform: uppercase; letter-spacing: .14em; font-weight: 700; font-size: .8rem; }
h1, h2 { font-family: Georgia, serif; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 6vw, 4.2rem); margin: .3em 0; }
h2, .author { font-size: 1.5rem; }
.book { display: flex; gap: 1.25rem; align-items: center; background: white; border: 1px solid #b7d2cc; border-radius: .75rem; padding: 1rem; text-decoration: none; color: inherit; }
.book:hover strong { text-decoration: underline; }
.book img { width: min(28%, 9rem); height: auto; border-radius: .25rem; }
.shelf { display: grid; gap: 1rem; margin-top: 2rem; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: 1.5rem; }
.actions a { padding: .6rem .9rem; border: 1px solid #408179; border-radius: .4rem; text-decoration: none; }
.download { background: #00383e; color: white; }
figure { margin: 2rem 0; scroll-margin-block: 1rem; }
figcaption { font-weight: bold; margin-bottom: .5rem; }
figure img { width: 100%; height: auto; display: block; }
figure a { cursor: zoom-in; display: block; }