/**
 * Move Forwards — base element styles.
 * Reset + typography defaults, built on tokens.css.
 */

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Tamil renders in a dedicated, highly-legible face throughout —
   headings included — rather than forcing the Latin heading font
   (Poppins) onto a script it wasn't designed for. */
[lang="ta"] body, body[lang="ta"], .lang-ta{
  font-family: var(--font-ta);
}
[lang="ta"] h1, [lang="ta"] h2, [lang="ta"] h3, [lang="ta"] h4,
.lang-ta h1, .lang-ta h2, .lang-ta h3, .lang-ta h4{
  font-family: var(--font-ta);
  font-weight: 700;
  letter-spacing: 0;
}
/* Tamil glyphs need more vertical room than Latin at the same size. */
[lang="ta"], .lang-ta{ line-height: var(--leading-normal); }
[lang="ta"] h1, [lang="ta"] h2, .lang-ta h1, .lang-ta h2{ line-height: 1.35; }

img, svg, video{ max-width: 100%; display: block; }
a{ color: var(--c-sky); text-decoration-color: rgba(47,102,147,.35); text-underline-offset: 2px; }
a:hover{ color: var(--c-navy); }

h1, h2, h3, h4{
  font-family: var(--font-heading);
  color: var(--c-ink);
  font-weight: 600;
  line-height: var(--leading-tight);
  text-wrap: balance;
  margin: 0 0 var(--sp-4);
}
h1{ font-size: var(--text-5xl); }
h2{ font-size: var(--text-3xl); }
h3{ font-size: var(--text-2xl); }
h4{ font-size: var(--text-xl); }

p{ margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child{ margin-bottom: 0; }
[lang="ta"] p, .lang-ta p{ max-width: 58ch; } /* Tamil runs wider per character */

ul, ol{ margin: 0 0 var(--sp-4); padding-left: 1.3em; }
li{ margin-bottom: var(--sp-2); }

blockquote{ margin: 0; }

button, input, select, textarea{ font-family: inherit; font-size: inherit; color: inherit; }
button{ cursor: pointer; }

/* Consistent, visible keyboard focus everywhere — buttons, links,
   form fields, disclosure triggers. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible{
  outline: 2px solid var(--c-sky);
  outline-offset: 2px;
  border-radius: 3px;
}

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

::selection{ background: var(--c-green-100); color: var(--c-navy); }