/* home/books.css: the books band of index.html. Owned by the books section.
   Navy ground and the gold numeral stay. The signature of this section, and of
   nothing else on the page, is the 3D book: a real box (cover, spine, page
   edges, back) that turns with the pointer and with scroll, carries light and
   a moving sheen, and is browsed through a shelf of the seven spines.
   books.js writes the angles and the light; everything here also stands on
   its own (no script: the book rests at its angle, the shelf stays hidden). */

.hp-books {
  background: var(--ink);
  padding: var(--section-pad);
  position: relative;
  /* the book's size box; books.js never measures, the faces derive from these */
  --h-books-mw: 272px;
  --h-books-mh: 358px;
  --h-books-d: 38px;            /* a textbook is thick */
  --h-books-sh: 112px;          /* tallest spine on the shelf */
  --h-books-sw: 40px;           /* spine width on the shelf; each target is 44px */
}

/* A plain hairline between this band and the navy video band below. The old
   one was a sky gradient with a glow, decoration without a job. */
.hp-books::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(255, 255, 255, 0.09);
}

.hp-books__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* ── THE COPY ─────────────────────────────────────────────────────────────
   The numeral leads (the old "Published works" eyebrow is gone). One heading,
   one style: both lines of the sub are the same face, weight and colour. */
.h-books-head { margin: 0; font: inherit; }

.hp-books__big {
  display: block;
  font-family: var(--display);
  font-size: clamp(7rem, 13vw, 11rem);
  font-weight: 900;
  line-height: 0.85;
  color: var(--legacy-gold);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.hp-books__sub {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0.7rem;
}

/* Publishers: readable now (they were 22 percent white, under 2:1). The house
   of the book on display is lit and underlined, so browsing shows who
   published what. Kerr's (Rhazes, LLC) is not in this list and lights none. */
.hp-books__pubs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 2rem 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.hp-books__pubs span {
  position: relative;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.6);
  padding-bottom: 0.3rem;
  transition: color var(--h-t) var(--h-ease-out);
}
.hp-books__pubs span::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--h-t-content) var(--h-ease);
}
.hp-books__pubs .h-books-pub-on { color: #fff; }
.hp-books__pubs .h-books-pub-on::after { transform: scaleX(1); }

/* .pv-list is shared (ssf uses it too). Only spacing is touched, here. */
.hp-books .h-books-points { gap: 0.4rem; }

.hp-books .hp-books__cta { margin-top: 2.2rem; }

/* ── THE RIGHT COLUMN: the book, its caption, the shelf ───────────────── */
.hp-books__right {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.h-books-panel { width: 100%; display: flex; flex-direction: column; align-items: center; }

/* The stage never changes size, so browsing never moves the page. */
.h-books-stage {
  width: 100%;
  height: calc(var(--h-books-mh) + 3.25rem);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The book's real proportions come from its cover (--h-books-a = width over
   height): portrait books fill the height, Kerr's landscape atlas the width. */
.h-books-tome {
  --h-books-w: min(var(--h-books-mw), calc(var(--h-books-mh) * var(--h-books-a)));
  --h-books-h: calc(var(--h-books-w) / var(--h-books-a));
  position: relative;
  display: block;
  width: var(--h-books-w);
  height: var(--h-books-h);
  border-radius: 4px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.h-books-tome:focus-visible { outline: 2px solid #fff; outline-offset: 14px; }

/* obj holds the perspective and takes the fade while a book is swapped
   (opacity on the 3D body itself would flatten it). */
.h-books-obj {
  position: absolute;
  inset: 0;
  perspective: 1150px;
  perspective-origin: 50% 16%;      /* the eye a little above the book: the head edge shows */
}
.h-books-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(-8deg) rotateY(-21deg);
  /* light on each face (0 lit to about 0.5 in shade), written by books.js */
  --h-books-lf: 0.14;
  --h-books-ls: 0.5;
  --h-books-le: 0.4;
  --h-books-lt: 0.12;
  --h-books-lb: 0.5;
  --h-books-sp: 0.08;
  --h-books-sx: 62%;
}

.h-books-f,
.h-books-cover {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.h-books-f::after,
.h-books-cover__light {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Front board: the cover itself, hinged at the spine so it can open. */
.h-books-cover {
  width: var(--h-books-w);
  height: var(--h-books-h);
  transform-origin: 0 50%;
  transform: translateZ(calc(var(--h-books-d) / 2));
  border-radius: 1px 3px 3px 1px;
  overflow: hidden;
  background: var(--bg-2);
}
.h-books-cover {
  background-size: 100% 100%;
}
.h-books-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* until the new picture has loaded (no fade here: the whole book fades in) */
.h-books-cover__img.h-books-wait { opacity: 0; }
/* Three lights on the cover, top to bottom: the sheen (the laminate catching
   the light, it slides as the book turns), the hinge groove a case bound book
   has beside its spine, and the face's shade from its angle to the light. */
.h-books-cover__light {
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, var(--h-books-sp)) 50%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(to right, rgba(5, 7, 28, 0.34), rgba(5, 7, 28, 0) 2.4%, rgba(255, 255, 255, 0.16) 3.6%, rgba(5, 7, 28, 0.2) 4.6%, rgba(5, 7, 28, 0) 7%),
    linear-gradient(rgba(5, 7, 28, var(--h-books-lf)), rgba(5, 7, 28, var(--h-books-lf)));
  background-size: 320% 100%, 100% 100%, 100% 100%;
  background-position: var(--h-books-sx) 0, 0 0, 0 0;
  background-repeat: no-repeat;
}

/* Spine: the case wrap continues round from the cover (its colours are the
   cover's own left edge), rounded the way a cloth spine is. */
.h-books-f--spine {
  width: var(--h-books-d);
  height: var(--h-books-h);
  left: calc((var(--h-books-w) - var(--h-books-d)) / 2);
  transform: rotateY(-90deg) translateZ(calc(var(--h-books-w) / 2));
  background-size: 100% 100%;
  border-radius: 2px;
}
.h-books-f--spine::after {
  background:
    linear-gradient(to right, rgba(5, 7, 28, 0.38), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0) 55%, rgba(5, 7, 28, 0.32)),
    linear-gradient(rgba(5, 7, 28, var(--h-books-ls)), rgba(5, 7, 28, var(--h-books-ls)));
}

.h-books-f--back {
  width: var(--h-books-w);
  height: var(--h-books-h);
  transform: rotateY(180deg) translateZ(calc(var(--h-books-d) / 2));
  background-size: 100% 100%;
}
.h-books-f--back::after { background: rgba(5, 7, 28, 0.45); }

/* Page block: set in from the boards, so the boards overhang it like a real
   hardback. Fore edge and head and foot show the stacked leaves. */
.h-books-f--edge {
  width: calc(var(--h-books-d) - 4px);
  height: calc(var(--h-books-h) - 6px);
  top: 3px;
  left: calc((var(--h-books-w) - var(--h-books-d) + 4px) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--h-books-w) / 2 - 3px));
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(to right, rgba(11, 15, 46, 0.07) 0 1px, rgba(11, 15, 46, 0) 1px 2.5px);
}
.h-books-f--edge::after { background: rgba(5, 7, 28, var(--h-books-le)); }

.h-books-f--top,
.h-books-f--foot {
  width: calc(var(--h-books-w) - 3px);
  height: calc(var(--h-books-d) - 4px);
  top: calc((var(--h-books-h) - var(--h-books-d) + 4px) / 2);
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(to bottom, rgba(11, 15, 46, 0.07) 0 1px, rgba(11, 15, 46, 0) 1px 2.5px);
}
.h-books-f--top { transform: rotateX(90deg) translateZ(calc(var(--h-books-h) / 2 - 3px)); }
.h-books-f--foot { transform: rotateX(-90deg) translateZ(calc(var(--h-books-h) / 2 - 3px)); }
.h-books-f--top::after { background: rgba(5, 7, 28, var(--h-books-lt)); }
.h-books-f--foot::after { background: rgba(5, 7, 28, var(--h-books-lb)); }

/* The first leaf, seen only when the cover lifts: paper, darker in the gutter. */
.h-books-f--leaf {
  width: calc(var(--h-books-w) - 4px);
  height: calc(var(--h-books-h) - 6px);
  top: 3px;
  transform: translateZ(calc(var(--h-books-d) / 2 - 2px));
  background: var(--bg-2);
}
.h-books-f--leaf::after { background: linear-gradient(to right, rgba(5, 7, 28, 0.32), rgba(5, 7, 28, 0) 22%); }

/* Contact shadow on the ground under the book; it slides against the turn. */
.h-books-floor {
  position: absolute;
  left: 4%;
  right: 4%;
  top: calc(100% + 16px);
  height: 28px;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Caption: the title and house of the book on display. */
.h-books-caption {
  max-width: 23rem;
  margin: 0.4rem auto 0;
  min-height: 4.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}
.h-books-caption__title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.94);
  text-wrap: balance;
}
.h-books-caption__pub {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ── THE SHELF: seven spines, one per book, a real tab list ────────────── */
.h-books-shelf {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: 0.9rem;
  padding: 0 14px;
}
.h-books-shelf[hidden] { display: none; }
/* the shelf board */
.h-books-shelf::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 1px 10px 1px rgba(0, 0, 0, 0.45);
}
.h-books-spine {
  position: relative;
  width: 44px;
  height: calc(var(--h-books-sh) * var(--h-books-f) + 18px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.h-books-spine__face {
  position: relative;
  width: var(--h-books-sw);
  height: calc(var(--h-books-sh) * var(--h-books-f));
  border-radius: 2px 2px 1px 1px;
  background-size: 100% 100%;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 2px 0 3px -1px rgba(0, 0, 0, 0.45);
  transition: translate var(--h-spring-dur) var(--h-spring), scale var(--h-spring-dur) var(--h-spring);
}
/* round the spine (light from the left) and shade the ones on the shelf */
.h-books-spine__face::before,
.h-books-spine__face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.h-books-spine__face::before {
  /* a cloth spine rounds off at both sides, and its head catches the light */
  background:
    linear-gradient(rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 3px),
    linear-gradient(to right, rgba(5, 7, 28, 0.3), rgba(255, 255, 255, 0.08) 18%, rgba(5, 7, 28, 0) 50%, rgba(5, 7, 28, 0.32));
}
.h-books-spine__face::after {
  background: rgba(5, 7, 28, 0.34);
  transition: opacity var(--h-t) var(--h-ease-out);
}
/* the book on display stands pulled up out of the row, in full light */
.h-books-spine[aria-selected="true"] .h-books-spine__face { translate: 0 -14px; }
.h-books-spine[aria-selected="true"] .h-books-spine__face::after { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .h-books-spine:hover .h-books-spine__face { translate: 0 -7px; }
  .h-books-spine[aria-selected="true"]:hover .h-books-spine__face { translate: 0 -14px; }
  .h-books-spine:hover .h-books-spine__face::after { opacity: 0.4; }
}
.h-books-spine:active .h-books-spine__face { scale: 0.96; transition-duration: var(--h-t-press); }
.h-books-spine:focus-visible { outline: none; }
.h-books-spine:focus-visible .h-books-spine__face { outline: 2px solid #fff; outline-offset: 3px; }

/* The shelf fills once, the seven books standing in one after another. */
@keyframes h-books-stand { from { opacity: 0; transform: translateY(16px); } }
.h-books-shelf--wait:not(.h-books-shelf--in) .h-books-spine__face { opacity: 0; }
.h-books-shelf--in .h-books-spine__face {
  animation: h-books-stand 0.62s var(--h-ease) calc(var(--h-books-i) * 60ms) backwards;
}

/* Fine pointers: the spine under the pointer says which book it is, so the shelf
   can be read without picking each one. Touch picks directly (no hover there). */
.h-books-label { display: none; }
@media (hover: hover) and (pointer: fine) {
  .h-books-label {
    display: block;
    max-width: 21rem;
    min-height: 2.6em;
    margin: 0.7rem auto 0;
    font-family: var(--sans);
    font-size: 0.8rem;
    line-height: 1.3;
    text-align: center;
    text-wrap: balance;
    color: rgba(255, 255, 255, 0.72);
    opacity: 0;
    translate: 0 -3px;
    transition: opacity var(--h-t-quick) var(--h-ease-out), translate var(--h-t-quick) var(--h-ease-out);
  }
  .h-books-label.h-books-label--on { opacity: 1; translate: none; }
}

.h-books-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hp-books__inner { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 760px) {
  .hp-books__right { order: -1; }
  .hp-books__inner { gap: 2.25rem; }
}
@media (max-width: 600px) {
  .hp-books {
    --h-books-mw: 214px;
    --h-books-mh: 282px;
    --h-books-d: 30px;
    --h-books-sh: 96px;
    --h-books-sw: 40px;
  }
  .h-books-stage { height: calc(var(--h-books-mh) + 3.5rem); }
  .h-books-caption { max-width: 20rem; }
}

/* ── REDUCED MOTION: the book rests, every change is instant ──────────── */
@media (prefers-reduced-motion: reduce) {
  .h-books-label,
  .hp-books__pubs span, .hp-books__pubs span::after,
  .h-books-spine__face, .h-books-spine__face::after { transition: none; }
  .h-books-shelf--in .h-books-spine__face { animation: none; }
  .h-books-shelf--wait:not(.h-books-shelf--in) .h-books-spine__face { opacity: 1; }
}
@media (forced-colors: active) {
  .h-books-spine__face { border: 1px solid ButtonText; }
  .h-books-spine[aria-selected="true"] .h-books-spine__face { border-color: Highlight; }
}