/* A dark library anchors the collection; the real captures supply the detail. */
.features-bento { position: relative; isolation: isolate; padding-block: 64px 88px; }
.features-bento > h2 { margin-bottom: 36px; }
.features-bento > h2 span { color: #9b381f; }
.bento-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.bento-card {
  position: relative;
  grid-column: span 4;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #59412c30;
  border-radius: 24px;
  background: #fffcf7;
  box-shadow: 0 3px 4px #38281903, 0 16px 36px -24px #38281930;
}
.bento-copy { position: relative; padding: 28px 28px 0; }
.bento-copy h3 { font: 700 34px/1.12 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.bento-copy p { margin-top: 12px; color: #51483f; font-size: 18px; line-height: 1.55; text-wrap: pretty; }
.bento-capture { overflow: hidden; pointer-events: none; }
.bento-capture img { width: 100%; height: auto; max-width: none; }

.bento-library {
  grid-column: span 7;
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  align-items: center;
  min-height: 386px;
  isolation: isolate;
  background: radial-gradient(ellipse at 90% 100%, #8b462c 0, #3c2b24 40%, #231f1c 78%);
  color: #fff9ed;
  border-color: #38281e;
}
.bento-library::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 76%;
  height: 150%;
  right: -12%;
  top: 20%;
  border: 1px solid #efbb7936;
  border-radius: 50% 50% 0 0;
  box-shadow: 0 0 0 30px #efbb7905, 0 0 0 60px #efbb7904;
}
.bento-library .bento-copy { padding-block: 32px; padding-right: 12px; }
.bento-library .bento-copy h3 { font-size: 46px; }
.bento-library .bento-copy p { color: #eee0cf; }
.bento-formats { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.bento-formats li { padding: 3px 8px; border: 1px solid #efdfc64d; border-radius: 5px; color: #f4e8d8; font-size: 15px; line-height: 1.5; background: #ffffff08; }
.bento-library-window {
  align-self: end;
  aspect-ratio: 1320 / 1530;
  margin: 30px 0 0 20px;
  border: 1px solid #ffffff50;
  border-bottom: 0;
  border-right: 0;
  border-radius: 18px 0 0 0;
  background: var(--ground);
  box-shadow: -14px 12px 36px #100b0938;
}
/* Keep the toolbar, search and reading summary, followed by real book rows. */
.bento-library-window img { transform: translateY(-6%); }

.bento-discover { grid-column: span 5; display: flex; flex-direction: column; background: linear-gradient(145deg, #efe4d2, #f7f8fa 55%); }
.bento-discover .bento-copy h3 { font-size: 40px; }
.bento-discover .bento-copy p { max-width: 33ch; }
.bento-discover-window {
  /* Enlarge the native categories so the cover art reads from a glance. */
  aspect-ratio: 1320 / 640;
  margin: auto 0 22px 20px;
}
.bento-discover-window img { width: 135%; transform: translateY(-56.5%); }

.bento-notes { background: #eee2c9; }
.bento-note-window {
  aspect-ratio: 1320 / 805;
  margin: 24px 20px 24px;
  border: 1px solid #59412c30;
  border-radius: 12px;
  background: var(--ground);
  box-shadow: 0 10px 20px -12px #59412c50;
}
.bento-note-window img { width: 112.82%; transform: translateY(-15.8%); }

.bento-stats { background: #f7f8fa; }
.bento-stats-example { margin: 20px 24px 26px; }
.bento-stats-example figcaption { display: flex; align-items: center; gap: 16px; }
.bento-stats-example figcaption strong { color: #b02e19; font: 700 76px/1 var(--serif); letter-spacing: -.045em; font-variant-numeric: lining-nums; }
.bento-stats-example figcaption span { color: #51483f; font-size: 16px; line-height: 1.4; }
/* The callout repeats the native example at a readable size. Never repaint the UI. */
.bento-stats-window { aspect-ratio: 1320 / 440; margin-top: 16px; }
.bento-stats-window img { width: 108%; margin-left: -4%; transform: translateY(-73.1%); }

.bento-accessibility-list { margin: 22px 28px 26px; padding: 0; list-style: none; font-size: 17px; line-height: 1.45; }
.bento-accessibility-list li { border-top: 1px solid #59412c30; padding-block: 10px; }
.bento-accessibility-list li:last-child { padding-bottom: 0; }
.bento-accessibility-list .bento-accessible-fonts { display: flex; align-items: center; gap: 18px; border-top: 0; padding-block: 0 18px; font-size: 16px; }
.bento-accessible-fonts > span:first-child { color: #9b381f; font: 700 64px/1 var(--serif); letter-spacing: -.06em; }

@media (min-width: 1101px) {
  .features-bento.wrap { width: calc(100% - 64px); }
  .features-bento > h2 br { display: none; }
  .bento-library { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .bento-library-window { width: min(100% - 20px, 460px); justify-self: end; }
  .bento-note-window { width: min(100% - 40px, 460px); margin-inline: auto; }
  .bento-discover-window { width: 100%; max-width: 700px; align-self: flex-end; }
  .bento-stats-example { max-width: 520px; }
}
@media (min-width: 1600px) {
  .bento-copy { padding: 36px 36px 0; }
  .bento-copy h3 { font-size: 40px; }
  .bento-copy p { max-width: 36ch; font-size: 20px; }
  .bento-library .bento-copy { padding: 40px; }
  .bento-library .bento-copy h3 { font-size: 54px; }
  .bento-discover .bento-copy h3 { font-size: 46px; }
  .bento-stats-example { margin: 26px 36px 30px; }
  .bento-stats-example figcaption strong { font-size: 92px; }
  .bento-stats-example figcaption span { font-size: 18px; }
  .bento-accessibility-list { margin: 26px 36px 30px; font-size: 19px; }
  .bento-accessibility-list .bento-accessible-fonts { font-size: 18px; gap: 24px; }
  .bento-accessible-fonts > span:first-child { font-size: 76px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-library { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; min-height: 0; }
  .bento-library .bento-copy { padding: 36px; }
  .bento-library-window { width: min(380px, calc(100% - 28px)); justify-self: end; margin-top: 28px; aspect-ratio: 1320 / 1320; }
  .bento-card:not(.bento-library) { grid-column: span 1; }
  .bento-discover-window { margin-top: 24px; }
}
@media (max-width: 700px) {
  .features-bento { padding-block: 48px 56px; }
  .features-bento > h2 { margin-bottom: 28px; }
  .bento-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .bento-card, .bento-library, .bento-discover { grid-column: 1; border-radius: 20px; }
  .bento-copy { padding: 24px 24px 0; }
  .bento-copy h3 { font-size: 34px; }
  .bento-library { display: block; min-height: 0; }
  .bento-library .bento-copy { padding: 26px 24px 0; }
  .bento-library .bento-copy h3, .bento-discover .bento-copy h3 { font-size: 38px; }
  .bento-formats { margin-top: 18px; }
  .bento-library-window { width: min(380px, calc(100% - 48px)); aspect-ratio: 1320 / 1530; margin: 24px auto 0; border-right: 1px solid #ffffff50; border-radius: 14px 14px 0 0; }
  .bento-discover-window { margin: 24px 0 22px 16px; }
  .bento-note-window { margin: 22px 18px 24px; }
  .bento-stats-example { margin-inline: 22px; }
  .bento-accessibility-list { margin-inline: 24px; }
}
@media (max-width: 370px) {
  .bento-copy, .bento-library .bento-copy { padding-inline: 20px; }
  .bento-copy h3 { font-size: 32px; }
  .bento-library-window { width: calc(100% - 32px); }
  .bento-accessibility-list { margin-inline: 20px; }
  .bento-accessibility-list .bento-accessible-fonts { gap: 12px; }
  .bento-accessible-fonts > span:first-child { font-size: 52px; }
}