/* Paper #FAF9F6, linen #F2EFE7, ink #1B1A17, river #1E5741,
   pale green #EDF3EF, brass #B8893B. Real book jackets carry the color. */
.home-picks-link { margin-top: 18px; padding: 0 0 4px; border: 0; border-bottom: 1px solid var(--brass); background: none; color: var(--green); font: 500 14px var(--sans); }
.home-picks-link span { margin-left: 12px; }
.recommendations-panel { --rec-panel-top: 34px; --rec-panel-side: clamp(22px, 4vw, 48px); --rec-close-top: max(16px, env(safe-area-inset-top, 0px)); width: min(860px, 100vw); padding: var(--rec-panel-top) var(--rec-panel-side) 60px; background: var(--paper); }
.recommendations-panel > .panel-close {
  position: sticky;
  /* Sticky offsets include the scrollport's padding; keep the control at the
     pane's edge without reserving another row above the reading-room title. */
  top: calc(var(--rec-close-top) - var(--rec-panel-top));
  right: auto;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(var(--rec-close-top) - var(--rec-panel-top)) calc(16px - var(--rec-panel-side)) calc(var(--rec-panel-top) - var(--rec-close-top) - 44px) auto;
  padding: 0;
  background: var(--paper);
  box-shadow: 0 0 0 5px var(--paper);
}
.rec-eyebrow { color: var(--muted); font: 13px/1.5 var(--sans); }
.recommendations-panel h2 { margin: 5px 56px 8px 0; font: 400 clamp(32px, 5vw, 42px)/1.12 var(--display); letter-spacing: -.7px; overflow-wrap: anywhere; }
.recommendations-panel > .lede { margin-bottom: 22px; color: var(--ink-soft); font: 18px/1.5 var(--reading); }
.rec-theme { position: relative; background: var(--green-tint); border-left: 3px solid var(--green); padding: 20px 24px; margin: 0 0 24px; border-radius: 0 9px 9px 0; }
.rec-theme-open { border: 0; padding: 0; margin-top: 14px; background: none; color: var(--green); font: 500 12px/1.5 var(--sans); text-align: left; cursor: pointer; }
.rec-theme-open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rec-theme-open:not(:disabled):hover { text-decoration: underline; text-underline-offset: 4px; }
.rec-theme:has(.rec-theme-open:focus-visible) { outline: 2px solid var(--green); outline-offset: 3px; }
.rec-theme-open[hidden] { display: none; }
.rec-theme[hidden] { display: none; }
.rec-month { font: 500 12px/1.5 var(--sans); color: var(--green); margin-bottom: 9px; }
.rec-theme h3 { font: 400 clamp(25px, 4vw, 32px)/1.18 var(--display); color: var(--ink); max-width: 590px; overflow-wrap: anywhere; }
#recommendationsThemeDescription { font: 17px/1.45 var(--reading); color: var(--ink-soft); max-width: 600px; margin-top: 9px; }
.rec-theme .rec-theme-note { font: 11px/1.5 var(--sans); color: var(--muted); margin-top: 14px; }
.rec-list-label { display: block; margin-bottom: 7px; font: 500 12px var(--sans); color: var(--muted); }
.recommendations-panel select, .rec-save-form input { max-width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); font: 13px var(--sans); padding: 10px 12px; }
#recommendationsSelect { width: 100%; }
.rec-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 10px; }
.rec-toolbar > p { flex: 1 1 auto; color: var(--muted); font: 12px/1.5 var(--sans); margin-right: 12px; }
.rec-toolbar .btn { min-height: 40px; }
.rec-eligibility { color: var(--muted); font: 11px/1.5 var(--sans); max-width: 580px; }
.rec-status { font: 13px/1.6 var(--sans); color: var(--green); margin: 14px 0; }
.rec-status:empty { display: none; }
.rec-activity { margin: 14px 0; }
.rec-activity:not(.rec-loading):has(.rec-status:empty) { display: none; }
.rec-activity .rec-status { margin: 0; }
.rec-activity-copy { min-width: 0; }
.rec-loading { display: flex; align-items: center; gap: 20px; padding: 22px 0 8px; }
.rec-loading .rec-status { font: 400 23px/1.3 var(--display); letter-spacing: -.2px; }
.rec-loading-note { margin-top: 7px; max-width: 48ch; color: var(--muted); font: 12px/1.6 var(--sans); }
.rec-loading-note:empty { display: none; }
.rec-book { display: none; position: relative; flex: 0 0 64px; height: 43px; color: var(--green); perspective: 160px; }
.rec-loading .rec-book { display: block; }
.rec-book::before, .rec-book::after, .rec-book i { content: ""; position: absolute; top: 3px; width: 32px; height: 36px; border: 1px solid currentColor; background: var(--paper); }
.rec-book::before { left: 0; border-radius: 4px 1px 1px 4px; transform: skewY(9deg); border-bottom-width: 3px; }
.rec-book::after { right: 0; border-radius: 1px 4px 4px 1px; transform: skewY(-9deg); border-bottom-width: 3px; }
.rec-book i { z-index: 1; left: 50%; transform-origin: left center; border-radius: 1px 4px 4px 1px; animation: rec-page-turn 2.8s cubic-bezier(.45, 0, .25, 1) infinite; }
.rec-book i::after { content: ""; position: absolute; inset: 8px 6px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rec-book i:nth-child(2) { animation-delay: -.35s; }
.rec-book i:nth-child(3) { animation-delay: -.7s; }
@keyframes rec-page-turn {
  0%, 12% { transform: rotateY(0deg) skewY(-9deg); opacity: 0; }
  18% { opacity: 1; }
  70%, 86% { transform: rotateY(-180deg) skewY(-9deg); opacity: 1; }
  94%, 100% { transform: rotateY(-180deg) skewY(-9deg); opacity: 0; }
}
.rec-list { list-style: none; padding: 0; margin: 22px 0 0; }
.rec-item, .rec-skeleton { display: grid; grid-template-columns: 24px 98px minmax(0, 1fr); gap: 18px; padding: 26px 0; border-top: 1px solid var(--line); }
.rec-skeleton { pointer-events: none; }
.rec-skeleton-rank { width: 17px; height: 13px; margin-top: 5px; background: var(--line); border-radius: 2px; }
.rec-skeleton .rec-skeleton-cover { background: var(--paper-deep); box-shadow: none; border: 1px solid var(--line); border-left: 5px solid var(--line); }
.rec-skeleton-copy { padding-top: 5px; }
.rec-skeleton-copy span { display: block; height: 9px; width: 94%; background: var(--line); border-radius: 2px; margin-bottom: 12px; }
.rec-skeleton-copy span:first-child { height: 18px; width: 66%; margin-bottom: 13px; }
.rec-skeleton-copy span:nth-child(2) { width: 32%; margin-bottom: 28px; }
.rec-skeleton-copy span:last-child { width: 76%; }
.rec-placeholders { animation: rec-breathe 2.8s ease-in-out infinite; }
.rec-skeleton:nth-child(2) { opacity: .65; }
.rec-skeleton:nth-child(3) { opacity: .35; }
@keyframes rec-breathe { 0%, 100% { opacity: .8; } 50% { opacity: .45; } }
.rec-reveal { animation: rec-arrive 380ms cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rec-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.rec-item.rec-leaving { animation: rec-dismiss 200ms ease-in forwards; pointer-events: none; }
@keyframes rec-dismiss { to { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  .rec-item.rec-leaving, .rec-book i, .rec-placeholders, .rec-reveal { animation: none; }
  .rec-book i { display: none; }
}
.recommendations-panel:not(.open) .rec-book i, .recommendations-panel:not(.open) .rec-placeholders, .recommendations-panel:not(.open) .rec-reveal { animation: none; }
.rec-position { color: var(--muted); font: 400 19px/1.2 var(--display); font-variant-numeric: tabular-nums; padding-top: 3px; }
.rec-position small { display: block; margin-top: 7px; font: 10px var(--sans); color: var(--green); }
.rec-cover { position: relative; width: 98px; aspect-ratio: 2 / 3; align-self: start; overflow: hidden; box-shadow: 2px 4px 9px #0002; background: var(--paper-deep); border-radius: 1px 3px 3px 1px; }
.rec-cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.rec-cover > .cover-art { opacity: 0; }
.rec-cover > .cover-art.is-loaded { opacity: 1; }
.rec-cover > .blank { height: 100%; padding: 12px 9px; }
.rec-cover .bk-imprint { display: none; }
.rec-cover .bk-t { font-size: 15px; }
.rec-cover .bk-a { font-size: 9px; }
.rec-copy { min-width: 0; }
.rec-copy h3 { font: 400 25px/1.2 var(--display); color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.rec-author { margin: 6px 0 12px; font: 12px/1.4 var(--sans); color: var(--muted); }
.rec-reason { margin: 0; font: 17px/1.5 var(--reading); color: var(--ink-soft); max-width: 58ch; }
.rec-why { margin-top: 10px; }
.rec-why summary { color: var(--green); font: 500 12px/1.5 var(--sans); cursor: pointer; width: fit-content; padding: 5px 0; }
.rec-why .rec-fit-label { font: 500 12px/1.5 var(--sans); color: var(--green); margin: 14px 0 4px; }
.rec-why .rec-fit-label:first-child { margin-top: 0; }
.rec-why > div { margin-top: 7px; padding: 14px 16px; border-left: 2px solid var(--line); background: var(--paper-deep); border-radius: 0 5px 5px 0; }
.rec-why p, .rec-why blockquote { font: 16px/1.5 var(--reading); color: var(--ink-soft); overflow-wrap: anywhere; }
.rec-why .rec-why-source { color: var(--muted); font: 11px/1.6 var(--sans); margin-top: 12px; }
.rec-why blockquote { margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--brass); }
.rec-feedback { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rec-feedback button { display: inline-flex; gap: 7px; align-items: center; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; color: var(--ink-soft); font: 12px/1.2 var(--sans); }
.rec-feedback button:hover, .rec-feedback button[aria-pressed="true"] { border-color: var(--green); background: var(--green-tint); color: var(--green); }
.rec-feedback button[data-rec-vote="down"][aria-pressed="true"] { border-color: var(--chili); color: var(--chili); background: var(--paper-deep); }
.rec-thumb-down { transform: rotate(180deg); }
.rec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.rec-actions select { padding: 7px 9px; font-size: 11px; min-height: 36px; }
.rec-source { border: 0; padding: 8px 0; background: none; color: var(--green); font: 11px var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.rec-library-note { color: var(--muted); font: 11px var(--sans); }
.rec-reorder { display: flex; gap: 4px; }
.rec-reorder button { min-width: 36px; min-height: 36px; border: 1px solid var(--line); background: var(--surface); color: var(--green); border-radius: 4px; }
.recommendations-panel button:disabled { opacity: .45; cursor: default; }
.recommendations-panel :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.rec-empty { padding: 28px 4px; max-width: 480px; }
.rec-empty-number { color: var(--brass); font: 400 32px var(--display); }
.rec-empty h3 { font: 400 25px/1.25 var(--display); margin: 14px 0 10px; }
.rec-empty p { font: 18px/1.5 var(--reading); color: var(--ink-soft); }
.rec-footnote { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); font: 11px/1.6 var(--sans); color: var(--muted); max-width: 580px; }
.rec-save-form { padding: 18px 0; border-bottom: 1px solid var(--line); }
.rec-save-form label { display: block; margin-bottom: 12px; font: 12px var(--sans); color: var(--ink-soft); }
.rec-save-form label span { color: var(--muted); }
.rec-save-form input { display: block; width: 100%; margin-top: 6px; }
.rec-save-form > div { display: flex; gap: 8px; }
@media (max-width: 600px) {
  .recommendations-panel { --rec-panel-top: 28px; --rec-panel-side: 20px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
  .rec-theme { padding: 18px; margin-bottom: 20px; }
  .rec-toolbar > p { flex-basis: 100%; }
  .rec-item, .rec-skeleton { grid-template-columns: 20px 76px minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .rec-loading { gap: 16px; }
  .rec-loading .rec-status { font-size: 21px; }
  .rec-cover { width: 76px; }
  .rec-copy h3 { font-size: 21px; }
  .rec-reason { font-size: 16px; }
  .rec-position { font-size: 18px; }
  .rec-feedback { gap: 6px; }
  .rec-feedback button { padding: 8px; min-height: 42px; }
}
@media (max-width: 380px) {
  .rec-item, .rec-skeleton { grid-template-columns: 16px 62px minmax(0, 1fr); gap: 9px; }
  .rec-cover { width: 62px; }
}
.rec-list-selection { border: 1px solid var(--line); padding: 12px; grid-column: 1 / -1; }
.rec-list-selection legend { padding: 0 5px; color: var(--ink); }
.rec-list-selection label { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 8px 0; color: var(--ink-soft); }
.rec-list-selection input { width: auto; }
.rec-list-add { display: block; margin: 18px 0 6px; }
.rec-list-add[hidden] { display: none; }
.rec-list-add label { flex: 1; min-width: 180px; color: var(--ink-soft); }
.rec-list-add select { display: block; width: 100%; margin-top: 6px; padding: 10px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.rec-list-add button { padding: 10px 14px; background: var(--green); color: var(--surface); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.rec-list-add > summary, .rec-manage > summary { width: fit-content; padding: 8px 0; color: var(--green-deep); font: 500 13px/1.5 var(--sans); cursor: pointer; }
.rec-list-add-body { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 10px 0 18px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; }
.rec-manage { margin-top: 8px; }
.rec-manage-body { margin-top: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.rec-manage:not([open]) > .rec-manage-body, .rec-list-add:not([open]) > .rec-list-add-body { display: none; }
.rec-reading-badge { display: inline-block; margin: 8px 12px 0 0; padding: 3px 9px; background: var(--green-tint); color: var(--green-deep); border-radius: 4px; font: 500 12px/1.5 var(--sans); }
.rec-manage-body .rec-feedback { margin-top: 0; }
.rec-book-save { margin-top: 14px; }
.rec-add-to-list { min-height: 40px; padding: 8px 13px; border: 1px solid var(--green); border-radius: 6px; background: transparent; color: var(--green); font: 500 13px/1.4 var(--sans); cursor: pointer; }
.rec-add-to-list:hover, .rec-add-to-list[aria-expanded="true"] { background: var(--green-tint); }
.rec-list-picker { max-width: 420px; margin-top: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.rec-list-picker label { display: block; margin-bottom: 6px; color: var(--ink-soft); font: 500 12px/1.5 var(--sans); }
.rec-list-picker select, .rec-list-picker input { width: 100%; min-width: 0; min-height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font: 14px/1.4 var(--sans); }
.rec-list-picker [data-rec-new-list] { margin-top: 12px; }
.rec-list-picker [hidden] { display: none; }
.rec-list-picker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.rec-list-picker-actions button { min-height: 42px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: var(--ink-soft); font: 500 13px/1.4 var(--sans); cursor: pointer; }
.rec-list-picker-actions button[type="submit"] { background: var(--green); border-color: var(--green); color: var(--paper); }