:root {
  --paper: #ede8dc;
  --paper-soft: #f7f2e9;
  --ink: #7a7469;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  background:
    radial-gradient(circle at 50% 56%, rgba(255, 252, 244, 0.96) 0%, rgba(247, 240, 226, 0.90) 43%, rgba(224, 216, 201, 0.95) 100%),
    linear-gradient(135deg, var(--paper-soft), var(--paper));
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  overflow: hidden;
}

.page-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  display: grid;
  place-items: center;
  padding: 5vh 4.1vw 5vh 4.1vw;
}

.back-button {
  position: fixed;
  top: clamp(18px, 4.1vh, 42px);
  left: clamp(18px, 1.9vw, 31px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 188px;
  padding: 9px 16px 10px 14px;
  border-radius: 999px;
  background: rgba(255, 253, 247, 0.86);
  color: rgba(92, 86, 78, 0.94);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.96;
  font-size: clamp(15px, 1.12vw, 21px);
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(95, 86, 72, 0.10);
  backdrop-filter: blur(4px);
}

.back-button span:first-child {
  font-size: 1.05em;
  transform: translateY(-1px);
  opacity: 0.82;
}

.book-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
}

.cover-wrap {
  position: relative;
  z-index: 1;
  display: block;
  width: min(92vw, 1380px, calc(89vh * 1.4722));
  max-width: 100%;
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,0.42) inset, 0 13px 32px rgba(70, 62, 50, 0.18);
  transform: none;
}

.book-shadow {
  position: absolute;
  z-index: 0;
  width: min(88vw, 1270px, calc(89vh * 1.37));
  height: 5.8vh;
  min-height: 38px;
  bottom: calc(50% - min(29vw, 43vh));
  border-radius: 50%;
  background: rgba(46, 39, 30, 0.20);
  filter: blur(17px);
  transform: scaleX(0.99);
}

.full-cover {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  image-rendering: auto;
  transform: translateZ(0);
}

.back-copy {
  position: absolute;
  left: 3.25%;
  top: 4.95%;
  width: 40.15%;
  height: 73.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #f2edcf;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(7.8px, min(0.62vw, 1.26vh), 10.5px);
  line-height: 1.165;
  letter-spacing: 0.056em;
  text-transform: uppercase;
  text-shadow:
    0 1px 1px rgba(48, 48, 38, 0.68),
    0 -0.5px 0 rgba(255,255,232,0.55),
    0 0 2px rgba(255,255,236,0.30);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  pointer-events: none;
}

.back-copy p {
  margin: 0;
}

.back-copy .sep {
  margin: 1.85% 0 1.95%;
  color: #f3edc9;
  letter-spacing: 0.09em;
  line-height: 1;
  text-shadow:
    0 1px 1px rgba(48, 48, 38, 0.62),
    0 0 2px rgba(255,255,236,0.32);
}

.back-copy .last {
  margin-top: 0.05%;
}

@media (max-width: 900px) {
  body { overflow: auto; }

  .page-shell {
    min-height: 100vh;
    height: auto;
    padding: 94px 12px 42px;
  }

  .back-button {
    min-width: auto;
    top: 18px;
    left: 14px;
    padding: 11px 17px 12px 14px;
    font-size: 16px;
  }

  .cover-wrap {
    width: 96vw;
    transform: none;
  }

  .book-shadow {
    display: none;
  }

  .back-copy {
    font-size: clamp(5.1px, 1.33vw, 7px);
    letter-spacing: 0.035em;
    line-height: 1.13;
  }
}


.sample-badge {
  position: relative;
  isolation: isolate;
  margin-top: 4.6%;
  width: 92%;
  padding: 0.72em 1.35em 0.80em;
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 246, 0.95) 0%, rgba(255, 248, 221, 0.64) 34%, rgba(255,255,255,0) 61%),
    linear-gradient(180deg, rgba(255, 245, 202, 0.98) 0%, rgba(236, 209, 139, 0.94) 43%, rgba(255, 237, 181, 0.98) 100%);
  border: 1px solid rgba(186, 139, 43, 0.88);
  color: #a56f16;
  font-size: 1.43em;
  letter-spacing: 0.075em;
  line-height: 1.06;
  font-weight: 900;
  text-align: center;
  text-shadow:
    0 1px 0 rgba(255, 255, 235, 0.78),
    0 -1px 0 rgba(111, 70, 8, 0.16),
    0 0 5px rgba(255, 241, 177, 0.42);
  box-shadow:
    0 10px 18px rgba(86, 61, 24, 0.18),
    0 0 0 2px rgba(255, 245, 205, 0.42),
    inset 0 1px 0 rgba(255, 255, 246, 0.92),
    inset 0 -2px 0 rgba(168, 116, 28, 0.30);
  white-space: nowrap;
}

.sample-badge::before {
  content: "";
  position: absolute;
  inset: 0.24em;
  z-index: -1;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 237, 0.72);
  box-shadow:
    inset 0 0 0 1px rgba(172, 126, 35, 0.28),
    inset 0 0.55em 0.95em rgba(255, 255, 244, 0.34),
    inset 0 -0.36em 0.65em rgba(159, 105, 20, 0.13);
}

.sample-badge::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 0.72em;
  transform: translateY(-53%);
  color: rgba(255, 252, 222, 0.92);
  font-size: 0.86em;
  text-shadow:
    calc(100% + 23.8em) 0 0 rgba(255, 252, 222, 0.82),
    0 0 4px rgba(162, 110, 18, 0.34),
    calc(100% + 23.8em) 0 4px rgba(162, 110, 18, 0.26);
}

.sample-badge span {
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .sample-badge {
    margin-top: 5%;
    width: 94%;
    padding: 0.62em 1.05em 0.70em;
    font-size: 1.24em;
    letter-spacing: 0.052em;
    white-space: normal;
  }

  .sample-badge::after {
    display: none;
  }
}


/* Stap 17: boek optisch centraler zetten */
.book-stage {
  max-width: 100%;
}

.cover-wrap {
  margin-inline: auto;
}

.book-shadow {
  left: 50%;
  transform: translateX(-50%) scaleX(0.99);
}

@media (max-width: 900px) {
  .page-shell {
    padding: 94px 12px 42px;
  }
}

/* STEP 18C — controls only. The book artwork and back-cover text block above are intentionally untouched from step17. */
:root {
  --book-zoom: 1;
  --book-y: 0px;
}

.book-stage {
  transform: translateY(var(--book-y));
  transition: transform 180ms ease;
}

.cover-wrap {
  transform: scale(var(--book-zoom));
  transform-origin: center center;
  transition: transform 180ms ease;
}

.reading-controls {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.page-turn,
.zoom-scroll,
.height-scroll-control {
  pointer-events: auto;
}

.page-turn {
  position: fixed;
  top: 50%;
  width: clamp(54px, 4.35vw, 82px);
  height: clamp(82px, 7.0vw, 126px);
  transform: translateY(-50%);
  border: 1px solid rgba(170, 142, 94, 0.34);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255,255,246,0.92), rgba(255,255,255,0) 50%),
    linear-gradient(180deg, rgba(255,251,237,0.80), rgba(239,229,202,0.72));
  color: rgba(94, 82, 61, 0.82);
  box-shadow:
    0 12px 28px rgba(96, 81, 57, 0.09),
    inset 0 1px 0 rgba(255,255,248,0.88);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.page-turn span {
  font-size: clamp(54px, 4.3vw, 82px);
  line-height: 1;
  transform: translateY(-0.03em);
}

.page-turn-left {
  left: clamp(42px, 6.3vw, 112px);
}

.page-turn-right {
  right: clamp(142px, 9.0vw, 224px);
}

.page-turn::before,
.page-turn::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 34%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(179,143,78,0), rgba(179,143,78,0.45), rgba(179,143,78,0));
}

.page-turn::before { top: 15%; }
.page-turn::after { bottom: 15%; }

.zoom-scroll {
  position: fixed;
  top: 50%;
  right: clamp(34px, 2.35vw, 58px);
  width: clamp(68px, 4.55vw, 92px);
  height: min(54vh, 470px);
  min-height: 310px;
  transform: translateY(-50%);
  border: 1px solid rgba(173, 135, 62, 0.38);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 252, 237, 0.96) 0%, rgba(244, 232, 197, 0.82) 58%, rgba(209, 171, 92, 0.20) 100%),
    linear-gradient(90deg, rgba(214,176,89,0.38), rgba(255,252,240,0.92) 22%, rgba(255,253,245,0.98) 50%, rgba(244,225,174,0.74) 78%, rgba(177,132,50,0.30));
  box-shadow:
    0 15px 32px rgba(91, 74, 46, 0.13),
    inset 0 1px 0 rgba(255,255,246,0.93),
    inset 0 -1px 0 rgba(160,122,54,0.20);
  display: grid;
  place-items: center;
  padding: 36px 0;
}

.zoom-cap {
  position: absolute;
  left: 50%;
  width: 122%;
  height: 30px;
  transform: translateX(-50%);
  border: 1px solid rgba(174,137,68,0.34);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,249,0.95), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,252,238,0.88), rgba(227,205,153,0.56));
  box-shadow: 0 8px 16px rgba(95,78,46,0.09), inset 0 1px 0 rgba(255,255,249,0.86);
}
.zoom-cap-top { top: -17px; }
.zoom-cap-bottom { bottom: -17px; }

.zoom-curl {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(151, 113, 47, 0.76);
  font-size: clamp(19px, 1.55vw, 31px);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
}
.zoom-curl-top { top: 34px; }
.zoom-curl-bottom { bottom: 34px; transform: translateX(-50%) rotate(180deg); }

.zoom-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.24em;
  color: rgba(123, 89, 38, 0.88);
  font-size: clamp(14px, 0.92vw, 18px);
  line-height: 0.9;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,238,0.74);
  user-select: none;
}

.zoom-slider {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: ns-resize;
}

.height-scroll-control {
  position: fixed;
  top: clamp(72px, 13vh, 126px);
  right: 7px;
  bottom: 12px;
  width: 9px;
  border-radius: 999px;
  opacity: 0.48;
}

.height-scroll-track {
  position: absolute;
  inset: 0;
  width: 4px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(129, 116, 89, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,248,0.42);
}

.height-scroll-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 84px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(132, 113, 76, 0.34);
  box-shadow: 0 1px 2px rgba(76, 62, 38, 0.12), inset 0 1px 0 rgba(255,255,245,0.65);
}

.height-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ns-resize;
  writing-mode: vertical-lr;
  direction: rtl;
}

@media (max-width: 900px) {
  .reading-controls { display: none; }
  .book-stage { transform: none; }
  .cover-wrap { transform: none; }
}

/* STEP 18D — smoother/easier decorative zoom scroll. Book image remains unchanged from step18c/step17. */
.zoom-scroll {
  width: clamp(84px, 5.35vw, 112px);
  height: min(58vh, 520px);
  min-height: 340px;
  padding: 50px 0;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
  outline: none;
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255,255,250,0.98) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(ellipse at 50% 84%, rgba(255,245,218,0.78) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(90deg, rgba(185,139,50,0.28), rgba(255,252,238,0.94) 20%, rgba(255,254,246,0.99) 50%, rgba(242,221,168,0.80) 80%, rgba(174,126,43,0.25));
  box-shadow:
    0 18px 38px rgba(91, 74, 46, 0.14),
    inset 0 1px 0 rgba(255,255,249,0.96),
    inset 0 0 18px rgba(214, 175, 91, 0.14),
    inset 0 -1px 0 rgba(160,122,54,0.20);
}

.zoom-scroll::before,
.zoom-scroll::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 50%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, rgba(166,124,50,0), rgba(166,124,50,0.45), rgba(166,124,50,0));
}
.zoom-scroll::before { top: 22.5%; }
.zoom-scroll::after { bottom: 22.5%; }

.zoom-scroll:focus-visible {
  box-shadow:
    0 0 0 3px rgba(205, 162, 78, 0.22),
    0 18px 38px rgba(91, 74, 46, 0.14),
    inset 0 1px 0 rgba(255,255,249,0.96),
    inset 0 0 18px rgba(214, 175, 91, 0.14),
    inset 0 -1px 0 rgba(160,122,54,0.20);
}

.zoom-scroll.is-dragging {
  filter: brightness(1.015);
}

.zoom-cap {
  height: 35px;
  width: 132%;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255,255,252,0.98), rgba(255,255,255,0) 58%),
    linear-gradient(180deg, rgba(255,252,238,0.92), rgba(226,202,143,0.58));
}
.zoom-cap-top { top: -20px; }
.zoom-cap-bottom { bottom: -20px; }

.zoom-ornament {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(143, 103, 38, 0.76);
  font-size: clamp(25px, 1.85vw, 37px);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 1px 0 rgba(255,255,235,0.76);
  pointer-events: none;
}
.zoom-ornament-top { top: 35px; }
.zoom-ornament-bottom { bottom: 35px; transform: translateX(-50%) rotate(180deg); }

.zoom-side-curl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(165, 126, 53, 0.20);
  font-size: clamp(40px, 2.7vw, 56px);
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  pointer-events: none;
}
.zoom-side-curl-left { left: 10px; }
.zoom-side-curl-right { right: 10px; transform: translateY(-50%) rotate(180deg); }

.zoom-track {
  position: absolute;
  left: 50%;
  top: 22%;
  bottom: 22%;
  width: 4px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(157, 121, 55, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,248,0.42);
  pointer-events: none;
}

.zoom-thumb {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,246,0.98), rgba(229,195,122,0.86) 50%, rgba(151,106,35,0.58) 100%);
  box-shadow:
    0 2px 5px rgba(89, 65, 31, 0.17),
    inset 0 1px 0 rgba(255,255,246,0.92);
}

.zoom-label {
  position: relative;
  z-index: 2;
  gap: 0.22em;
  color: rgba(112, 78, 31, 0.88);
  font-size: clamp(14px, 0.9vw, 17px);
  pointer-events: none;
}

.zoom-slider {
  display: none;
}

@media (max-width: 900px) {
  .zoom-scroll { display: none; }
}


/* STEP 18N — reset from safe step18d: replace cartouche with the uploaded Art Nouveau reference frame.
   The book image, back-cover text, page buttons and height scroll remain unchanged. */
.zoom-scroll {
  width: clamp(78px, 5.05vw, 104px);
  height: min(58vh, 520px);
  min-height: 340px;
  padding: 72px 0;
  border: 0;
  border-radius: 0;
  background: url("art-nouveau-reference-slider-frame.png") center center / 100% 100% no-repeat;
  box-shadow: none;
  overflow: visible;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}

.zoom-scroll::before,
.zoom-scroll::after,
.zoom-cap,
.zoom-ornament,
.zoom-side-curl {
  display: none !important;
}

.zoom-track {
  top: 23.5%;
  bottom: 23.5%;
  width: 2px;
  background: rgba(150, 112, 43, 0.055);
  box-shadow: none;
}

.zoom-thumb {
  width: 10px;
  height: 10px;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,249,0.98), rgba(229,199,128,0.58) 52%, rgba(151,106,35,0.30) 100%);
  box-shadow:
    0 1px 3px rgba(89, 65, 31, 0.09),
    inset 0 1px 0 rgba(255,255,246,0.90);
}

.zoom-label {
  color: rgba(104, 78, 38, 0.78);
  font-size: clamp(13px, 0.84vw, 16px);
  gap: 0.18em;
  letter-spacing: 0.09em;
  text-shadow: 0 1px 0 rgba(255,255,242,0.72);
}


/* STEP 18O — bladerknoppen harmonized with the Art Nouveau slider frame color. */
.page-turn {
  border: 1px solid rgba(188, 162, 115, 0.46);
  background:
    radial-gradient(ellipse at 50% 10%, rgba(255,255,250,0.96), rgba(255,255,255,0) 48%),
    linear-gradient(90deg,
      rgba(185, 141, 64, 0.14) 0%,
      rgba(255, 250, 230, 0.90) 24%,
      rgba(255, 253, 242, 0.98) 52%,
      rgba(239, 216, 163, 0.64) 82%,
      rgba(178, 132, 54, 0.14) 100%);
  color: rgba(116, 86, 42, 0.78);
  box-shadow:
    0 12px 26px rgba(91, 74, 46, 0.08),
    inset 0 1px 0 rgba(255, 255, 250, 0.96),
    inset 0 0 12px rgba(214, 175, 91, 0.08),
    inset 0 -1px 0 rgba(150, 112, 45, 0.12);
}

.page-turn::before,
.page-turn::after {
  background: linear-gradient(90deg,
    rgba(190, 149, 75, 0),
    rgba(190, 149, 75, 0.32),
    rgba(190, 149, 75, 0));
}

.page-turn span {
  text-shadow: 0 1px 0 rgba(255,255,244,0.76);
}


/* STEP 18P — hide SEO helper text visually while keeping it readable for screen readers/search engines. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}


/* STEP 18Q — active PDF page-spread flipping. The PDF pages are rendered as images so the original Algerian styling stays visible on every device. */
.cover-wrap.showing-pages .back-copy {
  opacity: 0;
  visibility: hidden;
}

.cover-wrap.showing-pages .full-cover {
  background: #f6f2e8;
}

.full-cover.is-turning {
  animation: pageSoftTurn 180ms ease-out;
}

@keyframes pageSoftTurn {
  0% { opacity: 0.72; transform: scale(0.996); }
  100% { opacity: 1; transform: scale(1); }
}

.page-turn:disabled {
  opacity: 0.38;
  cursor: default;
}

.final-buy-link {
  position: absolute;
  display: none;
  z-index: 6;
  left: 16.1%;
  top: 48.0%;
  width: 18.8%;
  height: 5.2%;
  border-radius: 999px;
  background: transparent;
}

.cover-wrap.show-final-buy .final-buy-link {
  display: block;
}

body.show-hotspots .final-buy-link {
  background: rgba(255, 230, 150, .18);
  outline: 1px dashed rgba(160, 121, 48, .45);
}


/* STEP 18R — cache-proof active flipbook buttons. */
.page-turn:disabled {
  pointer-events: none;
}
.cover-wrap.showing-pages {
  background: rgba(246, 242, 232, 0.92);
}


/* STEP 18S - corrected inside-book spreads.
   View 0 remains the full outer cover/back-cover. Then each click shows a real spread:
   even page on the left, odd page on the right, with a built-in centre fold in the JPGs. */
.cover-wrap.showing-pages {
  width: min(92vw, 1380px, calc(89vh * 1.445224));
  background: rgba(246, 242, 232, 0.92);
}

/* STEP 20 - corrected Amazon hotspot for the sharp SVG final page. */
.cover-wrap.show-final-buy .final-buy-link {
  left: 66.4%;
  top: 48.9%;
  width: 18.4%;
  height: 7.0%;
  pointer-events: auto;
}


/* STEP 19 - sharp SVG page spreads, keeping the safe step18s structure. */
.spread-view {
  display: none;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  width: 100%;
  background: #fef9f2;
  overflow: hidden;
}

.cover-wrap.showing-pages .full-cover {
  display: none;
}

.cover-wrap.showing-pages .spread-view {
  display: grid;
}

.spread-view.is-turning {
  animation: pageSoftTurn 180ms ease-out;
}

.spread-page {
  min-width: 0;
  background: #fff;
}

.spread-page img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

.inside-fold {
  position: relative;
  min-width: 18px;
  background: #fef9f2;
}

.inside-fold::before,
.inside-fold::after {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  height: 1px;
  background: rgba(190, 176, 146, 0.48);
  z-index: 2;
}

.inside-fold::before { top: 0; }
.inside-fold::after { bottom: 0; }

@media (max-width: 900px) {
  .spread-view {
    grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr);
  }

  .inside-fold {
    min-width: 12px;
  }
}