.chapters { display: grid; grid-template-columns: 1fr; gap: 32px; }
.chapter { display: grid; grid-template-columns: 1fr; gap: 16px; background: rgba(255,255,255,0.85); border-radius: 18px; box-shadow: 0 8px 24px rgba(220,120,180,0.1); padding: 16px; }
.chapter-media { position: relative; }
.chapter-media img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 20px rgba(220,120,180,0.14); }
.chapter-date { position: absolute; bottom: 10px; left: 10px; background: linear-gradient(90deg, #e75480 0%, #e0c3fc 100%); color: #fff; padding: 6px 10px; border-radius: 10px; font-family: 'Dancing Script', cursive; font-size: 1.05rem; }
.chapter-text h3 { margin-bottom: 8px; color: #e75480; font-family: 'Dancing Script', cursive; font-size: 1.6rem; }
.chapter-text p { line-height: 1.7; }
.chapter-text blockquote { margin-top: 10px; padding-left: 12px; border-left: 3px solid #e0c3fc; color: #a259a2; font-style: italic; }

.moments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.moment img { width: 100%; border-radius: 14px; box-shadow: 0 6px 20px rgba(220,120,180,0.14); }
.moment figcaption { margin-top: 8px; text-align: center; color: #8a3d8a; }

@media (min-width: 900px) {
  .chapters { grid-template-columns: 1fr; gap: 42px; }
  .chapter { grid-template-columns: 320px 1fr; align-items: center; padding: 20px; }
}

/* Night mode adjustments */
body.night .chapter { background: rgba(20,24,45,0.6); box-shadow: 0 8px 32px rgba(0,0,0,0.25); }
body.night .chapter-text blockquote { border-left-color: #5b4ea1; color: #cbb7ff; }

/* Love History Notebook Styles */
.notebook-container {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.notebook {
  width: 100%;
  max-width: 800px;
  background: #fefefe;
  border-radius: 20px;
  box-shadow: 
    0 0 0 1px #e75480,
    0 8px 32px rgba(231, 84, 128, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
  position: relative;
}

.notebook::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 24px,
    #e75480 24px,
    #e75480 26px
  );
  z-index: 1;
}

.notebook-header {
  background: linear-gradient(135deg, #ffe6f7 0%, #e0c3fc 100%);
  padding: 20px 40px;
  border-bottom: 2px solid #e75480;
  text-align: center;
}

.notebook-title {
  font-family: 'Dancing Script', cursive;
  font-size: 2.2rem;
  color: #e75480;
  margin: 0 0 8px 0;
  font-weight: 700;
}

.notebook-date {
  color: #8a3d8a;
  font-size: 1rem;
  font-style: italic;
}

.notebook-content {
  padding: 30px 40px 40px 60px;
  position: relative;
  background: 
    repeating-linear-gradient(
      transparent 0px,
      transparent 24px,
      rgba(231, 84, 128, 0.08) 24px,
      rgba(231, 84, 128, 0.08) 25px
    );
  min-height: 600px;
}

.notebook-content .handwritten-text {
  font-family: 'Tangerine', 'Brush Script MT', 'Lucida Handwriting', cursive !important;
  font-size: 1.8rem !important;
  line-height: 1.6;
  color: #000000 !important;
  position: relative;
  z-index: 2;
  text-decoration: underline;
  text-decoration-color: rgba(231, 84, 128, 0.3);
  text-underline-offset: 2px;
  font-weight: 400 !important;
  font-style: normal !important;
}

.notebook-content .handwritten-text p {
  margin: 0 0 20px 0;
  text-align: justify;
  transform: rotate(0.5deg);
  animation: handwrite 0.1s ease-in-out;
  font-family: 'Tangerine', cursive !important;
  font-size: 1.8rem !important;
  font-weight: 400 !important;
  color: #000000 !important;
}

.handwritten-text p:nth-child(even) {
  transform: rotate(-0.3deg);
}

.handwritten-text p:nth-child(3n) {
  transform: rotate(0.2deg);
}

.handwritten-text p:nth-child(5n) {
  transform: rotate(-0.1deg);
}

.notebook-content .signature {
  text-align: right;
  font-size: 1.6rem;
  color: #e75480;
  font-weight: 700;
  margin-top: 40px !important;
  transform: rotate(-1deg) !important;
  font-family: 'Tangerine', cursive !important;
}

/* Handwriting animation */
@keyframes handwrite {
  0% { opacity: 0; transform: translateY(10px) rotate(0deg); }
  100% { opacity: 1; transform: translateY(0px); }
}

/* Staggered animation for paragraphs */
.handwritten-text p:nth-child(1) { animation-delay: 0.1s; }
.handwritten-text p:nth-child(2) { animation-delay: 0.3s; }
.handwritten-text p:nth-child(3) { animation-delay: 0.5s; }
.handwritten-text p:nth-child(4) { animation-delay: 0.7s; }
.handwritten-text p:nth-child(5) { animation-delay: 0.9s; }
.handwritten-text p:nth-child(6) { animation-delay: 1.1s; }
.handwritten-text p:nth-child(7) { animation-delay: 1.3s; }
.handwritten-text p:nth-child(8) { animation-delay: 1.5s; }
.handwritten-text p:nth-child(9) { animation-delay: 1.7s; }
.handwritten-text p:nth-child(10) { animation-delay: 1.9s; }
.handwritten-text p:nth-child(11) { animation-delay: 2.1s; }
.handwritten-text p:nth-child(12) { animation-delay: 2.3s; }
.handwritten-text p:nth-child(13) { animation-delay: 2.5s; }
.handwritten-text p:nth-child(14) { animation-delay: 2.7s; }
.handwritten-text p:nth-child(15) { animation-delay: 2.9s; }
.handwritten-text p:nth-child(16) { animation-delay: 3.1s; }
.handwritten-text p:nth-child(17) { animation-delay: 3.3s; }

/* Night mode for notebook */
body.night .notebook {
  background: rgba(20, 24, 45, 0.9);
  box-shadow: 
    0 0 0 1px #5b4ea1,
    0 8px 32px rgba(91, 78, 161, 0.25),
    inset 0 0 0 1px rgba(230, 222, 248, 0.1);
}

body.night .notebook::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 24px,
    #5b4ea1 24px,
    #5b4ea1 26px
  );
}

body.night .notebook-header {
  background: linear-gradient(135deg, rgba(20, 24, 45, 0.8) 0%, rgba(91, 78, 161, 0.6) 100%);
  border-bottom-color: #5b4ea1;
}

body.night .notebook-title {
  color: #e6def8;
}

body.night .notebook-date {
  color: #b8a9d9;
}

body.night .notebook-content {
  background: 
    repeating-linear-gradient(
      transparent 0px,
      transparent 24px,
      rgba(91, 78, 161, 0.1) 24px,
      rgba(91, 78, 161, 0.1) 25px
    );
}

body.night .handwritten-text {
  color: #ffffff !important;
  text-decoration-color: rgba(230, 222, 248, 0.4);
}

body.night .notebook-content .handwritten-text {
  color: #ffffff !important;
}

body.night .notebook-content .handwritten-text p {
  color: #ffffff !important;
}

body.night .signature {
  color: #e6def8;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .notebook-content {
    padding: 20px 30px 30px 50px;
  }
  
  .notebook::before {
    left: 30px;
  }
  
  .handwritten-text {
    font-size: 1.5rem;
    line-height: 1.6;
  }
  
  .notebook-title {
    font-size: 1.8rem;
  }
}