/* Reset + base typography */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: 1.55;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Soft brand glows + field contour texture behind every page */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 8% -10%, rgb(var(--blue-rgb) / var(--glow-top)), transparent 70%),
    radial-gradient(50vw 50vh at 100% 110%, rgb(var(--green-rgb) / var(--glow-bottom)), transparent 70%);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--texture-opacity);
  background-image: url('../assets/img/contours.svg');
  background-size: 900px auto;
  mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.9), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0.9), transparent 75%);
}

main { flex: 1 0 auto; }

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
}
h1, h2 { font-family: var(--font-display); }
h3, h4 { font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0; }
em { font-style: italic; }
h1 em, h2 em { font-family: var(--font-display); font-style: italic; }

a { color: inherit; text-decoration-color: rgb(var(--teal-rgb) / 0.5); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--teal); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }

ul, ol { margin: 0; padding: 0; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgb(var(--teal-rgb) / 0.35); color: var(--selection-fg); }

.mono { font-family: var(--font-mono); font-feature-settings: 'zero'; }
.serif { font-family: var(--font-display); }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) { .container { padding-inline: 28px; } }

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

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text);
}
.skip-link:focus { top: 12px; }

[hidden] { display: none !important; }

/* ================= Hindi =================
   Instrument Serif has no Devanagari letters, so Hindi headlines use Tiro Devanagari Hindi,
   a light high-contrast serif with a true italic, closest to Instrument Serif's feel.
   Body and UI text stay Noto Sans Devanagari. Devanagari needs more line height (the top bar and matras). */
html.i18n-pending body { visibility: hidden; }
html[lang='hi'] {
  --font-display: 'Tiro Devanagari Hindi', 'Noto Sans Devanagari', 'Inter Tight Variable', serif;
  --font-ui: 'Inter Tight Variable', 'Noto Sans Devanagari', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'Noto Sans Devanagari', ui-monospace, monospace;
}
html[lang='hi'] body { line-height: 1.7; }
html[lang='hi'] h1,
html[lang='hi'] h2 { font-weight: 400; letter-spacing: 0; line-height: 1.3; }
html[lang='hi'] h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.8rem); }
html[lang='hi'] h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
html[lang='hi'] h3, html[lang='hi'] h4 { line-height: 1.45; }
html[lang='hi'] em { font-style: normal; }
html[lang='hi'] h1 em, html[lang='hi'] h2 em { font-style: italic; }
html[lang='hi'] .eyebrow { letter-spacing: 0.02em; text-transform: none; font-size: 0.8rem; font-family: var(--font-hi); }
html[lang='hi'] .mono:not(:lang(en)) { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}