/* Real generated books, production-style spreads and the public reader. */

/* Generated cover art is a square leaf. Keep a quiet paper margin around it
   so the card reads as one physical book instead of a loose image. */
.products--made { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product--book { min-width: 0; }
.product--book .product__tile { padding: clamp(14px, 1.7vw, 20px); }
.products--made .book-cover { width: min(84%, 224px); }
.product--book:hover .book-cover { transform: none; }

.book-cover {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(76%, 250px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  padding: 14% 10% 8%;
  border: 1px solid rgba(45, 37, 29, 0.16);
  border-radius: 0;
  background: #f4e8cf;
  box-shadow: 0 15px 28px rgba(30, 27, 22, 0.17), inset 7px 0 10px rgba(65, 48, 31, 0.05);
  transition: transform 0.2s ease;
}
.book-cover::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: rgba(58, 45, 31, 0.09);
  box-shadow: 1px 0 rgba(255, 255, 255, 0.5);
}
.book-cover--blue { background: #dfe9e4; }
.book-cover--gold { background: #eee2bf; }
.book-cover__title {
  position: relative;
  z-index: 1;
  margin-bottom: 6%;
  color: var(--ink);
  font: 500 clamp(0.72rem, 1.45vw, 1.08rem)/1.06 var(--font-display);
  text-align: center;
  text-wrap: balance;
}
.book-cover img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  transition: none;
  mix-blend-mode: multiply;
}
.product--book:hover .book-cover img { transform: none; }
.book-cover__brand {
  margin-top: 5%;
  color: rgba(30, 27, 22, 0.58);
  font: 600 clamp(0.38rem, 0.66vw, 0.52rem)/1 var(--font-body);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.book-cover--image {
  display: block;
  aspect-ratio: 1 / 1;
  padding: 0;
  background: #d5edf1;
}
.book-cover--image::before { display: none; }
.book-cover--image img,
.product__tile .book-cover--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  box-shadow: none;
  transform: none;
}
.book-cover--spread-left img,
.product__tile .book-cover--spread-left img { object-position: left center; }

/* A compact, static sample of the exact page system used by the live reader. */
.production-spread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 500px;
  filter: drop-shadow(0 18px 24px rgba(28, 38, 33, 0.16));
}
.production-spread::after,
.library-reader__spread::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 1.5%;
  bottom: 1.5%;
  left: 50%;
  width: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(40, 35, 28, 0.13), rgba(255, 255, 255, 0.32), rgba(40, 35, 28, 0.1), transparent);
}
.production-spread__page {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid;
  grid-template-rows: minmax(0, 27%) minmax(0, 73%);
  overflow: hidden;
  border: 1px solid #ddd6ca;
  background: #fffdf8;
}
.production-spread__page:first-child { border-radius: 0; box-shadow: inset -18px 0 25px -26px rgba(32, 27, 22, 0.55); }
.production-spread__page:last-child { border-radius: 0; box-shadow: inset 18px 0 25px -26px rgba(32, 27, 22, 0.55); }
.production-spread__page.text-bottom { grid-template-rows: minmax(0, 72%) minmax(0, 28%); }
.production-spread__art { min-height: 0; margin: 0 8%; overflow: hidden; }
.production-spread__art img { width: 100%; height: 100%; object-fit: contain; }
.production-spread__text {
  display: grid;
  align-items: end;
  min-height: 0;
  padding: 7% 10% 3%;
  color: #332f29;
  font: 400 clamp(0.43rem, 0.95vw, 0.72rem)/1.42 Bembo, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  text-align: center;
  text-wrap: balance;
}
.production-spread__page.text-bottom .production-spread__text { grid-row: 2; align-items: start; padding: 4% 10% 6%; }
.production-spread__page.text-bottom .production-spread__art { grid-row: 1; }
.production-spread__page--proof { display: block; aspect-ratio: 1 / 1; }
.production-spread__page--proof > img { width: 100%; height: 100%; object-fit: cover; }
.production-spread-wrap { overflow-x: auto; padding: 22px 10px 28px; }
.production-spread-wrap .production-spread { width: 100%; }

.book-details {
  display: grid;
  gap: clamp(54px, 7vw, 88px);
}
.book-detail {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: center;
}
.book-detail:nth-child(even) .book-detail__media { order: 2; }
.book-detail__media { min-width: 0; }
.book-detail__media .production-spread { width: 100%; }
.book-detail h3 { margin-bottom: 0.35em; font-size: clamp(1.25rem, 2vw, 1.65rem); }
.book-detail p { margin: 0; }

/* Full-page example reader, deliberately aligned with create step 5. */
.library-book { min-height: calc(100vh - var(--nav-h)); padding: 48px 0 72px; background: var(--cream-2); }
.library-book__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}
.library-book__head h1 { font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 0.2em; }
.library-book__head p { margin: 0; max-width: 56ch; }
.library-book__meta { display: block; margin-top: 8px; color: var(--green); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.library-reader { width: 100%; overflow-x: auto; padding: 18px 8px 26px; }
.library-reader__spread {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 1040px);
  min-width: 620px;
  margin: 0 auto;
  filter: drop-shadow(0 20px 26px rgba(28, 38, 33, 0.16));
}
.library-reader__page {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  display: grid;
  overflow: hidden;
  border: 1px solid #ddd6ca;
  background: #fff;
}
.library-reader__page--left { border-radius: 0; box-shadow: inset -20px 0 28px -28px rgba(32, 27, 22, 0.55); }
.library-reader__page--right { border-radius: 0; box-shadow: inset 20px 0 28px -28px rgba(32, 27, 22, 0.55); }
.library-reader__page.is-blank > * { visibility: hidden; }
.library-reader__page.is-white-cutout.text-top { grid-template-rows: minmax(0, 28%) minmax(0, 72%); }
.library-reader__page.is-white-cutout.text-bottom { grid-template-rows: minmax(0, 72%) minmax(0, 28%); }
.library-reader__page.is-full-scene { grid-template-rows: minmax(0, 68%) minmax(0, 32%); }
.library-reader__art { min-height: 0; margin: 0 clamp(12px, 2.6vw, 30px); overflow: hidden; background: #fff; }
.library-reader__art img { width: 100%; height: 100%; object-fit: contain; }
.library-reader__page.text-top .library-reader__text--top { grid-row: 1; }
.library-reader__page.text-top .library-reader__art { grid-row: 2; }
.library-reader__page.text-top .library-reader__text--bottom {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(8px, 1.4vw, 16px);
  padding: 0;
}
.library-reader__page.text-top .library-reader__text--bottom p { display: none; }
.library-reader__page.text-top .library-reader__text--bottom span { margin: 0; padding: 0; }
.library-reader__page.text-bottom .library-reader__text--top { display: none; }
.library-reader__page.text-bottom .library-reader__art { grid-row: 1; }
.library-reader__page.text-bottom .library-reader__text--bottom { grid-row: 2; }
.library-reader__page.is-full-scene .library-reader__art { margin: clamp(10px, 2.2vw, 24px) clamp(10px, 2.2vw, 24px) 0; background: var(--cream-2); }
.library-reader__page.is-full-scene .library-reader__art img { object-fit: cover; }
.library-reader__page.is-precomposed { display: block; aspect-ratio: 1 / 1; }
.library-reader__page.is-precomposed .library-reader__art { width: 100%; height: 100%; margin: 0; }
.library-reader__page.is-precomposed .library-reader__art img { width: 100%; height: 100%; object-fit: cover; }
.library-reader__page.is-precomposed .library-reader__text { display: none; }
/* One 2:1 artwork carries both covers, so each cover page shows its own half.
   object-position slides the same image left or right inside a square leaf. */
.library-reader__page.is-cover-front .library-reader__art img { object-position: left center; }
.library-reader__page.is-cover-back .library-reader__art img { object-position: right center; }
.library-reader__page.is-precomposed.is-back-cover .library-reader__text--top {
  position: absolute;
  z-index: 3;
  inset: 13% 15% auto;
  display: flex;
  justify-content: center;
  padding: 0;
  color: #111;
  text-shadow:
    -0.85px -0.85px 0 #f7f2e8,
    0.85px -0.85px 0 #f7f2e8,
    -0.85px 0.85px 0 #f7f2e8,
    0.85px 0.85px 0 #f7f2e8;
}
.library-reader__page.is-precomposed.is-back-cover .library-reader__text--top p {
  font-size: clamp(0.9rem, 1.62vw, 1.22rem);
  font-family: "EB Garamond", Bembo, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 700;
  line-height: 1.42;
}
.library-reader__back-brand,
.library-reader__title-brand {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 0.55vw, 7px);
  font: 700 clamp(0.5rem, 0.92vw, 0.72rem)/1 "EB Garamond", var(--font-display);
}
.library-reader__back-brand svg,
.library-reader__title-brand svg {
  width: clamp(13px, 1.8vw, 19px);
  height: clamp(13px, 1.8vw, 19px);
  flex: none;
}
.library-reader__back-brand {
  bottom: 5.4%;
  color: #fff;
  text-shadow: 0 1px 4px #173e49;
}
.library-reader__copyright {
  position: absolute;
  z-index: 3;
  left: 5%;
  right: 5%;
  bottom: 2%;
  color: #f7f2e8;
  font-size: clamp(0.38rem, 0.63vw, 0.5rem);
  text-align: center;
  text-shadow: 0 1px 4px #173e49;
}
.library-reader__page.is-story-text {
  display: grid;
  place-items: center;
  background: #fff;
}
.library-reader__page.is-story-text .library-reader__art,
.library-reader__page.is-story-text .library-reader__text--bottom { display: none; }
.library-reader__page.is-story-text .library-reader__text--top {
  position: static;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 12%;
  color: #263238;
  text-align: center;
}
.library-reader__page.is-story-text .library-reader__text--top p {
  max-width: 32ch;
  margin: 0;
  font: 400 clamp(1rem, 2.05vw, 1.5rem)/1.52 "EB Garamond", Bembo, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  text-wrap: balance;
}
.library-reader__page.is-message {
  display: grid;
  place-items: center;
  background: #fff;
}
.library-reader__page.is-message .library-reader__art,
.library-reader__page.is-message .library-reader__text--bottom { display: none; }
.library-reader__page.is-message .library-reader__text--top {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 18%;
  color: #56635f;
  text-align: center;
}
.library-reader__page.is-message .library-reader__text--top p {
  margin: 0;
  font: italic 400 clamp(1rem, 1.9vw, 1.35rem)/1.5 "EB Garamond", Bembo, "Iowan Old Style", Georgia, serif;
}
.library-reader__page.is-original-drawing {
  display: block;
  background: #fff;
}
.library-reader__page.is-original-drawing .library-reader__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
}
.library-reader__page.is-original-drawing .library-reader__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-reader__page.is-original-drawing .library-reader__text--top { display: none; }
.library-reader__page.is-original-drawing .library-reader__text--bottom {
  position: absolute;
  z-index: 2;
  left: 10%;
  right: 10%;
  bottom: 10.5%;
  display: block;
  padding: 0;
  color: var(--green);
  text-align: center;
}
.library-reader__page.is-original-drawing .library-reader__text--bottom p {
  margin: 0;
  font: 700 clamp(0.66rem, 1.15vw, 0.88rem)/1.3 "EB Garamond", Bembo, Georgia, serif;
}
.library-reader__page.is-colophon { display: block; background: #fff; }
.library-reader__page.is-colophon .library-reader__text--top {
  position: absolute;
  top: 9%;
  left: 9%;
  right: 55%;
  display: block;
  padding: 0;
  color: #263238;
  font: 700 clamp(0.72rem, 1.25vw, 1rem)/1.2 "EB Garamond", var(--font-display);
  text-align: left;
}
.library-reader__page.is-colophon .library-reader__art {
  position: absolute;
  top: 7%;
  right: 8%;
  width: 40%;
  height: 38%;
  margin: 0;
  background: transparent;
}
.library-reader__page.is-colophon .library-reader__art img { object-fit: contain; }
.library-reader__page.is-colophon .library-reader__text--bottom {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 7%;
  height: 25%;
  padding: 0;
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
}
.library-reader__page.is-colophon .library-reader__text p {
  white-space: pre-line;
  font-size: clamp(0.55rem, 0.94vw, 0.75rem);
  line-height: 1.4;
}
/* The title leaf follows a classic publisher page: credit, curved display
   title, one compact story vignette and the restrained brand lockup. */
.library-reader__page.is-title {
  display: block;
  background: #fff;
}
.library-reader__page.is-title .library-reader__text--top {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: 0;
}
.library-reader__page.is-title .library-reader__text--top p {
  position: static;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: visible;
}
.library-reader__page.is-title .library-reader__art {
  position: absolute;
  left: 18%;
  top: 34%;
  width: 64%;
  height: 46%;
  display: block;
  margin: 0;
  background: #fff;
}
.library-reader__page.is-title .library-reader__art img { object-fit: contain; }
.library-reader__page.is-title .library-reader__text--bottom {
  display: none;
}
.library-reader__title-artist {
  position: absolute;
  top: 9.5%;
  left: 8%;
  right: 8%;
  display: block;
  color: #263238;
  font: 700 clamp(0.42rem, 0.78vw, 0.62rem)/1.2 var(--font-body);
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}
.library-reader__title-copy {
  position: absolute;
  top: 18.2%;
  left: 7%;
  right: 7%;
  display: block;
  color: var(--green);
  font: 700 clamp(1.15rem, 2.35vw, 1.82rem)/0.95 "EB Garamond", var(--font-display);
  text-align: center;
}
.library-reader__title-line {
  display: flex;
  justify-content: center;
  min-height: 1.15em;
  white-space: nowrap;
}
.library-reader__title-line + .library-reader__title-line { margin-top: -0.08em; }
.library-reader__title-glyph {
  display: inline-block;
  transform: translate(var(--title-arc-x, 0), var(--title-arc-y, 0))
    rotate(var(--title-arc-angle, 0deg));
  transform-origin: center 70%;
}
.library-reader__title-brand {
  bottom: 6.5%;
  color: var(--green);
}
/* Static showcase books use complete page proofs rendered from the approved
   print PDF. The semantic title/colophon classes must not re-apply the dynamic
   layout to those already-composed images. */
.library-reader__page.is-precomposed.is-title,
.library-reader__page.is-precomposed.is-colophon { display: block; }
.library-reader__page.is-precomposed.is-title .library-reader__art,
.library-reader__page.is-precomposed.is-colophon .library-reader__art {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  background: #fff;
}
.library-reader__page.is-precomposed.is-title .library-reader__art img,
.library-reader__page.is-precomposed.is-colophon .library-reader__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-reader__page.is-title-legacy { display: block; }
.library-reader__page.is-title-legacy .library-reader__art,
.library-reader__page.is-title-legacy .library-reader__title-artist,
.library-reader__page.is-title-legacy .library-reader__title-brand { display: none; }
.library-reader__page.is-title-legacy .library-reader__text--top {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 12% 11%;
}
.library-reader__page.is-title-legacy .library-reader__title-copy {
  font-size: clamp(1.25rem, 2.7vw, 2rem);
  line-height: 1.08;
}
.library-reader__spread { perspective: 1800px; }
.library-reader__page { transition: transform 180ms ease, opacity 180ms ease; backface-visibility: hidden; }
.library-reader__spread.is-turning-next .library-reader__page--right {
  transform: rotateY(-7deg) translateX(-1%);
  transform-origin: left center;
  opacity: 0.76;
}
.library-reader__spread.is-turning-prev .library-reader__page--left {
  transform: rotateY(7deg) translateX(1%);
  transform-origin: right center;
  opacity: 0.76;
}
.library-reader__spread.is-settling .library-reader__page { animation: reader-settle 180ms ease-out; }
@keyframes reader-settle {
  from { opacity: 0.86; transform: scale(0.995); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .library-reader__page { transition: none; }
  .library-reader__spread.is-settling .library-reader__page { animation: none; }
}
/* Complete proof pages already contain their typography and full-page
   composition. This final override must win over semantic title, story-text
   and original-drawing rules, otherwise the reader hides the baked prose or
   reintroduces margins around the archival drawing. */
.library-reader__page.is-proof-page {
  display: block;
  aspect-ratio: 1 / 1;
  background: #fff;
}
.library-reader__page.is-proof-page .library-reader__art {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}
.library-reader__page.is-proof-page .library-reader__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.library-reader__page.is-proof-page .library-reader__text { display: none; }
.library-reader__text {
  min-height: 0;
  padding: clamp(9px, 1.5vw, 18px) clamp(19px, 3.4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #332f29;
  text-align: center;
}
.library-reader__text p {
  margin: 0;
  overflow: auto;
  font: 400 clamp(0.7rem, 1.3vw, 1.02rem)/1.44 Bembo, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  letter-spacing: 0.006em;
  text-wrap: balance;
}
.library-reader__text--bottom { justify-content: flex-start; }
.library-reader__text--bottom > span {
  margin-top: auto;
  padding-top: 8px;
  color: var(--muted);
  font-size: clamp(0.58rem, 0.9vw, 0.72rem);
}
.library-reader__controls { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px; }
.library-reader__arrow {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.library-reader__arrow:hover:not(:disabled) { border-color: var(--green); }
.library-reader__arrow:disabled { opacity: 0.32; cursor: default; }
.library-reader__label { min-width: 190px; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; text-align: center; }

@media (max-width: 960px) {
  .products--made { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .production-spread { width: 620px; }
  .library-book { padding-top: 34px; }
  .library-book__head { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
  .products--made { grid-template-columns: 1fr; }
  .book-cover { width: min(68%, 230px); }
  .book-detail { grid-template-columns: 1fr; }
  .book-detail:nth-child(even) .book-detail__media { order: 0; }
}