/* Reset, typography and accessibility basics shared by every screen. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--ad-h, 0px)); /* room for the app's banner ad (web/js/ads.js) */
}

h1, h2, h3, .head { font-family: var(--font-head); font-weight: 800; line-height: 1.25; }
h1 { font-size: clamp(24px, 6vw, 32px); }
h2 { font-size: clamp(20px, 5vw, 24px); font-weight: 600; }

/* Devanagari vowel signs need extra line height (spec §2.2). */
[lang="hi"] { line-height: 1.7; }
[lang="hi-Latn"] { line-height: 1.6; }

.story-text { font-size: calc(var(--story-size) * var(--text-scale)); max-width: 20em; } /* ≈ 34 characters; em, not ch: ch depends on which font file has loaded */
@media (min-width: 768px) { .story-text { max-width: 34em; } } /* ≈ 60 characters */

a { color: inherit; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 2px; border-radius: 4px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

[data-theme="night"] img { filter: brightness(.88); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  :root { --ink-soft: var(--ink); --line: var(--ink-soft); }
}

/* Semibold text uses the brand font (Baloo 2); Mukta ships in regular weight only (budget).
   The refrain inside story paragraphs stays in the story font (bold): switching fonts mid-
   paragraph would re-wrap lines when Baloo 2 arrives and make the text jump. */
strong, b, .closing__q, .yaad__opening, .yaad__question, .yaad__refrain,
.end__question p, h1.empty__text { font-family: var(--font-head); font-weight: 600; }