/* Self-hosted Devanagari. unicode-range keeps Latin text from ever pulling the Devanagari face (and vice versa). */ /* Self-hosted so the site works offline and pulls in no third party. One variable file covers 400-700, so bold is real, never synthesised. unicode-range keeps Latin text from ever pulling the Devanagari face. */ @font-face { font-family: 'Deva'; src: url('../assets/fonts/NotoSerifDevanagari-var.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; } /* Metric-matched fallback: macOS/Windows ship Devanagari faces that are much taller than Latin, so without overrides the swap causes a visible jump. */ @font-face { font-family: 'DevaFallback'; src: local('Devanagari Sangam MN'), local('Nirmala UI'), local('Noto Sans Devanagari'); size-adjust: 104%; ascent-override: 105%; descent-override: 32%; line-gap-override: 0%; } *, *::before, *::after { box-sizing: border-box } html { -webkit-text-size-adjust: 100% } body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Deva', 'DevaFallback', 'Iowan Old Style', Palatino, Georgia, serif; font-size: var(--fs-body); line-height: var(--lh-latin); } /* Devanagari-heavy regions get the taller leading. */ html[lang="hi"] body { line-height: var(--lh-deva) } /* Devanagari must never be letter-spaced (breaks conjuncts, detaches matras), never broken mid-cluster, and never have its required ligatures disabled. */ :lang(hi), .deva { letter-spacing: normal !important; word-break: normal; font-variant-ligatures: normal; font-synthesis: none; } h1, h2, h3 { line-height: 1.3; margin: 0 0 .5em; font-weight: 700 } h1 { font-size: var(--fs-h1); color: var(--maroon) } h2 { font-size: var(--fs-h2) } html[lang="hi"] h1, html[lang="hi"] h2 { line-height: 1.5 } p { margin: 0 0 1em } a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 2px } a:hover { color: var(--saffron) } img { max-width: 100%; height: auto; display: block } :focus-visible { outline: 2.5px solid var(--saffron); outline-offset: 2px; border-radius: 3px } [hidden] { display: none !important } /* ---- i18n: both languages are in the markup, CSS shows one ---- The correct lang is on before the stylesheet is applied, so the wrong language is never painted and this works with JS disabled. */ .i18n { display: none } html[lang="hi"] .i18n[lang="hi"] { display: revert } html[lang="en"] .i18n[lang="en"] { display: revert } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important } }