@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Cormorant+SC:wght@500;600&family=Cinzel:wght@500;600&family=Markazi+Text:wght@400;500;600&display=swap');
@page { size: A4 landscape; margin: 0; }
html, body { margin: 0; padding: 0; background: #04080d; }
body {
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    color: #f5edd4;
    font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.page {
    min-height: auto;
    box-sizing: border-box;
    padding: 16mm 24mm 18mm 24mm;
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    gap: 7mm;
    page-break-after: always;
    position: relative;
}
.page:last-child { page-break-after: auto; }

/* Persian source block — sits in page background, outside the card */
.fa-source {
    width: 100%; max-width: 168mm;
    margin: 0;
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    font-size: calc(11.5pt * var(--fs-scale, 1)); line-height: 1.85;
    color: #9d8454;
    text-align: center;
}
.fa-source .fa-seg { margin: 0 0 4mm 0; }
.fa-source .fa-seg + .fa-seg {
    padding-top: 4mm;
    border-top: 1px solid #1d2a38;
}
.fa-source .fa-ornament {
    text-align: center;
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    color: #bf9540;
    opacity: 0.55;
    font-size: 9pt; letter-spacing: 0.6em;
    margin: 0 0 4mm 0;
}

/* The card — spotlight on the English voice */
.card {
    background: #0a1119;
    width: 100%; max-width: 224mm;
    padding: 14mm 22mm 16mm 22mm;
    border: 1px solid #1f2d3e;
    box-shadow: 0 1px 0 #0d1623, 0 22px 44px rgba(0,0,0,0.75);
    position: relative;
    box-sizing: border-box;
}
.card::before {
    content: ''; position: absolute;
    top: 5mm; left: 5mm; right: 5mm; bottom: 5mm;
    border: 1px solid #152031;
    pointer-events: none;
}

.tr-heading {
    text-align: center; position: relative; z-index: 1;
    margin: 4mm 0 8mm 0;
}
.tr-heading .tr-fa {
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    font-size: 20pt; color: #e0c478;
    margin-bottom: 4mm; font-weight: 500;
}
.tr-heading .tr-en {
    font-family: 'Cinzel', 'Trajan Pro', 'Hoefler Text', 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-style: normal; font-weight: 500;
    font-size: 16pt; letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #e7c97d;
}
.tr-heading::after {
    content: '◈ ◈ ◈'; display: block;
    color: #bf9540; letter-spacing: 0.8em;
    font-size: 11pt; margin-top: 6mm;
}

.ch-heading {
    text-align: center; position: relative; z-index: 1;
    margin: 0 0 8mm 0;
    padding-bottom: 5mm;
    border-bottom: 1px solid #2a3a4d;
}
.ch-heading .ch-fa {
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    color: #c2a86a; font-size: calc(15pt * var(--fs-scale, 1));
    margin-bottom: 1.5mm;
}
.ch-heading .ch-en {
    font-family: 'Cormorant SC', 'Cormorant Garamond', 'Hoefler Text', 'EB Garamond', Georgia, serif;
    font-variant: small-caps;
    color: #c2a86a; font-style: normal;
    font-weight: 500;
    font-size: calc(17.5pt * var(--fs-scale, 1)); letter-spacing: 0.10em;
}

.subch-heading {
    text-align: center; position: relative; z-index: 1;
    margin: 0 0 6mm 0;
}
.subch-heading .subch-fa {
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    color: #c2a86a; font-size: calc(13pt * var(--fs-scale, 1));
    margin-bottom: 1mm; opacity: 0.95;
}
.subch-heading .subch-en {
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    color: #c2a86a; font-style: italic;
    font-weight: 500;
    font-size: calc(14pt * var(--fs-scale, 1)); letter-spacing: 0.04em;
}
.subch-heading.lvl4 .subch-fa { font-size: 11pt; }
.subch-heading.lvl4 .subch-en { font-size: 11.5pt; }
.subch-heading.lvl5 .subch-fa { font-size: 10.5pt; opacity: 0.9; }
.subch-heading.lvl5 .subch-en { font-size: 11pt; font-style: italic; }

.prose {
    position: relative; z-index: 1;
    font-size: 13pt; line-height: 1.78;
    text-align: center;
    margin: 0 0 5mm 0;
    color: #f5edd4;
}
.prose p { margin: 0 0 3mm 0; }

.card .en-seg {
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    font-size: calc(12pt * var(--fs-scale, 1)); line-height: 1.78;
    text-align: center;
    color: #f5edd4;
    letter-spacing: 0.005em;
}
.card .en-seg p { margin: 0 0 3mm 0; }
.card .en-seg p:last-child { margin-bottom: 0; }
.card .en-seg.first-seg::first-letter {
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    font-size: 38pt; line-height: 0.9;
    vertical-align: -3pt; padding: 0 1mm 0 0;
    color: #f0c560;
    font-weight: 500;
    text-shadow: 0 0 1px rgba(240,197,96,0.35), 0 0 14px rgba(240,197,96,0.18);
}
.card .en-seg.first-seg::first-line {
    font-variant: small-caps;
    letter-spacing: 0.08em;
    color: #ffffff;
    font-weight: 500;
}

/* Reader's note — outside card, plain italic in page background */
.note {
    width: 100%; max-width: 224mm;
    box-sizing: border-box;
    margin: 0;
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif;
    font-size: calc(14.5pt * var(--fs-scale, 1)); line-height: 1.74;
    color: #d3c59d;
    font-style: normal;
    text-align: left;
    padding: 6mm 11mm 6mm 10mm;
    border-left: 3px solid #bf9540;
    background: rgba(191, 149, 64, 0.055);
}
.note em { color: #ece0c0; }
.note::before {
    content: 'Reader’s note';
    display: block;
    text-align: left;
    color: #c2a86a;
    opacity: 1;
    font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
    font-variant: small-caps;
    font-weight: 500;
    font-style: normal;
    font-size: calc(10pt * var(--fs-scale, 1));
    margin-bottom: 3mm;
    letter-spacing: 0.16em;
}
.note p { margin: 0 0 2.5mm 0; }
.note p:last-child { margin-bottom: 0; }

em { font-style: italic; }
strong { font-weight: 600; color: #ffffff; }

.folio {
    position: absolute; bottom: 6mm; right: 24mm;
    font-size: 9pt; color: #5a6877;
    font-style: italic; letter-spacing: 0.06em;
}

.theme-label {
    position: fixed; top: 8mm; left: 14mm;
    font-family: 'Cinzel', 'Trajan Pro', 'Hoefler Text', 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-size: 9pt; color: #bf9540;
    letter-spacing: 0.22em; text-transform: uppercase;
    z-index: 10; font-weight: 500;
}

/* ─────────────────────  Treatise hero opening page  ───────────────────── */
.hero-page {
    min-height: 100vh;
    box-sizing: border-box;
    padding: 14mm;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    page-break-after: always;
    position: relative;
}
.hero-page:last-child { page-break-after: auto; }
.hero-block {
    width: 100%; max-width: 220mm;
    height: 158mm; box-sizing: border-box;
    padding: 22mm 0;
    display: flex; flex-direction: column;
    justify-content: space-between;
    align-items: center; text-align: center;
}
.hero-basmala {
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    font-size: 12pt; color: #bf9540; opacity: 0.7;
    letter-spacing: 0.02em;
}
.hero-mid {
    display: flex; flex-direction: column;
    align-items: center; gap: 9mm;
}
.hero-rules-top, .hero-rules-bot { opacity: 0.85; }
.double-rule {
    display: flex; flex-direction: column;
    align-items: center; gap: 1.2mm;
}
.double-rule .thick { width: 60mm; height: 1.6pt; background: #f0c560; }
.double-rule .thin  { width: 60mm; height: 0.4pt; background: #bf9540; }
.hero-titleblock {
    display: flex; flex-direction: column;
    align-items: center; gap: 4mm;
}
.hero-treatise-label {
    font-family: 'Cinzel', 'Trajan Pro', 'Hoefler Text', 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
    font-size: 10pt; letter-spacing: 0.55em;
    text-transform: uppercase; color: #bf9540;
    padding-left: 0.55em;
}
.hero-en-main {
    font-family: 'Cinzel', 'Trajan Pro', 'Hoefler Text', 'Cormorant Garamond', 'EB Garamond', Georgia, serif; font-weight: 500;
    font-size: 26pt; letter-spacing: 0.18em;
    text-transform: uppercase; color: #ffffff;
    max-width: 200mm;
}
.hero-en-sub {
    font-family: 'Cormorant Garamond', 'Hoefler Text', 'Garamond Premier Pro', 'Adobe Caslon Pro', 'Sabon', 'EB Garamond', 'Iowan Old Style', 'Charter', 'Cardo', 'Constantia', 'Palatino Linotype', Georgia, serif; font-style: italic;
    font-size: 13pt; color: #f5edd4; opacity: 0.88;
    letter-spacing: 0.05em;
    margin-top: 0.5mm;
    max-width: 200mm;
}
.hero-fa {
    direction: rtl; font-family: 'Markazi Text', 'Amiri', 'Amiri Quran', 'Noto Naskh Arabic', 'Scheherazade New', 'Traditional Arabic', 'Tahoma', serif;
    font-size: 16pt; color: #9d8454;
    margin-top: 1mm;
    font-weight: 500;
}

@media print {
    .page, .hero-page { height: 210mm; min-height: auto; }
    .theme-label { display: none; }
}

/* ===========================================================================
   Minimal chrome on top of the Midnight Scholar book layout.
   Strategy: content-first.  No permanent topbar, no docked sidebar.
   Just a small dim floating toolbar in the top-right; overlays on demand.
=========================================================================== */

/* ------- Theme tokens -------------------------------------------------- */
html[data-theme="dark"] {
  --chrome-bg:        #0a1119;
  --chrome-fg:        #f5edd4;
  --chrome-dim:       #8d97a8;
  --chrome-rule:      #1f2d3e;
  --chrome-rule-soft: #152031;
  --chrome-gold:      #bf9540;
  --chrome-gold-bright:#f0c560;
  --chrome-hover:     #14202e;
  --chrome-active:    #1a2a3c;
  --popover-bg:       #0f1924;
  --popover-border:   #2a3a4d;
  --highlight:        rgba(240, 197, 96, 0.18);
  --scrim:            rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] {
  --chrome-bg:        #f5eede;
  --chrome-fg:        #2b2618;
  --chrome-dim:       #6b614c;
  --chrome-rule:      #d8ceaf;
  --chrome-rule-soft: #e8e0c6;
  --chrome-gold:      #a07028;
  --chrome-gold-bright:#7d4f10;
  --chrome-hover:     #ede4c8;
  --chrome-active:    #e0d5b3;
  --popover-bg:       #fbf5e0;
  --popover-border:   #c9b988;
  --highlight:        rgba(160, 112, 40, 0.18);
  --scrim:            rgba(40, 30, 10, 0.4);
}

/* ------- Chrome-wide font-rendering override -------------------------- */
/* The layout sets -webkit-font-smoothing: antialiased which forces Chrome
   off its native subpixel anti-aliasing onto grayscale AA, making the
   Cormorant body type look spindly.  Restore subpixel rendering, and bump
   the body to the 500 weight (which is already loaded) so the prose has
   the heft we want on every browser. */
body {
  -webkit-font-smoothing: auto !important;
  -moz-osx-font-smoothing: auto !important;
}
/* Body bumped from the 400 default to 600 for screen legibility; the
   Reader's note bumps to 500 italic so it still reads lighter than body
   but stops feeling spindly.  Specificity matches `.card .en-seg` from the
   core layout (0,2,0) and `!important` is a belt-and-braces guard against
   any future override. */
.card .en-seg,
.card .en-seg p,
.card .prose p {
  font-weight: 600 !important;
  font-size: calc(15.5pt * var(--fs-scale, 1)) !important;
}
.note,
.note p {
  font-weight: 500 !important;
  font-style: normal !important;
}

/* Light-theme page repaint */
html[data-theme="light"] body { background: #f0e8cf !important; color: #2b2618 !important; }
html[data-theme="light"] .page, html[data-theme="light"] .hero-page { background: transparent !important; }
html[data-theme="light"] .card {
  background: #fbf5e0 !important;
  border-color: #c9b988 !important;
  box-shadow: 0 1px 0 #e8dfbc, 0 18px 36px rgba(80, 60, 20, 0.15) !important;
  color: #2b2618 !important;
}
html[data-theme="light"] .card::before { border-color: #d8ceaf !important; }
html[data-theme="light"] .en-seg, html[data-theme="light"] .prose, html[data-theme="light"] .prose p { color: #2b2618 !important; }
html[data-theme="light"] strong { color: #1a160a !important; }
html[data-theme="light"] .fa-source { color: #6b4a1c !important; }
html[data-theme="light"] .note { color: #5c4a22 !important; background: rgba(150, 110, 30, 0.08) !important; border-left-color: #b88a2a !important; }
html[data-theme="light"] .note::before { color: #8a6420 !important; }
html[data-theme="light"] .note em { color: #4a3512 !important; }   /* dark-theme em (#ece0c0) is invisible on parchment */
html[data-theme="light"] .ch-heading .ch-fa { color: #8a6420 !important; }
html[data-theme="light"] .ch-heading .ch-en { color: #2b2618 !important; }
html[data-theme="light"] .ch-heading { border-bottom-color: #c9b988 !important; }
html[data-theme="light"] .tr-heading .tr-fa, html[data-theme="light"] .tr-heading .tr-en { color: #8a6420 !important; }
html[data-theme="light"] .hero-en-main, html[data-theme="light"] .hero-treatise-label,
html[data-theme="light"] .hero-en-sub, html[data-theme="light"] .hero-fa,
html[data-theme="light"] .hero-basmala { color: #6b4a1c !important; }
html[data-theme="light"] .hero-rules-top .thick, html[data-theme="light"] .hero-rules-bot .thick { background: #a07028 !important; }
html[data-theme="light"] .hero-rules-top .thin,  html[data-theme="light"] .hero-rules-bot .thin  { background: #c9b988 !important; }
html[data-theme="light"] .dropcap, html[data-theme="light"] .en-seg.first-seg::first-letter { color: #7d4f10 !important; text-shadow: none !important; }
html[data-theme="light"] .card .en-seg.first-seg::first-line {
  color: #2b2618 !important;
}
html[data-theme="light"] .folio { color: #9a8a6a !important; }

/* ------- Page flow: book fills the viewport, no chrome reservations --- */
.book { min-width: 0; }

/* Anchor scroll targets a bit below where they would otherwise sit, so the
   chapter heading isn't pressed against the very top of the viewport. */
.ch-heading, .tr-heading, .hero-page, .page { scroll-margin-top: 24px; }

/* ------- Floating toolbar (top-right) --------------------------------- */
.ft {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 40;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  opacity: 0.35;
  transition: opacity 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.ft:hover, .ft:focus-within {
  opacity: 1;
  background: var(--chrome-bg);
  border-color: var(--chrome-rule);
}
.ft-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--chrome-fg);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease;
}
.ft-btn:hover, .ft-btn:focus-visible {
  background: var(--chrome-hover);
  outline: none;
}
/* When any overlay is open, hide the floating toolbar so its buttons
   don't sit on top of the drawer/search/TOC close × . */
body.has-overlay .ft { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }


/* Generic iconbtn (used inside the close buttons of overlays) */
.iconbtn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--chrome-fg);
  width: 32px; height: 32px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 18px;
}
.iconbtn:hover { background: var(--chrome-hover); }

/* ------- Scrim backdrop ----------------------------------------------- */
.scrim {
  position: fixed; inset: 0;
  background: var(--scrim);
  z-index: 35;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ------- TOC overlay (book-style scholarly list) ---------------------- */
.toc {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 340px; max-width: 90vw;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%, transparent 82%, rgba(255,255,255,0.02)),
    var(--chrome-bg);
  color: var(--chrome-fg);
  font-family: 'Cormorant Garamond', serif;
  padding: 0;
  z-index: 38;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(.2,.7,.3,1);
  box-shadow: 0 0 60px rgba(0,0,0,0.55);
  border-right: 1px solid var(--chrome-rule);
}
.toc::after {
  /* Inner gold hairline on the right edge — subtle illumination */
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--chrome-gold) 18%, var(--chrome-gold) 82%, transparent 100%);
  opacity: 0.25;
  pointer-events: none;
}
.toc.is-open { transform: translateX(0); }

.toc-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: none; color: var(--chrome-dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 4px 10px;
  z-index: 2;
}
.toc-close:hover { color: var(--chrome-fg); }

/* --- Hero header ----------------------------------------------------- */
.toc-hero {
  text-align: center;
  padding: 38px 22px 26px 22px;
  border-bottom: 1px solid var(--chrome-rule-soft);
  position: relative;
}
.toc-hero::before, .toc-hero::after {
  content: '';
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--chrome-gold), transparent);
  opacity: 0.45;
}
.toc-hero::before { top: 0;    display: none; }
.toc-hero::after  { bottom: 0; display: none; }
.toc-hero-ornament {
  font-family: 'Cormorant Garamond', serif;
  color: var(--chrome-gold);
  letter-spacing: 0.7em;
  font-size: 9pt;
  opacity: 0.55;
  margin-bottom: 16px;
}
.toc-hero-pre {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 12pt;
  color: var(--chrome-dim);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.toc-hero-key {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 22pt;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--chrome-fg);
  line-height: 1.1;
}
.toc-hero-rule {
  width: 80px;
  height: 1px;
  margin: 14px auto 12px auto;
  background: linear-gradient(90deg, transparent, var(--chrome-gold), transparent);
  position: relative;
}
.toc-hero-rule::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--chrome-gold);
  transform: translate(-50%, -50%);
  opacity: 0.85;
}
.toc-hero-fa {
  font-family: 'Markazi Text', 'Amiri', serif;
  font-size: 17pt;
  color: var(--chrome-gold);
  direction: rtl;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* --- Treatise list -------------------------------------------------- */
.toc-list { list-style: none; margin: 0; padding: 14px 0 22px 0; }

.toc-sep {
  text-align: center;
  margin: 8px 0;
  position: relative;
  height: 14px;
}
.toc-sep::before, .toc-sep::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 64px; height: 1px;
  background: var(--chrome-rule);
}
.toc-sep::before { left:  calc(50% - 78px); }
.toc-sep::after  { right: calc(50% - 78px); }
.toc-sep > span {
  display: inline-block;
  color: var(--chrome-gold);
  opacity: 0.55;
  font-size: 10pt;
  letter-spacing: 0.4em;
  background: var(--chrome-bg);
  padding: 0 8px;
  position: relative;
  z-index: 1;
}

.toc-t {
  margin: 0;
  padding: 0;
}
.toc-t-head {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  color: var(--chrome-fg);
  font-family: inherit;
  text-align: center;
  padding: 14px 22px 14px 22px;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.toc-t-head:hover { background: var(--chrome-hover); }
.toc-t-head:focus-visible { outline: 1px solid var(--chrome-rule); outline-offset: -3px; }

.toc-t-label {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 500;
  font-size: 8.5pt;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--chrome-gold);
  margin-bottom: 5px;
  padding-left: 0.5em; /* compensate for tracking right-bias */
}
.toc-t-title {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 14pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chrome-fg);
  line-height: 1.25;
  padding-left: 0.5em;
}
.toc-t-sub {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 11pt;
  color: var(--chrome-dim);
  margin-top: 2px;
}
.toc-t-fa {
  display: block;
  font-family: 'Markazi Text', 'Amiri', serif;
  font-size: 13pt;
  color: var(--chrome-gold);
  opacity: 0.75;
  direction: rtl;
  margin-top: 7px;
}
.toc-t-caret {
  position: absolute;
  right: 16px;
  top: 18px;
  color: var(--chrome-dim);
  font-size: 14pt;
  font-family: 'Cormorant Garamond', serif;
  line-height: 1;
  transition: transform 0.2s ease;
  user-select: none;
}
.toc-t.is-open .toc-t-caret { transform: rotate(45deg); color: var(--chrome-gold); }

.toc-c-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.32s ease;
}
.toc-t.is-open .toc-c-list { max-height: 2400px; padding: 0 0 8px 0; pointer-events: auto; }
.toc-c { margin: 1px 0; }
.toc-c-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 22px 6px 30px;
  text-decoration: none;
  color: var(--chrome-fg);
  font-size: 11pt;
  line-height: 1.45;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.toc-c-link:hover {
  border-left-color: var(--chrome-rule);
  background: var(--chrome-hover);
}
.toc-c-link.is-current {
  border-left-color: var(--chrome-gold-bright);
  background: var(--chrome-active);
  color: var(--chrome-gold-bright);
}
.toc-c-label {
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
  font-variant: small-caps;
  letter-spacing: 0.08em;
  font-size: 9pt;
  color: var(--chrome-dim);
  flex: 0 0 auto;
}
.toc-c-link.is-current .toc-c-label { color: var(--chrome-gold); }
.toc-c-title { flex: 1; }

/* ------- Reader controls drawer (right edge) -------------------------- */
.controls {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 304px; max-width: 86vw;
  background: var(--chrome-bg);
  border-left: 1px solid var(--chrome-rule);
  color: var(--chrome-fg);
  z-index: 38;
  transform: translateX(100%);
  transition: transform 0.22s ease;
  display: flex; flex-direction: column;
  box-shadow: 0 0 30px rgba(0,0,0,0.4);
}
.controls.is-open { transform: translateX(0); }
.controls[hidden] { display: flex; }
.controls-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 12px 20px;
  border-bottom: 1px solid var(--chrome-rule-soft);
}
.controls-title {
  font-family: 'Cormorant SC', serif;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 11pt;
  color: var(--chrome-dim);
}
.controls-body {
  padding: 18px 20px;
  overflow-y: auto;
  font-family: 'Cormorant Garamond', serif;
}
.ctl-group { border: none; padding: 0; margin: 0 0 22px 0; }
.ctl-group legend {
  font-family: 'Cormorant SC', serif;
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-size: 10pt;
  color: var(--chrome-dim);
  padding: 0; margin-bottom: 8px;
}
.seg {
  display: inline-flex;
  border: 1px solid var(--chrome-rule);
  border-radius: 4px;
  overflow: hidden;
}
.seg-btn {
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: var(--chrome-fg);
  font-family: 'Cormorant Garamond', serif;
  font-size: 11pt;
  cursor: pointer;
  border-right: 1px solid var(--chrome-rule);
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--chrome-hover); }
.seg-btn.is-active { background: var(--chrome-active); color: var(--chrome-fg); }
.ctl-row {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0;
  font-size: 12pt;
  cursor: pointer;
}
.ctl-row input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--chrome-gold); }
.ctl-info {
  font-size: 10pt; color: var(--chrome-dim);
  font-style: italic;
  border-top: 1px solid var(--chrome-rule-soft);
  padding-top: 12px;
  line-height: 1.55;
}

/* ------- Text-size scaling -------------------------------------------------
   ONE scale factor drives every text element (English body, Persian source,
   and the Reader's note alike) so the settings pane resizes the whole page,
   not just one block.  Each element's font-size is calc(base * --fs-scale). */
html                      { --fs-scale: 1.14; }
html[data-size="compact"] { --fs-scale: 1; }
html[data-size="default"] { --fs-scale: 1.14; }
html[data-size="large"]   { --fs-scale: 1.30; }
html[data-size="xlarge"]  { --fs-scale: 1.46; }

/* ------- Hide-Persian / hide-Notes toggles ---------------------------- */
/* content-visibility:auto lets the browser skip rendering off-screen .fa-source
   and .note blocks until they scroll into view.  Without this, flipping the
   toggle re-shows 600+ Persian-script paragraphs at once, forcing a massive
   layout + font-render pass that visibly stutters on phones.  With it, only
   the elements currently near the viewport are rendered. */
.fa-source, .note {
  content-visibility: auto;
  contain-intrinsic-size: auto 120px;
}
html[data-fa="off"] .fa-source { display: none; }
html[data-note="off"] .note { display: none; }

/* ------- Glossary marker (dotted dim → gold on hover) ----------------- */
.gloss {
  cursor: help;
  text-decoration: underline dotted var(--chrome-dim);
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.18s ease;
}
.gloss:hover { text-decoration-color: var(--chrome-gold); }

/* ------- Qurʾān citation marker (dotted dim → gold on hover) ---------- */
.qcite {
  color: inherit;
  text-decoration: none;
  font-style: normal;
  white-space: nowrap;
  border-bottom: 1px dotted var(--chrome-dim);
  transition: border-color 0.18s ease;
}
.qcite:hover { border-bottom-color: var(--chrome-gold); }

/* ------- Popover ------------------------------------------------------- */
.popover {
  position: absolute;
  z-index: 60;
  max-width: 360px;
  padding: 12px 16px;
  background: var(--popover-bg);
  border: 1px solid var(--popover-border);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: var(--chrome-fg);
  font-family: 'Cormorant Garamond', serif;
  font-size: 12pt;
  line-height: 1.55;
  pointer-events: auto;
}
.popover[hidden] { display: none; }
.popover .pop-title {
  font-family: 'Cormorant SC', serif;
  font-variant: small-caps;
  font-size: 9pt;
  letter-spacing: 0.16em;
  color: var(--chrome-dim);
  margin-bottom: 4px;
}
.popover .pop-term {
  font-style: italic;
  font-size: 13pt;
  color: var(--chrome-fg);
  margin-bottom: 6px;
}
.popover .pop-body { font-size: 11.5pt; }
.popover .pop-arabic {
  font-family: 'Markazi Text', 'Amiri', serif;
  font-size: 16pt;
  direction: rtl;
  margin-bottom: 4px;
  color: var(--chrome-fg);
}
.popover .pop-meta { font-size: 10pt; color: var(--chrome-dim); margin-top: 6px; font-style: italic; }
.popover .pop-link {
  display: inline-block;
  margin-top: 8px;
  color: var(--chrome-dim);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  font-size: 10.5pt;
}
.popover .pop-link:hover { color: var(--chrome-fg); }

/* ------- Anchor copy-link on chapter headings ------------------------- */
.ch-heading .anchor-link {
  display: inline-block;
  margin-left: 6px;
  opacity: 0;
  color: var(--chrome-dim);
  text-decoration: none;
  font-size: 0.7em;
  transition: opacity 0.15s ease;
  cursor: pointer;
  user-select: none;
}
.ch-heading:hover .anchor-link { opacity: 0.5; }
.ch-heading .anchor-link:hover { opacity: 1; }

/* ------- Search overlay ----------------------------------------------- */
.search {
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--chrome-bg);
  border-bottom: 1px solid var(--chrome-rule);
  z-index: 42;
  max-height: 75vh;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.search[hidden] { display: none; }
.search-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--chrome-rule-soft);
}
.search-input {
  flex: 1;
  background: transparent;
  border: 1px solid var(--chrome-rule);
  color: var(--chrome-fg);
  font-family: 'Cormorant Garamond', serif;
  font-size: 14pt;
  padding: 8px 12px;
  border-radius: 4px;
  outline: none;
}
.search-input:focus { border-color: var(--chrome-dim); }
.search-results { overflow-y: auto; padding: 8px 0; }
.search-hit {
  display: block;
  padding: 10px 18px;
  color: var(--chrome-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--chrome-rule-soft);
  font-family: 'Cormorant Garamond', serif;
}
.search-hit:hover { background: var(--chrome-hover); }
.search-hit .hit-where {
  font-family: 'Cormorant SC', serif;
  font-variant: small-caps;
  font-size: 9pt;
  letter-spacing: 0.14em;
  color: var(--chrome-dim);
  display: block;
  margin-bottom: 3px;
}
.search-hit .hit-snippet { font-size: 12pt; line-height: 1.5; color: var(--chrome-fg); }
.search-hit .hit-snippet mark {
  background: var(--highlight);
  color: var(--chrome-fg);
  padding: 0 2px; border-radius: 2px;
}
.search-hint {
  padding: 10px 18px;
  font-size: 10.5pt;
  color: var(--chrome-dim);
  font-style: italic;
  border-top: 1px solid var(--chrome-rule-soft);
}

/* ------- Mobile / narrow viewport ------------------------------------- */
@media (max-width: 720px) {
  /* ---- Page + card: cut the mm-based padding way back so the prose
          actually has room to breathe on a phone. ---- */
  .page {
    padding: 6mm 3mm 12mm 3mm !important;
    gap: 4mm !important;
  }
  .card {
    padding: 6mm 5mm 8mm 5mm !important;
    max-width: 100% !important;
  }
  .card::before {
    top: 2mm !important;
    left: 2mm !important;
    right: 2mm !important;
    bottom: 2mm !important;
  }
  .fa-source { max-width: 100% !important; padding: 0 2mm !important; }
  .note      { max-width: 100% !important; padding: 5mm 6mm 5mm 7mm !important; }

  /* ---- Body type: 14.5pt is too big once lines are wrapping every
          few words.  Drop to 13pt body, 11pt note. ---- */
  .card .en-seg, .card .en-seg p, .card .prose p {
    font-size: calc(13.5pt * var(--fs-scale, 1)) !important;
    line-height: 1.7 !important;
  }
  .note, .note p {
    font-size: calc(12.5pt * var(--fs-scale, 1)) !important;
    line-height: 1.66 !important;
  }

  /* ---- Drop cap doesn't need to be 38pt on a phone ---- */
  .card .en-seg.first-seg::first-letter {
    font-size: 28pt !important;
  }

  /* ---- Hero pages: tighten the title-block typography ---- */
  .hero-basmala     { font-size: 13pt !important; }
  .hero-en-main     { font-size: 18pt !important; letter-spacing: 0.12em !important; }
  .hero-treatise-label { font-size: 9pt !important; letter-spacing: 0.40em !important; }
  .hero-en-sub      { font-size: 11pt !important; }
  .hero-fa          { font-size: 14pt !important; }
  .hero-rules-top, .hero-rules-bot { width: 42mm !important; }

  /* ---- Inline treatise + chapter headings (when present) ---- */
  .tr-heading .tr-en { font-size: 13pt !important; letter-spacing: 0.12em !important; }
  .tr-heading .tr-fa { font-size: 16pt !important; }
  .ch-heading .ch-en { font-size: 12pt !important; }
  .ch-heading .ch-fa { font-size: 11pt !important; }

  /* ---- Folio (page number) sits closer to the edge ---- */
  .folio { font-size: 9pt !important; right: 4mm !important; }

  /* ---- Chrome bits ---- */
  .ft { top: 10px; right: 10px; }
  .toc, .controls { width: 86vw; }
  .popover { max-width: calc(100vw - 24px); }

  /* ---- TOC hero a touch smaller too so it doesn't dominate
          a portrait viewport ---- */
  .toc-hero { padding: 28px 18px 22px 18px !important; }
  .toc-hero-key { font-size: 18pt !important; letter-spacing: 0.16em !important; }
  .toc-hero-fa { font-size: 14pt !important; }
  .toc-t-head { padding: 11px 18px !important; }
  .toc-t-title { font-size: 12pt !important; letter-spacing: 0.10em !important; }
  .toc-t-label { font-size: 8pt !important; letter-spacing: 0.45em !important; }
  .toc-t-fa { font-size: 12pt !important; }
}

/* ------- Print stylesheet --------------------------------------------- */
@media print {
  body { background: #ffffff !important; color: #1a1a1a !important; }
  .ft, .toc, .controls, .search, .popover, .scrim { display: none !important; }
  .page, .hero-page { background: transparent !important; page-break-after: always; }
  .card {
    background: #ffffff !important;
    border: 1px solid #d0d0d0 !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
  }
  .card::before { border-color: #e0e0e0 !important; }
  .en-seg, .prose, .prose p { color: #1a1a1a !important; }
  .fa-source { color: #4a3a18 !important; }
  .note { color: #4a4530 !important; }
  .ch-heading .ch-fa, .tr-heading .tr-fa, .tr-heading .tr-en { color: #6a4818 !important; }
  .ch-heading .ch-en { color: #1a1a1a !important; }
  .ch-heading { border-bottom-color: #c0a868 !important; }
  .hero-en-main, .hero-treatise-label, .hero-en-sub, .hero-fa, .hero-basmala {
    color: #4a3a18 !important;
  }
  .qcite { color: inherit !important; border-bottom: none !important; }
  .gloss { text-decoration: none !important; }
  .dropcap, .en-seg.first-seg::first-letter { color: #6a4818 !important; text-shadow: none !important; }
  .folio { color: #888 !important; }
  a, a:visited { color: inherit !important; }
}

/* ------- Hover glow + click-to-copy on every card -------------------- */
.card {
  position: relative;
  transition: box-shadow 0.28s ease, border-color 0.28s ease;
  cursor: pointer;
}
.card:hover {
  border-color: rgba(191, 149, 64, 0.55) !important;
  box-shadow:
    0 1px 0 #0d1623,
    0 22px 44px rgba(0,0,0,0.75),
    0 0 36px rgba(191, 149, 64, 0.16);
}
/* Persistent "currently anchored" state after a click — stays gold-bordered
   until another card is selected, so the reader can always see "I'm here". */
.card.is-selected {
  border-color: var(--chrome-gold) !important;
  box-shadow:
    0 1px 0 #0d1623,
    0 22px 44px rgba(0,0,0,0.75),
    0 0 30px rgba(191, 149, 64, 0.18);
}
.card.is-selected:hover {
  box-shadow:
    0 1px 0 #0d1623,
    0 22px 44px rgba(0,0,0,0.75),
    0 0 44px rgba(191, 149, 64, 0.24);
}
/* Brief copy-confirmation flash — brightest, runs once for 800ms */
.card.is-flashed {
  border-color: var(--chrome-gold-bright) !important;
  box-shadow:
    0 1px 0 #0d1623,
    0 22px 44px rgba(0,0,0,0.75),
    0 0 60px rgba(240, 197, 96, 0.38);
}

/* Light-theme card glow (warm parchment-edge tint) */
html[data-theme="light"] .card:hover {
  border-color: rgba(160, 112, 40, 0.55) !important;
  box-shadow:
    0 1px 0 #e8dfbc,
    0 18px 36px rgba(80, 60, 20, 0.18),
    0 0 36px rgba(160, 112, 40, 0.18) !important;
}
html[data-theme="light"] .card.is-selected {
  border-color: var(--chrome-gold) !important;
  box-shadow:
    0 1px 0 #e8dfbc,
    0 18px 36px rgba(80, 60, 20, 0.18),
    0 0 30px rgba(160, 112, 40, 0.22) !important;
}
html[data-theme="light"] .card.is-flashed {
  border-color: #a07028 !important;
  box-shadow:
    0 1px 0 #e8dfbc,
    0 18px 36px rgba(80, 60, 20, 0.18),
    0 0 60px rgba(160, 112, 40, 0.32) !important;
}

/* Keep selectable text feeling like text (override the cursor on prose
   so the I-beam returns when the cursor is actually over a paragraph). */
.card .en-seg, .card .en-seg p, .card .prose p, .card .ch-heading,
.card .tr-heading, .card .gloss, .card .qcite {
  cursor: text;
}
.card .gloss { cursor: help; }
.card .qcite { cursor: pointer; }

/* Anchor scroll for cards: leave a little breathing room when jumping in */
.card[id] { scroll-margin-top: 32px; }

/* ------- Per-card prev/next navigation footer ----------------------- */
/* Replaces the old per-section folio (now hidden) — every card carries
   its own "‹ p. N ›" footer.  Native anchors → hashchange → smooth-scroll
   + center + select. */
.folio { display: none !important; }

.card-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 9mm;
  padding-top: 4mm;
  border-top: 1px solid var(--chrome-rule-soft);
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  font-size: 10pt;
  color: var(--chrome-dim);
  user-select: none;
}
.cn-prev, .cn-next {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: var(--chrome-dim);
  font-family: 'Cormorant Garamond', serif;
  font-size: 22pt;
  line-height: 1;
  border-radius: 50%;
  transition: color 0.18s ease, background 0.18s ease;
}
.cn-prev:hover, .cn-next:hover,
.cn-prev:focus-visible, .cn-next:focus-visible {
  color: var(--chrome-gold);
  background: var(--chrome-hover);
  outline: none;
}
.cn-meta {
  min-width: 56px;
  text-align: center;
  font-family: 'Cormorant SC', serif;
  font-variant: small-caps;
  letter-spacing: 0.18em;
  color: var(--chrome-dim);
}
.cn-spacer { width: 30px; height: 30px; display: inline-block; }

html[data-theme="light"] .card-nav { border-top-color: rgba(120, 90, 30, 0.18); }
html[data-theme="light"] .cn-prev, html[data-theme="light"] .cn-next,
html[data-theme="light"] .cn-meta { color: #7a6c4a; }
html[data-theme="light"] .cn-prev:hover, html[data-theme="light"] .cn-next:hover {
  color: #7d4f10;
  background: rgba(160, 112, 40, 0.12);
}

@media (max-width: 720px) {
  .card-nav { gap: 18px; margin-top: 7mm; padding-top: 3mm; font-size: 9.5pt; }
  .cn-prev, .cn-next { width: 36px; height: 36px; font-size: 20pt; }
  .cn-spacer { width: 36px; height: 36px; }
  .cn-meta { min-width: 48px; font-size: 9pt; letter-spacing: 0.14em; }
}

/* ------- Translator's Preface — toggle from the HERO ----------------- */
/* The hero section itself is the expand/collapse trigger.  A small
   Cinzel small-caps "click to read ⌄" sits at the bottom of the hero;
   clicking anywhere on the hero toggles the content section below it. */
.preface-trigger {
  cursor: pointer;
  transition: background 0.25s ease;
}
.preface-trigger:hover {
  background: rgba(191, 149, 64, 0.04);
}
html[data-theme="light"] .preface-trigger:hover {
  background: rgba(160, 112, 40, 0.06);
}
.preface-hint {
  margin-top: 10mm;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
  font-variant: small-caps;
  letter-spacing: 0.22em;
  font-size: 10.5pt;
  color: var(--chrome-gold);
  user-select: none;
}
.preface-hint .ph-arrow {
  display: inline-block;
  color: var(--chrome-gold);
  transition: transform 0.25s ease;
  /* SVG sits at the baseline of the small-caps text */
  margin-bottom: 1px;
}
.preface-trigger.is-open .preface-hint .ph-arrow {
  transform: rotate(180deg);
}
.preface-trigger:hover .preface-hint .ph-arrow {
  color: var(--chrome-gold-bright);
}
.preface-content.is-hidden { display: none !important; }

@media (max-width: 720px) {
  .preface-hint { font-size: 10pt; margin-top: 7mm; gap: 8px; }
  .preface-hint .ph-arrow { font-size: 12pt; }
}

/* ------- Mobile: enlarge tap targets in the reader-settings drawer ---- */
@media (max-width: 720px) {
  .ctl-row {
    padding: 12px 4px;
    font-size: 13pt;
    min-height: 44px;
    gap: 14px;
  }
  .ctl-row input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
  .seg-btn { padding: 10px 14px; font-size: 12pt; }
  .controls-body { padding: 14px 18px; }
}

/* ------- Loading screen ---------------------------------------------- */
/* Shown immediately on initial paint (the loader element is the first
   child of <body>).  Fades out and is removed once the JS finishes wiring
   up the chrome, so the reader doesn't stare at an unstyled / spinner-less
   wall of 1.4 MB of HTML on slow phone networks. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #04080d;
  color: #f5edd4;
  transition: opacity 0.55s ease;
}
html[data-theme="light"] .loader {
  background: #f0e8cf;
  color: #2b2618;
}
.loader-mark {
  font-family: 'Cormorant Garamond', 'Hoefler Text', Georgia, serif;
  color: #bf9540;
  letter-spacing: 0.7em;
  font-size: 14pt;
  padding-left: 0.7em; /* compensate for tracking right-bias */
  opacity: 0.6;
  animation: loader-pulse 1.7s ease-in-out infinite;
}
html[data-theme="light"] .loader-mark { color: #a07028; }
.loader-label {
  margin-top: 28px;
  font-family: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  font-variant: small-caps;
  font-size: 10.5pt;
  letter-spacing: 0.32em;
  color: #5a6877;
  opacity: 0.8;
}
html[data-theme="light"] .loader-label { color: #8a7e60; }
.loader.is-fading {
  opacity: 0;
  pointer-events: none;
}
@keyframes loader-pulse {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.95; }
}

/* While the loader is up, block scrolling of the underlying content. */
html.is-loading, html.is-loading body {
  overflow: hidden;
}

/* ===== FRAME ADDITIONS — trilingual source + frame toolbar (additive; unused by Rasāʾil) ===== */
.ar-source .fa-seg{ color:#c2a86a; }
html[data-theme="light"] .ar-source .fa-seg{ color:#5c4a22 !important; }
.src-tag{ font-family:'Cormorant SC','Cinzel',serif; letter-spacing:.2em; text-transform:uppercase;
  font-size:9.5pt; color:var(--chrome-dim); text-align:center; margin-bottom:4mm; opacity:.85; }
.toolbar{ position:fixed; top:14px; right:16px; z-index:70; display:flex; gap:7px; }
.tbtn{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  border-radius:9px; font-size:17px; background:color-mix(in srgb,var(--chrome-bg) 75%,transparent);
  color:var(--chrome-fg); border:1px solid var(--chrome-rule); backdrop-filter:blur(8px); transition:.2s; }
.tbtn:hover{ background:var(--chrome-hover); color:var(--chrome-gold-bright); }

/* ===== edge-peek: move the pointer to a screen edge to fade in a side pane ===== */
.edge-zone{ position:fixed; top:0; bottom:0; width:40px; z-index:30; }
.edge-zone.left{ left:0; }
.edge-zone.right{ right:0; top:64px; }            /* clear of the .ft toolbar */
.toc, .controls{ opacity:0; transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .26s ease; }
.toc.is-open, .toc.is-peek, .controls.is-open, .controls.is-peek{ opacity:1; }
.toc.is-peek, .controls.is-peek{ transform:translateX(0); }

/* left pane: seamless (hidden) scrollbar — content still scrolls */
.toc{ scrollbar-width:none; -ms-overflow-style:none; }
.toc::-webkit-scrollbar{ width:0; height:0; display:none; }

/* ===== reading header: book title morphs in (persists); stage + chapter slide ===== */
.rdr-topbar{ position:fixed; top:0; left:0; right:0; z-index:33;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:20px;
  min-height:46px; padding:7px 60px 9px;
  background:color-mix(in srgb, var(--chrome-bg) 92%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--chrome-rule-soft);
  transform:translateY(-101%); opacity:0; pointer-events:none; }
.rdr-topbar::after{ content:''; position:absolute; left:0; right:0; top:100%; height:34px; pointer-events:none;
  background:radial-gradient(62% 100% at 50% 0%, rgba(0,0,0,.42), rgba(0,0,0,0) 72%); }
.rdr-center{ grid-column:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.rdr-book{ font-family:'Cinzel','Trajan Pro',serif; font-size:13px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--chrome-gold); white-space:nowrap; text-align:center; line-height:1.3;
  transition:font-size .3s ease, letter-spacing .3s ease; }
.rdr-stage{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:15px; color:var(--chrome-fg);
  white-space:nowrap; text-align:center; line-height:1.3; min-height:0; will-change:transform,opacity; }
.rdr-chap{ grid-column:1; justify-self:start; font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:15px; font-weight:500; color:var(--chrome-fg); white-space:nowrap; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; will-change:transform,opacity; }

/* morphing title element (scroll-linked; positioned by JS) */
.rdr-morph{ position:fixed; top:0; left:0; z-index:34; white-space:nowrap; pointer-events:none;
  line-height:1.1; transform-origin:center top; }

/* current section auto-highlighted by scroll position */
.toc-t.is-current > .toc-t-head{ background:var(--chrome-hover); }
.toc-t.is-current > .toc-t-head .toc-t-title{ color:var(--chrome-gold-bright); }

/* clicked TOC/chapter anchors land below the fixed header, with a gap */
html{ scroll-padding-top:88px; }
.ch-heading, .card, .hero-page{ scroll-margin-top:88px; }

/* ===== reading-progress hairline (shared frame) — pinned to the top of the
   viewport, fills left->right as you scroll the volume.  Pure indicator:
   pointer-events:none so it never intercepts clicks. ===== */
.rdr-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 50; pointer-events: none; background: transparent;
}
.rdr-progress-fill {
  height: 100%; width: 0;
  background: var(--chrome-gold);
  box-shadow: 0 0 7px rgba(191, 149, 64, 0.55);
  transition: width 0.12s linear;
}