:root {
  color-scheme: light;
  --paper: #fcfaf6;
  --parchment: #f7f3ec;
  --ink: #11120f;
  --rubric: #a51f2d;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
}

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

html {
  min-width: 20rem;
  background: var(--parchment);
}

body {
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.prayer-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(3rem, 8vh, 7rem) clamp(1.25rem, 8vw, 8rem);
}

.prayer {
  width: min(100%, 72rem);
}

.prayer__text {
  width: fit-content;
  max-width: 100%;
  min-height: 4.16em;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.5vw, 5.6rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.prayer-line {
  display: inline-block;
  white-space: nowrap;
}

.syllable {
  opacity: 1;
}

.js .syllable {
  opacity: 0;
  color: var(--ink);
  transition:
    color 420ms ease-out,
    opacity 680ms ease-out;
}

.js .syllable.is-active {
  opacity: 1;
  color: var(--rubric);
}

.js .syllable.is-complete {
  opacity: 1;
  color: var(--ink);
}

.js .prayer.is-resetting .syllable {
  transition-duration: 900ms;
  transition-timing-function: ease-in;
}

@media (max-width: 38rem) {
  .prayer-page {
    align-items: center;
    padding-inline: 1.25rem;
  }

  .prayer__text {
    min-height: 4.2em;
    font-size: clamp(2.15rem, 10.5vw, 3.8rem);
    line-height: 1.02;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .syllable {
    opacity: 1;
    transition: none;
  }
}