:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #202124;
  --muted: #696b70;
  --soft-ink: #484a4f;
  --saffron: #c87517;
  --saffron-soft: #fff7ec;
  --line: #e9e7e3;
  --focus: #8b4e0b;
  --reading-size: 1.35rem;
  --reading-min: 1.05rem;
  --reading-max: 1.8rem;
  --page-width: 800px;
  --font-ui: "Google Sans Flex", "Noto Sans Devanagari", sans-serif;
  --font-hi: "Google Sans Flex", "Noto Sans Devanagari", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

.site-header {
  min-height: 76px;
  padding: 0 clamp(18px, 4.5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { color: var(--saffron); font-size: 1.35rem; line-height: 1; }
.brand-name { font-weight: 600; letter-spacing: -.025em; font-size: .98rem; }
.header-tools { display: flex; align-items: center; gap: 14px; }
.language-switch, .size-switch {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  min-height: 42px; background: #fff;
}
.language-button, .size-button {
  min-height: 34px; min-width: 48px; padding: 0 12px; border: 0; border-radius: 999px; background: transparent;
  color: var(--muted); font-size: .82rem; font-weight: 500; cursor: pointer; transition: background-color .18s ease, color .18s ease;
}
.language-button { min-width: 68px; }
.language-button.is-selected { background: var(--saffron-soft); color: #7a4308; font-weight: 600; }
.size-button { min-width: 40px; padding: 0 9px; font-weight: 600; font-size: .88rem; }
.size-button:hover, .language-button:not(.is-selected):hover { background: #f6f5f3; color: var(--ink); }
.size-divider { width: 1px; height: 18px; background: var(--line); }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.intro { text-align: center; padding: clamp(42px, 8vw, 78px) 20px 42px; }
.intro-rule { width: 42px; height: 1px; margin: 0 auto 24px; background: var(--saffron); position: relative; }
.intro-rule span { width: 5px; height: 5px; border-radius: 50%; background: var(--saffron); position: absolute; inset: -2px 0 auto; margin: auto; }
h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.055em; line-height: 1.12; font-weight: 600; }
.invocation { color: var(--saffron); font-family: var(--font-hi); font-size: 1.05rem; letter-spacing: .04em; margin: 14px 0 0; }
.intro-note { color: var(--muted); margin: 10px 0 0; font-size: .95rem; }
.begin-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 25px; color: var(--soft-ink); text-decoration: none; font-size: .84rem; }
.begin-link span { color: var(--saffron); font-size: 1rem; }
.begin-link:hover { color: var(--saffron); }

.reading-column { width: min(var(--page-width), calc(100% - 40px)); margin: 0 auto; }
.reading-section { padding: 26px 0 8px; }
.section-heading { margin: 0 0 4px; padding: 0 0 18px; border-bottom: 1px solid var(--line); text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--saffron); }
.section-heading[lang="hi"] { letter-spacing: .07em; text-transform: none; font-size: .95rem; }
.verse {
  padding: 27px 8px 26px; text-align: center; border-bottom: 1px solid var(--line);
}
.verse:last-child { border-bottom: 0; }
.verse-label { display: block; margin: 0 0 12px; color: #88898c; font-size: .7rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.verse-text {
  margin: 0 auto; max-width: 690px; font-family: var(--font-hi); font-size: var(--reading-size); font-weight: 500;
  line-height: 1.95; letter-spacing: .005em; overflow-wrap: anywhere; text-wrap: pretty;
  white-space: pre-line;
}
.verse[data-type="chaupai"] .verse-text { line-height: 1.9; }
.meaning { margin: 14px auto 0; max-width: 680px; text-align: center; }
.meaning summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 10px; border-radius: 999px;
  color: var(--muted); font-size: .82rem; cursor: pointer; list-style: none; transition: color .18s ease, background .18s ease;
}
.meaning summary::-webkit-details-marker { display: none; }
.meaning summary::after { content: "+"; font-size: 1rem; color: var(--saffron); line-height: 1; }
.meaning[open] summary::after { content: "−"; }
.meaning summary:hover { color: var(--ink); background: #f7f6f4; }
.meaning-body { margin: 8px auto 0; padding: 18px clamp(14px, 4vw, 30px); border-radius: 10px; background: #faf9f7; text-align: center; }
.meaning-part + .meaning-part { border-top: 1px solid #e9e5df; margin-top: 15px; padding-top: 14px; }
.meaning-title { margin: 0 0 6px; color: #7a4b1e; font-size: .75rem; font-weight: 600; letter-spacing: .04em; }
.meaning-text { margin: 0; color: var(--soft-ink); font-family: var(--font-hi); font-size: .94rem; line-height: 1.8; }
.meaning-text[lang="en"] { font-family: var(--font-ui); }

.site-footer { margin: 46px auto 0; padding: 28px 20px 38px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); }
.footer-ornament { color: var(--saffron); font-size: 1.1rem; }
.site-footer p { margin: 9px 0 15px; color: var(--soft-ink); font-family: var(--font-hi); font-size: .95rem; }
.site-footer small { display: block; max-width: 760px; margin: 0 auto; font-size: .72rem; line-height: 1.65; }
.site-footer small a { text-decoration-color: #c9b8a2; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .site-header { min-height: 68px; padding: 9px 16px; gap: 10px; }
  .brand { gap: 7px; }
  .brand-name { font-size: .84rem; }
  .brand-mark { font-size: 1.16rem; }
  .header-tools { gap: 7px; }
  .language-switch, .size-switch { min-height: 38px; }
  .language-button { min-width: 54px; padding: 0 8px; font-size: .75rem; }
  .size-button { min-width: 31px; padding: 0 5px; font-size: .78rem; }
  .intro { padding-top: 42px; padding-bottom: 30px; }
  .reading-column { width: calc(100% - 32px); }
  .reading-section { padding-top: 22px; }
  .verse { padding: 23px 2px 22px; }
  .verse-text { line-height: 1.85; }
}
@media (max-width: 380px) {
  .site-header { align-items: flex-start; flex-direction: column; padding: 12px 16px; }
  .header-tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}