:root {
  --underline: rgba(64,64,64,0.4);
  --spine: #0E0E10;
  --cover: #0E0E10;
  --bg: #202020;
  --band: #50728D;
  --insert: #d9d9d9;
  --page: #e6e6e6;
}
.progress-content {
  min-height: 40vh;
  padding-bottom: 140px; /* avoid overlap with global footer */
}
@media (max-width: 768px) {
  .progress-content { min-height: 55vh; }
}
h1 {
  text-align: center;
  font-size: 1rem;
  margin: 0;
  padding: 0;
}
.page {
  height: 100%;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
}
.page__half {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: rotateY(calc(var(--rotation) * 1deg)) translate3d(0, 0, calc((0.5 * var(--coefficient)) * 1px));
  -webkit-clip-path: inset(0 0.5% 0 0.5%);
  clip-path: inset(0 0.5% 0 0.5%);
}
.page__half--front {
  overflow:hidden;
  --rotation: 0;
  --coefficient: 0;
  z-index: 1;
  transform: translate3d(0,0, 0);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 0 5% 5% 0;
}
.page__half--back {
  overflow:hidden;
  z-index: 0;
  transform: translate3d(0,0, 1);
  --rotation: 180;
  --coefficient: 2;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 5% 0 0 5%;
}
.book-1 {
  height: 80vmin;
  position: fixed;
  width: 50vmin;
  min-width: 150px;
  min-height: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-190%, -50%) scale(0.5);
  transform-style: preserve-3d;
  perspective: 1200px;
}
/* Hide spine band and lower z-index when cover is open */
.book__cover--front.cover-open ~ .book__spine::after {
  opacity: 0;
  z-index: 101;
}
/* Hide spine band when cover is open */
.book__cover--front.cover-open ~ .book__spine::after {
  opacity: 0;
}
.book__page {
  position: absolute;
  left: 2%;
  top: 50%;
  border-radius: 0 5% 5% 0;
  transform: translate(0, -50%);
  height: 94%;
  width: 94%;
  z-index: calc(((var(--page-count) * 3 + 3) - var(--page-index)) * 3);
  transform-origin: 0% 50%;
  will-change: transform;
}
.book__cover {
  overflow-x: visible !important;
  border-radius: 0 5% 5% 0;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 50%;
  background: var(--cover);
}
.book__cover--front {
  transform-origin: 0 50%;
}
.book__cover--front .page__half--back {
  border-right: 1rem solid var(--spine);
}
.book__cover--back {
  transform-origin: 0% 50%;
}
.book__cover--back .page__half--front {
  border-left: 1rem solid var(--spine);
}
.book__cover--back {
  border-radius: 0 5% 5% 0;
}
.book__cover .page__half--front { transform: translate3d(0,0,2px); }
.book__cover .page__half--back { transform: translate3d(0,0,3px) rotateY(180deg); }
.book__page:not(.book__cover) .page__half {
  background: white;
}
.title-holder {
  width: 100%;
  text-align: center;
  background: var(--band);
  height: 19vmin;
}

html, body { overflow: hidden; }
.title {
  position: relative;
  top: -3.5vmin;
  font-size: 4vmin;
  color: rgb(190, 200, 104);
  max-width: 90%;
  max-height: 90%;
  text-align: center;
}
a { text-decoration: none; }
.year {
  position: relative;
  top: -7vmin;
  font-size: 8vmin;
  max-width: 90%;
  color: rgb(234, 234, 234);
  text-align: center;
}
.title-page {
  position: absolute;
  width: 100%;
  color: rgb(234, 234, 234);
  font-size: 6vmin;
  text-align: center;
}
.page-number-left {
  overflow:visible;
  position: fixed;
  top: 5px;
  left: 10px;
  width: 95%;
  color: #0E0E10;
  font-size: 2vmin;
  text-align: left;
  padding-top: 2px;
  z-index: calc(((var(--page-count) * 2 + 1) - var(--page-index)) * 2);
  opacity: 0.7;
  font-family: "Noto Sans Mono", monospace;
}
.page-number-right {
  position: fixed;
  top: 5px;
  right: 10px;
  width: 95%;
  color: #ffffff;
  font-size: 2vmin;
  text-align: right;
  padding-top: 2px;
  z-index: calc(((var(--page-count) * 2 + 2) - var(--page-index)) * 2);
  opacity: 0.7;
  font-family: "Noto Sans Mono", monospace;
}
img {
  height: 100%;
  object-fit: cover; /* uniform scale, allow cropping to fill */
  object-position: center;
  z-index: calc(((var(--page-count) * 2 + 1) - var(--page-index)) * 2);
}
.page__half--back img {
  border-radius: 5% 0 0 5%;
}
.page__half--front img {
  border-radius: 0 5% 5% 0;
}

#flipIndicator {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
  font-size: 14px;
  z-index: 1500;
}
#flipIndicator.visible { opacity: 1; }

/* Small hint tag on the front cover */
.book__cover--front .page__half--front::after {
  content: "Click to flip";
  position: absolute;
  bottom: 8px;
  right: 12px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  letter-spacing: 0.3px;
  pointer-events: none;
  user-select: none;
}

/* When the cover is opened, push it behind interactions and hide the hint */
.book__cover--front.cover-open { pointer-events: none; }
.book__cover--front.cover-open .page__half--front::after { display: none; }