/* A reading room for Vidya's notebook. */
.books-hero { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: 70px; max-width: none; padding-bottom: 52px; }
.books-hero h1 { font-size: clamp(48px,5.4vw,72px); }
.books-intro { color: var(--muted); font-size: 17px; line-height: 1.8; max-width: 610px; }
.books-hero .actions { gap: 25px; margin-top: 26px; }
.shelf-composition { position: relative; height: 370px; background: #e7e8dc; border-radius: 160px 160px 7px 7px; }
.shelf-composition::after { content: ''; position: absolute; height: 12px; left: 28px; right: 28px; bottom: 59px; background: #c0c5ac; border-radius: 2px; box-shadow: 0 11px 15px #39462e12; }
.hero-book { position: absolute; width: 155px; bottom: 71px; border-radius: 2px; box-shadow: 5px 9px 18px #21392f30; }
.hero-book.one { left: 38px; bottom: 86px; transform: rotate(-12deg); }
.hero-book.two { left: calc(50% - 77px); bottom: 76px; z-index: 2; transform: rotate(2deg); }
.hero-book.three { right: 32px; bottom: 86px; transform: rotate(12deg); }
.shelf-caption { position: absolute; bottom: 18px; width: 100%; text-align: center; color: #5e6f52; font: italic 16px/1.5 var(--serif); }
.books-strip { display: flex; align-items: center; gap: 30px; padding: 24px 0; border-block: 1px solid var(--line); }
.books-strip .shelf-count { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.shelf-count strong { font: 42px/1 var(--serif); color: var(--forest); }
.shelf-count span { font-size: 10px; line-height: 1.6; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.books-strip > p { margin: 0; border-left: 1px solid var(--line); padding-left: 30px; font: 20px/1.55 var(--serif); color: #65705c; }
.reading-spotlight { display: grid; grid-template-columns: 35% minmax(0,1fr); background: var(--forest); border-radius: 8px; overflow: hidden; margin-top: 44px; scroll-margin-top: 110px; }
.spotlight-cover { position: relative; display: grid; place-items: center; padding: 40px; background: #23483e; overflow: hidden; }
.spotlight-cover::before, .spotlight-cover::after { position: absolute; content: ''; width: 390px; height: 390px; border: 1px solid #b7c69f24; border-radius: 50%; }
.spotlight-cover::after { width: 290px; height: 290px; }
.spotlight-cover img { position: relative; z-index: 1; width: 210px; height: 280px; transform: rotate(-7deg); box-shadow: 17px 24px 28px #0c2a2759; border-radius: 2px; }
.spotlight-copy { padding: 44px 48px; }
.spotlight-copy .eyebrow { color: #c4caa7; font-size: 10px; margin-bottom: 18px; }
.spotlight-copy h2 { color: #f9f3df; font-size: 42px; margin-bottom: 8px; }
.spotlight-author { color: #c1ceba; font-size: 12px; margin-bottom: 28px; }
.spotlight-copy blockquote { font: 23px/1.65 var(--serif); color: #e8e6d3; max-width: 600px; }
.spotlight-copy .text-link { background: none; border: none; padding: 0; margin-top: 25px; color: #eed7a3; }
.reading-shelf { padding-top: 70px; scroll-margin-top: 110px; }
.reading-shelf .section-heading { margin-bottom: 27px; }
.reading-shelf .section-heading > p { color: var(--muted); font: italic 16px/1.5 var(--serif); max-width: 290px; margin-bottom: 5px; text-align: right; }
.book-tools { margin-bottom: 32px; }
.book-tool-row { display: flex; align-items: flex-end; gap: 20px; margin-bottom: 20px; }
.book-search { flex: 1; min-width: 0; }
.book-search label, .book-sort label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #59664f; margin-bottom: 7px; }
.book-search input { width: 100%; min-height: 47px; border: 1px solid #bcc7b4; border-radius: 5px; background: #fffefa; color: var(--ink); padding: 11px 14px; font: 15px/1.5 var(--serif); }
.book-search input::placeholder { color: #7d8677; }
.book-sort select { min-height: 47px; border: 1px solid #bcc7b4; border-radius: 5px; background: #fffefa; padding: 10px 28px 10px 12px; color: var(--ink); font: 12px/1.5 var(--sans); }
.book-view-switch { display: flex; padding: 4px; min-height: 47px; border: 1px solid #bcc7b4; border-radius: 5px; background: #e9ede2; }
.book-view-switch button { border: 0; background: none; color: #687260; padding: 8px 13px; font-size: 11px; border-radius: 3px; white-space: nowrap; }
.book-view-switch button[aria-pressed="true"] { background: var(--forest); color: #fffefa; }
.book-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.book-filters button { border: 1px solid #cbd1c3; border-radius: 4px; background: transparent; color: #66745d; min-height: 37px; padding: 8px 12px; font-size: 11px; }
.book-filters button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fffefa; }
.book-filters button:hover:not([aria-pressed="true"]) { background: #e7ebdf; }
.book-results-row { display: flex; justify-content: space-between; gap: 20px; margin-top: 18px; font-size: 10px; color: #77806c; }
.book-results-row p { margin: 0; }
.book-shelf { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 38px 30px; }
.book-card { min-width: 0; scroll-margin-top: 115px; }
.book-cover { position: relative; width: 100%; aspect-ratio: 3/4; border-radius: 2px 5px 5px 2px; overflow: hidden; box-shadow: 3px 9px 17px #1c32231c; transition: transform .25s,box-shadow .25s; }
.book-cover::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 13px; background: linear-gradient(90deg,#0002,#fff1 65%,#0001 90%,transparent); pointer-events: none; }
.book-cover > img { width: 100%; height: 100%; object-fit: cover; }
.book-cover:hover { transform: translateY(-5px); box-shadow: 5px 15px 22px #1c32232e; }
.book-open { position: absolute; inset: 0; width: 100%; border: 0; background: linear-gradient(transparent 58%,#102d28e6); color: #fffefa; display: flex; align-items: flex-end; justify-content: center; padding: 21px; opacity: 0; transition: opacity .2s; }
.book-open span { font-size: 12px; display: flex; align-items: center; gap: 14px; }
.book-open .icon { width: 16px; }
.book-cover:hover .book-open, .book-open:focus-visible { opacity: 1; }
.book-open:focus-visible { outline: 3px solid #edd091; outline-offset: -5px; }
.book-caption { padding-top: 18px; }
.book-category { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; line-height: 1.6; color: #6c785f; margin-bottom: 8px; }
.book-title { font-size: 24px; line-height: 1.22; margin-bottom: 9px; }
.book-author { font-size: 12px; line-height: 1.6; color: #7a6b54; margin: 0 0 17px; }
.book-summary { font-size: 14px; line-height: 1.8; color: var(--muted); margin-bottom: 15px; }
.book-question { border-left: 2px solid #b89c6b; padding-left: 14px; margin: 18px 0; }
.book-question span, .book-personal-note > span { display: block; font-size: 8px; text-transform: uppercase; letter-spacing: .08em; color: #8d6947; margin-bottom: 7px; }
.book-question p { font: italic 17px/1.6 var(--serif); color: #4d604e; }
.book-personal-note { font: 16px/1.7 var(--serif); color: #4c5e4c; margin: 18px 0; }
.book-source { color: #5f7054; font-size: 10px; border-bottom: 1px solid #bac4ae; padding-bottom: 2px; }
.book-source:hover { color: var(--terracotta); }
.book-topics { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 16px 0; }
.book-topics li { font-size: 9px; color: #64715a; padding: 3px 7px; border: 1px solid #d7dccf; border-radius: 3px; }
.has-book-reader .book-shelf:not(.is-notes) .book-details { display: none; }
.book-shelf.is-notes { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 36px; }
.book-shelf.is-notes .book-card { display: grid; grid-template-columns: 135px minmax(0,1fr); align-items: start; gap: 25px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.book-shelf.is-notes .book-caption { padding-top: 3px; }
.book-shelf.is-notes .book-title { font-size: 25px; }
.book-shelf.is-notes .book-summary { font-size: 13px; }
.book-empty { text-align: center; padding: 45px; border: 1px dashed #b3bca7; border-radius: 6px; color: var(--muted); }
.book-empty h3 { margin-bottom: 10px; }
.book-empty .button { margin-top: 15px; }
.book-art-credit { border-top: 1px solid var(--line); padding-top: 22px; margin-top: 37px; color: #7b826f; font-size: 10px; }
.why-read { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding: 55px; background: #e9ece0; border-radius: 7px; margin-top: 65px; }
.why-read h2 { font-size: 37px; }
.why-read p:not(.eyebrow) { font-size: 15px; line-height: 1.85; color: #65715d; }
.why-read blockquote { font: italic 31px/1.55 var(--serif); color: var(--forest); border-left: 1px solid #bdc5ad; padding-left: 38px; }
.book-reader { width: 980px; max-width: calc(100vw - 44px); max-height: calc(100dvh - 44px); border: 0; border-radius: 8px; padding: 0; background: #f8f5ec; color: var(--ink); overflow-y: auto; box-shadow: 0 25px 100px #0c272899; }
.book-reader::backdrop { background: #0d2d29c9; backdrop-filter: blur(5px); }
body.book-reader-open { overflow: hidden; }
.reader-layout { display: grid; grid-template-columns: 34% minmax(0,1fr); min-height: 620px; }
.reader-cover { display: grid; align-content: start; background: #e5e6d8; padding: 44px 28px; }
.reader-cover img { width: 100%; height: auto; border-radius: 2px 4px 4px 2px; box-shadow: 6px 12px 20px #273d2833; }
.reader-cover p { font: italic 14px/1.5 var(--serif); color: #798069; margin-top: 22px; text-align: center; }
.reader-content { padding: 44px 42px 30px; min-width: 0; }
.reader-content .eyebrow { font-size: 9px; margin-bottom: 16px; }
.reader-content h2 { font-size: 38px; line-height: 1.16; margin: 0 0 12px; }
.reader-author { color: #8e6a4b; font-size: 13px; margin-bottom: 22px; }
.reader-section-label { font-size: 9px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: #5a7056; margin: 25px 0 10px; }
.reader-summary { font-size: 16px; line-height: 1.85; color: #596552; }
.reader-question { background: #edeedf; padding: 18px 20px; border-radius: 4px; margin: 24px 0 20px; }
.reader-question .reader-section-label { margin: 0 0 8px; font-size: 8px; }
.reader-question > p:last-child { font: italic 20px/1.55 var(--serif); color: #416047; }
.reader-personal { border-left: 2px solid #b68850; padding-left: 18px; margin: 24px 0; }
.reader-personal .reader-section-label { margin: 0 0 9px; }
.reader-personal blockquote { color: #5c664f; font: 18px/1.65 var(--serif); }
.reader-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 20px; margin-top: 28px; border-top: 1px solid #d5d9c7; }
.reader-controls button { border: 0; background: none; color: var(--forest); padding: 5px 0; font-size: 12px; }
.reader-controls button:disabled { opacity: .35; }
#book-reader-position { font-size: 10px; color: #778267; }
.reader-keyboard-hint { font-size: 9px; color: #7f876f; margin-top: 14px; }
.reader-close-form { position: absolute; top: 11px; right: 12px; z-index: 3; }
.reader-close { width: 33px; height: 33px; display: grid; place-items: center; border: 1px solid #bcc6ae; background: #f8f5ec; color: #314c3c; border-radius: 50%; font: 27px/1 var(--sans); }
.reader-close:hover { background: #e4e8d8; }
@media (hover: none) { .book-open { opacity: 1; background: linear-gradient(transparent 80%,#102d28d9); padding: 13px; } .book-open span { font-size: 10px; } }
@media (max-width:1079px) {
  .books-hero { gap: 40px; }
  .shelf-composition { height: 320px; }
  .hero-book { width: 130px; }
  .hero-book.one { left: 18px; }
  .hero-book.two { left: calc(50% - 65px); }
  .hero-book.three { right: 15px; }
  .reading-spotlight { grid-template-columns: 33% minmax(0,1fr); }
  .spotlight-cover { padding: 30px; }
  .spotlight-cover img { width: 160px; height: auto; }
  .spotlight-copy { padding: 35px; }
  .spotlight-copy blockquote { font-size: 21px; }
  .book-shelf { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 33px 25px; }
  .book-shelf.is-notes .book-card { grid-template-columns: 105px minmax(0,1fr); gap: 20px; }
  .book-shelf.is-notes .book-title { font-size: 22px; }
  .book-tool-row { gap: 13px; }
  .book-sort select { max-width: 135px; }
  .book-view-switch button { padding: 8px 10px; }
  .why-read { padding: 40px; gap: 40px; }
  .why-read blockquote { font-size: 27px; padding-left: 28px; }
  .reader-content { padding: 44px 32px 28px; }
  .reader-cover { padding: 44px 22px; }
}
@media (max-width:759px) {
  .books-hero { grid-template-columns: 1fr; gap: 35px; padding-top: 42px; padding-bottom: 35px; }
  .books-hero h1 { font-size: 48px; }
  .books-intro { font-size: 16px; }
  .books-hero .actions { margin-top: 22px; gap: 20px; }
  .books-hero .actions .text-link { font-size: 12px; }
  .shelf-composition { max-width: 430px; width: 100%; margin: 0 auto; height: 300px; }
  .hero-book { width: 130px; bottom: 63px; }
  .hero-book.two { bottom: 69px; }
  .hero-book.one { left: 22px; bottom: 78px; }
  .hero-book.three { right: 18px; bottom: 78px; }
  .shelf-composition::after { bottom: 51px; left: 18px; right: 18px; }
  .shelf-caption { bottom: 15px; font-size: 14px; }
  .books-strip { gap: 22px; padding: 21px 0; }
  .books-strip > p { font-size: 17px; padding-left: 20px; }
  .shelf-count strong { font-size: 35px; }
  .shelf-count span { font-size: 8px; }
  .books-strip .shelf-count { gap: 9px; }
  .reading-spotlight { grid-template-columns: 1fr; margin-top: 30px; }
  .spotlight-cover { height: 265px; padding: 28px; }
  .spotlight-cover img { width: 155px; height: auto; }
  .spotlight-copy { padding: 30px 28px; }
  .spotlight-copy h2 { font-size: 36px; }
  .spotlight-copy blockquote { font-size: 21px; }
  .spotlight-copy .eyebrow { font-size: 9px; }
  .reading-shelf { padding-top: 48px; }
  .reading-shelf .section-heading { display: block; }
  .reading-shelf .section-heading > p { text-align: left; margin-top: 17px; font-size: 15px; }
  .book-tool-row { flex-wrap: wrap; gap: 15px; }
  .book-search { flex-basis: 100%; }
  .book-sort { flex: 1; }
  .book-sort select { width: 100%; max-width: none; min-width: 0; padding-right: 12px; font-size: 11px; }
  .book-view-switch button { padding: 8px 10px; font-size: 10px; }
  .book-filters { gap: 6px; }
  .book-filters button { font-size: 10px; padding: 7px 10px; }
  .book-results-row { display: block; font-size: 10px; }
  .book-results-row span { display: block; margin-top: 6px; font-size: 9px; }
  .book-shelf { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 30px 19px; }
  .book-title { font-size: 22px; }
  .book-caption { padding-top: 14px; }
  .book-author { font-size: 11px; }
  .book-category { font-size: 7px; letter-spacing: .04em; }
  .book-open { padding: 12px; }
  .book-open span { font-size: 10px; gap: 7px; }
  .book-shelf.is-notes { grid-template-columns: 1fr; gap: 27px; }
  .book-shelf.is-notes .book-card { display: flow-root; }
  .book-shelf.is-notes .book-cover { float: left; width: 90px; margin: 0 20px 12px 0; }
  .book-shelf.is-notes .book-details { clear: both; padding-top: 10px; }
  .book-shelf.is-notes .book-title { font-size: 24px; }
  .book-shelf.is-notes .book-summary { font-size: 13px; }
  .book-shelf.is-notes .book-question p { font-size: 16px; }
  .book-art-credit { font-size: 9px; margin-top: 25px; }
  .why-read { grid-template-columns: 1fr; padding: 30px; gap: 25px; margin-top: 45px; }
  .why-read h2 { font-size: 32px; }
  .why-read blockquote { font-size: 27px; padding-left: 20px; }
  .book-reader { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .reader-layout { grid-template-columns: 1fr; min-height: 0; }
  .reader-cover { height: 185px; display: grid; place-items: center; overflow: hidden; padding: 20px; }
  .reader-cover img { width: 125px; transform: rotate(-6deg); }
  .reader-cover p { display: none; }
  .reader-content { padding: 28px 25px 24px; }
  .reader-content h2 { font-size: 32px; }
  .reader-summary { font-size: 15px; }
  .reader-question { padding: 16px; }
  .reader-question > p:last-child { font-size: 20px; }
  .reader-close-form { position: sticky; top: 10px; right: 10px; height: 0; margin: 0 10px 0 auto; width: 33px; }
}
@media (max-width:379px) {
  .books-hero h1 { font-size: 43px; }
  .hero-book { width: 115px; }
  .hero-book.two { left: calc(50% - 57px); }
  .shelf-composition { height: 275px; }
  .hero-book.one { left: 15px; }
  .hero-book.three { right: 12px; }
  .books-strip { gap: 17px; }
  .books-strip > p { font-size: 15px; padding-left: 17px; }
  .book-shelf { gap: 26px 15px; }
  .book-title { font-size: 20px; }
  .book-tool-row { gap: 12px; }
  .book-view-switch button { padding: 8px; }
  .book-sort select { padding-left: 8px; }
  .book-shelf.is-notes .book-cover { width: 82px; margin-right: 17px; }
}
@media (prefers-reduced-motion:reduce) { .book-cover, .book-open { transition: none; } .book-cover:hover { transform: none; } }
@media print { .books-hero .shelf-composition, .book-tools, .book-open, .book-reader { display: none !important; } .book-shelf { grid-template-columns: 1fr 1fr; } .book-card { break-inside: avoid; } .book-card[hidden] { display: block !important; } .has-book-reader .book-shelf .book-details { display: block !important; } }