/* ============================================================================
   BASE — reset, typography, language-aware font stacks
   The dispensary in daylight: Mona Sans (Latin) · Mukta (Devanagari body)
   · Tiro Devanagari Hindi (Hindi display). Spec §3.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The sticky masthead must not cover anchored section headings. */
  scroll-padding-top: 6.5rem;
}

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

body {
  min-height: 100svh;
  background-color: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  font-synthesis: none;             /* never fake-bold or fake-slant Devanagari */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; }
p, li, dd { overflow-wrap: break-word; }

/* ---------------------------------------------------------------------------
   Language-aware type stacks.

   Hindi is the source language, so the html default IS the Hindi stack;
   English overrides it. Tiro Devanagari Hindi ships one weight (400) — its
   scholarly Didone forms carry Hindi display at weight 400; Mona Sans carries
   Latin display at 650. Mukta sets all Devanagari reading text.
   --------------------------------------------------------------------------- */

html {
  --font-display: "Tiro Devanagari Hindi", "Mona Sans", Georgia, serif;
  --font-body: "Mukta", "Mona Sans", system-ui, sans-serif;
  --font-ui: "Mukta", "Mona Sans", system-ui, sans-serif;
  --leading-body-lang: 1.78;   /* matras need vertical room */
  --display-weight: 400;       /* Tiro's single weight */
  --display-tracking: 0;       /* never track Devanagari */
}

html[lang="en"] {
  --font-display: "Mona Sans", system-ui, sans-serif;
  --font-body: "Mona Sans", system-ui, sans-serif;
  --font-ui: "Mona Sans", system-ui, sans-serif;
  --leading-body-lang: 1.6;
  --display-weight: 650;
  --display-tracking: -0.015em;
}

body { line-height: var(--leading-body-lang); }

/* Devanagari sits optically smaller than Latin at the same px size; the boost
   lands Hindi body at ~18px+ where Latin runs 17px. */
html[lang="hi"] body { font-size: calc(var(--step-0) * 1.06); }

/* ---- Headings ------------------------------------------------------------ */

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--display-tracking);
  color: #06321C;                    /* deep forest is the heading voice */
  text-wrap: balance;
}

/* Tiro's matras need more clearance than a Latin display face. */
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3,
html[lang="hi"] h4,
html[lang="hi"] .display { line-height: 1.32; }

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { max-width: var(--measure); text-wrap: pretty; }

strong, b { font-weight: 600; color: var(--text-strong); }
html[lang="hi"] strong, html[lang="hi"] b { font-weight: 700; }

a { color: var(--text-accent); text-underline-offset: 0.18em; }

/* ---- The almanac label: the small ruled caption above a section ----------
   Moss, quiet, with its little printed dash. Latin gets caps + tracking;
   Devanagari gets weight instead — it has no case and must not be tracked. */

.label {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #2C4720;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

html[lang="hi"] .label {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-size: calc(var(--step--2) * 1.08);
}

.label::before {
  content: "";
  inline-size: clamp(1.25rem, 4vw, 2.5rem);
  block-size: 2px;
  background-color: currentColor;
  flex: none;
}

/* ---- Focus --------------------------------------------------------------- */

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

.plate :focus-visible,
.footer :focus-visible { outline-color: var(--focus-ring-on-plate); }

:focus:not(:focus-visible) { outline: none; }

/* ---- Selection ------------------------------------------------------------
   Sage on cream (ink text stays ≥8:1). Saffron selection survives only on the
   forest footer — its home ground — keeping the palette rule intact: saffron
   never touches cream, not even transiently. */
::selection {
  background-color: var(--ink-300);
  color: var(--ink-950);
}
.plate ::selection,
.footer ::selection {
  background-color: var(--saffron-500);
  color: var(--ink-950);
}

/* ---- Utility ------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline-start: var(--space-sm);
  z-index: calc(var(--z-curtain) + 1);
  padding: var(--space-2xs) var(--space-sm);
  background-color: #06321C;
  color: var(--paper-100);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out-quart);
}
.skip-link:focus-visible { transform: translateY(0); }

.shell {
  inline-size: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { inline-size: min(100% - (var(--gutter) * 2), var(--shell-narrow)); }

/* Bilingual text swapping: only the active language's node is rendered. */
[data-lang]:not([data-lang=""]) { display: none; }
html[lang="hi"] [data-lang="hi"],
html[lang="en"] [data-lang="en"] { display: revert; }

/* Inline variants, so swapping never breaks a sentence's flow. */
html[lang="hi"] span[data-lang="hi"],
html[lang="en"] span[data-lang="en"] { display: inline; }

/* ---- Paper texture -------------------------------------------------------
   A faint fibrous tint so the cream reads as stock rather than a flat fill.
   Pure CSS, no request; luminance shift stays under ~3 L*. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 16% 12%, rgb(243 238 220 / 0.55) 0, transparent 44%),
    radial-gradient(circle at 84% 76%, rgb(234 240 226 / 0.5) 0, transparent 46%);
}

/* ---- Reduced motion ------------------------------------------------------
   Content must never remain hidden. reveal.js still applies .is-revealed;
   here we simply strip the movement. */
@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;
    scroll-behavior: auto !important;
  }
}