/* ======================================================================
   GLOBAL RESET + ELEMENT NORMALIZATION
   ----------------------------------------------------------------------
   Ensures consistent sizing behavior across all elements.
   box-sizing: border-box → padding & borders are included in width/height.
   This gives you predictable page and layout control.
   ====================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}


/* ======================================================================
   PAGE BODY
   ----------------------------------------------------------------------
   The background outside the book (dark gray).
   Sets base font family for the entire reader environment.
   ====================================================================== */
body {
  margin: 0;
  padding: 0;
  background-color: #1d1f20;   /* page background outside the book */
  color: #111;                  /* default text color */
  font-family: "Crimson Text", serif; /* classic novel body typeface */
}


/* ======================================================================
   WRAPPER — OUTER BOOK CONTAINER
   ----------------------------------------------------------------------
   Controls the maximum width of the book + overall layout on large screens.
   This keeps the two-page spread from stretching too wide on big monitors.
   ====================================================================== */
#wrapper {
  max-width: 88rem;     /* total width allowed (≈ 1408px) */
  margin: 2rem auto;    /* centered with spacing above/below */
  padding: 0 1rem;      /* prevents book from touching screen edges */
}


/* ======================================================================
   INNER CONTAINER — structural wrapper (rarely needs editing)
   ----------------------------------------------------------------------
   Safeguard padding, gives your spread room to breathe.
   ====================================================================== */
#container {
  width: 100%;
  padding: 1rem;
}


/* ======================================================================
   OPEN BOOK (WHITE PAGE BLOCK)
   ----------------------------------------------------------------------
   This is the main white "paper" area inside the brown hard cover.
   Contains:
   • header
   • spread
   • page content
   • footer
   ----------------------------------------------------------------------
   Customization Notes:
   - background → controls paper color
   - padding → controls margins around the text
   - min-height → controls overall page height stability
   - overflow: hidden → prevents artifacts from oversized content
   ====================================================================== */
.open-book {
  position: relative;
  background: #ffffff;        /* ← main page background (pure white) */
  color: #000;                /* default page text color */
  padding: 3rem 4rem;         /* inner margins on all sides */
  min-height: 80vh;           /* consistent height for the two-page spread */
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;           /* prevents content bleeding out */
}


/* ======================================================================
   OPEN BOOK — CENTER SPINE (the dark shadow crease)
   ----------------------------------------------------------------------
   Creates the illusion of a physical gutter between two pages.
   This is a background effect and does not interfere with text layout.

   Notes for modification:
   - width controls how “thick” the spine looks
   - gradient stops control how sharp/soft the crease is
   ====================================================================== */
.open-book::after {
  content: "";
  position: absolute;
  top: -1.25rem;
  bottom: -1.25rem;
  left: 50%;
  width: 4.2rem;             /* ← width of the shadow crease */

  transform: translateX(-50%);
  z-index: -1;               /* places the crease behind all content */

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 46%,  /* soft lead-in shadow */
    rgba(0, 0, 0, 0.5) 49%,  /* deeper shadow approaching center */
    rgba(0, 0, 0, 0.6) 50%,  /* narrow darkest point */
    rgba(0, 0, 0, 0.5) 51%,  /* mirrored right-side gradient */
    rgba(0, 0, 0, 0.2) 54%,
    transparent 100%
  );
}


/* ======================================================================
   TEXT SELECTION COLOR (OPTIONAL)
   ----------------------------------------------------------------------
   Controls what color appears when a user highlights text inside the book.
   ====================================================================== */
.open-book *::selection {
  background: rgba(222, 255, 0, 0.75); /* soft yellow highlight */
}


/* -----------------------------------------------------
   BOOK COVER 
----------------------------------------------------- */

.book-cover-excerpt {
  position: relative;
  padding: 0.8rem; /* tighter cover thickness */
  background: linear-gradient(
    145deg,
    #5a2d0c 0%,
    #7a451e 40%,
    #8b4f22 60%,
    #5c2f0f 100%
  );
  border-radius: 0.45rem;
 
}


/* ======================================================================
   BOOK HEADER
   ----------------------------------------------------------------------
   This is the small title block at the top of each spread.

  
   Layout summary:
   - Flexbox aligns title left and author right.
   - All-uppercase, letter-spaced "print book" styling.
   - Compact size so it doesn’t distract from the main text.
   ====================================================================== */
.book-header {
  display: flex;                     /* puts title + author on one line */
  justify-content: space-between;    /* title on left, author on right */
  align-items: flex-start;           /* ensures both align visually cleanly */

  font-family: "Playfair Display", serif; /* elegant serif display font */
  text-transform: uppercase;         /* classic print-style small-caps feel */
  letter-spacing: 0.14em;            /* increases spacing between letters */

  font-size: 0.8rem;                 /* base size for entire header */
  margin-bottom: 1.5rem;             /* space between header and first text */
}


/* ======================================================================
   HEADER — INNER TITLE ELEMENTS (h1 + h6)
   ----------------------------------------------------------------------
   Remove browser defaults + ensure uniform typography.
   ====================================================================== */
.book-header h1,
.book-header h6 {
  margin: 0;                         /* remove default vertical space */
  font-weight: 700;                  /* bold but not heavy */
}


/* Book title size override */
.book-header h1 {
  font-size: 0.9rem;                 /* slightly larger than author name */
}

/* Author name size override */
.book-header h6 {
  font-size: 0.8rem;                 /* subtle secondary label */
}



/* ======================================================================
   BOOK FOOTER
   ----------------------------------------------------------------------
   Optional footer area beneath each spread.


   Styling summary:
   - Thin top border to separate footer from the main text.
   - Flex layout keeps left + right aligned cleanly.
   - Slightly larger font (0.9rem) than header for readability.
   ====================================================================== */
.book-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.08);  /* faint dividing line */
  padding-top: 1.25rem;                       /* space above footer text */
  margin-top: 2.5rem;                         /* space below page content */

  display: flex;                               /* aligns footer left & right */
  justify-content: space-between;
  align-items: center;

  font-size: 0.9rem;                           /* slightly larger than header */
}

  /* ======================================================================
   PAGE CONTROLS (Prev / Next buttons at the top of the book)
   ----------------------------------------------------------------------
   This section controls:
   • styling of the small navigation buttons
   • spacing and layout of the control bar
   • hover effects + disabled states
   ====================================================================== */

/* Container that holds the buttons + page indicator */
.page-controls {
  display: flex;                     /* lay elements horizontally */
  align-items: center;               /* vertically align items */
  gap: 1rem;                         /* spacing between prev | indicator | next */
  
  font-family: "Playfair Display", serif;  /* classic book typography */
  letter-spacing: 0.06em;            /* subtle print-like spacing */
  text-transform: uppercase;         /* consistent UI look */
  font-size: 0.8rem;                 /* base size for all text inside */
}



/* ======================================================================
   BUTTONS INSIDE PAGE CONTROLS
   ----------------------------------------------------------------------
   Controls the style of:
   • "Prev Page"
   • "Next Page"

   Key details:
   - Rounded pill-shaped design (border-radius: 999px)
   - Neutral paper-like background (#f6f0ea)
   - Subtle shadow for raised effect
   ====================================================================== */
.page-controls button {
  border-radius: 999px;              /* pill shape */
  border: 1px solid rgba(0, 0, 0, 0.25); /* soft outline */
  background: #f6f0ea;               /* warm off-white */
  
  padding: 0.45rem 1.25rem;          /* comfortable click area */

  font-family: "Playfair Display", serif; /* matches rest of UI */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.75rem;

  cursor: pointer;                   /* interactive cursor */
  
  /* Smooth transitions */
  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;

  /* Light elevation effect */
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
}



/* ======================================================================
   BUTTON — HOVER STATE
   ----------------------------------------------------------------------
   What happens when user hovers (but only if active/not disabled)

   Effects:
   - Slight upward lift
   - Slightly brighter background
   - Enhanced shadow
   ====================================================================== */
.page-controls button:hover:not(:disabled) {
  transform: translateY(-1px);          /* gentle lift */
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.12); /* stronger shadow */
  background: #fdf8f4;                  /* brighter paper look */
}



/* ======================================================================
   BUTTON — DISABLED STATE
   ----------------------------------------------------------------------
   When user cannot click (e.g., on page 1, Prev is disabled):

   Effects:
   - Reduced opacity
   - No shadow
   - Cursor removed (grayed-out feel)
   ====================================================================== */
.page-controls button:disabled {
  opacity: 0.4;                         /* grayed out */
  cursor: default;                      /* no pointer cursor */
  box-shadow: none;                     /* remove elevation */
}


/* ======================================================================
   PAGE INDICATOR (ex: “Page 3 / 26” inside the top controls)
   ----------------------------------------------------------------------
   This selector affects ONLY the small text showing the current page 
   number in the navigation bar.
   ====================================================================== */
#page-indicator {
  color: rgba(0, 0, 0, 0.65);  /* medium contrast — readable but subtle */
}


/* ======================================================================
   PAGE NUMBER ROW (ex: numbers centered *under* the open-book)
   ----------------------------------------------------------------------
   This row appears below each spread and displays page numbers like:
       LEFT PAGE NUMBER    •    RIGHT PAGE NUMBER
   centered across the entire width of the book.
   ====================================================================== */
.page-number-row {
  text-align: center;                         /* centers both page numbers */
  font-size: 0.8rem;                          /* slightly smaller than body text */
  font-family: "Playfair Display", serif;     /* classic page-number typography */
  letter-spacing: 0.14em;                     /* subtle print-style spacing */
  text-transform: uppercase;                  /* professional book aesthetic */
  color: rgba(0, 0, 0, 0.55);                 /* softer tone than main text */
  margin-top: 0.75rem;                        /* spacing above the page numbers */
}
  /* -------------------------------------------------------------
   SPREAD + PAGES
   This section controls:
   - how much text fits on a page
   - how wide each page column is
   - how the two-page layout behaves
   - text density + readability
   ------------------------------------------------------------- */

#book-viewport {
  flex: 1;
  display: flex;
  align-items: stretch;
}

/* Spread container */
.spread {
  display: none;
  width: 100%;
  column-gap: 5rem;              /* space between the two pages */
}

/* Active spread (2 pages showing) */
.spread-active {
  display: grid;
  grid-template-columns: 1fr 1fr; /* left + right pages */
  gap: 0 5rem;                    /* horizontal gutter */
}

/* Individual page container */
.page {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-inline: 0.25rem;
}

/* -------------------------------------------------------------
   PAGE INNER — MAIN TEXT AREA
   -------------------------------------------------------------
   This block controls:
   • Text size (font-size)
   • Line length (max-width)
   • Vertical page height (height)
   • Line spacing (line-height)
   • Overflow handling (overflow)

   QUICK ADJUSTMENT GUIDE:
   -----------------------
   To increase font size:
     → Change font-size: 1.05rem → 1.10rem or 1.15rem

   To allow more characters per line (wider text):
     → Increase max-width: 33rem → 36rem, 38rem

   To make text more airy:
     → Increase line-height: 1.7 → 1.8 or 1.85

   To fit more text per page:
     → Increase height: 80vh → 85vh or 90vh
     OR decrease font-size

   To fit less text per page (for dramatic pacing):
     → Decrease height: 80vh → 70vh or 72vh
     OR increase font-size
------------------------------------------------------------- */
.page-inner {
  max-width: 36rem;        /* 🔧 CONTROLS LINE LENGTH.
                              - Larger = more characters per line.
                              - Smaller = tighter, more book-like columns. */
  font-size: 1.2rem;      /* 🔧 MAIN FONT SIZE.
                              Increase if you want slightly larger text:
                              e.g., 1.10rem or 1.15rem. */
  line-height: 1.5;        /* 🔧 LINE SPACING.
                              - Higher = more airy, elegant.
                              - Lower = denser, more text per page. */
  height: 87vh;            /* 🔧 VERTICAL HEIGHT PER PAGE.
                              Defines how much vertical text fits.
                              Increase for more text per page. */
  overflow: hidden;        /* Prevents text from spilling out of the fixed page. */
}


/* -------------------------------------------------------------
   PARAGRAPH SPACING
   Adjust margin-bottom for tighter or looser pacing.
------------------------------------------------------------- */
.page-inner p {
  margin: 0 0 0.9rem;      /* 🔧 vertical spacing between paragraphs */
}


/* -------------------------------------------------------------
   INDENTATION FOR NOVEL-STYLE PARAGRAPHS
   First paragraph NOT indented; subsequent paragraphs are.
   Change 1.75em for deeper or shallower indents.
------------------------------------------------------------- */
.page-inner p + p {
  text-indent: 1.75em;     /* 🔧 text indent for classic book feel */
}


/* -------------------------------------------------------------
   BLOCK QUOTE STYLE
   Indented & italic paragraphs
------------------------------------------------------------- */
.page-inner p.quote {
  margin-left: 2em;        /* 🔧 block-quote indent amount */
  font-style: italic;
}


/* -------------------------------------------------------------
   SMALLER OPTIONAL TEXT STYLE
   Used for fine print or notes.
------------------------------------------------------------- */
.page-inner p.small {
  font-size: 0.95rem;      /* 🔧 slightly smaller than base text size */
}


/* -------------------------------------------------------------
   PAGE HEADINGS & TYPOGRAPHY META
------------------------------------------------------------- */
.page-heading {
  text-align: left;
  margin-bottom: 1.75rem;
}

.page-heading h2 {
  margin: 0 0 0.75rem;
  font-family: "Playfair Display", serif;
  font-weight: 900;
  font-size: 2.4rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.page-heading .chapter-kicker {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
}

.chapter-date {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.9rem;
  text-align: right;
  margin-bottom: 1.75rem;
  color: rgba(0,0,0,0.65);
}

/* drop cap on first paragraph of LEFT page only */
.left-page .page-inner p:first-of-type::first-letter {
  float: left;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 0.9;
  padding-right: 0.25rem;
  padding-top: 0.25rem;
  text-transform: uppercase;
}

/* default italics */
em {
  font-style: italic;
}


/* -------------------------------------------------------------
   MOBILE BEHAVIOR (reader stacks pages on small screens)
------------------------------------------------------------- */
@media (max-width: 960px) {

  .open-book {
    padding: 2.25rem 1.75rem;
    min-height: auto;
  }

  .spread-active {
    display: block;
  }

  .page {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 1.5rem;
  }

  .page:last-child {
    border-bottom: none;
    margin: 0;
    padding: 0;
  }

  .page-inner {
    max-width: 100%;
  }

  .page-number-row {
    margin-top: 0.25rem;
  }
}


/* -------------------------------------------------------------
   BOOK CONTROLS (container centering Prev/Next UI)
------------------------------------------------------------- */
.book-controls {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.page-controls {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-family: "Playfair Display", serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
}


/* -------------------------------------------------------------
   PAGE TURN BUTTONS (FINAL — all override conflicts resolved)
------------------------------------------------------------- */
#wrapper, #container {
  position: relative;
}

/* FINAL version of page-turn button */
.page-turn {
  position: absolute;       /* final chosen position mode */
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;            /* highest priority */
  font-size: 3rem;
  font-family: "Playfair Display", serif;
  color: rgba(0,0,0,0.45);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  transition: color 0.2s ease, transform 0.15s ease;
  pointer-events: auto;
}

.page-turn:hover {
  color: rgba(0,0,0,0.75);
  transform: translateY(-50%) scale(1.08);
}

/* final arrow positions */
.page-turn-left {
  left: 1.5rem;
}

.page-turn-right {
  right: 1.5rem;
}

/* hide arrows on smaller desktops */
@media(max-width: 1100px){
  .page-turn {
    display: none;
  }
}


/* -------------------------------------------------------------
   PAGE SPREAD VISIBILITY TRANSITION
------------------------------------------------------------- */
.spread {
  opacity: 0;
  transition: opacity 0.35s ease;
}

.spread.spread-active {
  opacity: 1;
}


/* -------------------------------------------------------------
   SPINE SHADOW — FINAL
------------------------------------------------------------- */
.open-book::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4rem;
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
  opacity: 0.80;

  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(0,0,0,0.12) 43%,
    rgba(0,0,0,0.20) 46%,
    rgba(0,0,0,0.48) 49%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.48) 51%,
    rgba(0,0,0,0.20) 54%,
    rgba(0,0,0,0.12) 57%,
    transparent 100%
  );
}


/* -------------------------------------------------------------
   HIDE READER ON MOBILE
------------------------------------------------------------- */
@media (max-width: 960px) {
  .reader {
    display: none !important;
  }
}