/* Books page: 3D covers, filters, detail dialog (Oct 2026). Loaded only on /books. */
:root{ --paper:#f3efe6; --paper-2:#e2ddd1 }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --paper:#d9d4c8; --paper-2:#b9b3a6 } }
:root[data-theme="dark"]{ --paper:#d9d4c8; --paper-2:#b9b3a6 }

.filter sup{ font-size:.72em; opacity:.6; margin-left:.15em; top:-.5em }

/* Stats */
.bk-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:clamp(44px,6vw,80px) 0 0; border-top:1px solid var(--line) }
.bk-stats > div{ padding:22px 20px 0 0; display:flex; flex-direction:column-reverse; gap:6px; min-width:0 }
.bk-stats > div + div{ padding-left:20px; border-left:1px solid var(--line) }
.bk-stats dt{ color:var(--mute); font-size:.92rem }
.bk-stats dd{ margin:0; font-size:clamp(2.6rem,5.4vw,4.8rem); font-weight:500; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums }

/* Toolbar */
.bk-tools{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin-bottom:10px }
.bk-tools .filter{ margin:0 }
.bk-tools__right{ display:flex; flex-wrap:wrap; gap:10px }
.bk-select{ position:relative; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:99px; padding:0 0 0 1.1em; font-size:.88rem; color:var(--mute); transition:border-color .3s }
.bk-select:focus-within,.bk-select:hover{ border-color:var(--fg) }
.bk-select select{ appearance:none; -webkit-appearance:none; font:inherit; color:var(--fg); background:transparent; border:0; padding:.72em 2.2em .72em .2em; cursor:pointer; outline:none }
.bk-select::after{ content:""; position:absolute; right:1em; top:50%; width:7px; height:7px; border-right:1.5px solid var(--fg); border-bottom:1.5px solid var(--fg); transform:translateY(-70%) rotate(45deg); pointer-events:none }
.bk-select select option{ color:#121615; background:#fff }
.bk-count{ color:var(--mute); font-size:.88rem; margin:0 0 clamp(28px,3.5vw,44px); min-height:1.4em }
.bk-empty{ color:var(--mute); padding:40px 0 }
.bk-empty button{ background:none; border:0; border-bottom:1px solid currentColor; font:inherit; color:var(--fg); cursor:pointer; padding:0 }

/* Cards */
.bk-grid{ row-gap:clamp(40px,4.5vw,64px) }
.bk-card{ gap:12px }
.bk-card:hover .book__cover{ transform:none }
.bk-card.is-moving{ transition:transform .6s var(--ease-out), opacity .4s }
.bk-card__meta{ display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); margin-top:12px }
.bk-card__meta span + span::before{ content:"·"; margin-right:12px; opacity:.6 }
.bk-card__meta .bk-fmt{ color:var(--accent) }
.bk-card h3{ font-size:1.15rem; letter-spacing:-.01em; line-height:1.25 }
.bk-title{ all:unset; cursor:pointer; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--ease-out) }
.bk-title:hover,.bk-title:focus-visible{ background-size:100% 1px }
.bk-title:focus-visible{ outline:2px solid var(--accent); outline-offset:3px }
.bk-card__sub{ color:var(--mute); font-size:.92rem }

/* 3D book */
.bk-open{ all:unset; position:relative; display:block; cursor:pointer; perspective:1300px; border-radius:6px }
.bk-open:focus-visible{ outline:2px solid var(--accent); outline-offset:6px }
.bk-3d{ --th:16px; --ry:0deg; --rx:0deg; position:relative; display:block; transform-style:preserve-3d; transform:rotateY(var(--ry)) rotateX(var(--rx)); transition:transform .7s var(--ease-out) }
.bk-3d__cover{ display:block; transform:translateZ(0); border-radius:2px 6px 6px 2px !important }
.bk-3d__pages{ position:absolute; top:1.2%; bottom:1.2%; right:0; width:var(--th); transform-origin:right center; transform:rotateY(-90deg); background:repeating-linear-gradient(90deg,var(--paper) 0 2px,var(--paper-2) 2px 3px); border-radius:0 2px 2px 0 }
.bk-3d::after{ content:""; position:absolute; left:6%; right:6%; bottom:-14px; height:22px; border-radius:50%; background:radial-gradient(closest-side,#0006,transparent); transform:translateZ(-40px); filter:blur(4px); transition:transform .7s var(--ease-out), opacity .7s; z-index:-1 }
.bk-3d__shine{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(420px circle at var(--gx,30%) var(--gy,10%), #ffffff38, transparent 45%),
    linear-gradient(90deg,#0000004d 0,#ffffff2e 2.4%,#00000026 4.5%,transparent 9%);
  opacity:.85; transition:opacity .5s }
.bk-card__peek{ position:absolute; left:50%; bottom:16px; transform:translate(-50%,12px); padding:.6em 1.1em; border-radius:99px; background:var(--fg); color:var(--bg); font-size:.82rem; white-space:nowrap; opacity:0; transition:opacity .35s, transform .5s var(--ease-out); pointer-events:none }
@media (hover:hover) and (pointer:fine){
  .bk-open:hover .bk-3d{ --ry:-26deg }
  .bk-open:hover .bk-3d::after{ transform:translateZ(-40px) translateX(10%) scaleX(.9); opacity:.7 }
  .bk-open:hover .bk-card__peek,.bk-open:focus-visible .bk-card__peek{ opacity:1; transform:translate(-50%,0) }
}

/* Entry animation after filtering */
.bk-card.is-in{ animation:bk-in .55s var(--ease-out) both }
@keyframes bk-in{ from{ opacity:0; transform:translateY(22px) scale(.97) } }

/* CTA band */
.bk-cta-wrap{ padding-top:clamp(64px,8vw,110px) }
.bk-cta{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:clamp(24px,5vw,80px); background:var(--bg-2); border-radius:28px; padding:clamp(28px,5vw,64px) }
.bk-cta h2{ font-size:clamp(1.7rem,3.4vw,3rem); letter-spacing:-.03em; margin:14px 0 14px; max-width:20ch }
.bk-cta p:not(.label){ color:var(--mute); max-width:54ch }
.bk-cta p.bk-cta__alt{ margin-top:18px; font-size:.92rem }
.bk-cta__alt a{ color:var(--fg) }
.bk-cta .round{ --d:clamp(130px,12vw,170px); position:relative }

/* Dialog */
.bk-dialog{ width:min(1040px,calc(100vw - 32px)); max-height:min(760px,calc(100dvh - 32px)); padding:0; border:0; border-radius:28px; background:var(--bg); color:var(--fg); box-shadow:0 40px 120px -30px #000a; overflow:auto; overscroll-behavior:contain }
.bk-dialog::backdrop{ background:#080909a6; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px) }
.bk-dialog[open]{ animation:bk-pop .5s var(--ease-out) }
.bk-dialog[open]::backdrop{ animation:bk-fade .4s ease }
@keyframes bk-pop{ from{ opacity:0; transform:translateY(24px) scale(.97) } }
@keyframes bk-fade{ from{ opacity:0 } }
.bk-dialog__inner{ position:relative; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,56px); padding:clamp(24px,4vw,52px) }
.bk-dialog__close{ position:absolute; right:16px; top:16px; z-index:2; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer; transition:transform .4s var(--ease-out), background .3s }
.bk-dialog__close:hover{ transform:rotate(90deg); background:var(--bg-2) }
.bk-dialog__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.bk-dialog__cover{ perspective:1400px; align-self:start; position:sticky; top:0; padding:8px 18px 24px 0 }
.bk-3d--lg{ --th:26px; --ry:-18deg }
.bk-dialog[open] .bk-3d--lg{ animation:bk-turn 1.1s var(--ease-out) }
@keyframes bk-turn{ from{ transform:rotateY(-62deg) rotateX(4deg) } }
.bk-dialog__body{ min-width:0; display:flex; flex-direction:column; gap:14px; padding-top:6px }
.bk-dialog__body h2{ font-size:clamp(1.8rem,3.2vw,2.8rem); letter-spacing:-.03em; line-height:1.05; padding-right:44px }
.bk-dialog__sub{ color:var(--mute); font-size:1.05rem; margin-top:-4px }
.bk-dialog__sub:empty{ display:none }
.bk-dialog__desc{ font-size:1rem; line-height:1.6; max-width:58ch }
.bk-facts{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 22px; margin:6px 0 0; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.92rem }
.bk-facts dt{ color:var(--mute) }
.bk-facts dd{ margin:0; font-variant-numeric:tabular-nums }
.bk-dialog__links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px }
.bk-dialog__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:18px }
.bk-dialog__pos{ color:var(--mute); font-size:.85rem; font-variant-numeric:tabular-nums }
.bk-dialog__body.is-swap > *{ animation:bk-in .45s var(--ease-out) both }
.bk-dialog__body.is-swap > *:nth-child(2){ animation-delay:40ms }
.bk-dialog__body.is-swap > *:nth-child(3){ animation-delay:80ms }
.bk-dialog__body.is-swap > *:nth-child(n+4){ animation-delay:120ms }
html.bk-lock{ overflow:hidden }

@media (max-width:1080px){
  .bk-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:860px){
  .bk-stats{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bk-stats > div:nth-child(3){ padding-left:0; border-left:0 }
  .bk-stats > div:nth-child(n+3){ border-top:1px solid var(--line); margin-top:22px }
  .bk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .bk-cta{ grid-template-columns:minmax(0,1fr) }
  .bk-cta .round{ justify-self:start }
  .bk-dialog{ width:100vw; max-width:100vw; max-height:92dvh; margin:auto 0 0; border-radius:24px 24px 0 0 }
  .bk-dialog[open]{ animation:bk-up .5s var(--ease-out) }
  @keyframes bk-up{ from{ transform:translateY(40%); opacity:.4 } }
  .bk-dialog__inner{ grid-template-columns:minmax(0,1fr); padding:24px max(16px,env(safe-area-inset-left,0px)) calc(24px + env(safe-area-inset-bottom,0px)) }
  .bk-dialog__cover{ position:static; width:min(170px,45vw); padding:0 }
}
@media (max-width:560px){
  .bk-tools .filter{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; -webkit-mask-image:linear-gradient(90deg,#000 85%,transparent); mask-image:linear-gradient(90deg,#000 85%,transparent) }
  .bk-tools .filter::-webkit-scrollbar{ display:none }
  .bk-tools .filter .pill{ flex:none }
  .bk-tools__right{ width:100% }
  .bk-select{ flex:1 }
  .bk-select select{ flex:1; min-width:0 }
  .bk-grid{ column-gap:16px }
  .bk-card .book__links .pill{ padding:.7em 1em; font-size:.82rem }
}
@media (prefers-reduced-motion:reduce){
  .bk-3d,.bk-3d::after{ transition:none }
  .bk-card.is-in,.bk-dialog[open],.bk-dialog[open] .bk-3d--lg,.bk-dialog__body.is-swap > *{ animation:none }
}