/* === Brindlewood Bay — Ivory & Ink with Red Rules === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;700&family=Inter:wght@400;600&display=swap');

@font-face {
  font-family: "ITC Benguiat Book Condensed";
  src:
    url("/assets/fonts/ITC Benguiat Book Condensed Regular.woff2") format("woff2"),
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* avoids invisible text on load */
}
@font-face {
  font-family: "Quaint Gothic";
  src:
    url("/assets/fonts/Quaint Gothic SG OT Regular.woff2") format("woff2"),
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* avoids invisible text on load */
}

body.brindlewood {
  /* Typography */
  --font-heading: "Quaint Gothic", sans-serif;
  --font-body: "ITC Benguiat Book Condensed";

  /* Paper & ink */
  --paper:        #faf4e8;  /* warm ivory page */
  --surface:      #f3ebde;  /* cards/panels */
  --ink:          #23252b;  /* very dark grey (not pure black) */
  --ink-muted:    #5c6069;  /* secondary text */
  --rule:         #b84b49;  /* medium red rules */
  --rule-deep:    #8e3432;  /* deeper red accent */

  /* Links (bookish cool blue; warms on hover) */
  --link:         #566ea8;
  --link-hover:   #b84b49;

  /* Sidebar */
  --sidebar-bg:   #efe5d6;  /* slightly darker ivory */
  --sidebar-text: var(--ink);
  --sidebar-link: #566ea8;
  --sidebar-link-hover: #b84b49;
  --sidebar-rule: #e0d2bf;

  /* Callouts */
  --callout-bg:   var(--surface);
  --callout-border: #e2d6c5;

  background: var(--paper);
  color: var(--ink);

  font-family: var(--font-body);
  font-size: clamp(18px, 1vw + 16px, 21px);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings */
body.brindlewood h1,
body.brindlewood h2,
body.brindlewood h3 {
  font-family: var(--font-heading);
  color: var(--ink);
  letter-spacing: 0.01em;
  margin-top: 1.2em;
}

/* Paragraphs & muted text */
body.brindlewood p,
body.brindlewood li { color: var(--ink); }
body.brindlewood .muted { color: var(--ink-muted); }

/* Links */
body.brindlewood a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dotted rgba(86,110,168,0.45);
  transition: color .2s ease, border-color .2s ease, text-shadow .2s ease;
}
body.brindlewood a:hover {
  color: var(--link-hover);
  border-color: rgba(184,75,73,0.55);
  text-shadow: 0 0 4px rgba(184,75,73,0.18);
}

/* Horizontal rules — “printed” red line */
body.brindlewood hr {
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rule) 0%, var(--rule-deep) 60%, var(--rule) 100%);
  opacity: .9;
  margin: 1rem 0 1.25rem;
}
/* Optional: lighter hairline */
body.brindlewood hr.hairline {
  height: 1px;
  background: var(--rule);
  opacity: .6;
}

/* Sidebar */
body.brindlewood .sidebar {
  background: var(--sidebar-bg);
  color: var(--sidebar-text);
}
body.brindlewood .sidebar a {
  color: var(--sidebar-link);
  border-bottom: 1px dotted rgba(86,110,168,.35);
}
body.brindlewood .sidebar a:hover {
  color: var(--sidebar-link-hover);
  border-color: rgba(184,75,73,.55);
}
body.brindlewood .sidebar h2,
body.brindlewood .sidebar h3 { color: var(--sidebar-text); }
body.brindlewood .sidebar hr {
  background: var(--sidebar-rule);
  height: 1px;
  opacity: .9;
}

/* Cards / callouts */
body.brindlewood .card,
body.brindlewood .callout {
  background: var(--callout-bg);
  border: 1px solid var(--callout-border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

/* Blockquotes */
body.brindlewood blockquote {
  margin: 1.2em 0;
  padding: .75em 1em;
  background: var(--surface);
  border-left: 3px solid var(--rule);
  color: var(--ink);
}

/* Display title utility (optional) */
body.brindlewood .display-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 3.2vw + 1rem, 3.8rem);
  line-height: 1.06;
  letter-spacing: 0.012em;
}

/* Focus & selection */
body.brindlewood :focus { outline: 2px solid var(--rule); outline-offset: 2px; }
body.brindlewood ::selection { background: rgba(184,75,73,0.18); color: var(--ink); }
/* === CHAPTER HEADING (H2/H3) ========================================= */
body.brindlewood { counter-reset: chapter; }

body.brindlewood h2.chapter,
body.brindlewood h3.chapter {
  position: relative;
  font-family: var(--font-heading);
  color: var(--ink);
  letter-spacing: 0.04em;
  font-variant-caps: small-caps;
  text-transform: uppercase;
  margin-top: 1.6em;
  margin-bottom: 0.5em;
}

/* Auto-numbered version (default) */
body.brindlewood h2.chapter { counter-increment: chapter; }
body.brindlewood h2.chapter::before {
  content: "Chapter " counter(chapter) " · ";
  color: var(--rule-deep);
  letter-spacing: 0.06em;
}

body.brindlewood h2.chapter::after,
body.brindlewood h3.chapter::after {
  content: "";
  display: block;
  height: 2px;
  width: 110px;                     /* underline length */
  background: var(--rule);
  margin-top: 0.35rem;
  opacity: .9;
}

/* If you ever want a chapter style with NO number */
body.brindlewood h2.chapter.no-number::before { content: ""; }

/* === RUBRIC LABEL ===================================================== */
/* Apply to a heading (H3 recommended) for a red, small-caps section label */
body.brindlewood .rubric {
  font-family: var(--font-heading);
  font-variant-caps: small-caps;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rule-deep);
}

body.brindlewood h3.rubric {
  margin-top: 1.4em;
  margin-bottom: .5em;
}
body.brindlewood h3.rubric + hr {
  height: 2px; border: 0;
  background: var(--rule);
  opacity: .85;
  margin: .25rem 0 1rem;
}

/* === UTILITIES ======================================================== */
/* Small-caps inline utility */
body.brindlewood .sc {
  font-variant-caps: small-caps;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Optional drop cap for the first paragraph of a section */
body.brindlewood .dropcap:first-letter {
  float: left;
  font-family: var(--font-heading);
  font-size: 3.2em;
  line-height: .9;
  margin: .04em .18em 0 0;
  color: var(--rule-deep);
}