/* ==========================================================================
   elevensies.ca — shared styles
   The whole site is framed as Bilbo's Red Book of Westmarch:
   deep-red leather, gold tooling, parchment pages.
   Chapter pages reuse these base styles and add their own accent colour
   per character (see chapter.css sections at the bottom of this file).
   Keep this file plain and commented — it is meant to be easy to edit.
   ========================================================================== */

/* ---------- Fonts (loaded in each page's <head>) ----------
   'IM Fell English'  -> book headings / chapter titles (old-book feel)
   'Cormorant Garamond' -> readable body serif for the stories
   'Caveat'           -> handwriting: margin notes, small annotations   */

:root {
  --leather: #711826;
  --leather-dark: #4d0f1a;
  --leather-light: #8c2436;
  --gold: #c9a44a;
  --gold-bright: #e8cd7e;
  --parchment: #f2e4c1;
  --parchment-dark: #e7d3a7;
  --ink: #2e2118;
  --ink-soft: #57452f;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 30%, #3a2c1e 0%, #241a10 55%, #17100a 100%);
  min-height: 100vh;
}

/* Small strip shown on prototype pages so visitors (and Michael) can
   tell draft pages from finished ones. Remove when a page goes final. */
.prototype-banner {
  background: #1d150c;
  color: #d8c491;
  font-family: "IM Fell English", serif;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 0.45rem 1rem;
  border-bottom: 1px solid var(--gold);
}

/* Handwritten margin-note style */
.margin-note {
  font-family: "Caveat", cursive;
  color: #7a5c2e;
  font-size: 1.15rem;
}

/* ==========================================================================
   CHAPTER PAGES
   A chapter is a close-up of ONE parchment page (Michael, 2026-10-05):
   the paper fills the screen and the page simply scrolls — no book
   framing, no fixed aspect ratio. The parchment texture repeats down
   the page behind the text.
   ========================================================================== */

body.chapter-page {
  /* parchment-uniform.webp has even edges on purpose, so it tiles down a
     long page without visible seams (parchment.webp's aged edges would
     repeat as a grid). The warm wash over it keeps the aged feel. */
  background:
    linear-gradient(rgba(214, 178, 116, 0.10), rgba(160, 118, 58, 0.14)),
    #e9d8ae url("assets/parchment-uniform.webp") top center / 900px repeat;
}

/* The column of writing on the page */
.page-sheet {
  max-width: 800px;
  margin: 0 auto;
  padding: 2.4rem clamp(1.4rem, 6vw, 3.6rem) 3.5rem;
}

.back-to-contents {
  font-family: "IM Fell English", serif;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-soft);
}
.back-to-contents:hover { color: var(--ink); }

.chapter-number {
  font-family: "Caveat", cursive;
  font-size: 1.5rem;
  margin: 1.6rem 0 0;
}

.chapter-title {
  font-family: "IM Fell English", serif;
  font-weight: normal;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  margin: 0.2rem 0 0.3rem;
  line-height: 1.1;
}

.chapter-signed-by {
  font-family: "IM Fell English", serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}

/* Thin rule under the chapter header; colour set per character theme */
.chapter-rule {
  border: none;
  border-top: 2px solid var(--ink-soft);
  margin: 0 0 1.8rem;
}

/* ----- Gondor / Faramir accent (silver-blue + white tree) ----- */
.theme-gondor .chapter-rule { border-top-color: #7d94a8; }
.theme-gondor .chapter-number { color: #5d7488; }
.theme-gondor .accent { color: #5d7488; }

/* ----- Media slots (placeholders until Michael's real media arrives) -- */
.media-main {
  border: 1px solid rgba(87, 69, 47, 0.5);
  background: rgba(255, 252, 240, 0.45);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  margin-bottom: 1rem;
}
.media-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 560px) { .media-row { grid-template-columns: 1fr; } }
.media-slot {
  border: 1px dashed rgba(87, 69, 47, 0.6);
  background: rgba(255, 252, 240, 0.35);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.media-slot p, .media-main p {
  font-family: "IM Fell English", serif;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
}

/* ----- Story text ----- */
.story h2 {
  font-family: "IM Fell English", serif;
  font-weight: normal;
  font-size: 1.7rem;
  margin: 0 0 0.8rem;
}
.story p { font-size: 1.22rem; line-height: 1.65; margin: 0 0 1em; }
.story .placeholder {
  font-style: italic;
  color: var(--ink-soft);
}

/* ----- Details table at the foot of a chapter ----- */
.chapter-details {
  margin-top: 2.2rem;
  border-top: 1px solid rgba(87, 69, 47, 0.4);
  padding-top: 1rem;
  font-size: 1.1rem;
}
.chapter-details dt {
  font-family: "IM Fell English", serif;
  display: inline;
}
.chapter-details dd { display: inline; margin: 0 0 0 0.4rem; }
.chapter-details div { margin-bottom: 0.35rem; }

/* ----- Previous / next chapter links ----- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.4rem;
  font-family: "IM Fell English", serif;
}
.chapter-nav a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px dotted var(--ink-soft); }
.chapter-nav a:hover { color: var(--ink); }