:root { color-scheme: light; color: #183e45; background: #fffaf0; font-family: Georgia, 'Times New Roman', serif; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0%, #e1f1ed, transparent 65%); }
main { max-width: 1180px; margin: auto; padding: 56px 32px 24px; }
header { text-align: center; margin-bottom: 40px; }
.eyebrow, .series, .read, footer { font-family: system-ui, sans-serif; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 700; color: #347570; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 400; line-height: 1.1; margin: 16px 0; }
.intro { font-size: 1.2rem; line-height: 1.6; color: #526b69; }
.collection { margin-bottom: 56px; }
.collection-title { font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #347570; margin: 0 0 22px; }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px; }
.book { color: inherit; text-decoration: none; border-radius: 12px; background: #fffdf7; overflow: hidden; box-shadow: 0 8px 28px #264e4412; border: 1px solid #dfdfcc; }
.book:hover { border-color: #147f98; box-shadow: 0 10px 30px #264e4425; }
.book:focus-visible { outline: 4px solid #147f98; outline-offset: 5px; }
.cover { background: #e1ece2; }
.cover img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: contain; }
.book-copy { padding: 24px; }
.series { font-size: .75rem; letter-spacing: .06em; color: #596f68; margin: 0 0 8px; }
.book h3 { font-weight: 400; font-size: 1.65rem; line-height: 1.2; margin: 0; min-height: 2.4em; }
.description { line-height: 1.55; color: #52635d; min-height: 4.65em; }
.read { display: block; color: #106c78; font-size: .9rem; font-weight: 650; }
.read span { float: right; }
footer { text-align: center; font-size: .8rem; color: #64796e; padding: 40px 0 8px; }
@media (max-width: 700px) {
  main { padding: 32px 22px 16px; }
  .books { grid-template-columns: 1fr; max-width: 400px; margin: auto; gap: 28px; }
  .collection-title { max-width: 400px; margin-left: auto; margin-right: auto; }
  .book h3, .description { min-height: 0; }
}