@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

:root {
  --parchment: #ece0c4;
  --parchment-hi: #f4ecd6;
  --ink: #2c261d;
  --ink-soft: #5a4f3d;
  --bronze: #8a6d3b;
  --bronze-light: #a98a52;
  --oxblood: #7a2e2e;
  --navy: #24344d;
  --leather-1: #3a2c1e;
  --leather-2: #241a10;
  --leather-3: #150e07;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  padding: clamp(8px, 3vw, 34px);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--leather-1) 0%, var(--leather-2) 55%, var(--leather-3) 100%) fixed;
}

/* ---------- The parchment "page" ---------- */
.page {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 6vw, 60px) clamp(20px, 5.5vw, 58px) clamp(30px, 6vw, 64px);
  background-color: var(--parchment);
  background-image:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.40), transparent 42%),
    radial-gradient(ellipse at 88% 94%, rgba(120, 90, 40, 0.20), transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, 0.14), transparent 72%),
    radial-gradient(ellipse at 65% 20%, rgba(150, 120, 60, 0.08), transparent 40%);
  border: 1px solid #b7a074;
  box-shadow:
    inset 0 0 70px rgba(120, 90, 40, 0.28),
    inset 0 0 8px rgba(120, 90, 40, 0.22),
    0 18px 50px rgba(0, 0, 0, 0.65);
}

/* inner engraved frame */
.page::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(138, 109, 59, 0.55);
  box-shadow: 0 0 0 3px rgba(138, 109, 59, 0.12);
  pointer-events: none;
}

/* ---------- Typography ---------- */
h1, h2, h3 {
  font-family: 'Cinzel', 'EB Garamond', serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

a { color: var(--oxblood); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

.kicker {
  font-family: 'Cinzel', serif;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.62rem, 2.3vw, 0.74rem);
  color: var(--oxblood);
  margin: 0 0 0.4em;
}

/* ---------- Masthead ---------- */
.masthead { text-align: center; margin-bottom: clamp(18px, 4vw, 30px); }
.masthead .brand {
  font-family: 'IM Fell English SC', serif;
  font-size: clamp(1.9rem, 8vw, 3.3rem);
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 0.1em 0 0.05em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.masthead .subtitle {
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.95rem, 3vw, 1.1rem);
  margin: 0;
}

.compass {
  width: clamp(72px, 20vw, 116px);
  height: auto;
  display: block;
  margin: 0 auto clamp(6px, 2vw, 14px);
  color: var(--bronze);
}

/* ---------- Dividers ---------- */
.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(20px, 5vw, 34px) 0;
  color: var(--bronze);
}
.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}
.divider .glyph { font-size: 1.15rem; line-height: 1; }

/* ---------- Top / bottom navigation ---------- */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: clamp(14px, 3.5vw, 22px);
}
.topnav a { color: var(--oxblood); }
.topnav .mark { color: var(--bronze); }

.bottomnav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: clamp(24px, 6vw, 40px);
  padding-top: 18px;
  border-top: 1px solid rgba(138, 109, 59, 0.4);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}
.bottomnav a { color: var(--oxblood); }
.bottomnav .label { display: block; font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
.bottomnav .next { text-align: right; }

.colophon {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin-top: clamp(18px, 4vw, 28px);
}

/* ---------- Song title block ---------- */
.songtitle { text-align: center; margin-bottom: clamp(16px, 4vw, 26px); }
.songtitle .no {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--bronze);
  margin-bottom: 0.5em;
}
.songtitle h1 {
  font-size: clamp(1.7rem, 7vw, 2.7rem);
  font-weight: 600;
}
.songtitle .alt {
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  margin-top: 0.35em;
}

/* ---------- Trivia / about box ---------- */
.trivia {
  background: rgba(138, 109, 59, 0.09);
  border-left: 3px solid var(--bronze);
  padding: clamp(14px, 3.5vw, 22px) clamp(16px, 4vw, 26px);
  margin: 0 0 clamp(20px, 5vw, 30px);
  font-size: clamp(1rem, 3vw, 1.08rem);
}
.trivia h2 {
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.55em;
}
.trivia p { margin: 0 0 0.7em; }
.trivia p:last-child { margin-bottom: 0; }
.trivia .src { font-size: 0.82rem; font-style: italic; color: var(--ink-soft); }

/* ---------- Lyrics ---------- */
.lyrics {
  font-size: clamp(1.06rem, 3.05vw, 1.22rem);
  line-height: 1.85;
  color: var(--ink);
}
.lyrics .verse { margin: 0 0 1.15em; }
.lyrics .chorus {
  font-style: italic;
  color: var(--oxblood);
  margin: 0 0 1.15em;
  padding-left: 0.15em;
}
.lyrics .chorus-mark {
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze);
  margin: 0.1em 0 1.15em;
}
/* drop cap on the opening line */
.lyrics > p:first-child::first-letter {
  font-family: 'IM Fell English SC', serif;
  font-size: 3.15em;
  line-height: 0.78;
  float: left;
  padding: 0.06em 0.12em 0 0;
  color: var(--oxblood);
}

/* ---------- Table of contents (overview) ---------- */
.intro {
  font-size: clamp(1rem, 3vw, 1.12rem);
  color: var(--ink);
  text-align: center;
  max-width: 46ch;
  margin: 0 auto clamp(18px, 4vw, 26px);
}
.intro em { color: var(--oxblood); }

.toc { list-style: none; margin: 0; padding: 0; counter-reset: song; }
.toc-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding: clamp(12px, 3vw, 16px) 4px;
  border-bottom: 1px dotted rgba(138, 109, 59, 0.6);
}
.toc-item:first-child { border-top: 1px dotted rgba(138, 109, 59, 0.6); }
.toc-num {
  font-family: 'Cinzel', serif;
  color: var(--oxblood);
  font-size: 0.95rem;
  min-width: 1.6em;
}
.toc-main { display: block; }
.toc-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.toc-desc {
  display: block;
  font-style: italic;
  color: var(--ink-soft);
  font-size: clamp(0.86rem, 2.6vw, 0.96rem);
  margin-top: 2px;
}
.toc-arrow { color: var(--bronze); font-size: 1.1rem; }
.toc-item a { display: contents; }
.toc-item a:hover .toc-title, .toc-item a:focus .toc-title { color: var(--oxblood); text-decoration: underline; }

/* ---------- Cover (index) ---------- */
.cover { text-align: center; }
.cover .rule {
  width: 60%;
  max-width: 220px;
  height: 2px;
  margin: clamp(14px, 3.5vw, 22px) auto;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
}
.cover .est {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--bronze);
}

/* small screens: tighten the inner frame so it never crowds text */
@media (max-width: 420px) {
  .page::before { inset: 6px; }
}

/* desktop: widen the page and bump text sizes */
@media (min-width: 900px) {
  .page {
    max-width: 880px;
    padding: 48px 64px 56px;
  }
  .lyrics { font-size: 1.28rem; }
  .trivia { font-size: 1.1rem; }
}

@media (min-width: 1200px) {
  .page { max-width: 920px; padding: 54px 72px 60px; }
  .lyrics { font-size: 1.32rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}