/* =========================================================================
   UECF.NET Web Book — souvenir-15
   United Evangelical Christian Fellowship · 15th Anniversary Souvenir
   Pure CSS3. No frameworks. Mobile-first. Light + dark theme.
   -------------------------------------------------------------------------
   Table of contents
     1.  Design tokens (light) and dark-theme overrides
     2.  Base / reset / typography
     3.  Accessibility helpers (skip link, focus, sr-only)
     4.  Reading progress bar
     5.  Sticky site header + primary navigation
     6.  Breadcrumb
     7.  Layout shells (page, reader, sidebar)
     8.  Table of contents (sidebar + collapsible)
     9.  Reader toolbar (font size, bookmark, theme)
     10. Chapter content typography (prose)
     11. Figures, plates, galleries, lightbox
     12. Chapter pager (previous / next)
     13. Landing page (cover, meta, feature cards)
     14. Search overlay
     15. Scroll-to-top button
     16. Footer
     17. Print styles
     18. Reduced motion / high-contrast
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */

:root {
  /* Brand palette — taken from UECF.NET (navy #101B31) and the souvenir's
     saffron/amber cover border. */
  --uecf-navy:        #101b31;
  --uecf-navy-2:      #1b2a48;
  --uecf-navy-3:      #27395e;
  --uecf-amber:       #c8811a;
  --uecf-amber-soft:  #e8a33d;
  --uecf-crimson:     #9c2a2a;

  /* Semantic surface colours (light theme) */
  --bg:               #fbfaf7;
  --bg-elev:          #ffffff;
  --bg-sunken:        #f2efe8;
  --bg-tint:          #fdf6e9;
  --border:           #e2dcd0;
  --border-strong:    #cfc6b5;

  /* Text */
  --text:             #1d2430;
  --text-soft:        #4d566a;
  --text-faint:       #6f7789;
  --link:             #1b4a8a;
  --link-hover:       #0f2f5c;

  /* Accents in context */
  --accent:           var(--uecf-amber);
  --accent-contrast:  #7a4d05;
  --header-bg:        var(--uecf-navy);
  --header-text:      #f4f1ea;
  --header-text-soft: #b9c2d4;

  /* Typography scale */
  --font-ui:    "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
  --font-telugu: "Noto Sans Telugu", "Nirmala UI", "Gautami", "Kohinoor Telugu",
                 "Telugu Sangam MN", "Pothana2000", "Mandali", "Noto Sans", sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Reader font size — driven by js/script.js, persisted in localStorage */
  --reader-size: 18px;
  --reader-leading: 1.75;

  /* Geometry */
  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 27, 49, .07);
  --shadow:    0 2px 10px rgba(16, 27, 49, .09);
  --shadow-lg: 0 12px 34px rgba(16, 27, 49, .20);
  --header-h:  auto;
  --maxw:      1180px;
  --readw:     40rem;
}

/* ---- Dark theme -------------------------------------------------------- */
html[data-theme="dark"] {
  --bg:               #0d1220;
  --bg-elev:          #151d30;
  --bg-sunken:        #101728;
  --bg-tint:          #1a2135;
  --border:           #2a3450;
  --border-strong:    #3b4870;

  --text:             #e7ebf3;
  --text-soft:        #b3bdd2;
  --text-faint:       #8d97ae;
  --link:             #8fb8f0;
  --link-hover:       #b9d3fa;

  --accent:           var(--uecf-amber-soft);
  --accent-contrast:  #f0c274;
  --header-bg:        #0a0f1b;
  --header-text:      #f0f3f9;
  --header-text-soft: #98a4bd;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 2px 10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, .7);
}

html[data-theme="dark"] img.plate,
html[data-theme="dark"] .figure img {
  /* Scans are printed on white paper; soften them slightly at night. */
  filter: brightness(.92) contrast(1.02);
}


/* =========================================================================
   2. BASE / RESET / TYPOGRAPHY
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;   /* clears the sticky header on #anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 0 0 .6em; font-weight: 700; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

button { font: inherit; cursor: pointer; }

/* Every inline icon is drawn as a stroked path at text scale. Without this a
   sized-less <svg> falls back to 300x150 and blows the layout apart. */
.icon-btn svg, .search-trigger svg, .tool-btn svg, .btn svg, .chip svg,
.toc-panel__head svg, .to-top svg, .search-modal__head svg, .brand svg {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

::selection { background: var(--uecf-amber-soft); color: #1d2430; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 1rem;
}


/* =========================================================================
   3. ACCESSIBILITY HELPERS
   ========================================================================= */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--uecf-amber);
  color: #1d2430;
  padding: .7rem 1.1rem;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--uecf-amber-soft);
  outline-offset: 2px;
  border-radius: 2px;
}


/* =========================================================================
   4. READING PROGRESS BAR
   ========================================================================= */

.progress-track {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  background: transparent;
  z-index: 90;
  pointer-events: none;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--uecf-amber), var(--uecf-amber-soft));
  transition: width .12s linear;
}


/* =========================================================================
   5. STICKY SITE HEADER + NAVIGATION
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 3px solid var(--uecf-amber);
  box-shadow: var(--shadow);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  padding-block: .5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--header-text);
  text-decoration: none;
  flex: 1 1 auto;
  min-width: 0;
}
.brand__mark {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--uecf-amber);
  color: var(--uecf-navy);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .02em;
}
.brand__text { display: flex; flex-direction: column; min-width: 0; }
.brand__title {
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand__sub {
  font-size: .7rem;
  color: var(--header-text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-actions { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: var(--header-text);
  border-radius: var(--radius-sm);
  transition: background .15s ease, border-color .15s ease;
}
.icon-btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
.icon-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.search-trigger {
  display: none;
  align-items: center;
  gap: .5rem;
  height: 38px;
  padding: 0 .7rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.07);
  color: var(--header-text-soft);
  border-radius: var(--radius-sm);
  font-size: .85rem;
  min-width: 220px;
  text-align: left;
}
.search-trigger > span {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-trigger:hover { background: rgba(255,255,255,.14); color: var(--header-text); }
.search-trigger kbd {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .68rem;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 3px;
  padding: .1rem .3rem;
  color: var(--header-text-soft);
}

/* Primary nav */
.site-nav { background: var(--uecf-navy-2); border-bottom: 1px solid rgba(255,255,255,.08); }
html[data-theme="dark"] .site-nav { background: #111827; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: .58rem .85rem;
  color: #d6dcea;
  text-decoration: none;
  font-size: .87rem;
  font-weight: 600;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--uecf-amber); }

@media (min-width: 800px) {
  .search-trigger { display: flex; }
  .search-trigger--icon { display: none; }
  .brand__title { font-size: 1.05rem; }
}


/* =========================================================================
   6. BREADCRUMB
   ========================================================================= */

.breadcrumb {
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: .6rem 0;
}
.breadcrumb li { display: flex; align-items: center; gap: .35rem; color: var(--text-faint); }
.breadcrumb li + li::before { content: "›"; color: var(--text-faint); }
.breadcrumb a { color: var(--text-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--link); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }


/* =========================================================================
   7. LAYOUT SHELLS
   ========================================================================= */

.page { padding-block: 1.5rem 3rem; }

.reader-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .reader-layout { grid-template-columns: 270px minmax(0, 1fr); gap: 2.5rem; }
  .reader-sidebar { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
}


/* =========================================================================
   8. TABLE OF CONTENTS
   ========================================================================= */

.toc-panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.toc-panel__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .8rem 1rem;
  background: var(--bg-sunken);
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 700;
  font-size: .9rem;
  text-align: left;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.toc-panel__head .chev {
  margin-left: auto;
  transition: transform .2s ease;
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.toc-panel__head[aria-expanded="false"] .chev { transform: rotate(-90deg); }
.toc-panel__body { padding: .35rem 0 .6rem; max-height: 62vh; overflow-y: auto; }
.toc-panel__body[hidden] { display: none; }

/* Panels that only make sense once the scripts have run. */
.js-only { display: none; }
.js-ready .js-only:not([hidden]) { display: block; }
[hidden] { display: none !important; }

.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-part {
  padding: .85rem 1rem .3rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent-contrast);
}
html[data-theme="dark"] .toc-part { color: var(--uecf-amber-soft); }

.toc-list a {
  display: flex;
  gap: .55rem;
  padding: .4rem 1rem .4rem .95rem;
  color: var(--text-soft);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.4;
  border-left: 3px solid transparent;
}
.toc-list a:hover { background: var(--bg-tint); color: var(--text); }
.toc-list a[aria-current="page"],
.toc-list a.is-current {
  background: var(--bg-tint);
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: 700;
}
.toc-num { flex: 0 0 auto; color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: .8rem; }
.toc-list a[aria-current="page"] .toc-num { color: var(--accent-contrast); }
.toc-bookmark { margin-left: auto; color: var(--accent); font-size: .8rem; }


/* =========================================================================
   9. READER TOOLBAR
   ========================================================================= */

.reader-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  padding: .55rem .7rem;
  margin-bottom: 1.25rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .65rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: .82rem;
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tool-btn:hover { background: var(--bg-tint); color: var(--text); border-color: var(--border-strong); }
.tool-btn[aria-pressed="true"] { background: var(--uecf-amber); border-color: var(--uecf-amber); color: #2a1c02; }
.tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-sep { width: 1px; align-self: stretch; background: var(--border); margin-inline: .3rem; }
.tool-meta { margin-left: auto; font-size: .78rem; color: var(--text-faint); display: flex; gap: .9rem; }


/* =========================================================================
   10. CHAPTER CONTENT (PROSE)
   ========================================================================= */

.chapter { max-width: 100%; }

.chapter__eyebrow {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-contrast);
  margin-bottom: .5rem;
}
html[data-theme="dark"] .chapter__eyebrow { color: var(--uecf-amber-soft); }

.chapter__title {
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  color: var(--text);
  margin-bottom: .35rem;
}
.chapter__byline { color: var(--text-soft); font-size: 1rem; font-style: italic; margin: 0 0 .5rem; }
.chapter__pages { color: var(--text-faint); font-size: .82rem; margin: 0 0 1.4rem; }
.chapter__rule {
  width: 84px;
  height: 3px;
  background: var(--uecf-amber);
  border-radius: 2px;
  margin: 0 0 1.8rem;
}

.prose {
  font-family: var(--font-serif);
  font-size: var(--reader-size);
  line-height: var(--reader-leading);
  color: var(--text);
  max-width: var(--readw);
}
.prose.prose--wide { max-width: 100%; }
.prose p { margin: 0 0 1.15em; }
.prose h2 {
  font-family: var(--font-serif);
  font-size: 1.4em;
  margin: 2.2em 0 .6em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 6rem;
}
.prose h3 { font-size: 1.15em; margin: 1.8em 0 .5em; scroll-margin-top: 6rem; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.prose li { margin-bottom: .45em; }
.prose blockquote {
  margin: 1.6em 0;
  padding: .9em 1.2em;
  background: var(--bg-tint);
  border-left: 4px solid var(--uecf-amber);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-soft);
  font-style: italic;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-family: var(--font-ui);
  font-size: .92em;
}
.prose th, .prose td { border: 1px solid var(--border); padding: .5em .7em; text-align: left; vertical-align: top; }
.prose thead th { background: var(--bg-sunken); font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-sunken); padding: .1em .35em; border-radius: 3px; }

/* Telugu passages get a script-appropriate face and looser leading. */
.prose[lang="te"], .prose [lang="te"], .te,
[lang="te"] { font-family: var(--font-telugu); }
.prose[lang="te"], .prose [lang="te"] {
  line-height: calc(var(--reader-leading) + .3);
  font-size: calc(var(--reader-size) * 1.02);
}
.toc-list [lang="te"], .breadcrumb [lang="te"], .pager__name[lang="te"] { line-height: 1.75; }
.prose[lang="te"] .chapter__title, .te-title { font-family: var(--font-telugu); }

/* Scripture reference chips produced by js/script.js */
.verse-ref {
  color: var(--accent-contrast);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  white-space: nowrap;
}
.verse-ref:hover { background: var(--bg-tint); color: var(--link-hover); }
html[data-theme="dark"] .verse-ref { color: var(--uecf-amber-soft); }

/* Footnotes / editorial notes */
.editor-note {
  font-family: var(--font-ui);
  font-size: .86rem;
  color: var(--text-faint);
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  margin: 1.5rem 0;
  max-width: var(--readw);
}

/* Search-result highlight injected by js/search.js */
mark, .hl {
  background: #ffe9a8;
  color: #2b2000;
  padding: 0 .12em;
  border-radius: 2px;
}
html[data-theme="dark"] mark, html[data-theme="dark"] .hl { background: #7a5c12; color: #fff6df; }


/* =========================================================================
   11. FIGURES, PLATES, GALLERIES, LIGHTBOX
   ========================================================================= */

.figure {
  margin: 2rem 0;
  max-width: min(var(--readw), 34rem);
}
.figure--portrait { max-width: 20rem; }
.figure--wide { max-width: var(--readw); }
.figure img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.figure figcaption {
  font-family: var(--font-ui);
  font-size: .82rem;
  color: var(--text-faint);
  margin-top: .5rem;
}

/* A full original page reproduced as an image */
.plate {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.facsimile { margin: 2.5rem 0; }
.facsimile > summary {
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-soft);
  padding: .6rem .9rem;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  list-style: none;
}
.facsimile > summary::-webkit-details-marker { display: none; }
.facsimile > summary::before { content: "▸ "; color: var(--accent); }
.facsimile[open] > summary::before { content: "▾ "; }
.facsimile > summary:hover { background: var(--bg-tint); color: var(--text); }
.facsimile__body { margin-top: 1rem; }

/* Photo-plate galleries */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.gallery figure { margin: 0; }
.gallery figcaption {
  font-family: var(--font-ui);
  font-size: .78rem;
  color: var(--text-faint);
  margin-top: .45rem;
  text-align: center;
}
.gallery--single { grid-template-columns: minmax(0, 720px); justify-content: center; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: none;
  place-items: center;
  padding: 1.5rem;
  background: rgba(8, 12, 22, .92);
}
.lightbox.is-open { display: grid; }
.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  background: #fff;
}
.lightbox__caption { color: #dfe4ef; font-size: .85rem; text-align: center; margin-top: .8rem; }
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}
.lightbox__close:hover { background: rgba(255,255,255,.22); }


/* =========================================================================
   12. CHAPTER PAGER
   ========================================================================= */

.pager {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}
@media (min-width: 620px) { .pager { grid-template-columns: 1fr 1fr; } }

.pager__link {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .85rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pager__link:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); }
.pager__link--next { text-align: right; }
.pager__dir {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-contrast);
}
html[data-theme="dark"] .pager__dir { color: var(--uecf-amber-soft); }
.pager__name { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.pager__link[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.pager-utility {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  justify-content: center;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elev);
  color: var(--text-soft);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--text); background: var(--bg-tint); }
.chip svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================================
   13. LANDING PAGE
   ========================================================================= */

.hero {
  background:
    linear-gradient(180deg, rgba(16,27,49,.96), rgba(27,42,72,.96));
  color: #f2f0ea;
  padding: 2.5rem 0 3rem;
  border-bottom: 4px solid var(--uecf-amber);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 820px) {
  .hero__grid { grid-template-columns: 300px minmax(0, 1fr); gap: 3rem; }
}
.hero__cover {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.18);
}
.hero__eyebrow {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--uecf-amber-soft);
  margin-bottom: .6rem;
}
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5.4vw, 3rem);
  margin-bottom: .4rem;
  color: #fff;
}
.hero__subtitle { font-size: 1.05rem; color: #cdd5e6; margin: 0 0 1.2rem; }
.hero__desc { color: #dde2ee; max-width: 46rem; margin: 0 0 1.6rem; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 0 0 1.8rem;
  padding: 0;
  list-style: none;
}
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats dt { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #9daac6; }
.hero__stats dd { margin: .15rem 0 0; font-size: 1.25rem; font-weight: 700; color: #fff; }

.btn {
  background: transparent;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--uecf-amber); color: #241701; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--uecf-amber-soft); color: #241701; }
.btn--ghost { border-color: rgba(255,255,255,.4); color: #f2f0ea; }
.btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.section { padding-block: 2.75rem; }
.section__title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin-bottom: .3rem;
}
.section__lede { color: var(--text-soft); margin: 0 0 1.6rem; max-width: 44rem; }

.contents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
}
@media (min-width: 720px) { .contents-grid { grid-template-columns: 1fr 1fr; } }

.part-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.part-card h3 {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-contrast);
  margin-bottom: .7rem;
}
html[data-theme="dark"] .part-card h3 { color: var(--uecf-amber-soft); }
.part-card ol { list-style: none; margin: 0; padding: 0; }
.part-card li + li { border-top: 1px solid var(--border); }
.part-card a {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding: .5rem 0;
  text-decoration: none;
  color: var(--text);
  font-size: .93rem;
}
.part-card a:hover { color: var(--link); }
.part-card .n { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: .82rem; min-width: 1.6rem; }
.part-card .pp { margin-left: auto; color: var(--text-faint); font-size: .76rem; white-space: nowrap; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 1rem;
}
.feature {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--uecf-amber);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.feature h3 { font-size: .98rem; margin-bottom: .3rem; }
.feature p { margin: 0; font-size: .88rem; color: var(--text-soft); }

.updates { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.updates li {
  display: flex;
  gap: .9rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--border);
  font-size: .92rem;
}
.updates time { flex: 0 0 6.5rem; color: var(--text-faint); font-size: .84rem; font-variant-numeric: tabular-nums; }

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.related-card {
  display: block;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--text);
  box-shadow: var(--shadow-sm);
  transition: border-color .15s ease, transform .15s ease;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-card strong { display: block; font-size: 1rem; margin-bottom: .25rem; }
.related-card span { font-size: .85rem; color: var(--text-soft); }

.resume-banner {
  display: none;
  align-items: center;
  gap: .8rem;
  flex-wrap: wrap;
  background: var(--bg-tint);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--uecf-amber);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  margin-bottom: 1.6rem;
  font-size: .9rem;
}
.resume-banner.is-visible { display: flex; }
.resume-banner a { font-weight: 700; }
.resume-banner button {
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--text-faint);
  font-size: .8rem;
  text-decoration: underline;
}


/* =========================================================================
   14. SEARCH OVERLAY
   ========================================================================= */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  padding: 4rem 1rem 1rem;
  background: rgba(8, 12, 22, .62);
  backdrop-filter: blur(3px);
}
.search-overlay.is-open { display: block; }

.search-modal {
  max-width: 720px;
  margin-inline: auto;
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
}
.search-modal__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.search-modal__head svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: var(--text-faint); stroke-width: 2; stroke-linecap: round; }
#search-input {
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 1.02rem;
  font-family: inherit;
  padding: .35rem 0;
  outline: none;
  min-width: 0;
}
#search-input::placeholder { color: var(--text-faint); }
.search-modal__esc {
  font-family: var(--font-mono);
  font-size: .7rem;
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  padding: .15rem .35rem;
  color: var(--text-faint);
  background: var(--bg-sunken);
}

.search-status { padding: .5rem 1rem; font-size: .78rem; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.search-results { list-style: none; margin: 0; padding: .35rem 0; overflow-y: auto; flex: 1 1 auto; }
.search-results li a {
  display: block;
  padding: .65rem 1rem;
  text-decoration: none;
  color: var(--text);
  border-left: 3px solid transparent;
}
.search-results li a:hover,
.search-results li.is-active a {
  background: var(--bg-tint);
  border-left-color: var(--accent);
}
.search-results .sr-title { display: block; font-weight: 700; font-size: .93rem; margin-bottom: .15rem; }
.search-results .sr-crumb { display: block; font-size: .72rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .25rem; }
.search-results .sr-snippet { display: block; font-size: .85rem; color: var(--text-soft); line-height: 1.45; }
.search-suggestions { padding: .8rem 1rem 1rem; border-top: 1px solid var(--border); }
.search-suggestions p { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
.search-suggestions .chip { font-size: .78rem; padding: .3rem .7rem; margin: 0 .35rem .35rem 0; cursor: pointer; }


/* =========================================================================
   15. SCROLL-TO-TOP
   ========================================================================= */

.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text-soft);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--text); border-color: var(--accent); }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }


/* =========================================================================
   16. FOOTER
   ========================================================================= */

.site-footer {
  background: var(--uecf-navy);
  color: #c3ccdf;
  border-top: 4px solid var(--uecf-amber);
  padding: 2.25rem 0 1.5rem;
  font-size: .875rem;
}
html[data-theme="dark"] .site-footer { background: #0a0f1b; }
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.site-footer h2 {
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--uecf-amber-soft);
  margin-bottom: .7rem;
}
.site-footer a { color: #dfe5f1; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer address { font-style: normal; line-height: 1.7; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: 1.1rem;
  font-size: .8rem;
  color: #9aa6bf;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.2rem;
  justify-content: space-between;
}


/* =========================================================================
   17. PRINT
   ========================================================================= */

@media print {
  .site-header, .site-nav, .breadcrumb, .reader-sidebar, .reader-toolbar,
  .pager, .pager-utility, .to-top, .search-overlay, .progress-track,
  .site-footer, .skip-link, .facsimile > summary { display: none !important; }
  body { background: #fff; color: #000; }
  .prose { max-width: none; font-size: 11.5pt; }
  .reader-layout { display: block; }
  a { color: #000; text-decoration: none; }
  .facsimile__body { display: block !important; }
}


/* =========================================================================
   18. REDUCED MOTION / HIGH CONTRAST
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border: #8a8272; --text-soft: #2a3040; --text-faint: #3a4152; --link: #0b3f80; }
  html[data-theme="dark"] { --border: #7d88a8; --text-soft: #dbe2f0; --text-faint: #c2cadd; }
  .prose blockquote { border-left-width: 6px; }
}