:root {
  --paper: #f4ecd8;
  --paper-edge: #e9dcbd;
  --ink: #2a211a;
  --ink-soft: #6b5a48;
  --accent: #7a1f1f;
  --rule: #c9b48e;
  --chip: #ebdfc3;
  --scale: 1;
}
:root[data-theme="night"] {
  --paper: #1d1914;
  --paper-edge: #14110d;
  --ink: #eadfc8;
  --ink-soft: #a8987f;
  --accent: #e0a060;
  --rule: #4a3f31;
  --chip: #2a241c;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper-edge);
  color: var(--ink);
  font-family: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  font-size: calc(19px * var(--scale));
  line-height: 1.45;
}
button { font: inherit; color: inherit; }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-size: 17px;
}
.brand {
  color: var(--accent); text-decoration: none;
  font-variant: small-caps; letter-spacing: .12em; font-size: 24px; font-weight: 600;
}
.tools { display: flex; align-items: center; gap: 4px; }
.langs { display: flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; margin-right: 4px; }
.langs button {
  background: none; border: 0; padding: 5px 9px; cursor: pointer; letter-spacing: .05em; font-size: 15px;
}
.langs button + button { border-left: 1px solid var(--rule); }
.langs button[aria-pressed="true"] { background: var(--accent); color: var(--paper); }
.icon {
  background: none; border: 0; cursor: pointer; padding: 5px 7px; min-width: 32px; font-size: 17px;
}
.icon sup { font-size: .6em; }

/* ---------- the page ---------- */
.page {
  max-width: 40rem;
  margin: 0 auto;
  min-height: calc(100vh - 50px);
  background: var(--paper);
  padding: 28px 22px 48px;
  box-shadow: 0 0 0 1px var(--rule), 0 6px 30px rgba(0,0,0,.08);
}
@media (min-width: 42rem) {
  .page { margin: 24px auto 40px; min-height: auto; padding: 48px 56px 56px; }
}

/* ---------- title page / contents ---------- */
.cover { text-align: center; margin-bottom: 26px; }
.cover h1 {
  margin: 0; font-weight: 500; font-variant: small-caps; letter-spacing: .14em;
  font-size: 2.6em; color: var(--accent); line-height: 1.1;
}
.cover .sub { font-style: italic; color: var(--ink-soft); margin-top: 4px; }
.fleuron { color: var(--accent); text-align: center; margin: 14px 0; letter-spacing: .6em; font-size: .9em; }

.finder { display: flex; gap: 8px; margin: 18px 0 10px; }
.finder input {
  flex: 1; min-width: 0;
  font: inherit; font-size: 17px; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  padding: 6px 2px; border-radius: 0;
}
.finder input:focus { outline: none; border-bottom-color: var(--accent); }
.finder #goto { flex: 0 0 5.2em; text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 22px; }
.chips button {
  background: var(--chip); border: 1px solid var(--rule); border-radius: 999px;
  padding: 3px 12px; font-size: 16px; cursor: pointer;
}
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

h2.toc-head {
  font-weight: 500; font-variant: small-caps; letter-spacing: .12em; text-align: center;
  font-size: 1.15em; margin: 8px 0 12px; color: var(--ink-soft);
}
ol.toc { list-style: none; margin: 0; padding: 0; }
ol.toc a {
  display: flex; align-items: baseline; gap: 6px;
  padding: 7px 0; color: var(--ink); text-decoration: none;
}
ol.toc a:hover .t, ol.toc a:focus .t { color: var(--accent); }
ol.toc .n { flex: 0 0 2.1em; text-align: right; color: var(--accent); font-variant-numeric: oldstyle-nums; }
ol.toc .t { flex: 0 1 auto; }
ol.toc .dots { flex: 1 1 auto; border-bottom: 1px dotted var(--rule); transform: translateY(-4px); min-width: 12px; }
ol.toc .l { flex: 0 0 auto; font-variant: small-caps; letter-spacing: .08em; color: var(--ink-soft); font-size: .85em; }
.empty { text-align: center; font-style: italic; color: var(--ink-soft); }

/* ---------- song ---------- */
.song-head { text-align: center; margin-bottom: 22px; }
.num {
  color: var(--accent); font-size: 1.1em; letter-spacing: .1em;
}
.num b { font-size: 1.9em; font-weight: 500; }
.song-head h1 {
  margin: 4px 0 6px; font-weight: 600; font-size: 1.75em; line-height: 1.15;
  font-variant: small-caps; letter-spacing: .04em;
}
.melody { font-style: italic; color: var(--ink-soft); }
.note {
  font-size: .88em; color: var(--ink-soft); max-width: 30em; margin: 10px auto 0;
}
.rule { border: 0; border-top: 1px solid var(--rule); width: 40%; margin: 18px auto; }

.lyrics { font-size: 1.12em; }
.stanza { margin: 0 0 1.1em; }
.stanza .line { display: block; padding-left: 1.2em; text-indent: -1.2em; }
.rep { color: var(--accent); font-weight: 600; letter-spacing: -.02em; }
.cue { font-style: italic; color: var(--ink-soft); }

.folio {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 36px; padding-top: 14px; border-top: 1px solid var(--rule);
}
.folio a {
  color: var(--ink); text-decoration: none; max-width: 42%;
  font-size: .9em; line-height: 1.25;
}
.folio a small { display: block; color: var(--accent); letter-spacing: .08em; }
.folio a.next { text-align: right; }
.folio .pg { color: var(--ink-soft); font-variant-numeric: oldstyle-nums; }
.folio .toc-link { font-variant: small-caps; letter-spacing: .1em; color: var(--ink-soft); }

.colophon { margin-top: 36px; text-align: center; font-size: .8em; color: var(--ink-soft); font-style: italic; }

@media print {
  .bar, .finder, .chips, .folio { display: none; }
  body, .page { background: #fff; box-shadow: none; }
}