*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#000}
body{
  min-height:100vh;color:#cda764;
  font-family:"Times New Roman",Times,serif;
  background:
    radial-gradient(ellipse at 50% 28%,rgba(118,77,36,.09),transparent 32rem),
    #000;
}
.masthead{text-align:center;padding:54px 20px 26px}
.top-ornament,.bottom-ornament{
  width:min(570px,72vw);margin:auto;display:flex;align-items:center;gap:13px;
  color:#9d7540;font-size:10px
}
.top-ornament:before,.top-ornament:after,.bottom-ornament:before,.bottom-ornament:after{
  content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#8d6939)
}
.top-ornament:after,.bottom-ornament:after{background:linear-gradient(90deg,#8d6939,transparent)}
h1{
  margin:18px 0 5px;font-weight:400;font-size:clamp(52px,8vw,92px);
  line-height:1.05;color:#d1a65f;text-shadow:0 3px 20px rgba(196,145,74,.12)
}
.owner{
  margin:8px 0 19px;font-size:clamp(24px,4vw,42px);font-weight:400;
  color:#c99f5e;line-height:1.5
}
.bottom-ornament{width:min(500px,64vw)}
main{width:min(1240px,96%);margin:0 auto;padding-top:8px}
.shelf{position:relative;padding-top:0;margin-top:0}
.books{
  min-height:420px;display:flex;align-items:flex-end;justify-content:center;
  padding:15px 30px 0;gap:58px;flex-wrap:wrap
}
.book{
  width:235px;display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:inherit;transition:transform .24s ease,filter .24s ease;
  transform-origin:bottom center;z-index:2
}
.book:hover,.book:focus-visible{transform:translateY(-14px);filter:brightness(1.08)}
.book:focus-visible{outline:1px solid #c99f5e;outline-offset:10px}
.cover{
  width:218px;aspect-ratio:2/3;display:block;overflow:hidden;
  border:1px solid #6f542f;border-radius:2px 5px 5px 2px;background:#111;
  box-shadow:12px 13px 24px #000,0 0 28px rgba(186,128,58,.07)
}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.title{margin-top:14px;font-size:21px;color:#d2ae70;text-shadow:0 2px 6px #000}
.author{margin-top:5px;font-size:15px;color:#ad8a55;text-align:center;line-height:1.45}
.download{margin-top:5px;font-size:14px;color:#8f7247;opacity:0;transition:opacity .2s ease}
.book:hover .download,.book:focus-visible .download{opacity:1}
.wood-top{
  height:28px;border-top:2px solid #815126;border-bottom:3px solid #1d0d05;
  background:
    repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 21px),
    linear-gradient(#5b3218,#2d1509);
  box-shadow:0 -8px 20px rgba(98,55,22,.22),0 8px 24px #000;
  border-radius:3px
}
.wood-face{
  height:83px;margin:0 25px;background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 17px),
    linear-gradient(#3a1c0c,#1c0c05);
  border-bottom:5px solid #080301;box-shadow:0 18px 28px #000;
  display:flex;justify-content:center;align-items:center;color:#7d4d24;font-size:34px
}
@media(max-width:600px){
  .masthead{padding-top:38px}
  h1{font-size:52px}.owner{font-size:24px}
  .books{min-height:360px;padding-left:5px;padding-right:5px;gap:28px}
  .book{width:195px}.cover{width:180px}
  .wood-face{margin:0 8px;height:65px}
}


/* v6: direct PDF reading plus optional prepared Windows package */
.book-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.windows-download {
  display: inline-block;
  margin-top: 10px;
  color: #c9a45c;
  font-family: "Times New Roman", serif;
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 164, 92, 0.45);
  padding-bottom: 2px;
}
.windows-download:hover,
.windows-download:focus {
  color: #ead39a;
  border-bottom-color: #ead39a;
}


/* v7: darker shelf and audio control */
.wood-top {
  background: linear-gradient(to bottom, #3b2414 0%, #24150c 48%, #140b06 100%) !important;
  border-color: #4b2d18 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.75) !important;
}
.wood-face {
  background: linear-gradient(to bottom, #24150c 0%, #140b06 58%, #0a0503 100%) !important;
  border-color: #3a2111 !important;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.025), 0 14px 28px rgba(0,0,0,.82) !important;
}
.carving { display: none !important; }

.audio-toggle {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 50;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201,164,92,.55);
  background: rgba(10,7,4,.88);
  color: #c9a45c;
  font-family: "Times New Roman", serif;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
}
.audio-toggle:hover,
.audio-toggle:focus {
  color: #ead39a;
  border-color: #ead39a;
  outline: none;
}


/* v8: "Read the book" appears as the clickable cover overlay only */
.cover {
  position: relative;
}
.read-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.62);
  color: #ead39a;
  font-family: "Times New Roman", serif;
  font-size: 1.08rem;
  text-decoration: underline;
  text-underline-offset: 5px;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.book:hover .read-overlay,
.book:focus .read-overlay,
.book:focus-visible .read-overlay {
  opacity: 1;
}


/* v9: ornamental prayer-pattern shelf strip */
.shelf {
  position: relative;
  padding-bottom: 0 !important;
}
.wood-top {
  height: 285px !important;
  margin-top: -225px !important;
  position: relative;
  z-index: 0;
  background:
    linear-gradient(rgba(0,0,0,.08), rgba(0,0,0,.08)),
    url("assets/prayer-pattern-strip.png") center center / cover no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
.wood-face {
  display: none !important;
}
.books {
  position: relative;
  z-index: 2;
}
.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cover-action-wrap {
  position: relative;
  display: block;
}
.cover-action-wrap > img {
  display: block;
  max-width: 100%;
  height: auto;
}
.book-actions {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(0,0,0,.72);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.cover-action-wrap:hover .book-actions,
.cover-action-wrap:focus-within .book-actions {
  opacity: 1;
  visibility: visible;
}
.book-actions a {
  color: #ead39a;
  text-decoration: none;
  border: 1px solid rgba(234,211,154,.72);
  background: rgba(8,6,3,.82);
  padding: 9px 14px;
  min-width: 145px;
  text-align: center;
  font-family: "Times New Roman", serif;
}
.book-actions a:hover,
.book-actions a:focus {
  background: rgba(54,39,18,.94);
  border-color: #f0dca5;
  color: #fff1c8;
  outline: none;
}

/* Touch devices: first tap on the cover reveals the choices. */
@media (hover: none) {
  .cover-action-wrap:focus-within .book-actions {
    opacity: 1;
    visibility: visible;
  }
}


/* v10 corrections: original-size books, PDF on click, ZIP button on hover,
   and books visually resting on the carpet strip. */
.shelf {
  position: relative;
  padding-bottom: 110px !important;
}
.books {
  position: relative;
  z-index: 3;
  align-items: flex-end !important;
  gap: clamp(38px, 7vw, 90px) !important;
}
.book-card {
  width: 210px !important;
  max-width: 32vw !important;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: none !important;
}
.book-cover-link {
  display: block;
  width: 100%;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.book-cover-link img {
  display: block;
  width: 100% !important;
  height: 300px !important;
  object-fit: cover;
  box-shadow: 0 13px 25px rgba(0,0,0,.65);
}
.book-card:hover .book-cover-link {
  transform: translateY(-5px);
}
.book-card .title,
.book-card .author {
  position: relative;
  z-index: 4;
}
.hover-download {
  display: inline-block;
  margin-top: 9px;
  padding: 7px 12px;
  color: #ead39a;
  border: 1px solid rgba(234,211,154,.6);
  background: rgba(8,6,3,.88);
  font-family: "Times New Roman", serif;
  font-size: .9rem;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
  min-height: 20px;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.wood-top {
  position: absolute !important;
  left: 50% !important;
  bottom: 0 !important;
  transform: translateX(-50%) !important;
  width: min(1180px, 96vw) !important;
  height: 205px !important;
  margin: 0 !important;
  z-index: 1 !important;
  background: url("assets/prayer-pattern-strip.png") center center / cover no-repeat !important;
  border: 0 !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.7) !important;
}
/* Make covers overlap the upper portion of the carpet, creating a resting-on-it effect. */
.books {
  margin-bottom: -72px !important;
}
.wood-face, .book-actions, .read-overlay {
  display: none !important;
}

@media (max-width: 650px) {
  .book-card {
    width: 165px !important;
    max-width: 42vw !important;
  }
  .book-cover-link img {
    height: 235px !important;
  }
  .wood-top {
    height: 160px !important;
    width: 100vw !important;
  }
  .books {
    margin-bottom: -55px !important;
  }
  /* Touch devices cannot hover reliably, so keep ZIP access available after focus/tap. */
  .book-card:focus-within .hover-download {
    opacity: 1;
    visibility: visible;
  }
}


/* v11 final shelf layout */
.shelf {
  padding-bottom: 120px !important;
}
.books {
  z-index: 3 !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
}
.book-card {
  position: relative !important;
  padding-bottom: 68px !important;
}

/* Book remains the primary PDF link; hover is only a subtle lift. */
.book-cover-link {
  background: transparent !important;
}
.book-cover-link:hover,
.book-card:hover .book-cover-link {
  transform: translateY(-5px) !important;
  filter: brightness(1.04);
}
.book-cover-link::before,
.book-cover-link::after,
.book-actions,
.read-overlay {
  display: none !important;
}

/* Keep title and author in the clean black area above the patterned surface. */
.book-card .title {
  margin-top: 13px !important;
  color: #d7ad5e !important;
  text-shadow: 0 2px 5px #000, 0 0 8px #000 !important;
}
.book-card .author {
  color: #b99150 !important;
  text-shadow: 0 2px 5px #000, 0 0 8px #000 !important;
}

/* ZIP option appears on hover without a filled black box. */
.hover-download {
  position: absolute !important;
  left: 50% !important;
  bottom: 17px !important;
  transform: translate(-50%, -3px) !important;
  white-space: nowrap;
  margin: 0 !important;
  padding: 2px 1px 3px !important;
  color: #d8b367 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(216,179,103,.55) !important;
  box-shadow: none !important;
  opacity: 0;
  visibility: hidden;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}
.hover-download:hover,
.hover-download:focus {
  color: #f0d99a !important;
  border-bottom-color: #f0d99a !important;
  background: transparent !important;
}

/* Carpet begins beneath all text/actions, so books appear to stand on its top edge. */
.wood-top {
  bottom: 0 !important;
  height: 165px !important;
  z-index: 1 !important;
}
.books {
  transform: translateY(34px);
}
.book-card {
  z-index: 3;
}

@media (max-width: 650px) {
  .books {
    transform: translateY(22px);
  }
  .wood-top {
    height: 130px !important;
  }
  .book-card {
    padding-bottom: 60px !important;
  }
  .hover-download {
    bottom: 14px !important;
  }
}


/* v12: covers sit on the carpet; titles/author/download appear below it */
.shelf {
  padding-bottom: 0 !important;
  overflow: visible !important;
}
.books {
  transform: none !important;
  margin-bottom: 0 !important;
  align-items: flex-start !important;
}
.book-card {
  padding-bottom: 0 !important;
  position: relative !important;
}

/* Give each cover a carpet-backed stage while leaving metadata below. */
.book-cover-link {
  position: relative !important;
  z-index: 3 !important;
}
.book-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: -80px;
  right: -80px;
  top: 205px;
  height: 165px;
  background: url("assets/prayer-pattern-strip.png") center center / cover no-repeat;
  pointer-events: none;
}
.book-cover-link img {
  position: relative;
  z-index: 3;
}

/* Metadata starts below the carpet surface. */
.book-card .title {
  margin-top: 95px !important;
  position: relative !important;
  z-index: 4 !important;
}
.book-card .author {
  position: relative !important;
  z-index: 4 !important;
}

/* One continuous carpet strip behind both book bottoms. */
.wood-top {
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 205px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: min(1180px, 96vw) !important;
  height: 165px !important;
  z-index: 1 !important;
  background: url("assets/prayer-pattern-strip.png") center center / cover no-repeat !important;
}

/* Avoid duplicated per-card carpet; continuous shelf strip is the visible one. */
.book-card::before {
  display: none !important;
}

/* Download appears directly beneath author on hover. */
.hover-download {
  position: static !important;
  transform: translateY(-3px) !important;
  margin-top: 8px !important;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  transform: translateY(0) !important;
}

@media (max-width: 650px) {
  .wood-top {
    top: 160px !important;
    height: 130px !important;
  }
  .book-card .title {
    margin-top: 76px !important;
  }
}


/* v13: bordered carpet shelf raised farther behind the books */
.wood-top {
  top: 150px !important;
  height: 235px !important;
  width: min(1240px, 98vw) !important;
  background: url("assets/prayer-pattern-strip.png") center center / cover no-repeat !important;
  border-top: 5px solid #8d682c !important;
  border-bottom: 5px solid #8d682c !important;
  outline: 2px solid rgba(210,169,86,.38) !important;
  outline-offset: -10px !important;
  box-shadow:
    inset 0 9px 0 rgba(7,5,2,.78),
    inset 0 -9px 0 rgba(7,5,2,.78),
    0 9px 24px rgba(0,0,0,.72) !important;
}

/* Keep the books in front of the raised carpet. */
.books {
  position: relative !important;
  z-index: 3 !important;
}
.book-cover-link,
.book-cover-link img {
  position: relative !important;
  z-index: 4 !important;
}

/* Titles remain clearly beneath the carpet. */
.book-card .title {
  margin-top: 120px !important;
}
.book-card .author {
  margin-top: 4px !important;
}

@media (max-width: 650px) {
  .wood-top {
    top: 115px !important;
    height: 190px !important;
    border-top-width: 4px !important;
    border-bottom-width: 4px !important;
  }
  .book-card .title {
    margin-top: 100px !important;
  }
}


/* v14: recreate the generated mockup's proportions more faithfully */
main, .library, .shelf {
  overflow: visible !important;
}

.shelf {
  position: relative !important;
  width: 100% !important;
  padding: 0 0 120px !important;
}

/* Covers stand in front of the upper edge of a broad textile band. */
.books {
  position: relative !important;
  z-index: 5 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: clamp(70px, 9vw, 135px) !important;
  margin: 0 auto !important;
  transform: none !important;
}

.book-card {
  width: 210px !important;
  max-width: 28vw !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 5 !important;
}

.book-cover-link img {
  width: 210px !important;
  height: 300px !important;
  object-fit: cover !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.72) !important;
}

/* Carpet band: full, bordered textile with visible upper/lower ornamental edges. */
.wood-top {
  display: block !important;
  position: absolute !important;
  z-index: 2 !important;
  left: 50% !important;
  top: 108px !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  height: 255px !important;
  margin: 0 !important;
  background: url("assets/prayer-pattern-strip.png") center center / cover no-repeat !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow:
    inset 0 3px 0 rgba(218,175,88,.72),
    inset 0 11px 0 rgba(15,9,4,.82),
    inset 0 14px 0 rgba(190,143,59,.45),
    inset 0 -3px 0 rgba(218,175,88,.72),
    inset 0 -11px 0 rgba(15,9,4,.82),
    inset 0 -14px 0 rgba(190,143,59,.45),
    0 12px 30px rgba(0,0,0,.65) !important;
}

/* Metadata sits cleanly below the textile, like the generated mockup. */
.book-card .title {
  margin-top: 82px !important;
  color: #d9ad5b !important;
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
  text-shadow: 0 2px 5px #000 !important;
}
.book-card .author {
  margin-top: 4px !important;
  color: #c59a50 !important;
  line-height: 1.45 !important;
  text-shadow: 0 2px 5px #000 !important;
}

/* ZIP link stays invisible until card hover; no black rectangle. */
.hover-download {
  position: static !important;
  display: inline-block !important;
  margin-top: 12px !important;
  padding: 1px 2px 3px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(215,173,91,.65) !important;
  color: #d7ad5b !important;
  box-shadow: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-3px) !important;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Remove every remnant of the old wooden shelf. */
.wood-face {
  display: none !important;
}

@media (max-width: 650px) {
  .books {
    gap: 24px !important;
  }
  .book-card {
    width: 160px !important;
    max-width: 43vw !important;
  }
  .book-cover-link img {
    width: 160px !important;
    height: 228px !important;
  }
  .wood-top {
    top: 83px !important;
    height: 195px !important;
  }
  .book-card .title {
    margin-top: 72px !important;
    font-size: .98rem !important;
  }
}


/* v17: use the exact generated artwork's textile band instead of approximating it in CSS */
.wood-top {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 105px !important;
  bottom: auto !important;
  transform: none !important;
  width: 100vw !important;
  height: 310px !important;
  z-index: 1 !important;

  /* exact reference is 1680x896; crop the carpet region (roughly y=390..705) */
  background-image: url("assets/exact-reference.png") !important;
  background-repeat: no-repeat !important;
  background-size: 100vw auto !important;
  background-position: center -390px !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.62) !important;
  overflow: hidden !important;
}
.wood-top::before,
.wood-top::after {
  display: none !important;
  content: none !important;
}
.wood-face { display: none !important; }

.shelf {
  position: relative !important;
  min-height: 640px !important;
  padding-bottom: 55px !important;
}

/* Match the reference: books overlap the carpet from above. */
.books {
  position: relative !important;
  z-index: 3 !important;
  transform: none !important;
  align-items: flex-start !important;
}

.book-card {
  position: relative !important;
  z-index: 3 !important;
  padding: 0 !important;
}

/* Keep covers around the proportions shown in the reference. */
.book-cover-link {
  position: relative !important;
  z-index: 4 !important;
}
.book-cover-link img {
  position: relative !important;
  z-index: 4 !important;
}

/* Carpet finishes before metadata; title/author sit on clean black exactly like reference. */
.book-card .title {
  margin-top: 48px !important;
  position: relative !important;
  z-index: 4 !important;
}
.book-card .author {
  margin-top: 6px !important;
  position: relative !important;
  z-index: 4 !important;
}
.hover-download {
  position: static !important;
  margin-top: 13px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(215,173,91,.7) !important;
}

/* Mobile: use the same artwork, proportionally cropped. */
@media (max-width: 650px) {
  .wood-top {
    top: 75px !important;
    height: 205px !important;
    background-size: 100vw auto !important;
    background-position: center -232px !important;
  }
  .shelf {
    min-height: 470px !important;
  }
  .book-card .title {
    margin-top: 38px !important;
  }
}


/* v18 FIX: crop a clean carpet-only region from the reference so no duplicate books/text appear */
.wood-top {
  top: 115px !important;
  height: 300px !important;
  overflow: hidden !important;
  background-image: url("assets/exact-reference.png") !important;
  background-repeat: repeat-x !important;

  /* Use the clean left carpet area from the reference instead of the whole screenshot. */
  background-size: 1680px 896px !important;
  background-position: left -395px !important;
}

/* Mask the center/right portions that contained book imagery in the source reference
   with repeated clean carpet texture through a nested pseudo-layer. */
.wood-top::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: url("assets/prayer-pattern-strip.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: repeat-x !important;
  z-index: 0 !important;
}

/* Recreate the exact-looking woven top/bottom trim without the old rigid fringe. */
.wood-top::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-top: 10px solid transparent !important;
  border-bottom: 10px solid transparent !important;
  box-shadow:
    inset 0 2px 0 rgba(206,158,76,.9),
    inset 0 9px 0 rgba(17,10,4,.72),
    inset 0 -2px 0 rgba(206,158,76,.9),
    inset 0 -9px 0 rgba(17,10,4,.72) !important;
}

/* Bring books a little farther down into the textile while keeping metadata below it. */
.books {
  transform: translateY(22px) !important;
}

.book-card .title {
  margin-top: 78px !important;
}

.book-card .author {
  margin-top: 7px !important;
}

/* Keep the download hidden until hover. */
.hover-download {
  opacity: 0 !important;
  visibility: hidden !important;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 650px) {
  .wood-top {
    top: 82px !important;
    height: 200px !important;
    background-size: 1120px auto !important;
    background-position: left -263px !important;
  }
  .books {
    transform: translateY(14px) !important;
  }
  .book-card .title {
    margin-top: 58px !important;
  }
}


/* v23 — use ONLY the carpet artwork's own decorative edges.
   No CSS-drawn borders, fringe, pseudo-elements, or fake trim. */
.shelf {
  position: relative !important;
  min-height: 590px !important;
}

.wood-top {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 128px !important;
  width: 100vw !important;
  height: 238px !important;
  z-index: 1 !important;

  background-image: url("assets/prayer-pattern-strip.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: repeat-x !important;

  /* IMPORTANT: absolutely no programmatically-added carpet edges */
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.wood-top::before,
.wood-top::after {
  content: none !important;
  display: none !important;
}

.wood-face {
  display: none !important;
}

/* Covers stay over the carpet. */
.books {
  position: relative !important;
  z-index: 3 !important;
  transform: translateY(22px) !important;
}

/* Pull metadata much closer to the bottom of each cover.
   Carpet still ends before the text, leaving a small clean black gap. */
.book-card .title {
  margin-top: 34px !important;
  position: relative !important;
  z-index: 4 !important;
}

.book-card .author {
  margin-top: 5px !important;
  position: relative !important;
  z-index: 4 !important;
}

/* Preserve existing hover-only ZIP behavior. */
.hover-download {
  opacity: 0 !important;
  visibility: hidden !important;
}
.book-card:hover .hover-download,
.book-card:focus-within .hover-download {
  opacity: 1 !important;
  visibility: visible !important;
}

@media (max-width: 650px) {
  .shelf { min-height: 440px !important; }

  .wood-top {
    top: 84px !important;
    height: 158px !important;
  }

  .books {
    transform: translateY(14px) !important;
  }

  .book-card .title {
    margin-top: 22px !important;
  }
}


/* v24 final touch-ups */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

/* Carpet reaches both viewport edges without causing a bottom scrollbar. */
.wood-top {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  width: 100dvw !important;
  transform: translateX(-50%) !important;
}

/* Slightly larger covers. */
.book {
  width: 258px !important;
}
.cover {
  width: 240px !important;
}

/* Keep the titles close to the covers. */
.book-card .title {
  margin-top: 28px !important;
}

@media (max-width: 650px) {
  .book { width: 205px !important; }
  .cover { width: 190px !important; }
  .book-card .title { margin-top: 20px !important; }
}


/* v25 — cross-platform carpet consistency
   Preserve the entire carpet artwork instead of cropping it on wide screens. */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden !important;
}

.wood-top {
  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%) !important;

  /* Critical change: show the COMPLETE carpet image on every aspect ratio. */
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.wood-top::before,
.wood-top::after {
  content: none !important;
  display: none !important;
}

/* Keep v24 desktop book sizing/spacing. */
.book {
  width: 258px !important;
}
.cover {
  width: 240px !important;
}
.book-card .title {
  margin-top: 28px !important;
}

/* Mobile: same complete carpet artwork, only a shorter band. */
@media (max-width: 650px) {
  .wood-top {
    width: 100vw !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  .book { width: 205px !important; }
  .cover { width: 190px !important; }
  .book-card .title { margin-top: 20px !important; }
}


/* v26 — restore fuller carpet proportions without cropping the side edges.
   Keep the carpet's bottom edge fixed so it never moves down into the titles. */

.wood-top {
  /* v25 was 238px tall. Increase ~34%, growing UPWARD only. */
  height: 320px !important;
  top: 46px !important;

  left: 50% !important;
  right: auto !important;
  width: 100vw !important;
  max-width: none !important;
  transform: translateX(-50%) !important;

  /* Entire generated carpet remains visible edge-to-edge. */
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Keep all carpet decoration in the artwork itself. */
.wood-top::before,
.wood-top::after {
  content: none !important;
  display: none !important;
}

/* Preserve v25 book/title placement. */
.book {
  width: 258px !important;
}
.cover {
  width: 240px !important;
}
.book-card .title {
  margin-top: 28px !important;
}

/* Mobile already had good proportions; keep it more restrained there. */
@media (max-width: 650px) {
  .wood-top {
    height: 180px !important;
    top: 62px !important;
    width: 100vw !important;
    background-size: 100% 100% !important;
  }

  .book { width: 205px !important; }
  .cover { width: 190px !important; }
  .book-card .title { margin-top: 20px !important; }
}


/* v27 — make the carpet visually fuller/taller again, while keeping
   the bottom edge fixed above the titles. */
.wood-top {
  height: 385px !important;
  top: -19px !important; /* 385px + (-19px) = same 366px bottom edge */
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Keep titles exactly where they are. */
.book-card .title {
  margin-top: 28px !important;
}

@media (max-width: 650px) {
  /* Mobile already looked good; don't apply the large desktop increase. */
  .wood-top {
    height: 180px !important;
    top: 62px !important;
  }
}


/* v28 — keep the approved TOP edge locked; extend only the BOTTOM downward. */
.wood-top {
  top: -19px !important;      /* exactly the same top as v27 */
  height: 430px !important;   /* +45px downward only */
  left: 50% !important;
  width: 100vw !important;
  transform: translateX(-50%) !important;
  background-size: 100% 100% !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Keep books and text where they already are. */
.book {
  width: 258px !important;
}
.cover {
  width: 240px !important;
}
.book-card .title {
  margin-top: 28px !important;
}

/* Mobile remains unchanged because it already looks good. */
@media (max-width: 650px) {
  .wood-top {
    top: 62px !important;
    height: 180px !important;
  }
}


/* v29 — wider carpet + compact desktop layout to eliminate vertical scrolling */
@media (min-width: 651px) {
  html, body {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  /* Move the whole presentation upward without changing its internal spacing. */
  .page {
    transform: translateY(-55px) !important;
    transform-origin: top center !important;
  }

  /* Keep carpet top position, but make it visibly wider/taller downward. */
  .wood-top {
    top: -19px !important;
    height: 465px !important;
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Slightly tighten unused vertical space around the heading/books. */
  .masthead {
    padding-top: 18px !important;
    padding-bottom: 10px !important;
  }

  .library {
    margin-top: 6px !important;
    padding-bottom: 0 !important;
  }
}

/* Preserve the already-good mobile behavior. */
@media (max-width: 650px) {
  html, body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .page {
    transform: none !important;
  }
}


/* v30 — MOBILE ONLY: make carpet substantially taller/wider-looking.
   Desktop v29 is intentionally untouched. */
@media (max-width: 650px) {
  .wood-top {
    /* Keep it full-bleed across the phone and increase vertical coverage. */
    left: 50% !important;
    width: 100vw !important;
    transform: translateX(-50%) !important;
    height: 340px !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
}


/* v31 — MOBILE ONLY: preserve v30 carpet size, raise it away from titles.
   Desktop remains exactly as v29/v30. */
@media (max-width: 650px) {
  .wood-top {
    margin-top: -85px !important;
  }
}


/* v32 — MOBILE ONLY: lower carpet slightly; desktop remains untouched. */
@media (max-width: 650px) {
  .wood-top {
    margin-top: -65px !important;
  }
}

/* Clean CSS-drawn audio icon on mobile instead of a text/emoji play symbol. */
@media (max-width: 650px) {
  .audio-toggle {
    font-size: 0 !important;
  }
  .audio-toggle::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: 3px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid currentColor;
  }
  .audio-toggle.is-playing::before {
    width: 12px;
    height: 15px;
    margin-left: 0;
    border: 0;
    background:
      linear-gradient(to right,
        currentColor 0 4px,
        transparent 4px 8px,
        currentColor 8px 12px);
  }
}


/* v33 — typography only: use Times New Roman throughout the Arabic site.
   Layout, carpet, books and audio control positioning remain unchanged. */
html, body, button, a, .title, .author, .masthead, .book-card {
  font-family: "Times New Roman", Times, serif !important;
}


/* v37 — keep the audio button FIXED in the viewport and center its real glyph. */
.audio-toggle {
  position: fixed !important;
  left: 18px !important;
  bottom: 18px !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 42px !important;
  height: 42px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  text-indent: 2px !important;
}

/* Disable the earlier mobile pseudo-element so it cannot cover/replace the glyph. */
.audio-toggle::before {
  content: none !important;
  display: none !important;
}

@media (max-width: 650px) {
  .audio-toggle {
    position: fixed !important;
    left: 12px !important;
    bottom: 12px !important;
    font-size: 17px !important;
    text-indent: 2px !important;
  }
}


/* v39 — clean audio control on desktop AND mobile; no emoji glyph. */
.audio-toggle{
  position:fixed !important;
  z-index:9999 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  font-size:0 !important;
  text-indent:0 !important;
  overflow:visible !important;
}

/* CSS triangle: independent of OS/browser emoji rendering. */
.audio-toggle::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:0 !important;
  height:0 !important;
  margin:0 !important;
  background:none !important;
  border-top:7px solid transparent !important;
  border-bottom:7px solid transparent !important;
  border-left:11px solid #c99d4f !important;
  border-right:0 !important;
  transform:translate(-40%,-50%) !important;
}

/* CSS pause bars while audio is playing. */
.audio-toggle.is-playing::before{
  width:11px !important;
  height:14px !important;
  border:0 !important;
  transform:translate(-50%,-50%) !important;
  background:linear-gradient(to right,
    #c99d4f 0 3px,
    transparent 3px 8px,
    #c99d4f 8px 11px) !important;
}

/* Hanbali chronology extension: preserve the original black/gold carpet design. */
.masthead h1{font-size:clamp(36px,5.5vw,70px)}.masthead .owner{font-size:clamp(18px,2.5vw,30px)}
.timeline{max-width:1080px;margin:10px auto 45px;padding:0 16px;text-align:center}.timeline-track{display:flex;justify-content:space-between;position:relative;gap:6px}.timeline-track:before{content:"";position:absolute;top:8px;right:9%;left:9%;height:1px;background:#896439}.timeline-point{position:relative;z-index:1;flex:1;min-width:0;background:none;border:0;color:#d1a65f;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px}.timeline-dot{width:17px;height:17px;border:2px solid #cda764;background:#000;transform:rotate(45deg)}.timeline-year{font-size:17px}.timeline-name{font-size:16px;color:#b99661}.timeline-point:hover .timeline-name,.timeline-point:focus-visible .timeline-name{text-decoration:underline}.timeline-note{font-size:14px;color:#977b53;margin:22px 0 0}
.books{gap:18px !important;justify-content:center !important;align-items:flex-end !important;flex-wrap:wrap !important;padding:15px 10px 0 !important}.book-card{width:190px !important;max-width:calc(50% - 12px) !important;flex:0 1 190px !important}.book-cover-link{background:none;border:0;padding:0;cursor:pointer;display:block;width:100% !important;max-width:175px !important}.book-cover-link img{width:100% !important;height:auto !important;aspect-ratio:360/510;object-fit:cover !important}.book-card .title{font-size:20px !important;text-align:center !important;overflow-wrap:anywhere}.book-card .author{font-size:14px !important;overflow-wrap:anywhere}.book-date{font-size:14px;color:#99774a;text-align:center;margin-top:6px}.book-card .hover-download{display:none !important}
.book-dialog{width:min(520px,calc(100% - 30px));max-height:85vh;overflow:auto;background:#100d0a;color:#dec18b;border:1px solid #98703c;box-shadow:0 22px 80px #000;padding:38px 30px;text-align:center;font-family:'Times New Roman',Times,serif;line-height:1.9}.book-dialog::backdrop{background:rgba(0,0,0,.8)}.book-dialog h2{font-weight:normal;font-size:34px;margin:12px 0}.dialog-close{position:absolute;top:6px;left:15px;background:none;border:0;color:#d2aa6d;font-size:34px;cursor:pointer}.dialog-ornament{font-size:14px;color:#b38b51}.dialog-author{font-size:20px;margin:0}.dialog-date{color:#a78b61;margin:3px 0}.dialog-rule{height:1px;background:linear-gradient(90deg,transparent,#b58d53,transparent);margin:18px auto}.dialog-description{font-size:20px;text-align:right;margin:0}
@media(max-width:650px){.timeline{margin-bottom:25px}.timeline-year{font-size:13px}.timeline-name{font-size:12px}.timeline-track:before{top:7px}.timeline-dot{width:14px;height:14px}.timeline-note{font-size:12px}.books{gap:18px 12px !important}.book-card{width:155px !important;flex-basis:155px !important}.book-cover-link{max-width:145px !important}.book-card .title{font-size:18px !important}.book-card .author{font-size:13px !important}.book-date{font-size:12px}.book-dialog{padding:30px 20px}}

/* Hanbali timeline refinements: keep original library carpet and color palette. */
.language-bar{position:relative;z-index:20;display:flex;justify-content:flex-end;padding:16px clamp(15px,4vw,55px) 0;font-family:"Times New Roman",serif}
.language-switch{display:flex;align-items:center;gap:9px;color:#8f744c;border:1px solid #5a462a;border-radius:22px;padding:5px 11px;background:#0c0a08}
.language-switch button{background:transparent;color:#b89a65;border:0;cursor:pointer;font-family:inherit;font-size:15px;padding:4px 6px}
.language-switch button.active{color:#f0ce89;text-decoration:underline;text-underline-offset:5px}
.masthead{padding-top:0 !important;padding-bottom:6px !important;margin-bottom:0 !important}
.masthead h1{font-size:clamp(30px,4.5vw,58px) !important}
.masthead .owner{font-size:clamp(16px,2vw,23px) !important}
.timeline{margin:2px auto 10px !important;padding:0 18px !important}
.timeline-track{gap:3px !important}
.timeline-point{padding:3px 1px !important}
.timeline-year{font-size:clamp(11px,1.15vw,15px) !important;line-height:1.25}
.timeline-name{font-size:clamp(11px,1.2vw,15px) !important}
.timeline-note{margin:9px 0 0 !important;font-size:13px !important}
.shelf{margin-top:0 !important;padding-top:0 !important}
.books{padding-top:0 !important;gap:12px !important;align-items:flex-start !important}
.book-card{width:180px !important;flex:0 1 180px !important;min-width:0 !important}
.book-cover-link{max-width:170px !important;margin:0 auto !important;line-height:0}
.book-cover-link img{width:100% !important;height:235px !important;aspect-ratio:auto !important;object-fit:contain !important;display:block}
.book-card .title{margin-top:8px !important;font-size:19px !important;line-height:1.15 !important}
.book-card .author{font-size:14px !important}
.book-date{font-size:12px !important;line-height:1.25 !important;margin-top:4px !important}
.book-dialog[dir="rtl"]{text-align:right;font-family:"Times New Roman",serif}
.book-dialog[dir="rtl"] .dialog-close{left:14px;right:auto}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
html[dir="rtl"] .timeline-track{direction:rtl}
html[dir="rtl"] .books{direction:rtl}
html[dir="rtl"] .language-bar{direction:ltr}
@media(max-width:650px){.language-bar{padding-top:8px}.masthead h1{font-size:30px !important}.timeline{margin-bottom:12px !important}.timeline-track{overflow-x:auto;padding:0 0 8px;scrollbar-width:thin}.timeline-point{flex:0 0 115px !important}.timeline-track:before{left:40px;right:40px}.timeline-note{font-size:12px !important}.books{gap:15px 8px !important}.book-card{width:calc(50% - 8px) !important;flex:0 1 calc(50% - 8px) !important;max-width:calc(50% - 8px) !important}.book-cover-link{max-width:145px !important}.book-cover-link img{height:196px !important}.book-card .title{font-size:17px !important;margin-top:7px !important}.book-card .author{font-size:13px !important}.book-date{font-size:11px !important}}


/* v2: larger tightly cropped covers, with labels safely BELOW the carpet. */
html,body{height:auto !important;min-height:100% !important;overflow-y:auto !important}
.shelf{min-height:0 !important;padding-bottom:65px !important;isolation:isolate}
.books{transform:none !important;display:flex !important;justify-content:center !important;align-items:flex-start !important;gap:clamp(12px,1.5vw,22px) !important;padding:0 18px !important;position:relative !important;z-index:3 !important}
.book-card{width:clamp(170px,17vw,210px) !important;flex:0 1 clamp(170px,17vw,210px) !important;max-width:none !important;min-width:0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;text-align:center !important}
.book-cover-link{width:100% !important;max-width:200px !important;line-height:0 !important;flex-shrink:0 !important}
.book-cover-link img{width:100% !important;height:285px !important;object-fit:fill !important;aspect-ratio:auto !important;display:block !important}
.wood-top{top:0 !important;height:248px !important;z-index:1 !important;background-size:100% 100% !important;background-repeat:no-repeat !important}
.book-card .title{margin-top:22px !important;font-size:20px !important;line-height:1.25 !important;min-height:2.5em !important;width:100% !important;overflow-wrap:break-word !important;position:relative !important;z-index:4 !important}
.book-card .author{margin-top:4px !important;line-height:1.3 !important;width:100% !important}
.book-date{margin-top:6px !important;line-height:1.3 !important;width:100% !important}
html[dir="rtl"] .books,html[dir="ltr"] .books{align-items:flex-start !important}
@media(max-width:850px){.books{flex-wrap:wrap !important;row-gap:32px !important}.book-card{width:calc(33.333% - 20px) !important;flex-basis:calc(33.333% - 20px) !important}.book-cover-link img{height:auto !important;aspect-ratio:0.72 !important;object-fit:contain !important}.wood-top{height:205px !important}.book-card .title{margin-top:28px !important}}
@media(max-width:650px){.books{gap:28px 12px !important;padding:0 12px !important}.book-card{width:calc(50% - 8px) !important;flex-basis:calc(50% - 8px) !important;max-width:calc(50% - 8px) !important}.book-cover-link{max-width:190px !important}.book-cover-link img{height:auto !important;aspect-ratio:0.72 !important;object-fit:contain !important}.wood-top{top:0 !important;height:165px !important}.book-card .title{margin-top:20px !important;font-size:17px !important;min-height:2.5em !important}.book-card .author{font-size:13px !important}.book-date{font-size:12px !important}.shelf{padding-bottom:45px !important}}

/* v3 — wider (deeper) carpet band, with labels clear of the textile. */
.wood-top{height:275px !important;}
.book-card .title{margin-top:26px !important;}
.author-link{appearance:none;background:transparent;border:0;padding:3px 5px;margin:0;color:inherit;font:inherit;line-height:inherit;cursor:pointer;text-decoration:none;}
.author-link:hover,.author-link:focus-visible{text-decoration:underline;text-underline-offset:3px;color:#edc88b;}
.author-link:focus-visible,.book-cover-link:focus-visible{outline:2px solid #c99d4f;outline-offset:4px;}
/* Blank dialog body intentionally reserved for future book and author notes. */
.book-dialog #dialogTitle,.book-dialog #dialogAuthor,.book-dialog #dialogDate,.book-dialog #dialogDescription,.book-dialog .dialog-rule,.book-dialog .dialog-ornament{display:none !important;}
.book-dialog{min-height:220px;}
@media(max-width:850px){.wood-top{height:225px !important;}}
@media(max-width:650px){.wood-top{height:185px !important;}.book-card .title{margin-top:24px !important;}.book-dialog{min-height:190px;}}


/* FINAL OVERRIDES: full-height carpet artwork, clean cover edges and usable author links */
html,body{overflow-x:hidden !important;overflow-y:auto !important}
.shelf{position:relative !important;isolation:isolate !important;padding-bottom:55px !important;overflow:visible !important}
/* Actual carpet image is now cropped to its opaque artwork, not transparent canvas. */
.wood-top{
  display:block !important;position:absolute !important;top:62px !important;left:50% !important;
  margin:0 !important;width:100vw !important;height:230px !important;
  transform:translateX(-50%) !important;z-index:0 !important;
  background:url("assets/prayer-pattern-strip.png") center center / 100% 100% no-repeat !important;
  border:0 !important;box-shadow:none !important;pointer-events:none !important;
}
.wood-top::before,.wood-top::after{display:none !important}
.books{position:relative !important;z-index:2 !important;align-items:flex-start !important;gap:clamp(12px,1.4vw,20px) !important;flex-wrap:wrap !important;padding:0 12px !important}
.book-card{position:relative !important;z-index:3 !important;width:clamp(165px,18vw,214px) !important;flex:0 1 clamp(165px,18vw,214px) !important;max-width:none !important;min-width:0 !important;overflow:visible !important}
.book-cover-link{display:block !important;width:100% !important;max-width:205px !important;margin:0 auto !important;cursor:pointer !important;position:relative !important;z-index:2 !important}
.book-cover-link img{width:100% !important;height:292px !important;object-fit:fill !important;aspect-ratio:auto !important;display:block !important;border:0 !important;background:transparent !important}
.book-card .title{margin-top:21px !important;min-height:0 !important;font-size:19px !important;line-height:1.3 !important;position:relative !important;z-index:4 !important}
.book-card .author{position:relative !important;z-index:5 !important;display:block !important;visibility:visible !important;opacity:1 !important;margin:5px 0 0 !important;min-height:27px !important;font-size:15px !important;line-height:1.4 !important;color:#d5ae70 !important}
.book-card .author .author-link{display:inline-block !important;visibility:visible !important;opacity:1 !important;position:relative !important;z-index:6 !important;pointer-events:auto !important;cursor:pointer !important;color:#d5ae70 !important;border:0 !important;border-bottom:1px solid rgba(213,174,112,.7) !important;border-radius:0 !important;padding:2px 3px !important;margin:0 !important;background:transparent !important;font-family:inherit !important;font-size:inherit !important;line-height:inherit !important;text-decoration:none !important}
.book-card .author .author-link:hover,.book-card .author .author-link:focus-visible{color:#ffe1a2 !important;border-bottom-color:#ffe1a2 !important;outline-offset:3px !important}
.book-date{position:relative !important;z-index:4 !important}
@media(max-width:850px){
 .book-card{width:calc(33.333% - 15px) !important;flex-basis:calc(33.333% - 15px) !important}
 .book-cover-link img{height:auto !important;aspect-ratio:0.715 !important;object-fit:fill !important}
 .wood-top{top:45px !important;height:205px !important}
}
@media(max-width:650px){
 .books{gap:28px 12px !important;padding:0 10px !important}
 .book-card{width:calc(50% - 7px) !important;flex-basis:calc(50% - 7px) !important;max-width:calc(50% - 7px) !important}
 .book-cover-link{max-width:190px !important}
 .book-cover-link img{height:auto !important;aspect-ratio:0.715 !important}
 .wood-top{top:36px !important;height:165px !important}
 .book-card .title{margin-top:16px !important;font-size:17px !important}
 .book-card .author{font-size:14px !important}
}

/* Clean book metadata: one title and one author, both clickable. */
.book-card .title,.book-card .author{width:100% !important;min-height:0 !important;margin:9px 0 0 !important;line-height:1.3 !important;overflow-wrap:anywhere !important;}
.book-card .author{margin-top:3px !important;}
.book-card .title .title-link,.book-card .author .author-link{appearance:none !important;background:transparent !important;border:0 !important;border-bottom:1px solid transparent !important;padding:2px 3px !important;margin:0 !important;color:inherit !important;font:inherit !important;line-height:inherit !important;cursor:pointer !important;display:inline !important;text-decoration:none !important;}
.book-card .title .title-link:hover,.book-card .title .title-link:focus-visible,.book-card .author .author-link:hover,.book-card .author .author-link:focus-visible{color:#ffe1a2 !important;border-bottom-color:#ffe1a2 !important;}
.book-cover-link{padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important;overflow:hidden !important;border-radius:2px !important;}
.book-cover-link img{object-fit:fill !important;border:0 !important;outline:0 !important;margin:0 !important;padding:0 !important;}
.timeline-name{display:none !important;}
.book-date{display:none !important;}
/* No labels over the carpet; the cover bottom rests at the carpet edge. */
.wood-top{top:62px !important;height:230px !important;}
@media(max-width:850px){.wood-top{top:45px !important;height:205px !important;}}
@media(max-width:650px){.wood-top{top:36px !important;height:165px !important;}}

/* Keep the approved dimensions and spacing; suppress only desktop page scrolling. */
@media (min-width: 851px) {
  html, body { overflow-y: hidden !important; overflow-x: hidden !important; }
}
@media (max-width: 850px) {
  html, body { overflow-y: auto !important; }
}
@media(max-width:650px){}
@media(prefers-reduced-motion:reduce){}
@media(max-width:650px){}



/* One rigid book coordinate system. Spine hinge is x=0.
   The cover occupies x in [-width, 0], entirely LEFT of the spine.
   At the beginning the complete book is -90deg about Y; at the end 0deg.
   The spine is perpendicular to the cover and turns with the book. */
#openingStage {position:fixed;inset:0;z-index:1000;background:#080706;overflow:hidden;perspective:1800px;}
#openingStage.opening-reveal {background:transparent;pointer-events:none;}
#openingSpines {position:absolute;inset:0;pointer-events:none;transform-style:preserve-3d;direction:ltr;}
#openingPlay {position:absolute;left:50%;bottom:5vh;top:auto;transform:translateX(-50%);z-index:5;width:70px;height:70px;border:1px solid #d5ad69;border-radius:50%;background:#17120e;color:#f4d28e;display:flex;align-items:center;justify-content:center;cursor:pointer;}
#openingStage.opening-playing #openingPlay {opacity:0;pointer-events:none;}
.physical-book {position:absolute;pointer-events:none;direction:ltr;transform-style:preserve-3d;transform-origin:0 50%;}
.physical-assembly {position:absolute;left:0;top:0;width:100%;height:100%;direction:ltr;transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(-90deg);}
.physical-front {position:absolute;left:-100%;top:0;width:100%;height:100%;transform:none;backface-visibility:hidden;}
.physical-spine {position:absolute;left:calc(var(--thickness) / -2);top:0;width:var(--thickness);height:100%;overflow:hidden;transform-origin:50% 50%;transform:rotateY(90deg);backface-visibility:hidden;}
.physical-spine img {display:block;width:100%;height:100%;object-fit:fill;}
.physical-live-cover {position:absolute!important;left:0!important;right:auto!important;top:0!important;bottom:auto!important;display:block!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;pointer-events:none!important;transform:none!important;box-shadow:none!important;overflow:hidden!important;}
.physical-live-cover img {display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;}
.physical-placeholder {display:block;flex-shrink:0;}
body:has(#openingStage) #audioToggle {opacity:0;pointer-events:none;}

/* Video-matched rigid-book coordinates: hinge at right edge of front. */
.physical-assembly {transform-origin:0 50%;}
.physical-front {left:-100%;right:auto;transform:translateZ(0.5px);}
.physical-spine {left:calc(var(--thickness) / -2);transform:rotateY(90deg);}
.physical-book {will-change:left,top,transform;}
.physical-live-cover {visibility:visible!important;}

/* V35: single rigid geometry. Spine axis x=0. Cover spans [-width,0].
   Front artwork faces +Z at rest. Spine is perpendicular, and the WHOLE
   assembly rotates; neither face has its own animation. */
.physical-front {left:-100% !important;right:auto !important;transform:none !important;backface-visibility:hidden !important;overflow:visible !important;}
.physical-live-cover {transform:none !important;backface-visibility:hidden !important;}
.physical-spine {left:calc(var(--thickness) / -2) !important;transform:rotateY(-90deg) !important;backface-visibility:hidden !important;}
.physical-assembly {transform-origin:0 50% !important;transform:rotateY(90deg);}

/* Reference-video intro: the actual approved MP4, not reconstructed geometry. */
.opening-stage{background:#08090b!important;transition:opacity .9s ease!important;}
.opening-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:0;pointer-events:none;}
.opening-stage.opening-playing .opening-video{opacity:1;}
.opening-stage.opening-playing .opening-play{opacity:0;pointer-events:none;}
.opening-stage.opening-reveal{opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){.opening-stage{transition:none!important;}}

/* Rebuilt rigid-book intro. Cover occupies the NEGATIVE X side of spine. */
#openingStage.opening-stage{background:transparent!important;transition:none!important;pointer-events:none;perspective:1800px;}
#openingPlay.opening-play{pointer-events:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);}
#openingStage.opening-playing #openingPlay{display:none;}
.opening-books{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;}
.intro-unit{position:absolute;transform-style:preserve-3d;transform-origin:0 50%;will-change:transform;}
.intro-rigid{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:0 50%;transform:rotateY(-90deg);will-change:transform;}
.intro-front{position:absolute;left:-100%;top:0;width:100%;height:100%;backface-visibility:hidden;transform:translateZ(.4px);}
.intro-front img{display:block;width:100%;height:100%;object-fit:fill;}
.intro-spine{position:absolute;left:calc(var(--thick) / -2);top:0;width:var(--thick);height:100%;transform:rotateY(90deg);backface-visibility:hidden;overflow:hidden;}
.intro-spine img{display:block;width:100%;height:100%;object-fit:fill;}
.book-cover-link.intro-hidden img{visibility:hidden!important;}

/* V36: physical edge-to-edge rigid book.  The cover's RIGHT edge ends at
   local x=0. The spine's LEFT edge begins at local x=0.  Rotating the
   spine around its own LEFT edge sweeps its entire thickness behind the
   cover (negative Z), rather than straddling/intersecting the cover. */
.intro-front { left:-100% !important; }
.intro-spine {
  left:0 !important;
  top:0 !important;
  width:var(--thick) !important;
  transform-origin:0 50% !important;
  transform:rotateY(90deg) !important;
}


/* V37: black opening screen, gradual site reveal. V36 book geometry and
   every 3D keyframe remain untouched. */
body:has(#openingStage):not(.intro-started) { background:#000 !important; }
body:has(#openingStage):not(.intro-started) > :is(.language-bar,.masthead,main,.audio-toggle) { opacity:0 !important; }
body.intro-started > :is(.language-bar,.masthead,main,.audio-toggle) {
  animation:han-site-appear 2.5s ease-out both;
  animation-delay:.65s;
}
@keyframes han-site-appear { from {opacity:0} to {opacity:1} }
#openingStage.opening-stage::before {
  content:"";position:absolute;inset:0;background:#000;
  opacity:1;pointer-events:none;z-index:0;
  transition:opacity 1.65s ease;
}
#openingStage.opening-stage.opening-playing::before {opacity:0;}
#openingBooks.opening-books {z-index:1;}
#openingPlay.opening-play {z-index:2;}
@media(prefers-reduced-motion:reduce){
  body.intro-started > :is(.language-bar,.masthead,main,.audio-toggle){animation:none;opacity:1}
  #openingStage.opening-stage::before{transition:none}
}

/* V38: do not expose the separated 3D book units before the play gesture.
   Keep V36 spine/cover attachment and counterclockwise geometry unchanged. */
#openingStage.opening-stage:not(.opening-playing) { background:#000 !important; pointer-events:auto; }
#openingStage.opening-stage:not(.opening-playing) #openingBooks { visibility:hidden !important; }
#openingStage.opening-stage.opening-playing #openingBooks { visibility:visible !important; }
#openingStage.opening-stage:not(.opening-playing)::before { opacity:1 !important; }
#openingStage.opening-stage:not(.opening-playing) #openingPlay { opacity:1 !important; pointer-events:auto !important; }

/* V39: five book spines together on the black opening screen, before play.
   Do not alter V36 edge attachment or rigid rotation geometry. */
#openingStage.opening-stage:not(.opening-playing) #openingBooks.opening-ready,
#openingStage.opening-stage.opening-ready:not(.opening-playing) #openingBooks {visibility:visible !important;}
#openingStage.opening-stage:not(.opening-ready):not(.opening-playing) #openingBooks {visibility:hidden !important;}
#openingStage.opening-stage:not(.opening-playing)::before {opacity:1 !important;}
#openingStage.opening-stage:not(.opening-playing) #openingBooks {z-index:1;}
#openingStage.opening-stage:not(.opening-playing) #openingPlay {z-index:3;}

/* V40: keep the approved rigid geometry; center the assembled shelf and its button. */
#openingStage:not(.opening-playing) #openingPlay {bottom:auto !important;top:var(--opening-play-y,70%) !important;transform:translate(-50%,-50%) !important;}
.book-card .title,.book-card .author {position:relative !important;z-index:15 !important;overflow:visible !important;}
.book-card .title .title-link,.book-card .author .author-link {position:relative !important;z-index:16 !important;white-space:normal !important;overflow-wrap:anywhere !important;}
.book-card:last-child .title {margin-top:12px !important;min-height:26px !important;}

/* V41: no spine may obscure the finished front cover. */
#openingStage .intro-front { z-index:2; }
#openingStage .intro-spine { z-index:1; }

/* V42: the opening third spine is the centered anchor. Keep rigid V36 geometry. */
#openingStage .intro-spine {pointer-events:none;}
#openingStage .intro-front {filter:none !important;}

/* V43: preserve spine visibility; render the front artwork above the spine at the finish. */
#openingStage .intro-front { z-index:3 !important; transform:translateZ(1px) !important; }
#openingStage .intro-spine { z-index:1 !important; opacity:1 !important; }

/* V58: once the opening finishes, release the fade-in compositing layers. */
body.intro-finished > :is(.language-bar,.masthead,main,.audio-toggle) {
  animation: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

/* V59: every book is sheared (see shearFrames in site.js) so the shared camera sees each one
   from the same viewpoint as the middle book. The shear layer sits between unit and rigid. */
.intro-shear{position:absolute;left:0;top:0;width:100%;height:100%;transform-style:preserve-3d;transform-origin:0 50%;}

/* V60: spine and cover overlap by 1px at the hinge, and neighbouring spines overlap by 1px,
   so no background shows through the seams. The pivot stays exactly on the hinge. */
#openingStage .intro-spine{left:-1px !important;width:calc(var(--thick) + 1px) !important;transform-origin:1px 50% !important;}

/* V5: a single mobile horizontal scroller keeps every book aligned with its date. */
@media(max-width:850px){
 html,body{overflow-x:hidden !important}
 main{display:block !important;width:100vw !important;max-width:100vw !important;overflow-x:auto !important;overflow-y:hidden !important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;overscroll-behavior-x:contain;position:relative !important}
 main>.timeline,main>.shelf{width:1050px !important;min-width:1050px !important;max-width:none !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important}
 main .timeline{padding:0 !important;margin-bottom:8px !important}
 main .timeline-track{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;width:100% !important;overflow:visible !important;gap:0 !important;padding:0 !important}
 main .timeline-point{width:100% !important;min-width:0 !important;max-width:none !important;flex:none !important}
 main .timeline-track::before{left:10% !important;right:10% !important}
 main .books{display:grid !important;grid-template-columns:repeat(5,minmax(0,1fr)) !important;width:100% !important;max-width:none !important;gap:0 !important;padding:0 !important;flex-wrap:nowrap !important;justify-content:stretch !important;box-sizing:border-box !important}
 main .book-card{width:100% !important;max-width:none !important;min-width:0 !important;flex:none !important;box-sizing:border-box !important;padding:0 6px !important;scroll-snap-align:center}
 main .book-cover-link{max-width:190px !important}
 main .book-cover-link img{width:100% !important;height:265px !important;aspect-ratio:auto !important;object-fit:fill !important}
 main .wood-top{left:0 !important;width:1050px !important;transform:none !important;top:54px !important;height:220px !important;background-size:100% 100% !important;background-repeat:no-repeat !important}
 main .wood-face{display:none !important}
 main .shelf{overflow:visible !important;min-height:355px !important}
 main .timeline-note{display:none !important}
 #openingStage{overflow:visible !important}
 #openingStage::before{inset:-10px !important}
}
@media(max-width:650px){
 main .timeline-year{font-size:13px !important;white-space:normal !important}
 main .book-card .title{font-size:17px !important}
 main .book-card .author{font-size:14px !important}
 main .wood-top{top:50px !important;height:220px !important}
 main .shelf::before,main .shelf::after,main .wood-face::before,main .wood-face::after{display:none !important}
}

/* V6: front panels follow the original rigid 3D rotation; no opacity hiding. */
#openingStage .intro-front {opacity:1 !important;visibility:visible !important;}

/* V11 mobile: one book per swipe, with its date directly above it. */
@media(max-width:850px){
  html,body {overflow-x:hidden !important}
  body:not(.intro-finished) {overflow:hidden !important}
  body:not(.intro-finished) main {
    overflow-x:hidden !important;
    touch-action:none !important;
    overscroll-behavior:contain !important;
  }
  body.intro-finished main {
    overflow-x:auto !important;
    touch-action:pan-x !important;
    scroll-snap-type:x mandatory !important;
    scroll-behavior:smooth;
  }
  main > .timeline, main > .shelf {
    width:500vw !important;
    min-width:500vw !important;
    max-width:none !important;
  }
  main .timeline-track, main .books {
    grid-template-columns:repeat(5, 100vw) !important;
    width:500vw !important;
    max-width:none !important;
  }
  main .timeline-point,main .book-card {
    width:100vw !important;
    min-width:100vw !important;
    max-width:100vw !important;
    box-sizing:border-box !important;
    scroll-snap-align:center !important;
    padding-left:7vw !important;
    padding-right:7vw !important;
  }
  main .book-cover-link {
    display:block !important;
    width:min(86vw,330px) !important;
    max-width:none !important;
    margin:0 auto !important;
    transition:transform .32s ease-out !important;
  }
  main .book-cover-link img {
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }
  main .book-card.mobile-focused .book-cover-link {
    transform:translateY(-9px) !important;
  }
  main .wood-top {
    width:500vw !important;
    background-size:100% 100% !important;
    height: min(110vw,400px) !important;
    top:54px !important;
  }
  main .shelf {min-height: min(150vw,540px) !important}
  main .timeline-track::before {left:10vw !important;right:10vw !important}
  main .timeline-year {max-width:86vw !important;margin-inline:auto !important}
  main .book-card .title {margin-top:14px !important}
}