/* Book Chapter Styles
   ========================================================= */

body {
    background: repeating-linear-gradient(90deg, #ffc000 0px, #ffc000 2px, #fffbe6 2px, #fffbe6 100vw);
}

.book-chapter {
  background-color: #fffbe6;           /* Soft, paper-like background */
  color: #2d2d2d;                      /* High contrast, easy on eyes */
  font-family: var(--font-serif);
  font-size: 1.18rem;
  line-height: 1.85;
  max-width: 68ch;
  margin: 3em auto 4em auto;
  padding: 3em 2.5em 3em 2.5em;
  border-radius: 1.2em;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.09);
  letter-spacing: 0.01em;
  border: 1px solid #f5e6b2;
  position: relative;
}

.book-chapter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.2em;
  pointer-events: none;
  box-shadow: 0 0 0 12px #f9e7b7 inset;
  opacity: 0.3;
}

.book-chapter h1,
.book-chapter h2,
.book-chapter h3 {
  color: #b38600;                      /* Deep gold for headings */
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3;
  font-weight: 600;
  font-family: var(--font-serif);
  letter-spacing: 0.02em;
}
/* 
.book-chapter p {
  margin-bottom: 1.5em;
  text-indent: 2em;                    /* Indent first line for book feel */
}

.book-chapter p:first-child {
  text-indent: 0;                      /* No indent for first paragraph */
} */

.book-chapter ul,
.book-chapter ol {
  margin-bottom: 1.5em;
  padding-left: 2em;
}

.book-chapter li {
  margin-bottom: 0.75em;
}

/* .book-chapter a {
  color: #0077cc;
  text-decoration: underline;
}

.book-chapter a:focus,
.book-chapter a:hover {
  background-color: #fff2b2;
  outline: 2px solid #b38600;
  text-decoration: none;
} */

.book-chapter pre,
.book-chapter code {
  font-family: var(--font-mono);
  font-size: 1rem;
  background: #f6ecd1;
  color: #4a3c1a;
  border-radius: 0.5em;
}

.book-chapter pre {
  padding: 1em;
  margin: 1.5em 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 8px 0 rgba(0,0,0,0.06);
  max-width: 66ch;
}

.book-chapter code {
  padding: 0.2em 0.4em;
  margin: 0 0.1em;
  background: #f6ecd1;
  color: #4a3c1a;
  border-radius: 0.3em;
  font-size: 0.95em;
  word-break: break-word;
}

.chapter-toc {
  position: fixed;
  left: -190px; /* Hide off-screen */
  top: 0;
  width: 220px;
  height: 100vh;
  overflow-y: auto;
  background: #fffbe6;
  border-right: 1px solid #f5e6b2;
  padding: 2em 1em;
  opacity: 0.95;
  box-shadow: 2px 0 12px rgba(0,0,0,0.04);
  transition: left 0.5s ease-in; /* Smooth, natural easing */
  z-index: 100;
}

/* Show on hover */
.chapter-toc:hover,
.chapter-toc:focus-within {
  left: 0;
}

/* Icon button to reveal TOC */
.chapter-toc-toggle {
  position: fixed;
  left: 0;
  top: 2em;
  width: 40px;
  height: 40px;
  background: #b38600;
  color: #fff;
  border-radius: 0 1em 1em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.08);
  transition: left 0.5s ease-in; /* Smooth, natural easing */
  z-index: 101;
}

/* Show on hover */
.chapter-toc:hover,
.chapter-toc:focus-within {
  left: 0;
}

.chapter-toc-toggle:hover {
  background: #0077cc;
}

/* Hide toggle when TOC is open */
.chapter-toc:hover .chapter-toc-toggle,
.chapter-toc:focus-within .chapter-toc-toggle {
  left: -10%;
  pointer-events: none;
}

/* Responsive: hide TOC on mobile */
@media screen and (max-width: 640px) {
  .chapter-toc,
  .chapter-toc-toggle {
    display: none !important;
  }
}

.chapter-toc .toc-inner {
  background: #fffbe6;
  border-radius: 1em;
  padding: 0;
  margin-bottom: 2em;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  font-size: 1rem;
  max-width: 320px;
}

.chapter-toc ul,
.chapter-toc li {
  margin: 0;
  padding: 0;
}

.chapter-toc ul {
  list-style: none;
}

.chapter-toc li {
  margin-left: .5em;
  margin-bottom: 0.5em;
}

.chapter-toc li li {
  margin-left: .5em;
  font-size: 0.95rem;
}

.chapter-toc a {
  color: #b38600;
  text-decoration: none;
  transition: color 0.2s;
}

.chapter-toc a:hover,
.chapter-toc a:focus {
  color: #0077cc;
  text-decoration: underline;
}


.book-chapter img {
    mix-blend-mode: multiply;
}

/* =========================================================
   Phase 5 — Book landing hero
   ========================================================= */

/* On the landing only, drop the striped body background for a clean canvas. */
body:has(.book-landing) {
  background: var(--color-bg);
}

.book-landing {
  padding-top: var(--space-8);
}

.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
}
@media (min-width: 720px) {
  .book-hero {
    grid-template-columns: 220px 1fr;
    gap: var(--space-8);
  }
}

.book-hero__cover img {
  width: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  mix-blend-mode: normal;
}

.book-hero__body h1 {
  margin-top: 0;
}

.book-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--fs-100);
}
.book-hero__meta span {
  color: var(--color-accent);
}

.chapter-index {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  counter-reset: chapter;
  border-top: 1px solid var(--color-border);
}
.chapter-index li {
  margin: 0;
}
.chapter-index a {
  counter-increment: chapter;
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: background-color var(--dur-fast) var(--ease-standard),
    padding-left var(--dur-fast) var(--ease-standard);
}
.chapter-index a::before {
  content: counter(chapter, decimal-leading-zero);
  min-width: 2.5ch;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  color: var(--color-accent);
}
.chapter-index a:hover {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  padding-left: var(--space-4);
}
.chapter-index__title {
  flex: 1;
  font-family: var(--font-serif);
}
.chapter-index__time {
  white-space: nowrap;
  color: var(--color-text-muted);
  font-size: var(--fs-100);
}

/* Prev / next chapter navigation */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid #f5e6b2;
}
.chapter-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 45%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid #f5e6b2;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}
.chapter-nav__link:hover {
  border-color: #e6c34a;
  background: #fbf1cf;
}
.chapter-nav__link--next {
  margin-left: auto;
  text-align: right;
}
.chapter-nav__dir {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b38600;
}
.chapter-nav__title {
  font-family: var(--font-display);
  color: #2d2d2d;
}