:root {
  --bg:         #F4EAD0;  /* warm cream backdrop */
  --cover:      #E6B84C;  /* mustard */
  --cover-ink:  #2D4E4E;  /* deep teal */
  --page:       #FBF6E8;  /* off-white */
  --page-ink:   #4A5250;  /* warm graphite */
  --rule:       #C9B88A;  /* dusty olive */
  --shadow:     rgba(60, 40, 10, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  font-family: "Futura", "Avenir Next", "Century Gothic", "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--page-ink);
  -webkit-font-smoothing: antialiased;
}

.scene {
  display: grid;
  place-items: center;
  min-height: 100vh;
  perspective: 1800px;
  perspective-origin: 50% 40%;
}

.book {
  position: relative;
  width: 640px;
  height: 420px;
  transform-style: preserve-3d;
}

/* spine — a soft seam between the two pages. Sits above the pages,
   below the cover, so it reads as the book's inner gutter when open
   and as the book's outer edge when closed. */
.book::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 6px;
  height: 100%;
  transform: translateX(-3px);
  background: linear-gradient(
    to right,
    rgba(60, 40, 10, 0.00) 0%,
    rgba(60, 40, 10, 0.14) 45%,
    rgba(60, 40, 10, 0.22) 50%,
    rgba(60, 40, 10, 0.14) 55%,
    rgba(60, 40, 10, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.page {
  position: absolute;
  top: 0;
  width: 320px;
  height: 420px;
  background: var(--page);
  border-radius: 2px;
  box-shadow: 0 10px 28px var(--shadow), 0 1px 2px rgba(0,0,0,0.06);
}

.right-page {
  left: 320px;
  cursor: pointer;
}

.page-inner {
  padding: 48px 40px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--page-ink);
  line-height: 1.6;
}

.page-rule {
  display: block;
  width: 40px;
  height: 2px;
  background: var(--rule);
  margin-bottom: 22px;
}

.cover {
  position: absolute;
  top: 0;
  left: 320px;
  width: 320px;
  height: 420px;
  transform-style: preserve-3d;
  transform-origin: left center;
  cursor: pointer;
  will-change: transform;
  z-index: 2;
}

.cover-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 2px;
  overflow: hidden;
  will-change: transform;
}

/* Tiny Z separation on each face stops the front/back from z-fighting
   at the ~90° mark — that was the brief flash during the flip. */
.cover-front {
  background: var(--cover);
  box-shadow: 0 12px 30px var(--shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 36px;
  color: var(--cover-ink);
  transform: translateZ(0.5px);
}

.cover-back {
  transform: rotateY(180deg) translateZ(0.5px);
  background: var(--page);
  box-shadow: 0 10px 28px var(--shadow), 0 1px 2px rgba(0,0,0,0.06);
}

.cover-mark {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cover-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cover-ink);
}

.cover-line {
  flex: 1;
  height: 1px;
  background: var(--cover-ink);
  opacity: 0.45;
}

.cover-title {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}