/* ==========================================================================
   Westminster Confession of Faith — teaching site
   A warm, print-derived stylesheet. Structure comes from rules, small caps,
   and marginal numerals; not from cards, shadows, and pills.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Paper & ink */
  --paper:        #fbf7ef;  /* warm ivory page */
  --paper-raised: #fffdf8;  /* cards, popups — a half-shade whiter */
  --paper-sunk:   #f4eee2;  /* insets, call-outs */
  --ink:          #2a231c;  /* warm near-black body text */
  --ink-strong:   #17120d;  /* bold, headings */
  --muted:        #6e6357;  /* metadata, captions */
  --muted-soft:   #8d8275;  /* least-important labels */

  /* Rules */
  --rule:         #d9cfbc;  /* hairlines, borders */
  --rule-soft:    #e8e0d1;  /* faint dividers */

  /* Accents */
  --accent:       #7b2d26;  /* oxblood — links, primary accent */
  --accent-deep:  #5c1f1a;  /* hover, pressed */
  --accent-soft:  #f3e7e1;  /* oxblood wash */
  --gold:         #8a6a2f;  /* numerals, ornament rules */
  --gold-soft:    #f0e7d3;  /* gold wash */
  --scripture:    #2f4858;  /* ink-blue — Scripture references only */
  --scripture-soft: #e6edf1;

  /* Type */
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
           'URW Palladio L', Georgia, 'Times New Roman', serif;
  --sans: 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI',
          Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Measure & rhythm */
  --measure: 40rem;
  --gutter: 1.5rem;
  --shadow-card: 0 1px 2px rgba(60, 45, 25, 0.05),
                 0 8px 28px -10px rgba(60, 45, 25, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #191512;
    --paper-raised: #221d18;
    --paper-sunk:   #201b16;
    --ink:          #e6ddcd;
    --ink-strong:   #f6efe2;
    --muted:        #a3968400;  /* overridden below — kept opaque */
    --muted:        #a39684;
    --muted-soft:   #8b7f6f;
    --rule:         #3a322a;
    --rule-soft:    #2d2721;
    --accent:       #d08a7d;
    --accent-deep:  #e7a89c;
    --accent-soft:  #2f2320;
    --gold:         #c6a463;
    --gold-soft:    #2c2519;
    --scripture:    #8fb2c4;
    --scripture-soft: #1e262b;
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.5),
                    0 10px 30px -12px rgba(0, 0, 0, 0.7);
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

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

html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  font-kerning: normal;
  font-variant-numeric: oldstyle-num proportional-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold-soft); color: var(--ink-strong); }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main.wrap {
  padding-top: 2.75rem;
  padding-bottom: 4rem;
}

/* Skip link (see HTML snippet) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.6rem 1rem;
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
}

/* --------------------------------------------------------------------------
   3. Headings & prose
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink-strong);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.4rem);
  line-height: 1.16;
  margin: 0 0 0.6rem;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 1.32rem;
  line-height: 1.28;
  margin: 2.5rem 0 0.65rem;
}

h3 {
  font-size: 1.08rem;
  line-height: 1.35;
  margin: 1.9rem 0 0.4rem;
  color: var(--ink);
}

h4 {
  font-size: 0.78rem;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 1.6rem 0 0.35rem;
}

p { margin: 0 0 1.05rem; }

.tagline {
  color: var(--muted);
  font-size: 1.06rem;
  font-style: italic;
  line-height: 1.55;
  margin: 0 0 1.5rem;
  max-width: 34rem;
}

.hint,
.no-lessons {
  color: var(--muted);
  font-size: 0.94rem;
}

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

/* Links — quiet by default, oxblood, thin underline that thickens on hover */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover {
  color: var(--accent-deep);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

a:focus-visible,
.ref:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

strong, b { font-weight: 700; color: var(--ink-strong); }

em, i { font-style: italic; }

small { font-size: 0.86em; color: var(--muted); }

code, pre, kbd {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas,
               'Liberation Mono', monospace;
  font-size: 0.88em;
}

code {
  background: var(--paper-sunk);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 0.08em 0.32em;
}

pre {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code { background: none; border: 0; padding: 0; }

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

/* Tables in lesson content */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.94rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

th {
  font-family: var(--sans);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

/* --------------------------------------------------------------------------
   4. Site header & nav
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
  border-bottom: 3px double var(--rule);
}

.site-header .wrap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 0.85rem;
  padding-bottom: 0.8rem;
}

.brand {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink-strong);
  text-decoration: none;
  letter-spacing: 0.04em;
  font-variant-caps: small-caps;
  text-transform: lowercase; /* lets small-caps do the work on mixed-case names */
  line-height: 1.2;
}

.brand:hover { color: var(--accent); text-decoration: none; }

.brand-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-top: 0.15rem;
}

.nav {
  display: flex;
  align-items: baseline;
  gap: 1.35rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav a:hover { color: var(--ink-strong); border-bottom-color: var(--rule); }

.nav a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Page & article headers (lesson + chapter share .lesson-header)
   -------------------------------------------------------------------------- */

.lesson-header {
  margin: 0 0 2.1rem;
  padding-bottom: 1.15rem;
  border-bottom: 3px double var(--rule);
}

.lesson-header h1 { margin-bottom: 0.35rem; }

/* Kicker with a rule that runs to the right margin */
.lesson-number {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 0.7rem;
}

.lesson-number::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--rule);
}

.lesson-tools {
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin: 0.55rem 0 0;
}

.lesson-tools a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted-soft);
  padding-bottom: 1px;
}

.lesson-tools a::before { content: "↓ "; color: var(--gold); }

.lesson-tools a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Lesson body
   -------------------------------------------------------------------------- */

.lesson { }

/* Lead paragraph: the first paragraph after the header carries slightly more weight */
.lesson-header + p {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink-strong);
}

.lesson h2 {
  padding-top: 0.15rem;
  border-top: 1px solid var(--rule-soft);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
}

.lesson h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.lesson blockquote {
  margin: 1.5rem 0;
  padding: 0.15rem 0 0.15rem 1.35rem;
  border-left: 2px solid var(--gold);
  background: none;
  border-radius: 0;
  color: var(--ink);
  font-style: italic;
  font-size: 1.01rem;
  line-height: 1.6;
}

.lesson blockquote p:last-child { margin-bottom: 0; }

.lesson blockquote cite,
.lesson blockquote footer {
  display: block;
  font-style: normal;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.5rem;
}

.lesson ul, .lesson ol { padding-left: 1.3rem; margin: 1rem 0 1.2rem; }

.lesson li { margin: 0.45rem 0; padding-left: 0.15rem; }

.lesson li::marker { color: var(--gold); }

.lesson li > ul, .lesson li > ol { margin: 0.4rem 0 0.5rem; }

.lesson strong { color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   7. Confession text — numbered paragraphs with hanging numerals
   -------------------------------------------------------------------------- */

article.chapter { }

article.chapter > p {
  position: relative;
  padding-left: 3rem;
  margin: 0 0 1.35rem;
  text-align: left;
  hyphens: auto;
}

/* Preferred: <span class="sec-n">1</span> (see HTML snippet) */
article.chapter > p > .sec-n {
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 2.1rem;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gold);
  user-select: none;
}

/* Fallback: markdown's **1.** if the build isn't updated */
article.chapter > p > strong:first-child {
  position: absolute;
  left: 0;
  top: 0.08em;
  width: 2.3rem;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
}

/* Emphasis inside the Confession text stays ink, not accent — it's frequent */
article.chapter > p strong:not(:first-child) { color: var(--ink-strong); }

/* --------------------------------------------------------------------------
   8. Index — chapter list
   -------------------------------------------------------------------------- */

h2.chapter {
  scroll-margin-top: 5.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin: 2.6rem 0 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
}

h2.chapter::after {
  content: "";
  flex: 1 1 auto;
  height: 0;
}

h2.chapter a {
  color: var(--ink-strong);
  text-decoration: none;
}

h2.chapter a:hover { color: var(--accent); }

/* Optional split markup: <span class="chapter-n"> / <span class="chapter-title"> */
.chapter-n {
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  margin-right: 0.5rem;
}

.chapter-title {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-strong);
}

ol.lessons,
.chapter-lessons ol {
  list-style: none;
  counter-reset: lessonitem;
  margin: 0.6rem 0 0;
  padding-left: 0;
}

ol.lessons li,
.chapter-lessons ol li {
  counter-increment: lessonitem;
  position: relative;
  padding-left: 2.25rem;
  margin: 0.5rem 0;
  line-height: 1.5;
}

ol.lessons li::before,
.chapter-lessons ol li::before {
  content: counter(lessonitem) ".";
  position: absolute;
  left: 0;
  width: 1.6rem;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold);
  top: 0.16em;
}

ol.lessons a,
.chapter-lessons ol a {
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid transparent;
}

ol.lessons a:hover,
.chapter-lessons ol a:hover {
  color: var(--accent);
  border-bottom-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

ol.lessons a strong,
.chapter-lessons ol a strong { font-weight: 600; color: inherit; }

.part {
  color: var(--muted-soft);
  font-size: 0.85em;
  font-style: italic;
}

.index-links {
  margin-top: 3.5rem;
  padding-top: 1.3rem;
  border-top: 3px double var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.index-links a {
  text-decoration: none;
  font-weight: 700;
  color: var(--accent);
}

.index-links a::after { content: " →"; color: var(--gold); }

.index-links a:hover { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   9. Section blocks (lessons for this chapter, notes, refs)
   -------------------------------------------------------------------------- */

.chapter-lessons,
.chapter-refs,
.chapter-songs,
.lesson-notes,
.lesson-refs,
.lesson-songs {
  margin-top: 2.75rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}

.chapter-lessons h2,
.chapter-refs h2,
.chapter-songs h2,
.lesson-notes h2,
.lesson-refs h2,
.lesson-songs h2 {
  margin: 0 0 0.9rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  border: 0;
  padding: 0;
}

.lesson-notes ol {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  padding-left: 1.4rem;
  margin: 0;
}

.lesson-notes li { margin: 0.4rem 0; }

.lesson-notes li::marker { color: var(--gold); }

/* markdown-it-footnote output */
.footnotes {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin-top: 2.75rem;
  padding-top: 1rem;
}

.footnotes hr { display: none; }

.footnotes ol { padding-left: 1.4rem; margin: 0; }

.footnotes li { margin: 0.4rem 0; }

.footnote-ref a {
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.72em;
  font-weight: 700;
  padding: 0 0.1em;
  color: var(--gold);
}

.footnote-backref { text-decoration: none; color: var(--muted-soft); }

/* --------------------------------------------------------------------------
   10. Scripture references & glossary links
   -------------------------------------------------------------------------- */

.ref {
  color: var(--scripture);
  border-bottom: 1px dotted color-mix(in srgb, var(--scripture) 55%, transparent);
  cursor: help;
  white-space: nowrap;
  font-variant-numeric: lining-nums;
  padding: 0 0.03em;
  border-radius: 2px;
  transition: background-color 0.12s ease;
}

.ref:hover {
  background: var(--scripture-soft);
  border-bottom-style: solid;
}

.glossary-link {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 55%, transparent);
  cursor: pointer;
  padding: 0 0.03em;
  border-radius: 2px;
  transition: background-color 0.12s ease;
}

.glossary-link:hover {
  background: var(--accent-soft);
  border-bottom-style: solid;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   11. Popup (built by popup.js)
   -------------------------------------------------------------------------- */

.ref-tip {
  display: none;
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: min(24rem, calc(100vw - 1.5rem));
  max-height: min(18rem, 60vh);
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  padding: 0.85rem 1rem 0.75rem;
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}

.tip-term {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.05em;
  color: var(--ink-strong);
  margin-bottom: 0.2rem;
}

.tip-aliases {
  color: var(--muted);
  font-style: italic;
  font-size: 0.84rem;
  margin-bottom: 0.45rem;
}

.tip-def p { margin: 0.35rem 0; }

.tip-def p:first-child { margin-top: 0; }

.tip-def p:last-child { margin-bottom: 0; }

.tip-passage {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}

.tip-passage sup,
.tip-passage b {
  font-size: 0.72em;
  font-weight: 700;
  color: var(--gold);
  font-family: var(--sans);
  vertical-align: 0.35em;
  margin-right: 0.12em;
}

.tip-foot {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tip-foot a { text-decoration: none; font-weight: 600; }

.tip-foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   12. Glossary
   -------------------------------------------------------------------------- */

.glossary-term {
  scroll-margin-top: 5.5rem;
  padding: 1.5rem 0 1.35rem;
  border-bottom: 1px solid var(--rule-soft);
}

.glossary-term:last-of-type { border-bottom: 0; }

.glossary-term h2 {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  font-variant-caps: small-caps;
  letter-spacing: 0.045em;
  color: var(--ink-strong);
  border: 0;
  padding: 0;
}

.glossary-term .aliases {
  color: var(--muted);
  font-style: italic;
  font-size: 0.92rem;
  margin: 0 0 0.55rem;
}

.glossary-term > p { margin: 0 0 0.7rem; }

.glossary-term .used-in {
  font-family: var(--sans);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
  margin: 0.85rem 0 0;
  padding-left: 0.85rem;
  border-left: 2px solid var(--gold-soft);
}

.glossary-term .used-in span { display: block; margin-top: 0.22rem; }

.glossary-term .used-in strong {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9em;
}

.glossary-term .used-in a { text-decoration: none; border-bottom: 1px solid transparent; }

.glossary-term .used-in a:hover { border-bottom-color: currentColor; }

/* In-lesson glossary call-out */
.glossary-box {
  margin-top: 2.75rem;
  padding: 1.15rem 1.35rem 1.25rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  background: var(--paper-sunk);
}

.glossary-box h2 {
  margin: 0 0 0.7rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gold);
  border: 0;
  padding: 0;
}

.glossary-box ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.glossary-box li {
  margin: 0.6rem 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--muted);
}

.glossary-box li a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.glossary-box li a strong {
  color: var(--accent);
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
  font-weight: 600;
}

.glossary-box li a:hover strong { color: var(--accent-deep); }

/* --------------------------------------------------------------------------
   13. Reference cards
   -------------------------------------------------------------------------- */

.ref-group { margin-bottom: 2rem; }

.ref-group ol { font-size: 0.94rem; }

.ref-note {
  scroll-margin-top: 5.5rem;
  padding: 1.05rem 1.25rem 0.95rem;
  margin: 1.1rem 0;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--gold);
  border-radius: 2px;
  background: var(--paper-raised);
}

.chapter-refs .ref-note,
.lesson-refs .ref-note { background: var(--paper-raised); }

.ref-note .ref-source {
  margin: 0 0 0.45rem;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-strong);
}

.ref-note .ref-source em,
.ref-note .ref-title {
  font-style: italic;
  color: var(--ink-strong);
}

.ref-author { font-variant-caps: small-caps; letter-spacing: 0.04em; }

.ref-pages {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}

.ref-note .ref-quote {
  margin: 0.7rem 0 0.6rem;
  padding: 0.1rem 0 0.1rem 1.1rem;
  border-left: 2px solid var(--rule);
  background: none;
  color: var(--ink);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.58;
}

.ref-note .ref-meta {
  margin: 0.75rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  line-height: 1.9;
}

.ref-note .ref-meta a { text-decoration: none; font-weight: 600; }

.ref-note .ref-meta a:hover { text-decoration: underline; }

/* "Relates to" chips */
.ref-rel { display: inline; }

.ref-chip {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin: 0 0.15rem 0.2rem 0;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted) !important;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  white-space: nowrap;
}

.ref-chip:hover {
  border-color: var(--accent);
  color: var(--accent) !important;
  background: var(--accent-soft);
}

/* Song cards — a lighter sibling of .ref-note */
.song-note {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}

.song-note:last-of-type { border-bottom: 0; }

.song-note .song-title {
  margin: 0 0 0.3rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.song-note .song-title a { text-decoration: none; border-bottom: 1px solid transparent; }

.song-note .song-title a:hover { border-bottom-color: currentColor; }

.song-note-text { margin: 0; color: var(--ink-3); font-size: 0.95rem; line-height: 1.55; }

.song-group { margin-bottom: 1.5rem; }

/* --------------------------------------------------------------------------
   14. Pager
   -------------------------------------------------------------------------- */

.pager {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 1rem;
  margin-top: 3.5rem;
  padding-top: 1.2rem;
  border-top: 3px double var(--rule);
  font-family: var(--sans);
  font-size: 0.86rem;
}

.pager a {
  text-decoration: none;
  color: var(--ink);
  max-width: 47%;
  line-height: 1.4;
  padding: 0.45rem 0;
  border-bottom: 1px solid transparent;
}

.pager a:hover { color: var(--accent); border-bottom-color: var(--rule); }

.pager .pager-next { text-align: right; margin-left: auto; }

.pager .pager-prev::before,
.pager .pager-next::before {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 0.15rem;
}

.pager .pager-prev::before { content: "Previous"; }
.pager .pager-next::before { content: "Next"; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--rule);
  padding: 1.4rem 0 2.5rem;
  color: var(--muted-soft);
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.site-footer p { margin: 0; }

.site-footer a { color: var(--muted); }

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  html { font-size: 16.5px; }
  main.wrap { padding-top: 2rem; }
  article.chapter > p { padding-left: 2.4rem; }
  article.chapter > p > .sec-n,
  article.chapter > p > strong:first-child { width: 1.75rem; }
}

@media (max-width: 560px) {
  :root { --gutter: 1.1rem; }
  html { font-size: 16px; }

  .site-header .wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    padding-bottom: 0.5rem;
  }

  /* Nav becomes a single scrollable strip rather than wrapping to three rows */
  .nav {
    gap: 1.1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.35rem;
    margin-bottom: -0.15rem;
  }

  .nav::-webkit-scrollbar { display: none; }

  h2.chapter { flex-wrap: wrap; gap: 0.35rem; }

  .chapter-title { font-size: 1.12rem; }

  .pager { flex-direction: column; gap: 0.4rem; }
  .pager a { max-width: 100%; }
  .pager .pager-next { text-align: left; margin-left: 0; }

  .ref-note { padding-left: 1rem; padding-right: 1rem; }

  .ref-tip {
    max-width: calc(100vw - 1.5rem);
    font-size: 0.94rem;
  }

  .glossary-box { padding: 1rem 1.05rem; }

  /* Tap targets breathe a little more on touch */
  .ref, .glossary-link { padding: 0.05em 0.1em; }
}

/* --------------------------------------------------------------------------
   17. Print — this site should print like a handout
   -------------------------------------------------------------------------- */

@media print {
  :root {
    --paper: #fff;
    --paper-raised: #fff;
    --paper-sunk: #fff;
    --ink: #000;
    --ink-strong: #000;
    --muted: #444;
    --rule: #999;
    --accent: #000;
    --gold: #555;
  }

  html { font-size: 11.5pt; }
  body { background: #fff; }

  .site-header,
  .site-footer,
  .pager,
  .ref-tip,
  .lesson-tools,
  .skip-link { display: none !important; }

  main.wrap { max-width: none; padding: 0; }

  a { color: #000; text-decoration: none; }

  .ref, .glossary-link { border-bottom: 0; color: #000; }

  .ref-note,
  .glossary-box,
  .glossary-term { break-inside: avoid; }

  h1, h2, h3 { break-after: avoid; }

  .ref-note .ref-meta a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
  }
}