MediaWiki:Common.css: Difference between revisions

(15 intermediate revisions by the same user not shown)

Line 17:

/* Font stacks. --font-indic is the one to use for anything the reader

can transliterate: it ~~keeps~~ AdishilaDev ~~for~~ Devanagari and ~~falls back~~

can transliterate. Every face in it is served from this site (§2a), so

~~to a matching~~ Noto ~~face for~~ Tamil, Kannada, Telugu, ~~Malayalam etc.,~~

a transliterated page looks the same on every machine instead of

~~so a transliterated heading or TOC entry keeps~~ the ~~same~~ look ~~instead~~

falling back to whatever the visitor happens to have installed.

~~of dropping to the browser's default font~~. */

Order matters, not just membership: each face is limited by

unicode-range to the characters it should own, so the browser walks

the list and the first face that claims the character wins.

Gentium Book Plus → Latin only, i.e. the IAST reading

AdishilaDev → Devanagari, danda, and everything unclaimed

Noto Serif Tamil / Kannada / Telugu → their own blocks

Gentium sits first because IAST is Latin throughout: if Adishila led,

plain letters would come from Adishila and only the accented ones

(ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */

/* The HEADING face - AdishilaDev. Used only by headings and the few

title-like labels listed further down, never by body text. */

--font-deva: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;

--font-indic: '~~AdishilaDev~~', '~~Adishila~~', 'Noto Serif Devanagari',

/* The READING face. Adishila leads: this is what moola, bhashya, teeka

and every other run of body text is set in. AdishilaDev follows only

as a fallback, for the rare glyph the plain face lacks.

Gentium used to sit first here, so that IAST came out in one face -

but that also made it the first family asked for Devanagari, and any

locally-installed "Gentium Book Plus" answers for codepoints outside

the @font-face unicode-range, so the shlokas stopped being Adishila.

IAST now gets its Gentium from --font-translit, used only in that view.

Headings do NOT use this variable; they use --font-deva above. */

--font-indic: 'Adishila', 'AdishilaDev', 'Noto Serif Devanagari',

'Noto Serif Tamil', 'Noto Sans Tamil',

'Noto Serif Kannada', 'Noto Sans Kannada',

Line 31:

Line 51:

'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi',

'Noto Serif Oriya', 'Noto Sans Oriya', serif;

/* Latin-first, for the IAST reading only: there plain letters and

accented ones must come from one face or the line looks patched. */

--font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;

--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;

}

/* ── 2. FONTS ──────────────────────────────────────────────────── */

/* font-display: swap on every face below. Without it the browser uses

`auto`, which in Chrome means a block period of up to three seconds

during which text in that font is INVISIBLE - the page has painted, the

layout is right, and the Sanskrit simply is not there yet. That reads as

a slow site even when the bytes arrive quickly. With swap the text is

painted immediately in the fallback and re-rendered when the face

arrives. */

@font-face {

font-family: "Adishila";

src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

Line 44:

Line 75:

src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 49:

Line 81:

src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");

font-weight: bold; font-style: italic;

font-display: swap;

}

@font-face {

Line 54:

Line 87:

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

Line 59:

Line 93:

src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 64:

Line 99:

src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");

font-weight: bold; font-style: normal;

font-display: swap;

}

@font-face {

Line 69:

Line 105:

src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

@font-face {

Line 74:

Line 111:

src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");

font-weight: normal; font-style: normal;

font-display: swap;

}

/* ── 2a. TRANSLITERATION FONTS ─────────────────────────────────── */

/* One face per script the reader can switch to, served from this site so

the page reads the same everywhere. Subset to the script's own block and

compressed to woff2, so each file is 30–110 KB and only the file for the

script actually on screen is ever downloaded.

Every face reports the same 105% above the baseline / 40% below, whatever

its own metrics say. That is what keeps the lines on one rhythm: without

it each script sat at its own height inside the line box, so a heading

jumped a few pixels the moment it was switched.

How large each script *draws* is handled separately, in §2b, by scaling

the text rather than the font file. Doing it there means it still works

when a font file is missing or slow — the text is scaled whatever face

ends up rendering it — and it leaves one number per script to tune

instead of three that have to be kept in proportion.

Install: put the nine .woff2 files in /resources/fonts/translit/ . */

/* Tamil — Noto Serif Tamil (SIL OFL) */

@font-face {

font-family: "Noto Serif Tamil";

src: url("/resources/fonts/translit/NotoSerifTamil-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0B80-0BFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Tamil";

src: url("/resources/fonts/translit/NotoSerifTamil-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0B80-0BFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* Kannada — Noto Serif Kannada (SIL OFL) */

@font-face {

font-family: "Noto Serif Kannada";

src: url("/resources/fonts/translit/NotoSerifKannada-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0C80-0CFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Kannada";

src: url("/resources/fonts/translit/NotoSerifKannada-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0C80-0CFF, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* Telugu — Noto Serif Telugu (SIL OFL) */

@font-face {

font-family: "Noto Serif Telugu";

src: url("/resources/fonts/translit/NotoSerifTelugu-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0C00-0C7F, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Noto Serif Telugu";

src: url("/resources/fonts/translit/NotoSerifTelugu-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0C00-0C7F, U+200C-200D;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* IAST — Gentium Book Plus (SIL OFL). Chosen over a general-purpose serif

because it draws ṛ ṝ ḷ ḹ ṅ ñ ṭ ḍ ṇ ś ṣ ṃ ḥ m̐ as designed letters rather

than stacking a loose accent on a Latin one, which is what made the

romanised reading look ragged. The range stops short of U+0964-0965 on

purpose: the danda then always comes from the Devanagari face, so it is

one shape in every script. */

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Regular.woff2") format("woff2");

font-weight: 400; font-style: normal; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Bold.woff2") format("woff2");

font-weight: 700; font-style: normal; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

@font-face {

font-family: "Gentium Book Plus";

src: url("/resources/fonts/translit/GentiumBookPlus-Italic.woff2") format("woff2");

font-weight: 400; font-style: italic; font-display: swap;

unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;

ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;

}

/* ── 2b. APPLYING THEM ─────────────────────────────────────────── */

/* Most rules below name an Adishila face directly, which is right for

Devanagari and useless for anything else: Adishila has no Tamil, Kannada

or Telugu letters, so a switched page fell through to the visitor's

default serif — a different font per machine, and often a different one

per line. common.js puts the chosen script on <html data-gr-script="…">,

so while a transliteration is showing, every span the switcher rewrote

moves onto --font-indic and picks up the faces above. Devanagari is the

no-attribute case and is left exactly as it was.

--gr-script-scale is how much smaller or larger that script has to be

drawn to read the same size as Devanagari. Kannada and Telugu draw taller

letters at the same font-size, Tamil wider and rounder, Gentium smaller;

left alone, switching script looked like the type size had changed.

THESE FOUR NUMBERS ARE THE KNOB: if a script still reads a shade large or

small next to Adishila on the live site, move its number a percent or two

and nothing else. It multiplies whatever size the reader has chosen with

A- / A+, so the two controls stay independent. */

:root { --gr-script-scale: 1; }

html[data-gr-script="ta"] { --gr-script-scale: 0.88; } /* தமிழ் */

html[data-gr-script="kn"] { --gr-script-scale: 0.86; } /* ಕನ್ನಡ */

html[data-gr-script="te"] { --gr-script-scale: 0.88; } /* తెలుగు */

html[data-gr-script="en"] { --gr-script-scale: 1.00; } /* IAST */

html[data-gr-script]:not([data-gr-script="deva"]) [data-deva],

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sticky-title,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-section-title,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-snippet,

html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-group-name {

font-family: var(--font-indic) !important;

font-size: calc(1em * var(--gr-script-scale));

}

html[data-gr-script="en"] [data-deva],

html[data-gr-script="en"] .gr-sticky-title,

html[data-gr-script="en"] .gr-sr-section-title,

html[data-gr-script="en"] .gr-sr-snippet,

html[data-gr-script="en"] .gr-sr-group-name { font-family: var(--font-translit) !important; }

/* The bold and italic Adishila faces are separate families rather than

weights, so a transliterated prateeka or quotation has to ask for the

weight it wants instead. */

html[data-gr-script]:not([data-gr-script="deva"]) .gr-prateeka { font-weight: 700; }

html[data-gr-script]:not([data-gr-script="deva"]) .gr-mulaprateeka-block { font-style: italic; }

body {

Line 250:

Line 426:

sub-entries underneath it. */

.vector-toc .vector-toc-numb { display: none !important; }

/* The contents panel follows the reader toolbar's A- / A+ . The toolbar

publishes its size as --gr-font-size on <html>; everything below is a

ratio of it, so one click moves the body and the contents together. The

22px fallback is the toolbar's own default, for a page without one. */

.vector-toc {

--gr-toc: max(14px, calc(var(--gr-font-size, 22px) * 0.92));

}

.vector-toc .vector-toc-title {

font-size: 15px !important; font-weight: 700 !important;

Line 261:

Line 444:

font-family: var(--font-indic) !important;

}

.vector-toc a, .vector-toc .vector-toc-link {

/* :not() keeps this off the मूलम् / उल्लेख buttons that sit in the same

panel — otherwise this rule reshaped them into flat contents links. */

.vector-toc a:not(.toc-main-link-item), .vector-toc .vector-toc-link {

display: block;

font-family: var(--font-indic) !important;

font-size: ~~20px~~; color: var(--text) !important; text-decoration: none !important;

font-size: var(--gr-toc); color: var(--text) !important; text-decoration: none !important;

padding: 4px 8px; border-radius: 5px; line-height: 1.45;

transition: background 0.12s, color 0.12s;

}

/* Level 1 = section heading, level 2+ = sub-sections. ~~Sizes are in~~ px so

/* Level 1 = section heading, level 2+ = sub-sections. Each is a ratio of

they ~~stay readable next to the 22-24px body text; the levels~~ are told

--gr-toc rather than a fixed px, so the levels keep their proportions at

apart by weight and colour as much as by size. */

every toolbar size; they are told apart by weight and colour as much as

by size. */

.vector-toc .vector-toc-level-1 > .vector-toc-link {

font-size: ~~21px~~ !important; font-weight: 600 !important; color: var(--text) !important;

font-size: calc(var(--gr-toc) * 1.05) !important; font-weight: 600 !important; color: var(--text) !important;

}

.vector-toc .vector-toc-level-2 > .vector-toc-link {

font-size: ~~19px~~ !important; font-weight: 400 !important; color: #4d4d4d !important;

font-size: calc(var(--gr-toc) * 0.95) !important; font-weight: 400 !important; color: #4d4d4d !important;

}

.vector-toc .vector-toc-level-3 > .vector-toc-link,

.vector-toc .vector-toc-level-4 > .vector-toc-link,

.vector-toc .vector-toc-level-5 > .vector-toc-link {

font-size: ~~18px~~ !important; font-weight: 400 !important; color: #6b6b6b !important;

font-size: calc(var(--gr-toc) * 0.90) !important; font-weight: 400 !important; color: #6b6b6b !important;

}

Line 353:

Line 539:

font-size: 2em; font-weight: 500; color: var(--maroon);

line-height: 1.4; margin: 0 0 16px; border: none !important;

text-align:center; font-family: var(--font-~~indic~~);

text-align:center; font-family: var(--font-deva);

}

/* Headings take AdishilaDev (--font-deva) rather than the general Indic

stack, so the heading face is the same everywhere regardless of what

else a page mixes in. */

#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,

#mw-content-text h4, #mw-content-text h5,

.mw-heading h1, .mw-heading h2, .mw-heading h3, .mw-heading h4,

.teeka-title, .gr-teeka-dropdown-header, .gr-sticky-title {

font-family: var(--font-deva);

}

/* ── 10. VERSE BLOCKS ──────────────────────────────────────────── */

.shloka-block { display: block; text-align: left; margin: 3px 0 0; padding-bottom: 0.5em; }

.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0; }

.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0;

font-family: var(--font-indic); }

.verse-block { display: block; margin: 6px 0 0; text-align: left; }

.verse-block .shloka-block { text-align: left; margin: 0; }

.verse-block .shloka-line {

display: block; font-weight: 500; line-height: 1.35; margin: 0; color: var(--maroon);

font-family: var(--font-indic);

}

.verse-block.normal .shloka-line { color: #555; }

Line 390:

Line 588:

display: block; font-size: 1em; line-height: 1.6; color: #555;

padding: 0; border: none; background: transparent;

font-family: var(--font-indic);

}

.gr-bhashyam, .commentary-bhashyam {

Line 407:

Line 606:

padding: 6px 10px 8px; margin: 0.3em 0; line-height: 1.6; color: #555; background: #fcf5f3;

border-radius: 12px;

font-family: var(--font-indic);

}

.teeka-title {

font-family: ~~'AdishilaDev';, sans~~-~~serif~~ !important;

font-family: var(--font-indic) !important;

font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

margin-bottom: 4px; padding-bottom: 3px;

}

.teeka-body .shloka-block {

margin: 0.4em 0; padding: 0.3em 0.6em; font-family: ~~'AdishilaDev'~~;

margin: 0.4em 0; padding: 0.3em 0.6em; font-family: var(--font-indic);

}

.teeka-body .shloka-line { font-size: 0.97em; font-family: ~~'AdishilaDev'~~; }

.teeka-body .shloka-line { font-size: 0.97em; font-family: var(--font-indic); }

/* ── 15. PRATEEKA / MOOLA ──────────────────────────────────────── */

Line 471:

Line 671:

.gr-author-note {

font-style: italic; color: var(--maroon); text-align: center; font-size: 0.9em;

margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: ~~'AdishilaDev'~~

margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: var(--font-indic)

}

.gr-devatachandas {

Line 555:

Line 755:

Used by the desktop TOC and the mobile document nav alike. */

.toc-main-links {

display: flex; flex-wrap: wrap; gap: ~~8px~~; align-items: ~~stretch~~;

display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center;

margin: 0 ~~0 10px~~; padding: 0 0 ~~10px~~; border-bottom: 1px solid #f1e3dc;

margin: 6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #f1e3dc;

}

/* Sitting under the document title in the page, not in the panel */

#gr-toc-doc-nav.toc-main-links { margin: 10px auto 22px; max-width: 640px; }

.toc-main-link-item {

flex: 1 1 auto; text-align: center;

flex: 0 1 auto; min-width: 92px; text-align: center;

font-family: var(--font-indic); font-size: 18px; font-weight: 600; line-height: 1.4;

color: #fff !important; background: #b5451b; border: 0; border-radius: ~~8px~~;

color: #fff !important; background: #b5451b; border: 0; border-radius: 999px;

padding: 9px ~~16px~~; text-decoration: none !important;

padding: 9px 18px; text-decoration: none !important;

box-shadow: 0 1px ~~2px~~ rgba(60, 20, 10, 0.18);

box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);

transition: background 0.15s, box-shadow 0.15s;

}

Line 576:

Line 778:

margin: 4px 0 14px; padding: 0 12px 14px; border-bottom: 1px solid #f0e0d6;

}

.skin-minerva #gr-mob-doc-nav .toc-main-link-item {

.skin-minerva #gr-mob-doc-nav .toc-main-link-item { font-size: 17px; padding: 11px 26px; min-width: 116px; }

~~flex: 0 1 auto; min-width: 116px;~~

font-size: 17px; padding: 11px ~~24px~~; ~~border~~-~~radius~~: ~~999px;~~

~~box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22)~~;

}

.skin-minerva .toc-main-link-item,

.skin-minerva .toc-main-link-item:visited,

Line 2,323:

Line 2,521:

vertical-align offsets by hand. */

.gr-teeka-cb-wrap {

~~display~~: inline-flex~~; align~~-~~items: center; gap~~: 6px;

/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box

~~vertical-align~~: ~~middle~~;

aligned "middle" is positioned by its own height against the parent's

x-height, so the whole control - checkbox AND label together - sat

progressively lower than the text beside it as the reader enlarged the

type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain

inline, the label is ordinary text and lines up with its neighbours by

definition; only the checkbox needs aligning, and it does that with an

em-based offset that holds at any size. */

display: inline;

}

.gr-teeka-inline-checkbox {

-webkit-appearance: none; appearance: none;

width: ~~15px~~ !important; height: ~~15px~~ !important;

/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed

min-width: ~~15px~~; min-height: ~~15px~~;

15px box against text that grows; clamped so it stays a sensible

margin: 0; padding: 0; cursor: pointer;

target at both extremes.

Alignment was measured rather than guessed. vertical-align:middle is

the only value that stays consistent as the type size changes (it is

computed from the font's x-height), but it sits about 2.5px low

against this line-height at every size - so that constant bias is

taken back with `top`, giving under a pixel of error from 16px to

30px. The element is already position:relative for its tick. */

width: clamp(13px, 0.8em, 24px) !important;

height: clamp(13px, 0.8em, 24px) !important;

min-width: 13px; min-height: 13px;

margin: 0 6px 0 0; padding: 0; cursor: pointer;

vertical-align: middle; top: -2.5px;

border: 1.5px solid #b5451b; border-radius: 3px;

background: #fff; position: relative; flex-shrink: 0;

Line 2,339:

Line 2,555:

}

.gr-teeka-inline-checkbox:checked::after {

content: ''; position: absolute; left: ~~4px~~; top: ~~1px~~;

/* Placed and sized in % of the box, so the tick follows the em-based

width: ~~4px~~; height: ~~8px~~;

box instead of staying a 4x8px mark inside a checkbox that grew. */

content: ''; position: absolute; left: 32%; top: 8%;

width: 26%; height: 55%;

border: solid #fff; border-width: 0 2px 2px 0;

transform: rotate(45deg);

Line 2,368:

Line 2,586:

.gr-teeka-dropdown-header {

font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;

font-size: ~~11px~~; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

/* CHANGED: fixed 11px -> scales with the reader's text size. */

font-size: clamp(12px, calc(var(--gr-font-size, 22px) * 0.6), 17px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;

color: #b5451b; padding: 10px 14px 6px; border-bottom: 1px solid #f7e4da; margin-bottom: 2px;

}

Line 2,374:

Line 2,593:

.gr-teeka-dropdown-item {

display: flex; align-items: center; gap: 9px; padding: 8px 14px;

font-size: ~~14px~~; color: #3a2a20; cursor: pointer; white-space: nowrap;

/* CHANGED: fixed 14px -> scales with the reader's text size. */

font-size: clamp(15px, calc(var(--gr-font-size, 22px) * 0.82), 26px);

font-family: var(--font-indic);

color: #3a2a20; cursor: pointer; white-space: nowrap;

transition: background .12s;

}

Line 2,524:

Line 2,746:

#mw-mf-page-left > .gr-mf-native-menu { display: none !important; }

.gr-mob-menu { width: 100%; margin-top: 8px; background: #fff; }

/* ── 38. FOOTNOTE MARKERS AND CARDS ────────────────────────────── */

/* QuickEdit writes the notes; common.js turns them into a superscript at the

point of reading and a card on click. The list it writes at the foot of the

document is taken off the screen but kept for print, where there is nothing

to click and the apparatus belongs at the end. */

/* The annotated words. QuickEdit marks them with a flat yellow highlight,

which is right while editing and shouts on a reading page — a dotted rule

says "there is a note here" without breaking the line of the text. */

#mw-content-text .gra-qe-footnote-highlight {

background: none;

border-bottom: 1px dotted #c9976b;

text-decoration: none;

cursor: pointer; /* the words open the note too, not only the marker */

}

#mw-content-text .gra-qe-footnote-highlight:hover { border-bottom-color: #b5451b; }

.gr-note-marker {

display: inline-block; vertical-align: super;

margin-left: 1px; padding: 0 3px;

font-family: var(--font-ui); font-weight: 600; line-height: 1.5;

/* Relative to the text, but capped: the reader's A+ goes to 30px and an

uncapped marker starts competing with the words it annotates. */

font-size: clamp(10px, 0.62em, 14px);

color: #8a5a2b; background: #fbf1e6; border: 1px solid #eddcc8; border-radius: 4px;

cursor: pointer; user-select: none; white-space: nowrap;

transition: background 0.12s, color 0.12s, border-color 0.12s;

}

.gr-note-marker:hover,

.gr-note-marker:focus-visible { background: #f3e0c9; color: #6d4318; border-color: #ddc3a3; }

.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }

/* The open state for an annotated WORD - used when the card is anchored to

the words themselves, which is the case for a commentary's notes (they

carry no superscript). It must not reverse the text out, or the word it

is meant to point at becomes unreadable. */

#mw-content-text .gra-qe-footnote-highlight.gr-note-hl-open {

background: #fdefe6;

border-bottom: 1px solid #b5451b;

border-radius: 3px;

box-shadow: 0 0 0 2px #fdefe6;

}

/* The card. Fixed, because it is positioned against the marker's viewport

box and follows it on scroll. */

.gr-note-card {

/* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,

so the card opened underneath them. */

position: fixed; z-index: 10500; width: min(380px, calc(100vw - 20px));

background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;

box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);

overflow: hidden;

}

.gr-note-card[hidden] { display: none; }

.gr-note-card-head {

display: flex; align-items: center; justify-content: space-between; gap: 12px;

padding: 9px 10px 9px 14px; border-bottom: 1px solid #f1e4db; background: #fdf8f4;

}

.gr-note-card-kind {

font-family: var(--font-indic); font-weight: 600; color: #b5451b;

/* CHANGED: fixed 14px -> scales with the reader's text size. */

font-size: clamp(14px, calc(var(--gr-font-size, 22px) * 0.72), 22px);

}

.gr-note-card-close {

flex: none; width: 26px; height: 26px; padding: 0;

font: 400 18px/1 var(--font-ui); color: #8b7d74;

background: transparent; border: 0; border-radius: 6px; cursor: pointer;

}

.gr-note-card-close:hover { background: #f3e7df; color: #5a4a41; }

.gr-note-card-body {

padding: 13px 14px 15px;

font-family: var(--font-indic); line-height: 1.7; color: #2c1810;

/* CHANGED: fixed 17px against 22px body text -> scales with it. */

font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.94), 30px);

max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere;

}

/* Phones: a sheet at the bottom reads better than a card floating over the

line, and there is no hover to fall back on. */

@media (max-width: 600px) {

.gr-note-card {

left: 0 !important; right: 0; top: auto !important; bottom: 0;

width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0;

box-shadow: 0 -8px 30px rgba(60, 20, 10, 0.2);

}

.gr-note-card-body { font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.9), 26px); max-height: 50vh; }

}

/* The list QuickEdit keeps at the foot of the document */

.gra-qe-footnotes.gr-notes-listed { display: none; }

@media print {

.gr-note-marker { background: none; border: 0; color: #000; }

.gr-note-card { display: none !important; }

.gra-qe-footnotes.gr-notes-listed { display: block; margin-top: 28px; padding-top: 12px; border-top: 1px solid #ccc; }

.gra-qe-footnote-quote { font-weight: 600; margin-right: 6px; }

.gra-qe-footnote-item,

.gra-qe-footnote-text { font-family: var(--font-indic); }

}

/* ── 39. LINE ALIGNMENT CARRIED FROM THE SOURCE DOCUMENT ──────────

A converted document puts one of these on a line whose source

paragraph carried an explicit alignment (Katha sets 288 paragraphs

CENTER - every invocation and colophon). New classes only: no existing

rule is overridden, and a line whose source set no alignment gets no

class and keeps whatever the site already gives it. */

.gr-align-center { text-align: center; }

/* The closing verse number is one unit - "॥ ४ ॥" is separated by ordinary

spaces, so without this a narrow column wraps between them and strands

the number on a line of its own. */

.gr-verse-num { white-space: nowrap; }

.gr-align-right { text-align: right; }

.gr-align-justify { text-align: justify; }

/* Footnotes belonging to an interleaved commentary, grouped under its name

in the right-hand panel. Shown only where that list is shown. */

.gr-teeka-notes-group { margin-top: 14px; }

.gr-teeka-notes-title {

font-family: var(--font-deva);

font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.68), 19px);

font-weight: 600; color: #b5451b;

padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;

}

/* Footnote panel: one section per source document. The page's own notes

come first, then a section per commentary shown on the page. */

.gra-footnote-section-title {

font-family: var(--font-deva);

font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);

font-weight: 600; color: #b5451b;

margin: 14px 4px 6px; padding-bottom: 4px;

border-bottom: 1px solid #f1e4db;

}

.gra-footnote-section-title:first-child { margin-top: 2px; }

.gra-footnote-section-own { color: #7a6a60; }

/* Repeated on the card, for when the heading has scrolled out of view. */

.gra-footnote-source {

font-family: var(--font-deva);

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);

color: #b5451b; opacity: 0.85; margin-bottom: 2px;

}

/* The annotation count badge was removed (it was clipped by the round

toggle's own overflow). This keeps it hidden for anyone still served a

cached copy of the old gadget. */

#gra-toggle-badge { display: none !important; }

/* ── LINK LANDING ───────────────────────────────────────────────────

Where a copied id or a bookmark citation link lands. The flash used to

be injected by copyId.js; it lives here so the landing still reads when

only common.js is loaded. */

.gid-target {

animation: gid-target-flash 2.4s ease-out 1;

border-radius: 4px;

}

@keyframes gid-target-flash {

0%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }

100% { background: transparent; box-shadow: none; }

}

@media (prefers-reduced-motion: reduce) {

.gid-target { animation: none; background: rgba(181,69,27,0.14); }

}

/* ── BOOKMARK CITATION ──────────────────────────────────────────────

The reference a bookmark produces, shown on its card and copyable in

one click. Set small and in the UI face deliberately: it is apparatus

for the reader to take away, not part of the text. */

.gra-bookmark-cite {

margin-top: 6px;

/* --font-translit, not --font-indic. The reference is romanised - IAST

author, IAST title, Latin site name and URL - and Gentium Book Plus

is the only family here with a REAL italic face (Adishila, which

--font-indic leads with, has none at this weight, so the italic title

fell back to a synthetic slant or to nothing at all). Gentium's

unicode-range covers Latin only, so a Devanagari fallback title still

lands on Adishila further down the stack. */

font-family: var(--font-translit);

font-synthesis: style; /* allow a slant for the Devanagari case */

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);

line-height: 1.5; color: #6b5b52;

/* Ragged right and flush left. The hanging indent that was here reads

correctly in a printed reference LIST, where it separates one entry

from the next; on a single card it just looked like the lines had

slipped. Justification came in from the panel and stretched the word

gaps, which is what made the spacing look broken. */

text-align: left;

text-indent: 0;

padding-left: 0;

overflow-wrap: break-word;

word-break: normal;

hyphens: none;

}

.gra-bookmark-cite a {

color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;

overflow-wrap: anywhere; /* only the URL may break mid-token */

}

.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }

.gra-bookmark-cite i,

.gra-bookmark-cite em { font-style: italic; font-synthesis: style; }

/* Where the bookmark sits in the text. A caption, not part of the

citation - so it is set in the UI face and kept visually apart from

the reference below it. */

.gra-bookmark-locator {

margin-top: 5px;

font-family: var(--font-ui);

font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);

font-weight: 600;

letter-spacing: .02em;

color: #8a7a70;

}

.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }

.gra-cite-copy {

margin-top: 6px; padding: 3px 10px;

font-family: var(--font-ui);

font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);

font-weight: 600; color: #b5451b;

background: #fff5f2; border: 1px solid #f0cfc4; border-radius: 20px;

cursor: pointer; transition: background .15s, color .15s, border-color .15s;

}

.gra-cite-copy:hover { background: #b5451b; color: #fff; border-color: #b5451b; }

.gra-cite-copy--done { background: #2e6e40; color: #fff; border-color: #2e6e40; }

@@ Line 17: / Line 17: @@
    /* Font stacks. --font-indic is the one to use for anything the reader
-      can transliterate: it keeps AdishilaDev for Devanagari and falls back
+      can transliterate. Every face in it is served from this site (§2a), so
-     to a matching Noto face for Tamil, Kannada, Telugu, Malayalam etc.,
+     a transliterated page looks the same on every machine instead of
-      so a transliterated heading or TOC entry keeps the same look instead
+     falling back to whatever the visitor happens to have installed.
-      of dropping to the browser's default font. */
+     Order matters, not just membership: each face is limited by
+     unicode-range to the characters it should own, so the browser walks
+     the list and the first face that claims the character wins.
+       Gentium Book Plus  → Latin only, i.e. the IAST reading
+       AdishilaDev        → Devanagari, danda, and everything unclaimed
+       Noto Serif Tamil / Kannada / Telugu → their own blocks
+     Gentium sits first because IAST is Latin throughout: if Adishila led,
+      plain letters would come from Adishila and only the accented ones
+     (ā ī ṛ ṣ …) from Gentium, and the line would look patched together. */
+  /* The HEADING face - AdishilaDev. Used only by headings and the few
+      title-like labels listed further down, never by body text. */
    --font-deva:  'AdishilaDev', 'Adishila', 'Noto Serif Devanagari', serif;
-   --font-indic: 'AdishilaDev', 'Adishila', 'Noto Serif Devanagari',
+  /* The READING face. Adishila leads: this is what moola, bhashya, teeka
+     and every other run of body text is set in. AdishilaDev follows only
+     as a fallback, for the rare glyph the plain face lacks.
+     Gentium used to sit first here, so that IAST came out in one face -
+     but that also made it the first family asked for Devanagari, and any
+     locally-installed "Gentium Book Plus" answers for codepoints outside
+     the @font-face unicode-range, so the shlokas stopped being Adishila.
+     IAST now gets its Gentium from --font-translit, used only in that view.
+     Headings do NOT use this variable; they use --font-deva above. */
+   --font-indic: 'Adishila', 'AdishilaDev', 'Noto Serif Devanagari',
                  'Noto Serif Tamil', 'Noto Sans Tamil',
                  'Noto Serif Kannada', 'Noto Sans Kannada',
@@ Line 31: / Line 51: @@
                  'Noto Serif Gurmukhi', 'Noto Sans Gurmukhi',
                  'Noto Serif Oriya', 'Noto Sans Oriya', serif;
+  /* Latin-first, for the IAST reading only: there plain letters and
+     accented ones must come from one face or the line looks patched. */
+  --font-translit: 'Gentium Book Plus', 'Adishila', 'AdishilaDev', serif;
    --font-ui:    system-ui, -apple-system, 'Segoe UI', sans-serif;
 }
 /* ── 2. FONTS ──────────────────────────────────────────────────── */
+/* font-display: swap on every face below. Without it the browser uses
+   `auto`, which in Chrome means a block period of up to three seconds
+   during which text in that font is INVISIBLE - the page has painted, the
+   layout is right, and the Sanskrit simply is not there yet. That reads as
+   a slow site even when the bytes arrive quickly. With swap the text is
+   painted immediately in the fallback and re-rendered when the face
+   arrives. */
 @font-face {
    font-family: "Adishila";
    src: url("/resources/fonts/adishila/Adishila.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 44: / Line 75: @@
    src: url("/resources/fonts/adishila/AdishilaBold.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 49: / Line 81: @@
    src: url("/resources/fonts/adishila/AdishilaBoldItalic.ttf") format("truetype");
    font-weight: bold; font-style: italic;
+  font-display: swap;
 }
 @font-face {
@@ Line 54: / Line 87: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 59: / Line 93: @@
    src: url("/resources/fonts/AdishilaDev.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 64: / Line 99: @@
    src: url("/resources/fonts/AdishilaDevGuru.ttf") format("truetype");
    font-weight: bold; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 69: / Line 105: @@
    src: url("/resources/fonts/Noto_Sans_Devanagari/NotoSansDevanagari.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
 @font-face {
@@ Line 74: / Line 111: @@
    src: url("/resources/fonts/AdishilaVedicSemiBold.ttf") format("truetype");
    font-weight: normal; font-style: normal;
+  font-display: swap;
 }
+/* ── 2a. TRANSLITERATION FONTS ─────────────────────────────────── */
+/* One face per script the reader can switch to, served from this site so
+   the page reads the same everywhere. Subset to the script's own block and
+   compressed to woff2, so each file is 30–110 KB and only the file for the
+   script actually on screen is ever downloaded.
+   Every face reports the same 105% above the baseline / 40% below, whatever
+   its own metrics say. That is what keeps the lines on one rhythm: without
+   it each script sat at its own height inside the line box, so a heading
+   jumped a few pixels the moment it was switched.
+   How large each script *draws* is handled separately, in §2b, by scaling
+   the text rather than the font file. Doing it there means it still works
+   when a font file is missing or slow — the text is scaled whatever face
+   ends up rendering it — and it leaves one number per script to tune
+   instead of three that have to be kept in proportion.
+   Install: put the nine .woff2 files in  /resources/fonts/translit/ . */
+/* Tamil — Noto Serif Tamil (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Tamil";
+  src: url("/resources/fonts/translit/NotoSerifTamil-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0B80-0BFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Tamil";
+  src: url("/resources/fonts/translit/NotoSerifTamil-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0B80-0BFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* Kannada — Noto Serif Kannada (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Kannada";
+  src: url("/resources/fonts/translit/NotoSerifKannada-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0C80-0CFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Kannada";
+  src: url("/resources/fonts/translit/NotoSerifKannada-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0C80-0CFF, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* Telugu — Noto Serif Telugu (SIL OFL) */
+@font-face {
+  font-family: "Noto Serif Telugu";
+  src: url("/resources/fonts/translit/NotoSerifTelugu-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0C00-0C7F, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Noto Serif Telugu";
+  src: url("/resources/fonts/translit/NotoSerifTelugu-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0C00-0C7F, U+200C-200D;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* IAST — Gentium Book Plus (SIL OFL). Chosen over a general-purpose serif
+   because it draws ṛ ṝ ḷ ḹ ṅ ñ ṭ ḍ ṇ ś ṣ ṃ ḥ m̐ as designed letters rather
+   than stacking a loose accent on a Latin one, which is what made the
+   romanised reading look ragged. The range stops short of U+0964-0965 on
+   purpose: the danda then always comes from the Devanagari face, so it is
+   one shape in every script. */
+@font-face {
+  font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+@font-face {
+  font-family: "Gentium Book Plus";
+  src: url("/resources/fonts/translit/GentiumBookPlus-Italic.woff2") format("woff2");
+  font-weight: 400; font-style: italic; font-display: swap;
+  unicode-range: U+0000-024F, U+0259, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20BF, U+2122;
+  ascent-override: 105%; descent-override: 40%; line-gap-override: 0%;
+}
+/* ── 2b. APPLYING THEM ─────────────────────────────────────────── */
+/* Most rules below name an Adishila face directly, which is right for
+   Devanagari and useless for anything else: Adishila has no Tamil, Kannada
+   or Telugu letters, so a switched page fell through to the visitor's
+   default serif — a different font per machine, and often a different one
+   per line. common.js puts the chosen script on <html data-gr-script="…">,
+   so while a transliteration is showing, every span the switcher rewrote
+   moves onto --font-indic and picks up the faces above. Devanagari is the
+   no-attribute case and is left exactly as it was.
+   --gr-script-scale is how much smaller or larger that script has to be
+   drawn to read the same size as Devanagari. Kannada and Telugu draw taller
+   letters at the same font-size, Tamil wider and rounder, Gentium smaller;
+   left alone, switching script looked like the type size had changed.
+   THESE FOUR NUMBERS ARE THE KNOB: if a script still reads a shade large or
+   small next to Adishila on the live site, move its number a percent or two
+   and nothing else. It multiplies whatever size the reader has chosen with
+   A- / A+, so the two controls stay independent. */
+:root                            { --gr-script-scale: 1; }
+html[data-gr-script="ta"]        { --gr-script-scale: 0.88; }  /* தமிழ்   */
+html[data-gr-script="kn"]        { --gr-script-scale: 0.86; }  /* ಕನ್ನಡ   */
+html[data-gr-script="te"]        { --gr-script-scale: 0.88; }  /* తెలుగు  */
+html[data-gr-script="en"]        { --gr-script-scale: 1.00; }  /* IAST   */
+html[data-gr-script]:not([data-gr-script="deva"]) [data-deva],
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sticky-title,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-section-title,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-snippet,
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-sr-group-name {
+  font-family: var(--font-indic) !important;
+  font-size: calc(1em * var(--gr-script-scale));
+}
+html[data-gr-script="en"] [data-deva],
+html[data-gr-script="en"] .gr-sticky-title,
+html[data-gr-script="en"] .gr-sr-section-title,
+html[data-gr-script="en"] .gr-sr-snippet,
+html[data-gr-script="en"] .gr-sr-group-name { font-family: var(--font-translit) !important; }
+/* The bold and italic Adishila faces are separate families rather than
+   weights, so a transliterated prateeka or quotation has to ask for the
+   weight it wants instead. */
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-prateeka         { font-weight: 700; }
+html[data-gr-script]:not([data-gr-script="deva"]) .gr-mulaprateeka-block { font-style: italic; }
 body {
@@ Line 250: / Line 426: @@
     sub-entries underneath it. */
 .vector-toc .vector-toc-numb { display: none !important; }
+/* The contents panel follows the reader toolbar's A- / A+ . The toolbar
+   publishes its size as --gr-font-size on <html>; everything below is a
+   ratio of it, so one click moves the body and the contents together. The
+px fallback is the toolbar's own default, for a page without one. */
+.vector-toc {
+  --gr-toc: max(14px, calc(var(--gr-font-size, 22px) * 0.92));
+}
 .vector-toc .vector-toc-title {
    font-size: 15px !important; font-weight: 700 !important;
@@ Line 261: / Line 444: @@
    font-family: var(--font-indic) !important;
 }
-.vector-toc a, .vector-toc .vector-toc-link {
+/* :not() keeps this off the मूलम् / उल्लेख buttons that sit in the same
+   panel — otherwise this rule reshaped them into flat contents links. */
+.vector-toc a:not(.toc-main-link-item), .vector-toc .vector-toc-link {
    display: block;
    font-family: var(--font-indic) !important;
-   font-size: 20px; color: var(--text) !important; text-decoration: none !important;
+   font-size: var(--gr-toc); color: var(--text) !important; text-decoration: none !important;
    padding: 4px 8px; border-radius: 5px; line-height: 1.45;
    transition: background 0.12s, color 0.12s;
 }
-/* Level 1 = section heading, level 2+ = sub-sections. Sizes are in px so
+/* Level 1 = section heading, level 2+ = sub-sections. Each is a ratio of
-    they stay readable next to the 22-24px body text; the levels are told
+   --gr-toc rather than a fixed px, so the levels keep their proportions at
-   apart by weight and colour as much as by size. */
+    every toolbar size; they are told apart by weight and colour as much as
+   by size. */
 .vector-toc .vector-toc-level-1 > .vector-toc-link {
-   font-size: 21px !important; font-weight: 600 !important; color: var(--text) !important;
+   font-size: calc(var(--gr-toc) * 1.05) !important; font-weight: 600 !important; color: var(--text) !important;
 }
 .vector-toc .vector-toc-level-2 > .vector-toc-link {
-   font-size: 19px !important; font-weight: 400 !important; color: #4d4d4d !important;
+   font-size: calc(var(--gr-toc) * 0.95) !important; font-weight: 400 !important; color: #4d4d4d !important;
 }
 .vector-toc .vector-toc-level-3 > .vector-toc-link,
 .vector-toc .vector-toc-level-4 > .vector-toc-link,
 .vector-toc .vector-toc-level-5 > .vector-toc-link {
-   font-size: 18px !important; font-weight: 400 !important; color: #6b6b6b !important;
+   font-size: calc(var(--gr-toc) * 0.90) !important; font-weight: 400 !important; color: #6b6b6b !important;
 }
@@ Line 353: / Line 539: @@
    font-size: 2em; font-weight: 500; color: var(--maroon);
    line-height: 1.4; margin: 0 0 16px; border: none !important;
-   text-align:center; font-family: var(--font-indic);
+   text-align:center; font-family: var(--font-deva);
+}
+/* Headings take AdishilaDev (--font-deva) rather than the general Indic
+   stack, so the heading face is the same everywhere regardless of what
+   else a page mixes in. */
+#mw-content-text h1, #mw-content-text h2, #mw-content-text h3,
+#mw-content-text h4, #mw-content-text h5,
+.mw-heading h1, .mw-heading h2, .mw-heading h3, .mw-heading h4,
+.teeka-title, .gr-teeka-dropdown-header, .gr-sticky-title {
+  font-family: var(--font-deva);
 }
 /* ── 10. VERSE BLOCKS ──────────────────────────────────────────── */
 .shloka-block { display: block; text-align: left; margin: 3px 0 0; padding-bottom: 0.5em; }
-.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0; }
+.shloka-line { display: block; font-style: normal; color: #333; line-height: 1.35; margin: 0;
+  font-family: var(--font-indic); }
 .verse-block { display: block; margin: 6px 0 0; text-align: left; }
 .verse-block .shloka-block { text-align: left; margin: 0; }
 .verse-block .shloka-line {
    display: block; font-weight: 500; line-height: 1.35; margin: 0; color: var(--maroon);
+  font-family: var(--font-indic);
 }
 .verse-block.normal .shloka-line { color: #555; }
@@ Line 390: / Line 588: @@
    display: block; font-size: 1em; line-height: 1.6; color: #555;
    padding: 0; border: none; background: transparent;
+  font-family: var(--font-indic);
 }
 .gr-bhashyam, .commentary-bhashyam {
@@ Line 407: / Line 606: @@
    padding: 6px 10px 8px; margin: 0.3em 0; line-height: 1.6; color: #555; background: #fcf5f3;
      border-radius: 12px;
+  font-family: var(--font-indic);
 }
 .teeka-title {
-   font-family: 'AdishilaDev';, sans-serif !important;
+   font-family: var(--font-indic) !important;
    font-size: 0.75em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 4px; padding-bottom: 3px;
 }
 .teeka-body .shloka-block {
-   margin: 0.4em 0; padding: 0.3em 0.6em; font-family: 'AdishilaDev';
+   margin: 0.4em 0; padding: 0.3em 0.6em; font-family: var(--font-indic);
 }
-.teeka-body .shloka-line { font-size: 0.97em; font-family: 'AdishilaDev'; }
+.teeka-body .shloka-line { font-size: 0.97em; font-family: var(--font-indic); }
 /* ── 15. PRATEEKA / MOOLA ──────────────────────────────────────── */
@@ Line 471: / Line 671: @@
 .gr-author-note {
    font-style: italic; color: var(--maroon); text-align: center; font-size: 0.9em;
-   margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: 'AdishilaDev'
+   margin: 0.8em 0 0.4em 0; border-top: 1px solid #ddd; padding-top: 0.4em; font-family: var(--font-indic)
 }
 .gr-devatachandas {
@@ Line 555: / Line 755: @@
     Used by the desktop TOC and the mobile document nav alike. */
 .toc-main-links {
-   display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
+   display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center;
-   margin: 0 0 10px; padding: 0 0 10px; border-bottom: 1px solid #f1e3dc;
+   margin: 6px 0 18px; padding: 0 0 16px; border-bottom: 1px solid #f1e3dc;
 }
+/* Sitting under the document title in the page, not in the panel */
+#gr-toc-doc-nav.toc-main-links { margin: 10px auto 22px; max-width: 640px; }
 .toc-main-link-item {
-   flex: 1 1 auto; text-align: center;
+   flex: 0 1 auto; min-width: 92px; text-align: center;
    font-family: var(--font-indic); font-size: 18px; font-weight: 600; line-height: 1.4;
-   color: #fff !important; background: #b5451b; border: 0; border-radius: 8px;
+   color: #fff !important; background: #b5451b; border: 0; border-radius: 999px;
-   padding: 9px 16px; text-decoration: none !important;
+   padding: 9px 18px; text-decoration: none !important;
-   box-shadow: 0 1px 2px rgba(60, 20, 10, 0.18);
+   box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);
    transition: background 0.15s, box-shadow 0.15s;
 }
@@ Line 576: / Line 778: @@
    margin: 4px 0 14px; padding: 0 12px 14px; border-bottom: 1px solid #f0e0d6;
 }
-.skin-minerva #gr-mob-doc-nav .toc-main-link-item {
+.skin-minerva #gr-mob-doc-nav .toc-main-link-item { font-size: 17px; padding: 11px 26px; min-width: 116px; }
-  flex: 0 1 auto; min-width: 116px;
-  font-size: 17px; padding: 11px 24px; border-radius: 999px;
-  box-shadow: 0 1px 3px rgba(60, 20, 10, 0.22);
-}
 .skin-minerva .toc-main-link-item,
 .skin-minerva .toc-main-link-item:visited,
@@ Line 2,323: / Line 2,521: @@
     vertical-align offsets by hand. */
 .gr-teeka-cb-wrap {
-   display: inline-flex; align-items: center; gap: 6px;
+   /* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
-   vertical-align: middle;
+     aligned "middle" is positioned by its own height against the parent's
+     x-height, so the whole control - checkbox AND label together - sat
+     progressively lower than the text beside it as the reader enlarged the
+     type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain
+     inline, the label is ordinary text and lines up with its neighbours by
+     definition; only the checkbox needs aligning, and it does that with an
+     em-based offset that holds at any size. */
+   display: inline;
 }
 .gr-teeka-inline-checkbox {
    -webkit-appearance: none; appearance: none;
-   width: 15px !important; height: 15px !important;
+  /* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
-   min-width: 15px; min-height: 15px;
+px box against text that grows; clamped so it stays a sensible
-   margin: 0; padding: 0; cursor: pointer;
+     target at both extremes.
+     Alignment was measured rather than guessed. vertical-align:middle is
+     the only value that stays consistent as the type size changes (it is
+     computed from the font's x-height), but it sits about 2.5px low
+     against this line-height at every size - so that constant bias is
+     taken back with `top`, giving under a pixel of error from 16px to
+px. The element is already position:relative for its tick. */
+   width: clamp(13px, 0.8em, 24px) !important;
+  height: clamp(13px, 0.8em, 24px) !important;
+   min-width: 13px; min-height: 13px;
+   margin: 0 6px 0 0; padding: 0; cursor: pointer;
+  vertical-align: middle; top: -2.5px;
    border: 1.5px solid #b5451b; border-radius: 3px;
    background: #fff; position: relative; flex-shrink: 0;
@@ Line 2,339: / Line 2,555: @@
 }
 .gr-teeka-inline-checkbox:checked::after {
-   content: ''; position: absolute; left: 4px; top: 1px;
+  /* Placed and sized in % of the box, so the tick follows the em-based
-   width: 4px; height: 8px;
+     box instead of staying a 4x8px mark inside a checkbox that grew. */
+   content: ''; position: absolute; left: 32%; top: 8%;
+   width: 26%; height: 55%;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
@@ Line 2,368: / Line 2,586: @@
 .gr-teeka-dropdown-header {
    font-family: 'Adishila', 'Noto Serif Devanagari', system-ui, sans-serif;
-   font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
+  /* CHANGED: fixed 11px -> scales with the reader's text size. */
+   font-size: clamp(12px, calc(var(--gr-font-size, 22px) * 0.6), 17px); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: #b5451b; padding: 10px 14px 6px; border-bottom: 1px solid #f7e4da; margin-bottom: 2px;
 }
@@ Line 2,374: / Line 2,593: @@
 .gr-teeka-dropdown-item {
    display: flex; align-items: center; gap: 9px; padding: 8px 14px;
-   font-size: 14px; color: #3a2a20; cursor: pointer; white-space: nowrap;
+  /* CHANGED: fixed 14px -> scales with the reader's text size. */
+   font-size: clamp(15px, calc(var(--gr-font-size, 22px) * 0.82), 26px);
+  font-family: var(--font-indic);
+  color: #3a2a20; cursor: pointer; white-space: nowrap;
    transition: background .12s;
 }
@@ Line 2,524: / Line 2,746: @@
 #mw-mf-page-left > .gr-mf-native-menu { display: none !important; }
 .gr-mob-menu { width: 100%; margin-top: 8px; background: #fff; }
+/* ── 38. FOOTNOTE MARKERS AND CARDS ────────────────────────────── */
+/* QuickEdit writes the notes; common.js turns them into a superscript at the
+   point of reading and a card on click. The list it writes at the foot of the
+   document is taken off the screen but kept for print, where there is nothing
+   to click and the apparatus belongs at the end. */
+/* The annotated words. QuickEdit marks them with a flat yellow highlight,
+   which is right while editing and shouts on a reading page — a dotted rule
+   says "there is a note here" without breaking the line of the text. */
+#mw-content-text .gra-qe-footnote-highlight {
+  background: none;
+  border-bottom: 1px dotted #c9976b;
+  text-decoration: none;
+  cursor: pointer;                 /* the words open the note too, not only the marker */
+}
+#mw-content-text .gra-qe-footnote-highlight:hover { border-bottom-color: #b5451b; }
+.gr-note-marker {
+  display: inline-block; vertical-align: super;
+  margin-left: 1px; padding: 0 3px;
+  font-family: var(--font-ui); font-weight: 600; line-height: 1.5;
+  /* Relative to the text, but capped: the reader's A+ goes to 30px and an
+     uncapped marker starts competing with the words it annotates. */
+  font-size: clamp(10px, 0.62em, 14px);
+  color: #8a5a2b; background: #fbf1e6; border: 1px solid #eddcc8; border-radius: 4px;
+  cursor: pointer; user-select: none; white-space: nowrap;
+  transition: background 0.12s, color 0.12s, border-color 0.12s;
+}
+.gr-note-marker:hover,
+.gr-note-marker:focus-visible { background: #f3e0c9; color: #6d4318; border-color: #ddc3a3; }
+.gr-note-marker:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
+.gr-note-marker-open { background: #b5451b; color: #fff !important; border-color: #b5451b; }
+/* The open state for an annotated WORD - used when the card is anchored to
+   the words themselves, which is the case for a commentary's notes (they
+   carry no superscript). It must not reverse the text out, or the word it
+   is meant to point at becomes unreadable. */
+#mw-content-text .gra-qe-footnote-highlight.gr-note-hl-open {
+  background: #fdefe6;
+  border-bottom: 1px solid #b5451b;
+  border-radius: 3px;
+  box-shadow: 0 0 0 2px #fdefe6;
+}
+/* The card. Fixed, because it is positioned against the marker's viewport
+   box and follows it on scroll. */
+.gr-note-card {
+  /* CHANGED from 1200. The floating action buttons sit at 9999 and 10200,
+     so the card opened underneath them. */
+  position: fixed; z-index: 10500; width: min(380px, calc(100vw - 20px));
+  background: #fff; border: 1px solid #e7dbd2; border-radius: 10px;
+  box-shadow: 0 10px 30px rgba(60, 20, 10, 0.16);
+  overflow: hidden;
+}
+.gr-note-card[hidden] { display: none; }
+.gr-note-card-head {
+  display: flex; align-items: center; justify-content: space-between; gap: 12px;
+  padding: 9px 10px 9px 14px; border-bottom: 1px solid #f1e4db; background: #fdf8f4;
+}
+.gr-note-card-kind {
+  font-family: var(--font-indic); font-weight: 600; color: #b5451b;
+  /* CHANGED: fixed 14px -> scales with the reader's text size. */
+  font-size: clamp(14px, calc(var(--gr-font-size, 22px) * 0.72), 22px);
+}
+.gr-note-card-close {
+  flex: none; width: 26px; height: 26px; padding: 0;
+  font: 400 18px/1 var(--font-ui); color: #8b7d74;
+  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
+}
+.gr-note-card-close:hover { background: #f3e7df; color: #5a4a41; }
+.gr-note-card-body {
+  padding: 13px 14px 15px;
+  font-family: var(--font-indic); line-height: 1.7; color: #2c1810;
+  /* CHANGED: fixed 17px against 22px body text -> scales with it. */
+  font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.94), 30px);
+  max-height: 46vh; overflow-y: auto; overflow-wrap: anywhere;
+}
+/* Phones: a sheet at the bottom reads better than a card floating over the
+   line, and there is no hover to fall back on. */
+@media (max-width: 600px) {
+  .gr-note-card {
+    left: 0 !important; right: 0; top: auto !important; bottom: 0;
+    width: 100%; border-radius: 14px 14px 0 0; border-bottom: 0;
+    box-shadow: 0 -8px 30px rgba(60, 20, 10, 0.2);
+  }
+  .gr-note-card-body { font-size: clamp(16px, calc(var(--gr-font-size, 22px) * 0.9), 26px); max-height: 50vh; }
+}
+/* The list QuickEdit keeps at the foot of the document */
+.gra-qe-footnotes.gr-notes-listed { display: none; }
+@media print {
+  .gr-note-marker { background: none; border: 0; color: #000; }
+  .gr-note-card { display: none !important; }
+  .gra-qe-footnotes.gr-notes-listed { display: block; margin-top: 28px; padding-top: 12px; border-top: 1px solid #ccc; }
+  .gra-qe-footnote-quote { font-weight: 600; margin-right: 6px; }
+  .gra-qe-footnote-item,
+  .gra-qe-footnote-text { font-family: var(--font-indic); }
+}
+/* ── 39. LINE ALIGNMENT CARRIED FROM THE SOURCE DOCUMENT ──────────
+   A converted document puts one of these on a line whose source
+   paragraph carried an explicit alignment (Katha sets 288 paragraphs
+   CENTER - every invocation and colophon). New classes only: no existing
+   rule is overridden, and a line whose source set no alignment gets no
+   class and keeps whatever the site already gives it. */
+.gr-align-center  { text-align: center; }
+/* The closing verse number is one unit - "॥ ४ ॥" is separated by ordinary
+   spaces, so without this a narrow column wraps between them and strands
+   the number on a line of its own. */
+.gr-verse-num { white-space: nowrap; }
+.gr-align-right   { text-align: right; }
+.gr-align-justify { text-align: justify; }
+/* Footnotes belonging to an interleaved commentary, grouped under its name
+   in the right-hand panel. Shown only where that list is shown. */
+.gr-teeka-notes-group { margin-top: 14px; }
+.gr-teeka-notes-title {
+  font-family: var(--font-deva);
+  font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.68), 19px);
+  font-weight: 600; color: #b5451b;
+  padding-bottom: 3px; margin-bottom: 4px; border-bottom: 1px solid #f1e4db;
+}
+/* Footnote panel: one section per source document. The page's own notes
+   come first, then a section per commentary shown on the page. */
+.gra-footnote-section-title {
+  font-family: var(--font-deva);
+  font-size: clamp(13px, calc(var(--gr-font-size, 22px) * 0.66), 18px);
+  font-weight: 600; color: #b5451b;
+  margin: 14px 4px 6px; padding-bottom: 4px;
+  border-bottom: 1px solid #f1e4db;
+}
+.gra-footnote-section-title:first-child { margin-top: 2px; }
+.gra-footnote-section-own { color: #7a6a60; }
+/* Repeated on the card, for when the heading has scrolled out of view. */
+.gra-footnote-source {
+  font-family: var(--font-deva);
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
+  color: #b5451b; opacity: 0.85; margin-bottom: 2px;
+}
+/* The annotation count badge was removed (it was clipped by the round
+   toggle's own overflow). This keeps it hidden for anyone still served a
+   cached copy of the old gadget. */
+#gra-toggle-badge { display: none !important; }
+/* ── LINK LANDING ───────────────────────────────────────────────────
+   Where a copied id or a bookmark citation link lands. The flash used to
+   be injected by copyId.js; it lives here so the landing still reads when
+   only common.js is loaded. */
+.gid-target {
+  animation: gid-target-flash 2.4s ease-out 1;
+  border-radius: 4px;
+}
+@keyframes gid-target-flash {
+%, 55% { background: rgba(181,69,27,0.14); box-shadow: 0 0 0 4px rgba(181,69,27,0.10); }
+%    { background: transparent; box-shadow: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gid-target { animation: none; background: rgba(181,69,27,0.14); }
+}
+/* ── BOOKMARK CITATION ──────────────────────────────────────────────
+   The reference a bookmark produces, shown on its card and copyable in
+   one click. Set small and in the UI face deliberately: it is apparatus
+   for the reader to take away, not part of the text. */
+.gra-bookmark-cite {
+  margin-top: 6px;
+  /* --font-translit, not --font-indic. The reference is romanised - IAST
+     author, IAST title, Latin site name and URL - and Gentium Book Plus
+     is the only family here with a REAL italic face (Adishila, which
+     --font-indic leads with, has none at this weight, so the italic title
+     fell back to a synthetic slant or to nothing at all). Gentium's
+     unicode-range covers Latin only, so a Devanagari fallback title still
+     lands on Adishila further down the stack. */
+  font-family: var(--font-translit);
+  font-synthesis: style;            /* allow a slant for the Devanagari case */
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.54), 15px);
+  line-height: 1.5; color: #6b5b52;
+  /* Ragged right and flush left. The hanging indent that was here reads
+     correctly in a printed reference LIST, where it separates one entry
+     from the next; on a single card it just looked like the lines had
+     slipped. Justification came in from the panel and stretched the word
+     gaps, which is what made the spacing look broken. */
+  text-align: left;
+  text-indent: 0;
+  padding-left: 0;
+  overflow-wrap: break-word;
+  word-break: normal;
+  hyphens: none;
+}
+.gra-bookmark-cite a {
+  color: inherit; text-decoration: none; border-bottom: 1px dotted #c3b3a9;
+  overflow-wrap: anywhere;          /* only the URL may break mid-token */
+}
+.gra-bookmark-cite a:hover { color: #b5451b; border-bottom-color: #b5451b; }
+.gra-bookmark-cite i,
+.gra-bookmark-cite em { font-style: italic; font-synthesis: style; }
+/* Where the bookmark sits in the text. A caption, not part of the
+   citation - so it is set in the UI face and kept visually apart from
+   the reference below it. */
+.gra-bookmark-locator {
+  margin-top: 5px;
+  font-family: var(--font-ui);
+  font-size: clamp(10px, calc(var(--gr-font-size, 22px) * 0.48), 13px);
+  font-weight: 600;
+  letter-spacing: .02em;
+  color: #8a7a70;
+}
+.gra-cite-actions { display: flex; flex-wrap: wrap; gap: 6px; }
+.gra-cite-copy {
+  margin-top: 6px; padding: 3px 10px;
+  font-family: var(--font-ui);
+  font-size: clamp(11px, calc(var(--gr-font-size, 22px) * 0.5), 14px);
+  font-weight: 600; color: #b5451b;
+  background: #fff5f2; border: 1px solid #f0cfc4; border-radius: 20px;
+  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
+}
+.gra-cite-copy:hover { background: #b5451b; color: #fff; border-color: #b5451b; }
+.gra-cite-copy--done { background: #2e6e40; color: #fff; border-color: #2e6e40; }