/* ==========================================================================
   4. PUBLICATIONS — a publishing-house catalogue
   Opening → featured publication → the shelf (+ editorial filters) →
   statement → selected works index → dark ending.
   Shelf items keep the .bcard / .bcard__btn hooks that main.js reads; every
   base .bcard/.filters rule that would restyle them is neutralised below.
   ========================================================================== */
.pub { --pub-cream: #efe7da; --pub-paper: #f3ede3; --pub-oak: #e4d8c4; --pub-walnut: #5e4531; position: relative; background: var(--ivory); color: var(--ink); overflow: clip; }
.pub-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze-ink); }
.pub-eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
.pub-h3 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.pub-h3 em { font-style: italic; color: var(--bronze-ink); }
.pub-arrow { display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; border: 1px solid rgba(21, 23, 28, 0.22); color: var(--ink); background: transparent; transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out), border-color 0.5s; }
.pub-arrow svg { width: 15px; height: 15px; }
.pub-arrow:hover, .pub-arrow:focus-visible { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.pub-arrow:disabled { opacity: 0.3; pointer-events: none; }
.pub-link { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 8px; border: 0; background: none; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); position: relative; cursor: pointer; }
.pub-link svg { width: 16px; height: 16px; transition: transform 0.6s var(--ease-out); }
.pub-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bronze); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.pub-link:hover svg, .pub-link:focus-visible svg { transform: translateX(5px); }
.pub-link:hover::after, .pub-link:focus-visible::after { transform: scaleX(0.35); }

/* ---------- Opening ---------- */

/* ---------- Featured publication ---------- */
.pub-feature { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(64px, 7vw, 110px); padding: clamp(70px, 8vw, 120px) 0; background: var(--pub-cream); }
.pub-feature__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pub-feature__img { position: absolute; inset: -60px; background: #cdbfa8 var(--img) 50% 50% / cover no-repeat; opacity: 0.3; filter: blur(4px) saturate(0.8) sepia(0.18); }
.pub-feature__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 60% at 30% 52%, rgba(255, 246, 228, 0.7), transparent 70%), linear-gradient(180deg, var(--ivory) 0%, rgba(239, 231, 218, 0.2) 18%, rgba(239, 231, 218, 0.2) 82%, var(--ivory) 100%); }
.pub-feature__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; }
.pub-feature__stage { position: relative; margin: 0; height: clamp(480px, 46vw, 660px); display: grid; place-items: center; }
.pub-feature__light { position: absolute; inset: -10% 0 0; background: radial-gradient(40% 46% at 50% 42%, rgba(255, 250, 238, 0.95), transparent 72%); pointer-events: none; }
.pub-feature__plinth { position: absolute; left: 50%; bottom: 7%; width: 64%; height: 26px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(60, 40, 18, 0.26), transparent); filter: blur(4px); }
.pub-feature__book { --w: clamp(250px, 23vw, 350px); --t: 38px; --ry: -26deg; --rx: 4deg; --light: 0.2; z-index: 1; transition: opacity 0.45s var(--ease-out), translate 0.6s var(--ease-out); }
.pub-feature__book .book3d__body { transition: transform 1.4s var(--ease-out); }
.pub-feature__stage:hover .pub-feature__book { --ry: -14deg; --rx: 2deg; }
.pub-feature__copy { display: grid; justify-items: start; transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out); }
.pub-feature.is-switching .pub-feature__book { opacity: 0; translate: 0 14px; }
.pub-feature.is-switching .pub-feature__copy > :not(.pub-feature__nav) { opacity: 0; transform: translateY(8px); }
.pub-feature__copy > * { transition: opacity 0.45s var(--ease-out), transform 0.6s var(--ease-out); }
.pub-feature__meta { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; }
.pub-feature__kicker { color: var(--ink); }
.pub-feature__genre { position: relative; padding-left: 18px; color: var(--bronze-ink); }
.pub-feature__genre::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--bronze); }
.pub-feature__genre[hidden] { display: none; }
.pub-feature__title { margin: 0; max-width: 12ch; font-family: var(--font-display); font-weight: 280; font-size: clamp(2.7rem, 1.2rem + 3.8vw, 5.6rem); line-height: 0.94; letter-spacing: -0.048em; color: var(--ink); text-wrap: balance; }
.pub-feature__sub { margin: 18px 0 0; font-family: var(--font-display); font-style: italic; font-weight: 320; font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); color: var(--bronze-ink); }
.pub-feature__sub[hidden] { display: none; }
.pub-feature__author { margin: 22px 0 36px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-light-2); }
.pub-feature__author span { color: var(--ink); }
.pub-feature__nav { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 12px; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(21, 23, 28, 0.16); width: 100%; }
.pub-feature__count { margin-right: 10px; font-family: var(--font-display); font-size: 1rem; color: var(--on-light-3); }
.pub-feature__count b { font-weight: 400; color: var(--ink); font-size: 1.4rem; }
.pub-feature__thumbs { display: flex; gap: 10px; margin: 0 0 0 auto; padding: 0; list-style: none; }
.pub-feature__thumb { position: relative; display: block; width: 36px; padding: 0 0 8px; border: 0; background: none; cursor: pointer; opacity: 0.45; transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.pub-feature__thumb img { display: block; width: 100%; aspect-ratio: 699 / 1024; object-fit: cover; box-shadow: 0 6px 12px -6px rgba(40, 26, 10, 0.6); }
.pub-feature__thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bronze); transform: scaleX(0); transition: transform 0.6s var(--ease-out); }
.pub-feature__thumb:hover, .pub-feature__thumb:focus-visible { opacity: 0.85; transform: translateY(-2px); }
.pub-feature__thumb.is-active { opacity: 1; }
.pub-feature__thumb.is-active::after { transform: scaleX(1); }

/* ---------- The shelf ---------- */
.pub-library { padding: clamp(100px, 11vw, 160px) 0 clamp(40px, 5vw, 70px); }
.pub-library__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px 40px; flex-wrap: wrap; margin-bottom: clamp(30px, 4vw, 54px); }
.pub-library__tools { display: flex; align-items: center; gap: 28px; min-width: 0; max-width: 100%; }
.pub-library__arrows { display: flex; gap: 8px; flex: none; }
.pub-filters.filters { gap: 0 26px; padding: 0; overflow-x: auto; }
.pub-filters .filters__btn { position: relative; height: auto; padding: 10px 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; color: var(--on-light-3); transition: color 0.5s var(--ease-out); }
.pub-filters .filters__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.pub-filters .filters__btn:hover { background: none; color: var(--ink); }
.pub-filters .filters__btn.is-active { background: none; color: var(--ink); border: 0; }
.pub-filters .filters__btn.is-active::after { transform: scaleX(1); }

.pub-shelf { --k: 1; --stage-h: calc(372px * var(--k)); scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; padding-top: 44px; }
.pub-shelf::-webkit-scrollbar { display: none; }
.pub-shelf.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.pub-shelf.is-dragging .bcard__btn { pointer-events: none; }
.pub-shelf__track { position: relative; display: flex; align-items: flex-start; width: max-content; min-width: 100%; margin: 0; padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2)); list-style: none; box-sizing: border-box; }
/* the shelf itself: an oak top and a walnut front edge running under every book */
.pub-shelf__track::before { content: ""; position: absolute; left: 0; right: 0; top: var(--stage-h); height: 10px; background: linear-gradient(180deg, #efe6d6 0%, var(--pub-oak) 60%, #d6c7ae 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.pub-shelf__track::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--stage-h) + 10px); height: 12px; background: linear-gradient(180deg, #7a5b42 0%, var(--pub-walnut) 55%, #46331f 100%); box-shadow: 0 22px 34px -18px rgba(40, 26, 10, 0.55); }
.pub .pub-book { --b: 176px; --w: calc(var(--b) * var(--k)); position: relative; z-index: 1; flex: none; width: max(calc(var(--w) + 44px), calc(170px * var(--k))); padding: 0 clamp(10px, 1.2vw, 20px); scroll-snap-align: start; box-sizing: border-box; transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out), filter 0.7s var(--ease-out); }
.pub .pub-book:nth-child(5n+1) { --b: 178px; } .pub .pub-book:nth-child(5n+2) { --b: 150px; } .pub .pub-book:nth-child(5n+3) { --b: 198px; } .pub .pub-book:nth-child(5n+4) { --b: 162px; } .pub .pub-book:nth-child(5n) { --b: 186px; }
.pub .pub-book__btn { display: grid; width: 100%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; color: var(--ink); text-align: left; cursor: pointer; }
.pub .pub-book__btn:hover, .pub .pub-book__btn:focus-visible { transform: none; box-shadow: none; }
.pub .pub-book__btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 6px; }
.pub-book__obj { height: var(--stage-h); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2px; }
.pub-book__3d { --w: calc(var(--b) * var(--k)); --t: calc(24px * var(--k)); --ry: -24deg; --rx: 3deg; --light: 0.18; }
.pub .pub-book:nth-child(even) .pub-book__3d { --ry: -30deg; }
.pub .pub-book:nth-child(3n) .pub-book__3d { --ry: -18deg; }
.pub-book__3d .book3d__body { transition: transform 1.2s var(--ease-out), translate 1.1s var(--ease-out); }
.pub-book__3d .book3d__shadow { bottom: -2%; }
.pub .pub-book__btn:hover .pub-book__3d, .pub .pub-book__btn:focus-visible .pub-book__3d { --ry: -10deg; --rx: 1deg; }
.pub .pub-book__btn:hover .book3d__body, .pub .pub-book__btn:focus-visible .book3d__body { translate: 0 -14px; }
.pub .pub-book__btn:hover .book3d__shadow, .pub .pub-book__btn:focus-visible .book3d__shadow { transform: scaleX(0.82); opacity: 1; }
.pub-book__info { display: grid; justify-items: start; gap: 5px; padding-top: 42px; min-height: 120px; }
.pub-book__title { font-family: var(--font-display); font-weight: 350; font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); transition: color 0.5s; }
.pub-book__author { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light-3); }
.pub-book__genre { font-family: var(--font-display); font-style: italic; font-size: 0.86rem; color: var(--bronze-ink); }
.pub-book__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); opacity: 0; transform: translateY(-4px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.pub-book__go svg { width: 12px; height: 12px; }
.pub .pub-book__btn:hover .pub-book__go, .pub .pub-book__btn:focus-visible .pub-book__go { opacity: 1; transform: none; }
.pub .pub-book__btn:hover .pub-book__title, .pub .pub-book__btn:focus-visible .pub-book__title { color: var(--bronze-ink); }
@media (hover: hover) {
  .pub-shelf__track:hover .pub-book { opacity: 0.5; filter: saturate(0.75); }
  .pub-shelf__track:hover .pub-book:hover { opacity: 1; filter: none; transform: translateY(-2px); }
}
.pub .pub-book.is-hidden { display: none; }
.pub .pub-book.is-entering { opacity: 0; transform: translateY(16px); }
.pub-library__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
.pub-library__progress { position: relative; flex: 1; max-width: 360px; height: 1px; background: rgba(21, 23, 28, 0.14); overflow: hidden; }
.pub-library__progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: var(--bronze-ink); transition: transform 0.3s linear; }
.pub-library__hint { margin: 0; font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--on-light-3); }

/* ---------- Statement ---------- */
.pub-statement { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: clamp(30px, 5vw, 90px); align-items: center; padding-block: clamp(110px, 12vw, 190px); }
.pub-statement__a, .pub-statement__b { margin: 0; font-family: var(--font-display); font-weight: 260; font-size: clamp(2.6rem, 0.8rem + 5.4vw, 7.6rem); line-height: 0.94; letter-spacing: -0.052em; color: var(--ink); }
.pub-statement__a span, .pub-statement__b span, .pub-statement__b em { display: block; }
.pub-statement__a { grid-column: 1; grid-row: 1; }
.pub-statement__b { grid-column: 1; grid-row: 2; margin-top: clamp(30px, 4vw, 60px); padding-left: clamp(0px, 12vw, 220px); color: var(--on-light-2); }
.pub-statement__b em { font-style: italic; color: var(--bronze-ink); }
.pub-statement__fig { grid-column: 2; grid-row: 1 / 3; margin: 0; width: clamp(150px, 14vw, 220px); }
.pub-statement__fig img { display: block; width: 100%; aspect-ratio: 699 / 1024; object-fit: cover; transform: rotate(3deg); box-shadow: 0 40px 60px -30px rgba(40, 26, 10, 0.65), 0 8px 16px -10px rgba(40, 26, 10, 0.4); }
.pub-statement__fig figcaption { margin-top: 22px; font-family: var(--font-display); font-style: italic; font-size: 0.9rem; color: var(--on-light-3); text-align: center; }

/* ---------- Selected works: an editorial index ---------- */

/* featured progress */
.pub-feature__progress { position: relative; width: 70px; height: 1px; margin-right: 8px; background: rgba(21, 23, 28, 0.18); }
.pub-feature__progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bronze-ink); transition: width 0.8s var(--ease-out); }

/* ---------- Ending ---------- */

/* ---------- Motion (enhancement: offset + softened, never hidden) ---------- */
.pub [data-pub-rv] { transition: opacity 1.3s var(--ease-out), transform 1.5s var(--ease-out); }
.pub-motion .pub [data-pub-rv]:not(.is-in) { opacity: 0.3; transform: translateY(36px); }
.pub-motion .pub .pub-feature__stage[data-pub-rv]:not(.is-in) { transform: translateY(50px) scale(0.97); }
.pub-motion [data-pub-shelf]:not(.is-in) .pub-book { opacity: 0.3; transform: translateY(34px); }
[data-pub-shelf].is-in .pub-book:nth-child(2) { transition-delay: 0.08s; } [data-pub-shelf].is-in .pub-book:nth-child(3) { transition-delay: 0.16s; }
[data-pub-shelf].is-in .pub-book:nth-child(4) { transition-delay: 0.24s; } [data-pub-shelf].is-in .pub-book:nth-child(5) { transition-delay: 0.32s; }
[data-pub-shelf].is-in .pub-book:nth-child(6) { transition-delay: 0.4s; } [data-pub-shelf].is-in .pub-book:nth-child(n+7) { transition-delay: 0.48s; }
@media (hover: hover) { [data-pub-shelf].is-in .pub-shelf__track:hover .pub-book { transition-delay: 0s; } }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pub-feature__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; }
  .pub-feature__stage { height: 460px; }
  .pub-feature__book { --w: clamp(200px, 26vw, 260px); --t: 30px; }
  .pub-feature__thumbs { margin-left: 0; width: 100%; }
  .pub-library__tools { width: 100%; justify-content: space-between; }
}
@media (max-width: 760px) {
  .pub-feature__grid { grid-template-columns: 1fr; }
  .pub-feature__stage { height: 400px; }
  .pub-feature__book { --w: 210px; --t: 26px; }
  .pub-feature__copy { text-align: left; }
  .pub-shelf { --k: 0.82; }
  .pub-library__arrows { display: none; }
  .pub-statement { grid-template-columns: 1fr; }
  .pub-statement__fig { grid-column: 1; grid-row: auto; justify-self: end; margin: 40px 6% 0 0; width: 150px; }
  .pub-statement__b { grid-row: auto; padding-left: 0; }
}
@media (max-width: 560px) {
  .pub-feature__title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .pub-feature__stage { height: 360px; }
  .pub-feature__book { --w: 190px; }
  .pub-feature__nav { gap: 10px; }
  .pub-feature__thumb { width: 30px; }
  .pub-filters.filters { gap: 0 20px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .pub-shelf { --k: 0.74; }
  .pub-book__title { font-size: 0.95rem; }
  .pub-book__go { opacity: 1; transform: none; }
  .pub-statement__a, .pub-statement__b { font-size: clamp(2.3rem, 11vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .pub [data-pub-rv], .pub .pub-book, .pub-feature__book, .pub-feature__copy > * { transition: none; }
}

/* ---------- Real 3D mockups inside the existing book objects ----------
   .book3d.is-mockup shows the supplied mockup (cover, page edge and board already rendered)
   instead of building the book from a flat cover: same slot, same animations, no double 3D. */
.book3d.is-mockup { aspect-ratio: 600 / 1024; perspective: none; }
.book3d.is-mockup .book3d__body { transform: none; }
.book3d.is-mockup .book3d__body::before, .book3d.is-mockup .book3d__body::after, .book3d.is-mockup .book3d__back { display: none; }
.book3d.is-mockup .book3d__cover { transform: none; object-fit: contain; border-radius: 0; background: none; backface-visibility: visible; filter: drop-shadow(12px 20px 18px rgba(0, 0, 0, 0.32)) drop-shadow(2px 3px 3px rgba(0, 0, 0, 0.2)); }
.book3d.is-mockup .book3d__shadow { left: 2%; right: 4%; bottom: -2%; }
.book3d.is-mockup .book3d__shadow::after { display: none; }
.pub-statement__fig .pub-statement__mock { aspect-ratio: 600 / 1024; object-fit: contain; transform: none; box-shadow: none; filter: drop-shadow(12px 20px 18px rgba(28, 18, 8, 0.3)); background: none; }

/* ---------- Continuous shelf (shelf-loop.js) ----------
   The stage is tall enough for the tallest mockup (198px wide → 338px tall) plus its hover
   lift, so no book is ever clipped at the top; every book stands on the same shelf line.
   The loop drives the scroll position itself, so snapping is off while it runs. */
.pub-shelf.is-loop { scroll-snap-type: none; }
.pub-shelf.is-loop .pub-shelf__track { will-change: transform; }

/* ==========================================================================
   Publications page — the ABS catalogue (.pc-*). Book-first: a dark catalogue
   cover with a row of real mockups, the featured edition and continuous shelf
   (.pub-* above), collections by category, and a numbered index of every title.
   ========================================================================== */
.page-pubs { background: var(--ivory); }
.page-pubs main { overflow-x: clip; }
.pb-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pb-cat .pub-feature { scroll-margin-top: 80px; margin-top: 0; }
.pb-cat .pub-library, .pc-coll, .pc-index { scroll-margin-top: 80px; }
.pub-feature__desc { margin: 16px 0 0; max-width: 46ch; font-size: 0.98rem; line-height: 1.7; color: var(--on-light-2); }
.pub-feature__desc:empty { display: none; }
.pb-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* ---- shared bits */
.pc-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--bronze-ink); }
.pc-eyebrow::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: 0.7; }
.pc-eyebrow--light { color: var(--bronze-2); }
.pc-h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 1.3rem + 2.6vw, 3.8rem); line-height: 0.98; letter-spacing: -0.04em; color: var(--ink); }
.pc-h2 em { font-style: italic; color: var(--bronze-ink); }
.pc-link { display: inline-flex; align-items: center; gap: 12px; padding: 0 0 8px; border: 0; border-bottom: 1px solid var(--bronze); background: none; font: inherit; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); text-decoration: none; cursor: pointer; transition: color 0.4s var(--ease-out), border-color 0.4s; }
.pc-link svg { width: 15px; height: 15px; transition: transform 0.6s var(--ease-out); }
.pc-link:hover, .pc-link:focus-visible { color: var(--bronze-ink); }
.pc-link:hover svg, .pc-link:focus-visible svg { transform: translateX(5px); }
.pc-link:focus-visible, .pc-book:focus-visible, .pc-thumb:focus-visible, .pc-row:focus-visible, .pc-contents button:focus-visible { outline: 2px solid var(--bronze); outline-offset: 4px; }

/* a real mockup, always shown whole */
.pc-book { display: grid; justify-items: center; align-content: start; gap: 16px; flex: none; width: calc(var(--bw) * var(--s, 1)); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.pc-book__obj { position: relative; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: calc(var(--bw) * 1.7067); }
.pc-book__obj img { position: relative; z-index: 1; display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; object-position: center bottom; transition: transform 0.9s var(--ease-out); transform-origin: 50% 100%; }
.pc-book__floor { position: absolute; left: 8%; right: 4%; bottom: -7px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(20, 14, 6, 0.38), rgba(20, 14, 6, 0)); transition: transform 0.9s var(--ease-out), opacity 0.9s; }
.pc-book:hover img, .pc-book:focus-visible img { transform: translateY(-10px); }
.pc-book:hover .pc-book__floor, .pc-book:focus-visible .pc-book__floor { transform: scaleX(0.82); opacity: 0.7; }
.pc-book__cap { display: grid; gap: 5px; max-width: 100%; }
.pc-book__t { font-family: var(--font-display); font-size: 0.92rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; transition: color 0.4s; }
.pc-book.is-lead .pc-book__t { font-size: 1.12rem; }
.pc-book__a { overflow-wrap: anywhere; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light-3); }
.pc-book:hover .pc-book__t, .pc-book:focus-visible .pc-book__t { color: var(--bronze-ink); }

/* ---- 1. Catalogue cover (hero) */
.pc-hero { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0 0; background: #121318; color: var(--on-dark-1); }
.pc-hero__glow { position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(60% 46% at 50% 82%, rgba(176, 141, 87, 0.22), rgba(176, 141, 87, 0) 70%),
    radial-gradient(90% 60% at 80% 0%, rgba(255, 240, 214, 0.06), rgba(255, 240, 214, 0) 60%),
    linear-gradient(180deg, #14151a 0%, #101116 100%); }
.pc-crumbs { margin-bottom: 30px; }
.pc-crumbs ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; }
.pc-crumbs li { display: inline-flex; gap: 6px; color: var(--on-dark-3); }
.pc-crumbs li + li::before { content: "/"; color: rgba(250, 247, 241, 0.26); }
.pc-crumbs a { color: var(--on-dark-2); text-decoration: none; }
.pc-crumbs a:hover { color: var(--on-dark-1); }
.pc-crumbs [aria-current] { color: var(--bronze-2); }
.pc-rule { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 0; border-top: 2px solid rgba(250, 247, 241, 0.9); border-bottom: 1px solid rgba(250, 247, 241, 0.16); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--on-dark-1); }
.pc-rule i { font-style: normal; color: var(--bronze-2); margin: 0 6px; }
.pc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: 34px clamp(40px, 6vw, 110px); align-items: end; padding-top: clamp(44px, 5vw, 76px); }
.pc-hero__copy .pc-eyebrow { margin-bottom: 26px; }
.pc-title { margin: 0; font-family: var(--font-display); font-weight: 260; font-size: clamp(3rem, 1rem + 6vw, 7.8rem); line-height: 0.92; letter-spacing: -0.055em; color: var(--on-dark-1); }
.pc-title span, .pc-title em { display: block; }
.pc-title em { font-style: italic; color: var(--bronze-2); padding-bottom: 0.08em; }
.pc-hero__side { display: grid; gap: 26px; padding-bottom: 12px; }
.pc-hero__lead { margin: 0; font-size: 1.02rem; line-height: 1.75; color: var(--on-dark-2); }
.pc-facts { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 0 38px; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(250, 247, 241, 0.18); }
.pc-facts dt { font-family: var(--font-display); font-weight: 280; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; color: var(--on-dark-1); }
.pc-facts dd { margin: 7px 0 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--on-dark-3); }
.pc-hero__stage { container-type: inline-size; position: relative; margin-top: clamp(46px, 5vw, 76px); }
.pc-hero__row { --gap: clamp(10px, 1.8vw, 26px); --bw: min(214px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--sum))); position: relative; z-index: 1; display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); }
.pc-hero__book .pc-book__floor { background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); bottom: -9px; height: 20px; }
.pc-hero__book img { filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.5)); }
.pc-hero__table { position: relative; height: clamp(70px, 8vw, 118px); margin: 0 calc(var(--gutter) * -1); border-top: 1px solid rgba(205, 177, 132, 0.5); background: linear-gradient(180deg, rgba(205, 177, 132, 0.16), rgba(205, 177, 132, 0) 78%); }
.pc-contents { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 34px; align-items: baseline; margin-top: calc(clamp(70px, 8vw, 118px) * -1 + 26px); padding-bottom: 30px; }
.pc-contents__label { margin: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze-2); }
.pc-contents ul { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 0; padding: 0; list-style: none; }
.pc-contents button { display: inline-flex; align-items: baseline; gap: 8px; padding: 2px 0; border: 0; border-bottom: 1px solid transparent; background: none; font: inherit; font-family: var(--font-display); font-size: 0.98rem; color: var(--on-dark-1); cursor: pointer; transition: border-color 0.4s, color 0.4s; }
.pc-contents button b { font-family: var(--font-sans); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; color: var(--bronze-2); }
.pc-contents button:hover, .pc-contents button:focus-visible { border-color: var(--bronze-2); color: var(--bronze-2); }

/* ---- 3. Collections */
.pc-coll { padding: clamp(90px, 10vw, 150px) 0 clamp(70px, 8vw, 120px); background: var(--paper); border-top: 1px solid rgba(21, 23, 28, 0.08); }
.pc-coll__head { display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; padding-bottom: clamp(40px, 5vw, 64px); }
.pc-coll__note { margin: 0; max-width: 32ch; font-size: 0.92rem; line-height: 1.7; color: var(--on-light-2); }
.pc-plate { display: grid; gap: clamp(34px, 4vw, 56px) clamp(40px, 5vw, 80px); padding: clamp(44px, 5vw, 70px) 0 clamp(50px, 6vw, 84px); border-top: 2px solid var(--ink); }
.pc-plate + .pc-plate { border-top: 1px solid rgba(21, 23, 28, 0.2); }
.pc-plate__head { display: grid; gap: 14px; justify-items: start; align-content: start; }
.pc-plate__no { margin: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--bronze-ink); }
.pc-plate__title { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.3rem + 2vw, 3.2rem); line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.pc-plate__count { margin: 0 0 10px; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--on-light-2); }
.pc-plate__shelf { container-type: inline-size; min-width: 0; }
.pc-plate__books { --gap: clamp(12px, 1.8vw, 26px); --bw: min(236px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--sum))); position: relative; display: flex; align-items: flex-start; gap: var(--gap); min-width: 0; }
.pc-plate__books::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bw) * 1.7067); height: 1px; background: rgba(21, 23, 28, 0.28); }
.pc-plate__books::after { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--bw) * 1.7067 + 1px); height: 26px; background: linear-gradient(180deg, rgba(94, 69, 49, 0.12), rgba(94, 69, 49, 0)); pointer-events: none; }
.pc-plate__books .pc-book { position: relative; z-index: 1; gap: 22px; }
/* a: title line across the top, eight books along one shelf */
.pc-plate--a .pc-plate__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.pc-plate--a .pc-plate__no { grid-column: 1 / -1; }
.pc-plate--a .pc-plate__count { margin: 0; grid-column: 1; }
.pc-plate--a .pc-link { grid-column: 2; grid-row: 2 / 4; align-self: end; }
/* b: books left, heading right — c: heading left, books right */
.pc-plate--b { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.62fr); align-items: start; }
.pc-plate--b .pc-plate__head { order: 2; padding-top: 6px; }
.pc-plate--c { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.5fr); align-items: start; }
.pc-plate--c .pc-plate__books { justify-content: flex-end; }
.pc-plate--b .pc-plate__books, .pc-plate--c .pc-plate__books { --bw: min(228px, calc((100cqw - (var(--n) - 1) * var(--gap)) / var(--sum))); }
/* the remaining categories as catalogue rows */
.pc-crows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.pc-crow { display: grid; grid-template-columns: minmax(0, 0.8fr) 84px 176px minmax(0, 1.4fr) auto; gap: 14px clamp(18px, 2.6vw, 40px); align-items: center; padding: 22px 0; border-bottom: 1px solid rgba(21, 23, 28, 0.16); }
.pc-crow__name { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 0.9vw, 1.9rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink); }
.pc-crow__count { margin: 0; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bronze-ink); }
.pc-crow__covers { display: flex; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pc-thumb { display: block; width: 50px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.6s var(--ease-out); }
.pc-thumb img { display: block; width: 100%; height: auto; box-shadow: 0 8px 16px -8px rgba(40, 26, 10, 0.55), 0 0 0 1px rgba(21, 23, 28, 0.08); }
.pc-thumb:hover, .pc-thumb:focus-visible { transform: translateY(-5px); }
.pc-crow__titles { margin: 0; font-size: 0.86rem; line-height: 1.6; color: var(--on-light-2); }

/* ---- 4. The ABS catalogue (index) */
.pc-index { padding: clamp(90px, 10vw, 150px) 0 clamp(90px, 10vw, 140px); background: var(--ivory); }
.pc-index__grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.pc-index__side { position: sticky; top: 112px; }
.pc-index__note { margin: 20px 0 0; max-width: 30ch; font-family: var(--font-display); font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--on-light-2); }
.pc-peek { position: relative; display: flex; align-items: flex-end; justify-content: center; margin: 34px 0 0; height: clamp(300px, 30vw, 400px); padding: 44px 30px 34px; background: #15171c; overflow: hidden; }
.pc-peek::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(205, 177, 132, 0.28); pointer-events: none; }
.pc-peek::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 78%, rgba(176, 141, 87, 0.24), rgba(176, 141, 87, 0) 70%); pointer-events: none; }
.pc-peek img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.5)); transition: opacity 0.35s var(--ease-out), transform 0.6s var(--ease-out); }
.pc-peek.is-switching img { opacity: 0; transform: translateY(10px); }
.pc-peek__no { position: absolute; left: 24px; top: 22px; z-index: 2; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.24em; color: var(--on-dark-3); }
.pc-peek__no b { color: var(--bronze-2); font-weight: 700; }
.pc-peek__floor { position: absolute; left: 22%; right: 22%; bottom: 24px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0)); }
.pc-index__cols, .pc-row { display: grid; grid-template-columns: 44px minmax(0, 1.5fr) minmax(0, 0.8fr) minmax(0, 0.72fr) 22px; gap: 6px 22px; align-items: baseline; }
.pc-index__cols { padding: 0 0 12px; border-bottom: 2px solid var(--ink); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: var(--on-light-3); }
.pc-rows { margin: 0; padding: 0; list-style: none; }
.pc-row { width: 100%; padding: 19px 0; border: 0; border-bottom: 1px solid rgba(21, 23, 28, 0.14); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color 0.4s, padding 0.5s var(--ease-out); }
.pc-row__no { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: var(--bronze-ink); }
.pc-row__thumb { display: none; }
.pc-row__title { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem); line-height: 1.12; letter-spacing: -0.02em; transition: color 0.4s; }
.pc-row__title small { display: block; margin-top: 6px; font-style: italic; font-size: 0.86rem; letter-spacing: 0; line-height: 1.35; color: var(--on-light-3); }
.pc-row__author { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-light-2); line-height: 1.6; }
.pc-row__cat { font-family: var(--font-display); font-style: italic; font-size: 0.92rem; color: var(--on-light-2); }
.pc-row__go { align-self: center; color: var(--bronze-ink); opacity: 0; transform: translateX(-8px); transition: opacity 0.4s, transform 0.6s var(--ease-out); }
.pc-row__go svg { display: block; width: 16px; height: 16px; }
.pc-row:hover, .pc-row:focus-visible, .pc-row.is-active { background: rgba(176, 141, 87, 0.07); padding-left: 12px; padding-right: 8px; }
.pc-row:hover .pc-row__title, .pc-row:focus-visible .pc-row__title, .pc-row.is-active .pc-row__title { color: var(--bronze-ink); }
.pc-row:hover .pc-row__go, .pc-row:focus-visible .pc-row__go { opacity: 1; transform: none; }
.pc-index__more { margin: 40px 0 0; }

/* ---- reveals */
.pc-rv { transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.pc-motion .pc-rv:not(.is-in) { opacity: 0.25; transform: translateY(30px); }
@media (prefers-reduced-motion: reduce) { .pc-rv, .pc-book__obj img, .pc-peek img { transition: none; } .pc-motion .pc-rv:not(.is-in) { opacity: 1; transform: none; } }

/* ---- responsive */
@media (max-width: 1100px) {
  .pc-hero__book--3 { display: none; }
  .pc-hero__row { --n: 5 !important; --sum: 4.12 !important; --bw: min(210px, calc((100cqw - 4 * var(--gap)) / 4.12)); }
  .pc-crow { grid-template-columns: minmax(0, 1fr) auto auto; }
  .pc-crow__titles { grid-column: 1 / -1; order: 5; }
  .pc-crow__count { order: 2; } .pc-crow__go { order: 3; } .pc-crow__covers { order: 4; grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .pc-hero__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pc-hero__side { max-width: 52ch; }
  .pc-plate--b, .pc-plate--c { grid-template-columns: minmax(0, 1fr); }
  .pc-plate--b .pc-plate__head { order: 0; padding-top: 0; }
  .pc-plate--c .pc-plate__books { justify-content: flex-start; }
  .pc-index__grid { grid-template-columns: minmax(0, 1fr); }
  .pc-index__side { position: static; }
  .pc-peek { display: none; }
  .pc-index__cols { display: none; }
  .pc-rows { border-top: 2px solid var(--ink); }
  .pc-row { grid-template-columns: 30px 46px minmax(0, 1fr) 18px; grid-template-areas: "no thumb title go" "no thumb author go" "no thumb cat go"; gap: 4px 16px; align-items: start; padding: 18px 0; }
  .pc-row__no { grid-area: no; padding-top: 3px; }
  .pc-row__thumb { grid-area: thumb; display: block; }
  .pc-row__thumb img { display: block; width: 100%; height: auto; box-shadow: 0 6px 12px -6px rgba(40, 26, 10, 0.5); }
  .pc-row__title { grid-area: title; }
  .pc-row__author { grid-area: author; margin-top: 4px; }
  .pc-row__author:empty { display: none; }
  .pc-row__cat { grid-area: cat; }
  .pc-row__go { grid-area: go; opacity: 1; transform: none; }
  .pc-row:hover, .pc-row:focus-visible, .pc-row.is-active { padding-left: 0; padding-right: 0; }
}
@media (max-width: 900px) {
  /* plates: the books become a swipeable row, every book still whole */
  .pc-plate__shelf { container-type: normal; }
  .pc-plate__books, .pc-plate--b .pc-plate__books, .pc-plate--c .pc-plate__books { --bw: 168px; --gap: 18px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); scrollbar-width: none; justify-content: flex-start; }
  .pc-plate__books::-webkit-scrollbar { display: none; }
  .pc-plate__books::before, .pc-plate__books::after { display: none; }
  .pc-plate__books .pc-book { scroll-snap-align: start; }
  .pc-plate__books .pc-book__obj { border-bottom: 1px solid rgba(21, 23, 28, 0.28); }
  .pc-plate--a .pc-plate__head { grid-template-columns: minmax(0, 1fr); }
  .pc-plate--a .pc-link { grid-column: 1; grid-row: auto; justify-self: start; }
  .pc-plate--a .pc-plate__count { margin-bottom: 10px; }
}
@media (max-width: 640px) {
  .pc-hero { padding-top: 120px; }
  .pc-rule span:nth-child(2) { display: none; }
  .pc-hero__book--2 { display: none; }
  .pc-hero__row { --n: 3 !important; --sum: 2.68 !important; --bw: calc((100cqw - 2 * var(--gap)) / 2.68); }
  .pc-contents { grid-template-columns: minmax(0, 1fr); }
  .pc-contents ul { flex-wrap: nowrap; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .pc-contents ul::-webkit-scrollbar { display: none; }
  .pc-thumb { width: 44px; }
}

/* Section photographs named in the page with data-photo */
[data-photo="1761824197923-283b689fe7aa-2200"] { --img: url("../images/photos/1761824197923-283b689fe7aa-2200.webp"); }