/* BookFan: the books stand on one point below the middle and turn away from it; `--k` is a book's place from the
   middle (negative to the left), `--a` its distance. */
.bfan { position: relative; width: 100%; max-width: 720px; margin-inline: auto; aspect-ratio: 16 / 10; container-type: inline-size; }
.bfan::after { content: ''; position: absolute; inset-inline: 14%; bottom: 3%; height: 7cqi; border-radius: 50%; background: radial-gradient(closest-side, var(--black-20), transparent); pointer-events: none; }
.bfan-book { position: absolute; bottom: 7cqi; inset-inline-start: calc(50% - 13cqi); z-index: calc(10 - var(--a)); width: 26cqi; transform-origin: 50% 135%;
  transform: translateX(calc(var(--k) * 14cqi)) translateY(calc(var(--a) * 1.6cqi)) rotate(calc(var(--k) * 7deg));
  transition: transform var(--d-media) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .bfan:hover .bfan-book { transform: translateX(calc(var(--k) * 15.5cqi)) translateY(calc(var(--a) * 2cqi)) rotate(calc(var(--k) * 9deg)); }
}
@media (prefers-reduced-motion: reduce) { .bfan-book { transition: none; } }
/* «قفسه ها»: a shelf a row; its head above the books, beside them from 1200 px. The books stand on a board: each card's
   own piece of it reaches half a gap past both sides, so the pieces join into one board along the row. */

.bsh { padding-block: 0 var(--section); }
.bsh-list { display: grid; gap: clamp(36px, 5vw, 64px); margin-top: clamp(28px, 4vw, 48px); }
.bsh-shelf { --bsh-gap: clamp(14px, 2vw, 28px); display: grid; gap: 22px; align-items: start; }
@media (min-width: 1200px) { .bsh-shelf { grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr); gap: clamp(28px, 3vw, 56px); } }

.bsh-head { display: grid; justify-items: start; gap: 8px; }
@media (min-width: 1200px) { .bsh-head { padding-top: 28px; } }
.bsh-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: var(--radius-control); color: var(--accent-ink); background: var(--accent-soft); font-size: 22px; }
.bsh-head h3 { font-size: var(--text-headline); line-height: 1.3; font-weight: 800; }
.bsh-head p { max-width: 26rem; color: var(--fg-muted); font-size: var(--text-paragraph); line-height: var(--lh-paragraph); }
.bsh-head small { color: var(--fg-faint); font-size: var(--text-label); font-weight: 800; }

/* a shelf is one row at every width (never a book alone on a second row): every book one size on every shelf, a short
   shelf stays short at the start, a long one slides sideways where it does not fit. Below 1200 px (the head above the
   books) the row reaches the screen's edges; on a phone a book and a half are in view */
.bsh-row { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; justify-content: start; gap: 28px var(--bsh-gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bsh-row::-webkit-scrollbar { display: none; }
.bsh-row > li { display: grid; scroll-snap-align: start; }
@media (max-width: 1199px) { .bsh-row { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }
@media (max-width: 639px) { .bsh-row { grid-auto-columns: 44%; } }
@media (min-width: 1440px) { .bsh-row { grid-auto-columns: 180px; } }

.bsh-card { display: grid; align-content: start; gap: 16px; color: inherit; text-decoration: none; border-radius: var(--radius-tile); }
.bsh-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
/* the cover stands on its piece of the board */
.bsh-stand { position: relative; display: block; padding: 10% 13% 12px; }
.bsh-stand::after { content: ''; position: absolute; inset-inline: calc(var(--bsh-gap) / -2); bottom: 0; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, var(--line-strong), var(--line) 40%, var(--surface-muted)); box-shadow: 0 10px 16px -10px var(--ink-35); }
.bsh-lift { display: block; transition: transform var(--d-enter) var(--ease-out); transform-origin: 50% 100%; }
@media (hover: hover) and (pointer: fine) {
  .bsh-link:hover .bsh-lift { transform: translateY(-8px) rotate(-1.2deg); }
}
.bsh-link:active .bsh-lift { transform: translateY(-3px) scale(0.98); transition-duration: var(--d-press); }

.bsh-t { display: grid; justify-items: center; gap: 5px; padding-inline: 4px; text-align: center; }
.bsh-t b { font-size: var(--text-callout); line-height: 1.4; font-weight: 800; }
.bsh-t small { color: var(--fg-muted); font-size: var(--text-label); }
.bsh-iran { color: var(--accent-ink); font-size: var(--text-label); font-weight: 700; }
.bsh-meta { color: var(--fg-faint); font-size: var(--text-caption); font-weight: 700; }
.bsh-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--accent-ink); font-size: var(--text-label); font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .bsh-lift { transition: none; } }