* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  padding: 1.75rem 1.15rem 2.75rem;
  font-family: "Noto Serif Tamil", Palatino, serif;
  font-weight: 600;
  position: relative;
  z-index: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 14% 52% at -8% 40%, var(--glow-a), transparent 72%),
    radial-gradient(ellipse 8% 30% at 108% 68%, var(--glow-b), transparent 70%);
}
main { width: min(100%, 30rem); margin: 0 auto; }
.back { margin: 0; font-size: 0.98rem; line-height: 1.4; }
.back a { color: var(--mark); text-decoration: none; }
.back a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.back a:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
h1 {
  margin: 0.7rem 0 1.15rem;
  font-weight: 600;
  font-size: clamp(1.75rem, 6.6vw, 2.2rem);
  line-height: 1.3;
}
.rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3.35rem;
  padding: 0.55rem 0.95rem;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--soft) 40%, transparent);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.row .name { font-weight: 600; font-size: 1.12rem; line-height: 1.35; }
.row .go { flex: none; color: var(--mark); font-size: 1.25rem; line-height: 1; }
.row:hover { border-color: color-mix(in srgb, var(--mark) 65%, var(--line)); }
.row:active { background: color-mix(in srgb, var(--soft) 85%, transparent); }
.row:focus-visible { outline: 2px solid var(--mark); outline-offset: 3px; }
.empty {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  padding: 0.95rem 1.05rem;
  color: color-mix(in srgb, var(--ink) 72%, transparent);
  background: color-mix(in srgb, var(--soft) 28%, transparent);
  font-size: 1.02rem;
  line-height: 1.45;
}
@media (min-width: 760px) {
  body::before {
    background:
      radial-gradient(ellipse 22% 68% at -4% 44%, var(--glow-a-wide), transparent 70%),
      radial-gradient(ellipse 12% 40% at 106% 60%, var(--glow-b-wide), transparent 72%);
  }
}
@media (prefers-reduced-motion: reduce) { .row { transition: none; } }
/* Song page: verses as printed, one column. Verse type and text-size scaling match the Thirumurai song page. */
.songs { display: grid; gap: 1.6rem; }
.songs h2 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--mark);
}
.verse {
  font-family: "Noto Serif Tamil", serif;
  font-weight: 500;
  font-size: calc(clamp(1.04rem, 2.4vw, 1.4rem) * var(--read-scale, 1));
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.verse .l { display: block; }
.verse .num { color: var(--muted); font-size: 0.82em; }
@media (min-width: 1000px) {
  .verse { font-size: calc(1.4rem * var(--read-scale, 1)); line-height: 1.75; }
}
.song-page main { width: min(100%, 38rem); }
.verse .l { padding-left: 1.1em; text-indent: -1.1em; }
@media (min-width: 760px) {
  .song-page main { width: min(100%, calc(38rem + 60px)); }
  .song-page .tools {
    top: calc(1.75rem + 0.686rem - 22px);
    right: calc((100% - 38rem - 60px) / 2);
  }
}
.verse .nw { white-space: nowrap; }
/* முருகப் பெருமான் போற்றி list: a little air between items on phone. */
@media (max-width: 759.98px) {
  .verse.potri > .l + .l { margin-top: 0.4em; }
  .verse.arokara > .l + .l { margin-top: 0.4em; }
  .back { padding-right: 8.5rem; }
  h1 { overflow-wrap: anywhere; }
}
/* Indent steps for printed indentation (திருப்புகழ்). A wrapped row hangs 2.5em past its own indent,
   so it never lines up with the next indent step. */
.verse.tp > .l { --step: 1em; --hang: 2.5em; --lvl: 0; padding-left: calc(var(--lvl) * var(--step) + var(--hang)); text-indent: calc(-1 * var(--hang)); }
.verse.tp > .l.i1 { --lvl: 1; }
.verse.tp > .l.i2 { --lvl: 2; }
.verse.tp > .l.i3 { --lvl: 3; }
@media (min-width: 760px) {
  .verse.tp > .l { --step: 1.5em; }
}