.turning-leaf {
  transform: translateZ(1px);
  transition: none;
  will-change: transform;
  contain: layout paint;
  isolation: isolate;
}

.spread { will-change: auto; }

/* A closed front cover is a single physical object: no page block may peek out. */
.spread.single.is-current ~ .spread {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* The first opened spread stands alone; pages 004–005 enter only on the next turn. */
.spread[data-label="002–003"].is-current ~ .spread {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.turning-leaf.turn-backward {
  transform: translateZ(1px);
  transform-origin: right center;
}

.turning-leaf.turn-forward.is-turning {
  animation: turn-page-forward .72s cubic-bezier(.2, .68, .2, 1) both;
}

.turning-leaf.turn-backward.is-turning {
  animation: turn-page-backward .72s cubic-bezier(.2, .68, .2, 1) both;
}

.turning-leaf.cover-leaf {
  z-index: 195;
  transform: translate3d(0, 0, 2px);
  transform-origin: left center;
  contain: layout paint;
}

.turning-leaf.cover-leaf.is-turning {
  animation: open-front-cover .84s cubic-bezier(.22, .68, .16, 1) both;
}

.cover-leaf .leaf-front,
.cover-leaf .leaf-back {
  border-radius: clamp(8px, 1vw, 18px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, .44);
}

.cover-leaf .leaf-back {
  background: #171719;
  transform: rotateY(180deg);
}

.cover-leaf .leaf-back img {
  filter: brightness(.88);
}

.spread.is-opening-spread {
  animation: reveal-open-book .84s cubic-bezier(.22, .68, .16, 1) both;
}

.leaf-face {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
}

.leaf-face img {
  transform: translateZ(0);
  will-change: transform;
}

.leaf-back { background: rgba(0, 0, 0, .08); }

.turning-leaf::before,
.turning-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.turning-leaf::before {
  inset: 0 0 0 auto;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2) 32%, rgba(0, 0, 0, .42));
  opacity: .06;
  transform-origin: right center;
}

.turning-leaf.turn-backward::before {
  inset: 0 auto 0 0;
  background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .2) 32%, rgba(0, 0, 0, .42));
  transform-origin: left center;
}

.turning-leaf::after {
  background: linear-gradient(270deg, rgba(0, 0, 0, .38), transparent 38%, rgba(255, 255, 255, .08));
  opacity: 0;
  transform: rotateY(180deg);
}

.turning-leaf.is-turning::before {
  animation: paper-curl .72s cubic-bezier(.2, .68, .2, 1) both;
}

.turning-leaf.is-turning::after {
  animation: paper-shadow .72s linear both;
}

@keyframes turn-page-forward {
  0% { transform: translate3d(0, 0, 1px) rotateY(0deg) scaleX(1); }
  48% { transform: translate3d(0, 0, 46px) rotateY(-84deg) scaleX(.88) rotateZ(-.18deg); }
  100% { transform: translate3d(0, 0, 1px) rotateY(-180deg) scaleX(1); }
}

@keyframes turn-page-backward {
  0% { transform: translate3d(0, 0, 1px) rotateY(0deg) scaleX(1); }
  48% { transform: translate3d(0, 0, 46px) rotateY(84deg) scaleX(.88) rotateZ(.18deg); }
  100% { transform: translate3d(0, 0, 1px) rotateY(180deg) scaleX(1); }
}

@keyframes open-front-cover {
  0% { transform: translate3d(0, 0, 2px) rotateY(0deg); }
  48% { transform: translate3d(-24%, 0, 72px) rotateY(-86deg); }
  100% { transform: translate3d(-50%, 0, 2px) rotateY(-180deg); }
}

@keyframes reveal-open-book {
  0%, 10% {
    opacity: 0;
    clip-path: inset(0 50% 0 0);
    transform: translate(-25%, -50%);
    filter: brightness(.58);
  }
  42% {
    opacity: .72;
    clip-path: inset(0 28% 0 0);
    transform: translate(-36%, -50%);
    filter: brightness(.76);
  }
  100% {
    opacity: 1;
    clip-path: inset(0);
    transform: translate(-50%, -50%);
    filter: brightness(1);
  }
}

@keyframes paper-curl {
  0%, 100% { opacity: .04; transform: scaleX(.35); }
  50% { opacity: .72; transform: scaleX(1.35); }
}

@keyframes paper-shadow {
  0%, 100% { opacity: 0; }
  50% { opacity: .52; }
}

@media (prefers-reduced-motion: reduce) {
  .turning-leaf.turn-forward.is-turning,
  .turning-leaf.turn-backward.is-turning { animation-duration: .01ms; }
}

.access-gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f3f0e8;
  background: #101010;
}

.access-gate[hidden] { display: none; }
.is-locked { overflow: hidden; }

.access-card {
  width: min(420px, 100%);
  padding: 36px;
  border-left: 2px solid #3157c7;
}

.access-card p,
.access-card label {
  display: block;
  margin: 0 0 12px;
  color: #9a9891;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.access-card h1 {
  margin: 0 0 42px;
  font: 400 clamp(30px, 5vw, 48px)/1.05 Georgia, serif;
}

.access-entry {
  display: flex;
  border-bottom: 1px solid #6b6963;
}

.access-entry input {
  min-width: 0;
  flex: 1;
  padding: 12px 0;
  border: 0;
  outline: 0;
  color: #f3f0e8;
  background: transparent;
  font: inherit;
}

.access-entry button {
  border: 0;
  color: #f3f0e8;
  background: transparent;
  cursor: pointer;
  letter-spacing: .08em;
}

.access-error {
  display: block;
  min-height: 18px;
  margin-top: 12px;
  color: #c88383;
  font-size: 12px;
}

.landscape-toggle {
  display: none;
}

@media (max-width: 800px) and (orientation: portrait) and (hover: none) and (pointer: coarse) {
  .landscape-toggle {
    position: fixed;
    z-index: 240;
    right: 14px;
    bottom: 52px;
    display: block;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    color: #f4f2ed;
    background: rgba(0, 0, 0, .68);
    font-size: 11px;
    backdrop-filter: blur(8px);
  }
}

body.forced-landscape {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100vh;
  height: 100vw;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center;
}

body.forced-landscape .landscape-toggle {
  display: block;
}

body.forced-landscape .spread {
  width: min(calc(100vh - 28px), calc((100vw - 96px) * var(--spread-ratio)));
}

body.forced-landscape .spread.single {
  width: min(calc((100vh - 28px) / 2), calc((100vw - 96px) * var(--page-ratio)));
}

.progress {
  left: 50%;
  bottom: 20px;
  width: min(350px, 36vw);
  height: 26px;
  overflow: visible;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .045));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .24), 0 8px 24px rgba(0, 0, 0, .24);
  transform: translateX(-50%);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}

.progress::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 9px;
  left: 9px;
  height: 6px;
  border-radius: 999px;
  background: rgba(3, 6, 12, .42);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38), 0 1px 0 rgba(255, 255, 255, .1);
  transform: translateY(-50%);
  pointer-events: none;
}

.progress span {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 9px;
  max-width: calc(100% - 18px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(84, 119, 226, .9), rgba(119, 151, 255, .98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 10px rgba(68, 105, 220, .26);
  transform: translateY(-50%);
  transition: width .32s cubic-bezier(.22, .72, .18, 1);
}

.progress input[type="range"] {
  position: absolute;
  z-index: 5;
  inset: -5px 0;
  width: 100%;
  height: 36px;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.progress::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 50%;
  left: var(--scrubber-position, 0%);
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .56), rgba(218, 229, 255, .22));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .72), inset -1px -1px 0 rgba(32, 47, 72, .25), 0 3px 10px rgba(0, 0, 0, .32), 0 0 0 1px rgba(18, 27, 43, .16);
  transform: translate(-50%, -50%);
  transition: width .16s ease, height .16s ease, border-radius .16s ease, background .16s ease;
  backdrop-filter: blur(10px) saturate(165%);
  -webkit-backdrop-filter: blur(10px) saturate(165%);
  pointer-events: none;
}

.progress:has(input:active)::after {
  width: 27px;
  height: 20px;
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .68), rgba(207, 222, 255, .3));
}

.progress:has(input:focus-visible) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 3px rgba(93, 128, 230, .3), 0 8px 24px rgba(0, 0, 0, .24);
}

@media (max-width: 800px) {
  .progress {
    bottom: 72px;
    width: min(250px, 62vw);
    height: 28px;
  }
}

body.forced-landscape .progress {
  bottom: 72px;
  width: min(300px, 48vh);
}

@media (prefers-reduced-transparency: reduce) {
  .progress {
    background: rgba(31, 36, 47, .94);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}