@charset "utf-8";
/* CSS Document */

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

body {
  font-family: 'Crimson Text', 'Garamond', serif;
  background-image: url("bookshelves.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  height: 100vh; /* CHANGE from min-height to height */
  overflow: hidden; /* PREVENT page scrolling */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* REMOVE padding that could cause scroll */
}
.book-container {
  position: relative;
  width: 90vw;
  max-width: 1200px;
  height: 85vh;
  max-height: 800px;
  /* Book cover background */
  background: #8b4513; /* leather brown */
  padding: 10px 16px; /* 10px top/bottom, 16px left/right (10px cover + 6px for pages) */
  border-radius: 12px;
  box-shadow: 0 25px 70px rgba(0,0,0,0.6);
}

.book {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f4e8d0 0%, #f9f3e8 50%, #f4e8d0 100%);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.1);
  border-radius: 8px;
  display: flex;
}

.page {
  flex: 1;
  padding: 40px 45px 80px 45px;
  position: relative;
 background-image: url("paper.jpg");
  overflow: hidden; /* CHANGE from overflow-y: auto */
}

    .page:first-child {
      border-right: 1px solid #d4c5a9;
    }

    .page::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: 
        radial-gradient(ellipse at top left, rgba(139,111,71,0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(139,111,71,0.05) 0%, transparent 50%);
      pointer-events: none;
    }

    .spine-shadow {
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 40px;
      transform: translateX(-50%);
      background: linear-gradient(to right, 
        transparent, 
        rgba(0,0,0,0.1) 30%, 
        rgba(0,0,0,0.15) 50%, 
        rgba(0,0,0,0.1) 70%, 
        transparent);
      pointer-events: none;
    }


.page-number {
	position: absolute;
	bottom: 30px;
	font-size: 0.9rem;
	color: #8b7355;
	z-index: 10;
	left: 43px;
}

.page:first-child .page-number {
  left: 45px;
}

.page:last-child .page-number {
  left: 45px;
}
    h1 {
      font-size: 2.5rem;
      color: #3d2817;
      margin-bottom: 1.5rem;
      text-align: center;
      font-weight: normal;
    }

    .toc-list {
      list-style: none;
      padding: 0;
    }

    .toc-item {
      padding: 12px 0;
      border-bottom: 1px dotted #d4c5a9;
      transition: all 0.3s ease;
    }

    .toc-item:hover {
      padding-left: 10px;
    }

    .toc-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
      color: #3d2817;
      transition: color 0.3s ease;
    }

    .toc-link:hover {
      color: #8b6f47;
    }

    .toc-link span:first-child {
      font-size: 1.2rem;
    }

    .toc-link span:last-child {
      color: #8b7355;
     /* font-style: italic; */
    }

    /* Bookmark Ribbon Navigation */
.bookmark-ribbon {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 6px; /* changed from 0 to account for cover */
  z-index: 10;
  transition: all 0.3s ease;
}

    .ribbon-tab {
      width: 40px;
      height: 200px;
      background: linear-gradient(135deg, #8b2e2e 0%, #a63737 100%);
      border-radius: 2px 2px 0 0;
      box-shadow: 3px 3px 10px rgba(0,0,0,0.3);
      position: relative;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: width 0.3s ease;
    }

    .ribbon-tab::after {
      content: '';
      position: absolute;
      bottom: -15px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 15px solid #721e1e;
    }

    .ribbon-icon {
      color: #f4e8d0;
      font-size: 1.5rem;
      transition: opacity 0.3s ease;
    }

    .bookmark-ribbon:hover .ribbon-tab {
      width: 250px;
    }

    .bookmark-ribbon:hover .ribbon-icon {
      opacity: 0;
    }

    .ribbon-menu {
      position: absolute;
      left: 0;
      top: 0;
      width: 250px;
      height: 200px;
      padding: 15px 20px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }

    .bookmark-ribbon:hover .ribbon-menu {
      opacity: 1;
      pointer-events: all;
    }

    .ribbon-menu-item {
      color: #f4e8d0;
      text-decoration: none;
      font-size: 1rem;
      padding: 5px 0;
      border-bottom: 1px solid rgba(244,232,208,0.3);
      cursor: pointer;
      transition: padding-left 0.2s ease;
      display: block;
    }

    .ribbon-menu-item:last-child {
      border-bottom: none;
    }

    .ribbon-menu-item:hover {
      padding-left: 10px;
    }

    @media (max-width: 768px) {
      .page {
        padding: 40px 30px;
      }

      h1 {
        font-size: 2rem;
      }

      .bookmark-ribbon {
        left: 2%;
      }
    }
	.page-content {
	height: 100%;
	overflow-y: auto; /* MOVE overflow-y here */
	padding-right: 10px;
}
.book {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #f4e8d0 0%, #f9f3e8 50%, #f4e8d0 100%);
  box-shadow: 
    0 20px 60px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(139, 111, 71, 0.3); /* subtle edge */
  border-radius: 8px;
  display: flex;
}

/* Page edges on the right side */
/* Right page edges - 6px extending beyond book */
/* Right page edges - 6px between book and cover *//* Right page edges - vertical lines */
.book::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    to right,  /* changed from 'to bottom' */
    #f4e8d0 0px,
    #d4c5a9 0.5px,
    #f4e8d0 1px,
    #f4e8d0 2px
  );
  box-shadow: 1px 0 3px rgba(0,0,0,0.3);
}

/* Left page edges - vertical lines */
.book::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 6px;
  background: repeating-linear-gradient(
    to right,  /* changed from 'to bottom' */
    #f4e8d0 0px,
    #d4c5a9 0.5px,
    #f4e8d0 1px,
    #f4e8d0 2px
  );
  box-shadow: -1px 0 3px rgba(0,0,0,0.3);
}