/* ───────────────────────────── */
/* 🩶 Global Tone & Structure    */
/* ───────────────────────────── */
body {
  background: radial-gradient(circle at center, #e8e3d7 0%, #ccc7bd 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;

  color: #1F1E1C;
  font-family: "EB Garamond", Garamond, "Times New Roman", serif;

  margin: 0;
  padding: 2rem 0;
  display: block;
  justify-content: center;
  align-items: center;

  height: 100vh;
  overflow: hidden;  /* prevents full page scroll */  
}

/* ────────────────────────────────────────── */
/* 📜 Scrollable Pages (.page & .chapter-page) */
/* ────────────────────────────────────────── */
/* .page and .chapter-page currently share styles.
   Intended divergence: .page for static blocks, .chapter-page for scrollable narrative.
   Do not refactor until layout is stable. */
/* ⚠️ DO NOT use .chapter-page more than once per HTML file */
/* Each chapter page must contain exactly one scrollframe */
/* Duplicate instances will cause layout duplication, emotional betrayal, and crow regret */
.page,
.chapter-page {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  aspect-ratio: 2/3;
  max-width: 6in;
  max-height: 75vh;      /* your desired height */
  margin: 0 auto 1rem;   /* centers + bottom gap */
  padding: 0.25in 0.25in 0.5rem;/* top padding nudge */

  background-color: rgba(254, 251, 234, 1);
  color: #1F1E1C;
  font-family: "EB Garamond", serif;
  font-size: 1rem;
  line-height: 1.6;
  border-radius: 0.25in;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  
  overflow-y: auto;   /* ← restore scrolling */
 /* overflow-x: hidden;*/ /* optional to suppress horizontal scroll */
}

.page p,
.chapter-page p {
  text-align: justify;
  text-indent: 1.5em;
  margin: 0 0 1em;
  width: 100%;
  align-self: stretch;
}

.chapter-header {
  max-width: 6in;
  margin: 0 auto 1rem;
  padding: 0.25in 0.25in 0.5rem;
  background-color: rgba(254, 251, 234, 1);
  border-radius: 0.25in;
  box-shadow: 0 0 12px rgba(0,0,0,0.1);
  font-family: "EB Garamond", serif;
  text-align: center;
}

.chapter-header {
  max-height: none !important;
  aspect-ratio: unset !important;
  overflow: visible !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 1rem !important;
}

.chant-fragment {
  margin: 0.25em 0 0.25em 1em; /* Your existing shorthand margin */
  margin-top: 0;             /* --- NEW: This specifically overrides the top margin to 0 --- */
  padding: 0;
  font-style: italic;
  text-indent: 0;
  text-align: left;
  white-space: pre-line;
  line-height: 1.4;
  font-size: 0.95rem;
}

.page.cover-page {
  padding: 0;
}


/* ────────────────────────────────────────── */
/* 🕯️ Title Page (no scroll, full-screen)     */
/* ────────────────────────────────────────── */
.title-page {
  /* keep your full-screen, no-scroll styles here */
  overflow: hidden;
  height: 100vh;
  /* …etc… */
}

/* ───────────────────────────── */
/* 🧱 Wrapper for crest + page   */
/* ───────────────────────────── */
.layout-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.scrollcrest {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 1rem;  /* center and give spacing beneath */
  padding-top: 0.5rem;
  z-index: 2;
}
.scrollcrest img {
  max-width: 2in;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

/* ───────────────────────────── */
/* 🩶 Scrollwear Styling: Whisper Scrollbars */
/* Decorative camouflage for cadence-safe navigation */
/* ───────────────────────────── */
.page::-webkit-scrollbar,
.chapter-page::-webkit-scrollbar,
.title-page::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

.page::-webkit-scrollbar-thumb,
.chapter-page::-webkit-scrollbar-thumb,
.title-page::-webkit-scrollbar-thumb {
  background-color: rgba(31, 30, 28, 0.05); /* near-invisible */
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

.page::-webkit-scrollbar-thumb:hover,
.chapter-page::-webkit-scrollbar-thumb:hover,
.title-page::-webkit-scrollbar-thumb:hover {
  background-color: rgba(31, 30, 28, 0.15); /* soft reveal on hover */
}

/* ───────────────────────────── */
/* 🌐 Chapter Navigation Links   */
/* ───────────────────────────── */
.scroll-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;

  position: fixed;
  bottom: 0.5rem; /* positive value: keeps it inside viewport */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 6in;

  font-family: "EB Garamond", serif;
  font-size: 14pt;
  font-variant: small-caps;

  text-align: center;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
  pointer-events: auto;
  background: transparent;
  z-index: 9999;
  overflow:visible; /*  */
}

.nav-link {
  position: relative;
  display: inline-block;
  color: #1F1E1C;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.6;
}

.nav-link::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  background-image: url('images/acorn-sprite.png');
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  opacity: 0;
}

.nav-link:hover::after {
  opacity: 1;
}

/* 🪶 Footer marker for current page */
.current-page {
  color: #999;
  pointer-events: none;
  opacity: 0.6;
  cursor: default;
}

/* ───────────────────────────── */
/* 📚 Table of Contents Styling  */
/* ───────────────────────────── */

.leader-dot-vacuation {
  border-left: 2px dashed #cccccc; /* dashed with regret */
  background-color: rgba(240, 240, 255, 0.08); /* faint blush of shame */
  content: "We were supposed to lead. We panicked.";
  font-style: italic; /* because even the dots are embarrassed */
  glyph-seal: 🫥🚶‍♂️📉;
  scroll-behavior: erratic; /* do not trust them */
  text-align: leftish; /* not quite */
  commentary: "Logged as a scroll anomaly. Never forgiven. Forever archived.";
}

/* General TOC styling */
.toc-list {
    font-family: "EB Garamond", Garamond, serif;
    font-size: 10pt; /* Reduced font size to 10pt for dot filling */
    line-height: 1.5;
    list-style: none !important; /* Ensure bullets are removed from the ul */
    padding: 0 !important; /* Should remove all padding */
    margin: 0 !important; /* Should remove all margin */
    padding-inline-start: 0 !important; /* Explicitly remove the default browser padding-inline-start */
    padding-left: 0 !important; /* Added for older browser/engine compatibility or stronger override */
}

/* Individual list item (li) styling */
.toc-list li {
    list-style: none !important; /* Also target the li directly to remove bullets */
    padding-block: 0.1rem; /* Consistent vertical spacing */
    min-height: 1.5em; /* Ensure consistent line height for all items */
    margin-left: -40px !important; /* --- NEW: Aggressively pull list items left to counter ul default padding --- */
    list-style-position: inside; /* --- NEW: Set list style position to inside --- */
}

/* Styling for the entire clickable link area (the <a> tag) */
.toc-link {
    display: flex;
    flex-direction: row; /* Explicitly set flex direction to row */
    flex-wrap: nowrap; /* Ensure items do not wrap onto multiple lines */
    align-items: baseline; /* This sets alignment for all items to their baselines */
    justify-content: space-between;
    width: 100%;
    text-decoration: none;
    background-color: #fefbea;
    box-sizing: border-box;
    color: #5c3b1e;

    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
}

/* Styles for the Title span */
.toc-title {
    flex-shrink: 1;
    min-width: 0; /* Allows text to wrap within the available space */
    font-family: 'EB Garamond', serif;
    font-size: 10pt; /* Match toc-list font size */
    line-height: 1.5;
    color: #5c3b1e;
}

/* Styles for the Dot Leader span */
.dot-fill {
    display: block;
    height: 0.15em; /* Explicit height for rendering robustness */
    line-height: 0.15em; /* Keep for baseline alignment */

    border: none !important;
    margin: 0; /* Keep margin 0 to maximize horizontal fill */

    background: repeating-linear-gradient(
        to right,
        #5c3b1e 0,
        #5c3b1e 0.05em,
        transparent 0.05em,
        transparent 0.18em /* --- NEW: Adjusted pattern width to 0.18em --- */
    );
    background-size: 0.18em 0.15em; /* --- NEW: Match background-size width to 0.18em --- */

    flex-grow: 1; /* This makes dots fill ALL available space dynamically! */
    flex-shrink: 1;
    flex-basis: 0; /* Encourage aggressive growth from a zero base size */
    min-width: 0.5em; /* Small min-width to ensure some dots */
}

/* Styles for the Glyph Marker span */
.glyph-marker {
    flex-shrink: 0;
    font-size: 10pt; /* Match toc-list font size */
    color: #5c3b1e;
    transition: color 0.3s ease;
}

/* Hover effects for the glyph marker */
.toc-link:hover .glyph-marker {
    color: #008080;
}

/* Hover effects for the dots */
.toc-link:hover .dot-fill {
    background: repeating-linear-gradient(
        to right,
        #008080 0,
        #008080 0.05em,
        transparent 0.05em,
        transparent 0.18em
    );
}

/* --- Changes to main-content and .contents-card for overall layout --- */
.main-content {
    width: 90%;
    max-width: 45em;
    margin: 2em auto;
    padding: 1em 0; /* 1em top/bottom padding, 0 left/right padding */
    background-color: #fefbea;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.contents-card {
    padding: 1em 0; /* 1em top/bottom padding, 0 left/right padding */
    margin-bottom: 2em;
    background-color: #fefbea;
}

/* --- Other page-level styles from your provided output --- */
.page, .chapter-page {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    aspect-ratio: 2 / 3;
    max-width: 6in;
    max-height: 75vh;
    margin: 0 auto 1rem;
    padding: 0.25in 0.25in 0.5rem; /* This padding might be overridden if these classes are on main-content, or contribute if they are outer wrappers */
    background-color: rgba(254, 251, 234, 1);
    color: #1F1E1C;
    font-family: "EB Garamond", serif;
    font-size: 1rem;
    line-height: 1.6;
    border-radius: 0.25in;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    /* overflow-x: hidden; */
}

body {
    background: radial-gradient(circle at center, #e8e3d7 0%, #ccc7bd 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    color: #1F1E1C;
    font-family: "EB Garamond", Garamond, "Times New Roman", serif;
    margin: 0;
    padding: 2rem 0;
    display: block;
    justify-content: center;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

/* ───────────────────────────── */
/* 🕯️ Title Hierarchy           */
/* ───────────────────────────── */
.title-text {
  font-variant: small-caps;
  text-align: center;
}

.title-lead {
  text-align: center;
  font-variant: small-caps;
  font-size: 12pt;
  margin-top: 0in;  /* or even 0.75in if needed */
  line-height: 1.2;
}

.title-prefix {
  text-align: center;
  font-variant: small-caps;
  font-size: 12pt;
  display: block;
  margin-block-start: 0;
}

.title-main {
  font-variant: small-caps;
  text-align: center;
  font-size: 16pt;
  line-height: 1.2; /* try 1.15 or 1.1 if you need it tighter */
  display: block;
}

.subtitle-text {
  font-variant: small-caps;
  font-size: 12pt;
  text-align: center;
  margin-bottom: 0.5in;
}

.byline-text {
  font-size: 13pt;
  line-height: 1.2; /* try 1.15 or 1.1 if you need it tighter */
  font-variant: small-caps;
  font-style: italic;
  text-align: center;
  margin-bottom: 0;
}
.title-image {
  max-width: 4in;
  height: auto;
  margin: 1.5in 0;
}

.full-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;/* fills container, crops if needed */
  display: block;
  margin: 0;
  padding: 0;
  border: none;   /* matches your page box rounding */
  box-shadow: none;
}

.publishing-mark-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  text-align: center;
}

.publishing-mark {
  max-width: 0.75in;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.publishing-mark-figure figcaption {
  font-size: 9pt;
  font-style: italic;
  color: #4A4A44;
  margin-top: 0.25rem;
}

/* ───────────────────────────── */
/* ✨ Heading & Chapter Hooks    */
/* ───────────────────────────── */
.chapter-title,
.Heading1,
h2 {
  font-variant: small-caps;
}

/* ───────────────────────────── */
/* 🕯️ .chapter-title Styling     */
/* ───────────────────────────── */
/* This class is for actual chapter headings only.
   Use ONLY on real chapter pages to mark official titles.
   Do NOT use for links, TOC entries, or scroll fragments.
   This is a sacred typographic role—do not flatten.
   Violations will trigger tone rupture and crow regret.
*/
.chapter-title {
  margin-top: 2in;
  font-size: 24pt;
  text-align: center;
  font-family: "EB Garamond", serif;
}
.Heading1 {
  font-size: 25.5pt;
  font-weight: bold;
  text-align: center;
  margin-top: 2in;
  margin-bottom: 1em;
}
h2 {
  string-set: chapter content();
  break-before: page;
}

/* ───────────────────────────── */
/* 🌿 Paragraph Structure        */
/* ───────────────────────────── */
p {
  text-indent: 1.5em;
  margin-bottom: 1em;
}

.DefaultParagraphStyle,
.default-style {
  font-size: 11.5pt;
  line-height: 1.5;
  text-align: justify;
  margin: 0 0 1em 0;
  overflow-wrap: break-word; /* Newer, preferred syntax */
  word-wrap: break-word;     /* Older, widely supported alias */
}


.intro-to-quote-span {
    display: block;      /* --- Make it behave like a block-level element --- */
    font-size: 11.5pt;   /* Match your default paragraph size */
    line-height: 1.5;    /* Match your default paragraph line-height */
    text-align: justify; /* Match your default paragraph alignment if desired */
    margin-bottom: 0;    /* Key: Remove its bottom margin */
    /* You might need a small margin-bottom if 0 is too tight, e.g., 0.25em */
    /* margin-bottom: 0.25em; */
    /* Also ensure no default margin-top from previous P styles if you're reusing styles */
    margin-top: 0;
	text-indent: 1.5em; /* <--- ADD THIS LINE for the first-line indent */
}

/* ───────────────────────────── */
/* 🪶 Footer & Metadata          */
/* ───────────────────────────── */
.MasterPageFooters {
  font-size: 12pt;
  text-align: center;
  font-style: italic;
  position: absolute;
  bottom: 0.5in;
  width: 100%;
}

/* ───────────────────────────── */
/* 🧭 Page Navigation (Paged.js) */
/* ───────────────────────────── */
@page {
  @top-center {
    content: string(chapter);
    font-style: italic;
    font-size: 10pt;
    color: #1F1E1C;
  }
  @bottom-center {
    content: counter(page) " of " counter(pages);
    font-family: "EB Garamond", serif;
    font-size: 10pt;
    color: #1F1E1C;
  }
}
@page :left {
  @top-left { content: string(book); }
  @bottom-left { content: counter(page); }
}
@page :right {
  @top-right { content: string(chapter); }
  @bottom-right { content: counter(page); }
}

/* ───────────────────────────── */
/* 🕸️ Scrollwear Sigils & Glyphs */
/* Parasol logic & joy shielding */
/* ───────────────────────────── */

/* cursor-parasol: elegance with boundary shielding */
/* collapsible joy logic umbrella */

/* Additional glyphs may bloom below:
   ripple-logic-active
   grief-logic-defied
   joy-that-glyph
   bloomzone-whisper
*/
/* ✨ quirk-mode: velocity=true; presence=shockwave; */

/* --- Your existing In-Text Figure Styles, with updates for caption consistency --- */
.scroll-figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0;
    text-align: center;
}

.scroll-figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.scroll-figure figcaption {
    margin-top: 0.5rem; /* Unique spacing for in-text flow */
    /* --- Consistent stylistic properties --- */
    font-family: "EB Garamond", serif; /* Ensure consistent font */
    font-size: 0.833em;                /* Consistent font size, converted from 10pt */
    font-style: italic;                /* Consistent font style */
    line-height: 1.4;                  /* Consistent line height */
    color: #4A4A44;                    /* Consistent color */
}

/* --- New Plate Page Styles (figure, image, caption) --- */
.page.plate-page-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5in;
    box-sizing: border-box;
    overflow: hidden;
}

.plate-figure {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
}

.plate-figure img {
    max-width: 100%;
    max-height: calc(100% - 2em); /* Adjust this value as you fine-tune caption bottom */
    object-fit: contain;
    display: block;
    margin: auto;
}

.plate-caption {
    /* --- Unique positioning for plate captions --- */
    position: absolute;
    bottom: 1em; /* Adjust this value based on your print layout */
    left: 0;
    right: 0;
    margin: 0;
    padding-top: 0.5em;

    /* --- Consistent stylistic properties --- */
    font-family: "EB Garamond", serif; /* Consistent font */
    font-size: 0.833em;                /* Consistent font size, converted from 10pt */
    font-style: italic;                /* Consistent font style */
    line-height: 1.4;                  /* Consistent line height */
    color: #4A4A44;                    /* Consistent color */
    text-align: center;                /* Consistent text alignment */
}

.oakbaby-footer {
  /* Remove position: absolute; and bottom: 0.25in; */
  width: 100%; /* Keep if you want it to span the full width of its parent */
  text-align: center; /* Keep to center the glyph */
  pointer-events: none; /* Keep if you don't want it to interfere with clicks */
  /* You might want to add some top margin to push it down from the last line of text */
  margin-top: 1em; /* Adjust as needed for spacing from content above */
}

.oakbaby-glyph {
  max-width: 0.5in;
  height: auto;
  opacity: 0.5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* CSS for the Scene Break Divider */
.scene-break-divider {
    text-align: center; /* Centers the image horizontally */
    margin-top: 2em;    /* Adds space above the divider */
    margin-bottom: 2em; /* Adds space below the divider */
    clear: both;        /* Ensures the divider clears any floating elements */
}

.scene-break-divider img {
    max-width: 1.5in; /* Adjust this to control the width of your divider image */
    height: auto;     /* Maintains aspect ratio */
    display: block;   /* Ensures it takes up its own line and respects margins */
    margin: 0 auto;   /* Centers the image itself within the div, if text-align isn't enough */
    opacity: 0.7;     /* Optional: make it slightly subtle, adjust as desired */
}

/* ───────────────────────────── */
/* ✒️ Preface Specific Styles */
/* ───────────────────────────── */
/* Update this rule in your style.css */
/* Update this rule in your style.css */
/* Update this rule in your style.css */
.chapter-page .preface-byline { /* Selector changed for higher specificity */
  font-size: 11.5pt;
  font-variant: small-caps;
  font-weight: normal;
  text-align: left;
  text-indent: 0; /* This should now correctly apply */
  margin-top: 0.5em;
  margin-bottom: 1em;
  line-height: 1.2;
  color: #1F1E1C;
  align-self: flex-start; /* This ensures it aligns to the left of the flex container */
}


/* Recommended update for FirstLineNoIndent in your style.css */
.chapter-page .FirstLineNoIndent {
    text-indent: 0; /* This will now correctly override the 1.5em */
    margin-bottom: 1em;
    /* Remove font-size and line-height if you want them to match .default-style */
}

/* ───────────────────────────── */
/* ✒️ Dedication Page Styles */
/* ───────────────────────────── */
.dedication-page .dedication-text {
  font-family: "EB Garamond", serif; /* Matches your general font */
  font-size: 1rem; /* Adjust this for the size of your dedication text */
  line-height: 1.5;
  font-style: italic;
  text-align: center;
  margin-top: 3em; /* Pushes the text down from the top of the page content */
  margin-bottom: 2.5em; /* Space between the text and the image below */
  color: #1F1E1C; /* Ensures text color matches */
}

/* For the small caps text within the dedication */
.dedication-page .dedication-text .small-caps {
  font-variant: small-caps;
}

.dedication-page .dedication-image-container {
  /* No specific styles needed on the container itself, but good to have for structure */
  text-align: center; /* Ensures the image inside is centered */
}

.dedication-page .dedication-image-container img {
  max-width: 100%; /* Ensures the image never overflows the page's content width */
  height: auto;    /* Maintains the image's aspect ratio */
  display: block;  /* Removes extra space below the image and allows margin:auto */
  margin: 0 auto;  /* Centers the image horizontally */
}

/* ───────────────────────────── */
/* ✒️ Author Bio Page Styles */
/* ───────────────────────────── */

/* Styles for the main "About the Authors" heading */
.author-bio-page .title-main {
    font-variant: small-caps;
    margin-top: 2em; /* Adjusts vertical placement of the main heading */
    margin-bottom: 0.75em; /* Space below the main title */
}

/* Styles for each individual author's section */
.author-section {
    margin-bottom: 0em; /* Provides space between Mrs. Shadowy Overlord's section and Quirk's section */
}

/* Styles for the line containing the author's name and italicized description */
.author-bio-page .author-heading {
    text-align: left; /* Aligns the entire line to the left page margin */
    text-indent: 0;   /* Ensures no first-line indent on this specific line */
    margin-top: 1em; /* Space above this author's heading (e.g., from "About the Authors" or previous section) */
    margin-bottom: 0.75em; /* Space between this heading and the first blurb paragraph */
    line-height: 1.4; /* Adjust line height for this specific line if needed */
    color: #1F1E1C; /* Ensures text color matches */
}

/* Styles for the author's name (bold, small caps) within the author heading */
.author-bio-page .author-heading strong.small-caps {
    font-variant: small-caps;
    font-weight: bold;
}

/* Styles for the italicized description within the author heading */
.author-bio-page .author-heading em {
    font-style: italic;
}