/* BookCover: a book as an object. The type is set in the cover's own width (cqi), so it scales from a route's thumb to
   a hero. The box is left to right (a Latin object): its spine is at the inline start. */
.bcov { --bcov-cloth: var(--bind-navy); position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; container-type: inline-size; }
.bcov[data-tone='wine'] { --bcov-cloth: var(--bind-wine); }
.bcov[data-tone='navy'] { --bcov-cloth: var(--bind-navy); }
.bcov[data-tone='forest'] { --bcov-cloth: var(--bind-forest); }
.bcov[data-tone='ochre'] { --bcov-cloth: var(--bind-ochre); }
.bcov[data-tone='plum'] { --bcov-cloth: var(--bind-plum); }
.bcov[data-tone='slate'] { --bcov-cloth: var(--bind-slate); }
.bcov[data-tone='teal'] { --bcov-cloth: var(--bind-teal); }
.bcov[data-tone='umber'] { --bcov-cloth: var(--bind-umber); }

/* the pages' edge, behind the face at the fore-edge */
.bcov::after { content: ''; position: absolute; inset-block: 2.4cqi; inset-inline-end: -2.6cqi; width: 3.4cqi; border-start-end-radius: 2px; border-end-end-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--surface) 0 1px, var(--line-strong) 1px 2px); box-shadow: 0 6px 14px -8px var(--black-55); }
.bcov-face { position: absolute; inset: 0; z-index: 1; display: block; overflow: hidden; border-radius: 3px 8px 8px 3px; background: var(--surface-muted);
  box-shadow: 0 1px 2px var(--black-18), 0 18px 34px -18px var(--black-55); }
.bcov-lg .bcov-face { box-shadow: 0 2px 4px var(--black-18), 0 44px 70px -30px var(--black-55); }
/* the spine's shade at the binding, and a soft light across the face */
.bcov-face::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 3; width: 7cqi; pointer-events: none;
  background: linear-gradient(90deg, var(--black-20), var(--white-18) 30%, transparent 62%, var(--black-8)); }
.bcov-face::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(115deg, var(--white-18), transparent 42%); }

/* a painting: the app's library books */
.bcov-face img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.bcov-band { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: grid; gap: 1.6cqi; padding: 22cqi 7cqi 7cqi 11cqi; color: var(--on-media);
  background: linear-gradient(0deg, var(--shade-75), transparent); }
.bcov-band b { font-size: 9cqi; line-height: 1.3; font-weight: 800; text-wrap: balance; }
.bcov-band small { justify-self: start; font-size: 5.4cqi; font-weight: 700; opacity: 0.85; direction: rtl; }

/* a cloth binding: the woven cloth in the book's colour, lit from its top */
.bcov-cloth .bcov-face { background:
  repeating-linear-gradient(45deg, var(--white-3) 0 1px, transparent 1px 3px),
  repeating-linear-gradient(-45deg, var(--black-6) 0 1px, transparent 1px 3px),
  radial-gradient(120% 90% at 34% 18%, color-mix(in srgb, var(--bcov-cloth) 78%, var(--white)), var(--bcov-cloth) 52%, color-mix(in srgb, var(--bcov-cloth) 68%, var(--black))); }
/* a double gold frame, the wider margin at the binding */
.bcov-frame { position: absolute; inset: 6cqi 6cqi 6cqi 11cqi; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2.6cqi; padding: 9cqi 6cqi 6cqi;
  text-align: center; border: 1px solid color-mix(in srgb, var(--gold) 78%, transparent); }
.bcov-frame::before { content: ''; position: absolute; inset: 1.8cqi; border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); pointer-events: none; }
.bcov-author { max-width: 100%; font-size: 5cqi; line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hi); opacity: 0.9; }
.bcov-orn { display: block; height: 15cqi; margin-block: 3cqi 1cqi; font-family: var(--font-music); font-size: 13cqi; line-height: 1.1; color: var(--gold); }
.bcov-title { font-size: 9.4cqi; line-height: 1.22; font-weight: 800; text-wrap: balance; color: var(--gold-hi);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 68%, var(--gold-lo)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bcov-opus { padding-top: 2.4cqi; font-size: 5.4cqi; font-weight: 600; color: var(--gold); border-top: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.bcov-brand { margin-top: auto; font-size: 4.6cqi; font-weight: 700; color: var(--gold); opacity: 0.7; direction: rtl; }
/* a route's thumb: only the ornament, the title and the opus */
.bcov-sm .bcov-author, .bcov-sm .bcov-brand { display: none; }
.bcov-sm .bcov-frame { padding-top: 6cqi; }
/* a hero's book: standing on the desk, turned a little; it faces the reader under a fine pointer */
.bcov-tilt { max-width: min(380px, 78%); margin-inline: auto; transform: perspective(1400px) rotateY(16deg) rotateZ(-1deg); transform-origin: 0% 50%;
  transition: transform var(--d-media) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .bcov-tilt:hover { transform: perspective(1400px) rotateY(6deg); } }
@media (prefers-reduced-motion: reduce) { .bcov-tilt { transition: none; } }
/* «چند میزان از کتاب»: one panel with the lavender wash; the words and the score stacked, side by side from 1200 px. */

.bfx { padding-block: 0 var(--section); }
.bfx-panel { display: grid; gap: clamp(24px, 3vw, 44px); align-items: center; padding: clamp(20px, 3.4vw, 48px); border-radius: var(--radius-card);
  background: radial-gradient(120% 120% at 100% 0%, var(--wash-1), transparent 55%), radial-gradient(90% 90% at 0% 100%, var(--wash-2), transparent 60%), var(--surface);
  border: 1px solid var(--edge); box-shadow: var(--shadow-card); }
@media (min-width: 1200px) { .bfx-panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.bfx-copy { display: grid; justify-items: start; gap: 20px; }
.bfx-pitch { max-width: 34rem; font-size: var(--text-paragraph); line-height: var(--lh-paragraph); font-weight: 600; text-wrap: pretty; }
.bfx-points { display: grid; gap: 12px; width: 100%; max-width: 34rem; }
.bfx-points li { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 2px; align-items: center; }
.bfx-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-control); color: var(--accent-ink); background: var(--accent-soft); font-size: 20px; }
.bfx-points b { font-size: var(--text-callout); font-weight: 800; }
.bfx-points span:last-child { color: var(--fg-muted); font-size: var(--text-label); line-height: var(--lh-label); }
.bfx-score { min-width: 0; }
/* «راه کتاب ها»: stations on one dashed line, down the page below 1024 px (a cover of 64 px, its words beside it) and
   across it from 1024 px (a cover of 88 px, its words under it). Each station draws the line from its cover's middle
   to the next one's. */

.brt { padding-block: 0 var(--section); }
.brt-line { --brt-w: 64px; --brt-gap: 18px; display: grid; gap: var(--brt-gap); margin-top: clamp(28px, 4vw, 48px); }
.brt-stop { position: relative; display: grid; gap: 10px; align-content: start; }
.brt-stop:not(:last-child)::after { content: ''; position: absolute; z-index: 0; top: calc(var(--brt-w) * 2 / 3); inset-inline-start: calc(var(--brt-w) / 2 - 1px); width: 2px;
  height: calc(100% + var(--brt-gap)); background: repeating-linear-gradient(180deg, var(--edge-strong) 0 6px, transparent 6px 11px); }

.brt-book { position: relative; z-index: 1; display: grid; grid-template-columns: var(--brt-w) minmax(0, 1fr); align-items: center; gap: 16px; color: inherit; text-decoration: none; }
.brt-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--radius-badge); }
.brt-cover { position: relative; display: block; width: var(--brt-w); transition: transform var(--d-enter) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .brt-link:hover .brt-cover { transform: translateY(-4px); } }
.brt-link:active .brt-cover { transform: scale(0.97); transition-duration: var(--d-press); }
.brt-n { position: absolute; top: -9px; inset-inline-end: -11px; z-index: 2; display: grid; place-items: center; min-width: 26px; height: 26px; padding-inline: 6px; border-radius: var(--radius-pill);
  color: var(--accent-ink); background: var(--surface); border: 1px solid var(--edge-strong); box-shadow: var(--shadow-glass); font-size: var(--text-caption); font-weight: 800; }

.brt-t { display: grid; justify-items: start; gap: 4px; }
.brt-t b { font-size: var(--text-subhead); line-height: 1.4; font-weight: 800; }
.brt-t small { color: var(--fg-muted); font-size: var(--text-caption); font-weight: 700; }
.brt-t em { padding: 2px 10px; border-radius: var(--radius-pill); color: var(--on-accent); background: var(--accent); font-size: var(--text-caption); font-style: normal; font-weight: 800; }
.brt-here .brt-cover { outline: 2px solid var(--accent); outline-offset: 5px; border-radius: 6px; }
.brt-here .brt-n { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

.brt-beside { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-inline-start: calc(var(--brt-w) + 16px); }
.brt-beside small { color: var(--fg-faint); font-size: var(--text-caption); font-weight: 800; }
.brt-chip { padding: 3px 10px; border-radius: var(--radius-pill); color: var(--fg); background: var(--surface); border: 1px solid var(--line); font-size: var(--text-caption); font-weight: 700; text-decoration: none; }

.brt-chip-link { color: var(--accent-ink); border-color: var(--edge); }
@media (hover: hover) and (pointer: fine) { .brt-chip-link:hover { border-color: var(--edge-strong); background: var(--accent-soft); } }

@media (min-width: 1024px) {
  .brt-line { --brt-w: 88px; --brt-gap: 12px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .brt-stop { justify-items: center; text-align: center; }
  .brt-stop:not(:last-child)::after { top: calc(var(--brt-w) * 2 / 3); inset-inline-start: 50%; width: calc(100% + var(--brt-gap)); height: 2px;
    background: repeating-linear-gradient(90deg, var(--edge-strong) 0 6px, transparent 6px 11px); }
  .brt-book { grid-template-columns: none; justify-items: center; gap: 14px; }
  .brt-t { justify-items: center; }
  .brt-beside { justify-content: center; margin-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .brt-cover { transition: none; } }