:root {
  --ink: #073b52;
  --ink-dark: #052d3d;
  --paper: #f5ddb0;
  --paper-light: #fff2cf;
  --red: #a9291b;
  --yellow: #e8a52b;
  --green: #38652f;
  --line: rgba(7, 59, 82, .32);
  --display: "Alfa Slab One", Rockwell, serif;
  --condensed: "Oswald", "Arial Narrow", sans-serif;
  --reading: "Atkinson Hyperlegible", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  background: var(--ink-dark);
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  max-width: 760px;
  margin: 0 auto;
  color: var(--ink-dark);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 15% 20%, rgba(115, 58, 21, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 65%, rgba(115, 58, 21, .06) 0 1px, transparent 1.5px);
  background-size: 17px 19px, 23px 29px;
  font-family: var(--reading);
  box-shadow: 0 0 40px rgba(0, 0, 0, .4);
}

button { font: inherit; }

button:focus-visible {
  outline: 4px solid var(--yellow);
  outline-offset: 3px;
}

.song-picker {
  position: sticky;
  z-index: 10;
  top: 8px;
  margin: 0 auto 26px;
  max-width: 650px;
}

.song-picker__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64px;
  padding: 10px 15px 10px 18px;
  color: var(--paper-light);
  background: var(--red);
  border: 2px solid var(--ink-dark);
  border-radius: 3px;
  box-shadow: 0 6px 14px rgba(55, 29, 13, .23);
  text-align: left;
  cursor: pointer;
}

.song-picker__toggle small {
  display: block;
  margin-bottom: 2px;
  color: #ffd999;
  font: 600 .72rem/1 var(--condensed);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.song-picker__toggle strong {
  font: 600 1.12rem/1.2 var(--reading);
}

.song-picker svg,
.page-turner svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.song-picker__toggle svg { transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.song-picker__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.song-picker__list {
  max-height: min(65vh, 530px);
  margin: 5px 0 0;
  padding: 5px;
  overflow-y: auto;
  color: var(--paper-light);
  background: var(--ink-dark);
  border: 2px solid var(--paper-light);
  border-radius: 3px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

.song-picker__list li { list-style: none; }

.song-picker__list button {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  align-items: center;
  padding: 9px 10px;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(245, 221, 176, .18);
  text-align: left;
  cursor: pointer;
}

.song-picker__list li:last-child button { border-bottom: 0; }
.song-picker__list button:hover,
.song-picker__list button[aria-current="true"] { background: var(--red); }
.song-picker__list .list-number { color: var(--yellow); font: 700 .85rem var(--condensed); }

.song {
  max-width: 650px;
  min-height: 56vh;
  margin: 0 auto;
}

.song__heading {
  padding-bottom: 14px;
  border-bottom: 4px double var(--ink);
  text-align: center;
}

.song__number {
  display: inline-block;
  margin-bottom: 6px;
  color: var(--red);
  font: 700 .82rem/1 var(--condensed);
  letter-spacing: .08em;
}

.song h2 {
  max-width: 12ch;
  margin: 0 auto;
  color: var(--ink);
  font: 700 clamp(2.15rem, 10vw, 4.6rem)/.98 var(--condensed);
  letter-spacing: -.025em;
  text-wrap: balance;
  text-transform: uppercase;
}

.song__lyrics {
  max-width: 34rem;
  margin: 0 auto;
  padding: 26px 4px 18px;
  font-size: clamp(1.2rem, 4.9vw, 1.52rem);
  line-height: 1.58;
}

.lyrics-placeholder {
  margin: 5vh auto;
  padding: 24px 16px;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  text-align: center;
}

.lyrics-placeholder strong {
  display: block;
  margin-bottom: 7px;
  color: var(--red);
  font: 700 1.25rem/1.2 var(--condensed);
  text-transform: uppercase;
}

.lyrics-placeholder p { margin: 0; font-size: 1rem; line-height: 1.5; }

.verse { margin: 0 0 1.4em; white-space: pre-line; }
.chorus { margin: 1.7em -4px; padding: 14px 12px; color: var(--ink); }

.page-turner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  max-width: 650px;
  margin: 10px auto 0;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.page-turner button {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  color: var(--ink);
  background: transparent;
  border: 0;
  font-weight: 700;
  cursor: pointer;
}

.page-turner button:last-child { justify-self: end; }
.page-turner button:disabled { opacity: .34; cursor: default; }

.page-turner__dots { display: flex; gap: 4px; }
.page-turner__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.page-turner__dots i.is-current { background: var(--red); transform: scale(1.35); }

footer {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px calc(15px + env(safe-area-inset-bottom));
  color: var(--paper-light);
  background: var(--ink);
  border-top: 5px double var(--paper);
  font: 600 clamp(.95rem, 4vw, 1.25rem)/1.25 var(--condensed);
  letter-spacing: .035em;
  text-align: center;
  text-transform: uppercase;
}

footer::before,
footer::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 3px solid var(--yellow);
  border-radius: 50%;
}

@media (min-width: 600px) {
  main { padding: 12px 36px 34px; }
}

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

@media print {
  html, body { background: white; box-shadow: none; }
  .song-picker, .page-turner { display: none; }
  .song { min-height: 0; }
}