/* ============================================================================
   17.09.26
   1) Articles & Essays cards: title, author and brief only.
   2) Publications: the books as a packed gallery of front covers.
   ========================================================================== */

/* -- 1. article cards -------------------------------------------------------- */
.article-card-author {
  margin: -.15rem 0 .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em;
  color: rgba(255, 255, 255, .62);
}
.publication-article-body .article-card-author { margin: -.35rem 0 .7rem; font-size: .8rem; }

/* -- 2. the book gallery ------------------------------------------------------
   Front covers only, packed edge to edge like the Art & Culture wall. Hover
   brings up Buy / Explore; Explore lifts the cover off the details beneath.
   The outer columns drift against the scroll (js/publications.js). */
.pb-shelf {
  --pb-gap: clamp(.55rem, 1vw, .9rem);
  display: flex; align-items: flex-start; gap: var(--pb-gap);
  max-width: 1120px; margin: clamp(1.5rem, 4vh, 2.5rem) auto 0;
}
.pb-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--pb-gap); will-change: transform; }

.pb-card {
  position: relative; width: 100%; aspect-ratio: var(--ar, .6667);
  overflow: hidden; border-radius: 6px; background: #0c0b09;
  isolation: isolate;
}
.pb-shelf.is-in .pb-card { animation: pbIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.pb-shelf.is-in .pb-col:nth-child(2) .pb-card { animation-delay: .08s; }
.pb-shelf.is-in .pb-col:nth-child(3) .pb-card { animation-delay: .16s; }
@keyframes pbIn { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* the cover */
.pb-front {
  position: absolute; inset: 0; z-index: 2;
  transition: transform .85s cubic-bezier(.7, 0, .2, 1), box-shadow .85s ease;
}
.pb-front img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: center;
  transition: transform .9s cubic-bezier(.2, .8, .2, 1), filter .5s ease;
}
.pb-card:hover .pb-front img { transform: scale(1.03); filter: brightness(.72); }
.pb-card.is-open .pb-front { transform: translate3d(0, -101%, 0); box-shadow: 0 30px 40px rgba(0, 0, 0, .6); }

/* hover: Buy / Explore */
.pb-veil {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center; gap: .5rem;
  padding: clamp(.8rem, 1.6vw, 1.2rem);
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0) 55%);
  opacity: 0; transition: opacity .35s ease;
}
.pb-card:hover .pb-veil, .pb-card:focus-within .pb-veil, .pb-card.is-touched .pb-veil { opacity: 1; }
.pb-veil > * { transform: translateY(10px); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background .25s, color .25s, border-color .25s; }
.pb-card:hover .pb-veil > *, .pb-card:focus-within .pb-veil > *, .pb-card.is-touched .pb-veil > * { transform: none; }

.pb-buy, .pb-explore, .pb-close {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .7rem 1.15rem; border-radius: 100px;
  font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.pb-buy { background: linear-gradient(100deg, #c9a24a, #f0d489); color: #0a0a0a; border: 1px solid transparent; }
.pb-buy:hover { background: #f5dc93; }
.pb-explore, .pb-close { background: rgba(0, 0, 0, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pb-explore:hover, .pb-close:hover { border-color: var(--gold-bright, #FADB5F); color: var(--gold-bright, #FADB5F); }

/* beneath the cover */
.pb-under {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: radial-gradient(120% 80% at 0% 0%, rgba(201, 162, 74, .14), transparent 60%), #0e0d0a;
  border: 1px solid rgba(201, 162, 74, .22); border-radius: inherit;
}
.pb-under-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(201, 162, 74, .4) transparent; }
.pb-under h3 {
  margin: 0 0 .45rem; font-family: var(--font-display, 'Syne', sans-serif); font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.15; letter-spacing: -.015em; color: #fff;
}
.pb-by { margin: 0 0 .9rem; font-size: .78rem; color: var(--gold, #c9a24a); }
.pb-about { margin: 0; font-size: .84rem; line-height: 1.65; color: rgba(255, 255, 255, .6); }
.pb-under-actions { display: flex; gap: .5rem; padding-top: .9rem; }
.pb-under-actions .pb-buy { flex: 1; }
.pb-under > * { opacity: 0; transition: opacity .3s ease; }
.pb-card.is-open .pb-under > * { opacity: 1; transition: opacity .5s ease .35s; }

@media (hover: none) {
  .pb-card:hover .pb-front img { transform: none; filter: none; }
  .pb-card.is-touched .pb-front img { filter: brightness(.72); }
}
@media (max-width: 560px) {
  .pb-veil { flex-direction: column; align-items: stretch; gap: .4rem; }
  .pb-buy, .pb-explore, .pb-close { padding: .62rem .8rem; font-size: .58rem; }
  .pb-under { padding: .8rem; }
  .pb-about { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pb-front, .pb-front img, .pb-veil > * { transition: none; }
  .pb-shelf.is-in .pb-card { animation: none; }
}