@charset "UTF-8";
/* ==========================================================================
   rajasthanjankari.com, style.css
   Production stylesheet · Hindi-first · zero JS · zero images
   --------------------------------------------------------------------------
   1.  Design tokens (custom properties)
   2.  Modern reset
   3.  Base elements (every HTML5 element)
   4.  Layout (container, grid, sidebar, utilities)
   5.  Components (rj-*)
   6.  Utilities
   7.  Print
   Every class name starts with "rj-".
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Colour ------------------------------------------------------------ */
  --rj-bg:            #faf6ee;
  --rj-bg-alt:        #f4eddf;
  --rj-surface:       #ffffff;
  --rj-surface-2:     #fcf9f3;
  --rj-line:          #e6dcc8;
  --rj-line-soft:     #f1e9d9;

  --rj-ink:           #1e1a15;
  --rj-text:          #332c24;
  --rj-muted:         #6f6558;
  /* Was #9a8c77, which measured 3.29:1 on white and 3.05:1 on the page
     ground: below AA on every background it is used on, and it is the colour
     of the search placeholder, the one piece of guidance inside the site's
     primary control. */
  --rj-faint:         #7c6e5d;

  --rj-primary:       #8b2f36;
  --rj-primary-dark:  #6c2229;
  --rj-on-primary:    #ffffff;

  --rj-accent:        #b4761b;
  /* The accent as TEXT. #b4761b is a fine fill, a fine border and a fine bar
     in a chart, but as words it measures 3.25:1 on the hero ground: below AA
     for anything under 24px. Everything drawn is --rj-accent; everything read
     is --rj-accent-text. */
  --rj-accent-text:   #8f5d12;
  --rj-accent-tint:   #fbf1dd;
  --rj-accent-line:   #e2cda4;

  --rj-dark:          #2a211c;
  --rj-dark-line:     #3d322a;
  --rj-on-dark:       #cfc3b2;
  --rj-on-dark-soft:  #a79a88;
  --rj-on-dark-max:   #f6e9da;

  --rj-focus:         #b4761b;
  /* The alphabet index letters: brown, one step off the accent, so a row of
     36 of them does not read as 36 links shouting. */
  --rj-alpha-ink:     #7a5a3a;

  /* The header has its own palette; everything on the dark bar comes from it */
  --rj-header-bg:     #6c2229;
  --rj-header-ink:    #e8d5bd;
  --rj-header-strong: #ffffff;
  /* The header pill lays 10% white over the maroon, so the placeholder is
     read against a lighter ground than the bar itself; #c0a289 measured
     3.54:1 there. */
  --rj-header-dim:    #d3bda9;
  --rj-header-line:   rgb(255 255 255 / 15%);
  --rj-header-soft:   rgb(255 255 255 / 10%);
  --rj-header-accent: #d99a3c;

  /* --- Typography -------------------------------------------------------- */
  /* Mukta was drawn Devanagari-first, so digits and letters sit at the same
     size. Hierarchy comes from weight, not from size. */
  --rj-font-body: Mukta, "Noto Sans Devanagari", "Nirmala UI", system-ui, -apple-system, sans-serif;
  --rj-font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Nothing drops below 12px at the small end, and headings stop at 32px at
     the large end. The steps in between sit close together on purpose:
     the contrast is weight, not size. */
  --rj-fs-3xs:   0.75rem;                                        /* 12px */
  --rj-fs-2xs:   0.8125rem;                                      /* 13px */
  --rj-fs-xs:    0.875rem;                                       /* 14px */
  --rj-fs-sm:    0.9375rem;                                      /* 15px */
  --rj-fs-base:  1rem;                                           /* 16px, fixed */
  --rj-fs-lead:  1.0625rem;                                      /* 17px */

  --rj-fs-h4:    1rem;                                           /* 16px + 600 */
  --rj-fs-h3:    1.125rem;                                       /* 18px + 600 */
  --rj-fs-h2:    clamp(1.25rem, 1.16rem + 0.4vw, 1.4375rem);     /* 20 → 23 */
  --rj-fs-h1:    clamp(1.5rem, 1.31rem + 0.85vw, 2rem);          /* 24 → 32 */
  --rj-fs-hero:  clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);        /* 28 → 36 */

  /* Devanagari matras reach above and below the line, so it needs more
     leading than Latin. 1.9 read like a letter; 1.75 lets the line breathe
     without the block falling apart. */
  --rj-lh-body: 1.75;
  --rj-lh-lead: 1.8;
  --rj-lh-head: 1.4;
  /* Devanagari's full height is about 1.36em; below that a two-line heading
     collides with the line above it */
  --rj-lh-tight: 1.35;
  /* For small UI text: buttons, nav, tables, labels */
  --rj-lh-ui:    1.55;
  --rj-lh-snug:  1.45;

  /* --- Spacing -----------------------------------------------------------
     One rhythm for the whole site: every gap, padding and margin is a step
     on this 4px grid, and nothing on the page sits between two steps. The
     scale is the only source of vertical and horizontal space; a literal
     rem value in a spacing property is a bug, not a fine adjustment.
     Optical work (a ribbon's notch, a negative margin that cancels a
     padding) is the one exception and is marked where it happens. */
  --rj-space-1: 0.25rem;
  --rj-space-2: 0.5rem;
  --rj-space-3: 0.75rem;
  --rj-space-4: 1rem;
  --rj-space-5: 1.25rem;
  --rj-space-6: 1.5rem;
  --rj-space-7: 1.75rem;
  --rj-space-8: 2rem;
  --rj-space-10: 2.5rem;
  --rj-space-12: 3rem;
  --rj-space-16: 4rem;

  /* --- Composed spacing --------------------------------------------------
     These are the four gaps the layout is actually built from, and every one
     of them is a step on the scale above. They used to be clamp() values,
     which is why nothing lined up: a clamp lands on whatever number the
     viewport happens to produce, so at 414px the section gap was 30.8px, the
     card gap 14.1px and the page padding 16.7px, none of them on the grid
     and none of them a multiple of each other. They step at 768px instead,
     so at every width on the site the whole page sits on the same rhythm.

     The four are a ladder, and the order matters more than the numbers: the
     gap between two sections beats the gap between two blocks inside one,
     which beats the gap between two cards in a grid. Break that order and
     the page stops grouping, which is what a census section looked like
     when its own blocks sat 24px apart while the chart grid inside it used
     32: the charts read as further from the paragraph than they were.

     --rj-gap      between cards in a grid, and inside a grid of charts
     --rj-gap-lg   between two columns, and between the widgets in a sidebar
     --rj-flow     between two sections: always the largest
     --rj-block    from the page furniture to where the content starts */
  --rj-gap:       var(--rj-space-4);   /* 16 */
  --rj-gap-lg:    var(--rj-space-6);   /* 24 */
  --rj-flow:      var(--rj-space-10);  /* 40 */
  --rj-block:     var(--rj-space-6);   /* 24 */

  /* --- Layout ------------------------------------------------------------ */
  --rj-container:     1180px;
  --rj-container-pad: var(--rj-space-4);
  /* The band a hero and the footer set aside above and below themselves */
  --rj-hero-pad:      var(--rj-space-6);
  --rj-foot-pad:      var(--rj-space-10);
  --rj-sidebar:       320px;
  --rj-measure:       72ch;
  /* One width for everything stacked in a centred hero: the line of text and
     the search bar under it end at the same point, so the block reads as one
     column instead of three things of three different widths. */
  --rj-hero-measure:  42rem;

  --rj-radius:     4px;
  --rj-radius-sm:  2px;
  --rj-radius-pill: 999px;

  /* One focus ring for the whole site. It was written out twice with two
     different alphas, so a focused input and a focused search bar did not
     glow the same amount. */
  --rj-ring: 0 0 0 3px rgb(180 118 27 / 18%);

  --rj-shadow-sm: 0 1px 2px rgb(42 33 28 / 5%);
  --rj-shadow:    0 2px 10px rgb(42 33 28 / 7%);

  --rj-border:      1px solid var(--rj-line);
  --rj-border-soft: 1px solid var(--rj-line-soft);

  --rj-transition: 140ms ease;
}

/* The one step in the rhythm. Above a tablet everything opens up by exactly
   one place on the scale; nothing in between, so there is no width at which
   the page is half a step off. */
@media (min-width: 768px) {
  :root {
    --rj-gap:           var(--rj-space-5);   /* 20 */
    --rj-gap-lg:        var(--rj-space-10);  /* 40 */
    --rj-flow:          var(--rj-space-12);  /* 48 */
    --rj-block:         var(--rj-space-8);   /* 32 */
    --rj-container-pad: var(--rj-space-6);   /* 24 */
    --rj-hero-pad:      var(--rj-space-8);   /* 32 */
    --rj-foot-pad:      var(--rj-space-12);  /* 48 */
  }
}


/* ==========================================================================
   2. MODERN RESET
   ========================================================================== */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--rj-space-6);
  tab-size: 4;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rj-bg);
  color: var(--rj-text);
  font-family: var(--rj-font-body);
  font-size: var(--rj-fs-base);
  line-height: var(--rj-lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: rgb(139 47 54 / 12%);
}

img, picture, video, canvas, svg, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img, video { height: auto; }

svg { fill: none; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button { background: none; border: 0; }

h1, h2, h3, h4, h5, h6, p, li, dt, dd, figcaption, caption, th, td, summary, legend, label {
  overflow-wrap: break-word;
  hyphens: none;
}

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

:focus-visible {
  outline: 2px solid var(--rj-focus);
  outline-offset: 2px;
  border-radius: var(--rj-radius-sm);
}

:target { scroll-margin-top: var(--rj-space-8); }

::selection {
  background: var(--rj-accent-tint);
  color: var(--rj-ink);
}

[hidden] { display: none !important; }

@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;
  }
}


/* ==========================================================================
   3. BASE ELEMENTS
   ========================================================================== */

/* --- Headings ------------------------------------------------------------ */
/* Headings use the body font, just heavier. Never letter-spacing on
   Devanagari: it breaks the join between a letter and its matra. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rj-font-body);
  font-weight: 600;
  line-height: var(--rj-lh-head);
  letter-spacing: 0;
  /* A two-line heading should split evenly, with no single word left
     hanging on the last line */
  text-wrap: balance;
  color: var(--rj-ink);
}

h1 { font-size: var(--rj-fs-h1); font-weight: 700; }
h2 { font-size: var(--rj-fs-h2); }
h3 { font-size: var(--rj-fs-h3); }
h4 { font-size: var(--rj-fs-h4); }
h5 { font-size: var(--rj-fs-base); }
h6 { font-size: var(--rj-fs-xs); color: var(--rj-accent-text); }

/* --- Text ---------------------------------------------------------------- */
p { text-wrap: pretty; }

a {
  color: var(--rj-primary);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color var(--rj-transition);
}
a:hover { color: var(--rj-primary-dark); text-decoration: underline; }
a:active { opacity: 0.85; }

strong, b { font-weight: 600; color: var(--rj-ink); }
em, i, cite, dfn { font-style: italic; }
small { font-size: var(--rj-fs-xs); color: var(--rj-muted); }

mark {
  background: var(--rj-accent-tint);
  color: var(--rj-ink);
  padding: 0.05em 0.3em;
  border-radius: var(--rj-radius-sm);
}

abbr[title] {
  text-decoration: underline dotted;
  text-underline-offset: 0.25em;
  cursor: help;
}

del { color: var(--rj-muted); text-decoration: line-through; }
ins { background: var(--rj-accent-tint); text-decoration: none; padding: 0 0.2em; }
s   { color: var(--rj-muted); }
u   { text-underline-offset: 0.2em; }

sub, sup { font-size: 0.72em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

time { font-variant-numeric: tabular-nums; }

q { quotes: "“" "”" "‘" "’"; }

address {
  font-style: normal;
  color: var(--rj-muted);
}

hr {
  height: 0;
  border: 0;
  border-top: var(--rj-border);
  margin-block: var(--rj-space-8);
}

/* --- Lists --------------------------------------------------------------- */
ul:not([class]), ol:not([class]) {
  padding-inline-start: var(--rj-space-5);
}
ul:not([class]) > li::marker { color: var(--rj-accent); }
ol:not([class]) > li::marker { color: var(--rj-accent); font-weight: 600; }
/* Plain lists only. Left broader, this margin pushes the nav, the chips
   and the pager down one by one, which is exactly the bug it once caused */
ul:not([class]) > li + li,
ol:not([class]) > li + li { margin-top: var(--rj-space-2); }
li > ul, li > ol { margin-top: var(--rj-space-2); }

dl { margin: 0; }
dt { font-weight: 600; color: var(--rj-ink); }
dd { margin-inline-start: 0; color: var(--rj-text); }
dd + dt { margin-top: var(--rj-space-3); }

/* --- Quotes & figures ---------------------------------------------------- */
blockquote {
  border-inline-start: 3px solid var(--rj-accent);
  background: var(--rj-surface);
  padding: var(--rj-space-4) var(--rj-space-5);
  color: var(--rj-ink);
  font-size: var(--rj-fs-lead);
  line-height: var(--rj-lh-lead);
}
blockquote > :last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: var(--rj-space-2);
  font-size: var(--rj-fs-sm);
  font-style: normal;
  color: var(--rj-muted);
}

figure { margin: 0; }
figcaption {
  font-size: var(--rj-fs-xs);
  color: var(--rj-muted);
  padding-top: var(--rj-space-2);
}

/* --- Code ---------------------------------------------------------------- */
code, kbd, samp, var, pre {
  font-family: var(--rj-font-mono);
  font-size: 0.85em;
}
code {
  background: var(--rj-surface-2);
  border: var(--rj-border-soft);
  border-radius: var(--rj-radius-sm);
  padding: 0.1em 0.35em;
  color: var(--rj-primary-dark);
}
pre {
  background: var(--rj-surface-2);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  padding: var(--rj-space-4);
  overflow-x: auto;
  line-height: 1.7;
  color: var(--rj-text);
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: var(--rj-fs-2xs); }
kbd {
  background: var(--rj-surface);
  border: var(--rj-border);
  border-bottom-width: 2px;
  border-radius: var(--rj-radius);
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  color: var(--rj-ink);
}
var { font-style: italic; color: var(--rj-primary); }

/* --- Tables (base) ------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }
caption { text-align: start; }
th { text-align: start; font-weight: 600; }

/* --- details / summary --------------------------------------------------- */
details {
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
}
summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rj-ink);
  padding: var(--rj-space-3) var(--rj-space-4);
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: var(--rj-space-3);
  min-height: 44px;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  margin-inline-start: auto;
  font-family: var(--rj-font-mono);
  font-size: var(--rj-fs-h3);
  line-height: 1.4;
  color: var(--rj-accent-text);
  flex: 0 0 auto;
}
details[open] > summary::after { content: "−"; }
details[open] > summary { border-bottom: var(--rj-border-soft); }
details > :not(summary) { padding: var(--rj-space-3) var(--rj-space-4); }

/* --- Forms --------------------------------------------------------------- */
fieldset {
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  padding: var(--rj-space-4);
}
legend {
  padding-inline: var(--rj-space-2);
  font-weight: 600;
  color: var(--rj-ink);
}
label { display: inline-block; font-weight: 600; color: var(--rj-ink); }

input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"],
             [type="number"], [type="password"], [type="date"], [type="time"]),
select,
textarea {
  width: 100%;
  min-height: 44px;
  background: var(--rj-surface);
  color: var(--rj-text);
  border: 1px solid var(--rj-line);
  border-radius: var(--rj-radius);
  padding: var(--rj-space-2) var(--rj-space-3);
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-ui);
  transition: border-color var(--rj-transition), box-shadow var(--rj-transition);
}
textarea { min-height: 8rem; resize: vertical; }

input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"],
             [type="number"], [type="password"], [type="date"], [type="time"]):focus,
select:focus,
textarea:focus {
  border-color: var(--rj-accent);
  box-shadow: var(--rj-ring);
  outline: none;
}

::placeholder { color: var(--rj-faint); opacity: 1; }

input[type="checkbox"], input[type="radio"] {
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--rj-primary);
  vertical-align: -0.15em;
}

select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--rj-muted) 50%),
                    linear-gradient(135deg, var(--rj-muted) 50%, transparent 50%);
  background-position: right 1rem center, right 0.7rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  /* Off the rhythm on purpose: this is clearance for the caret drawn above,
     measured from its position, not a gap between two things. */
  padding-inline-end: 2.25rem;
}
[dir="rtl"] select { background-position: left 1rem center, left 0.7rem center; }

progress, meter { width: 100%; height: 0.6rem; accent-color: var(--rj-primary); }
output { font-variant-numeric: tabular-nums; }

::-webkit-search-cancel-button { -webkit-appearance: none; }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

.rj-container {
  width: 100%;
  max-width: var(--rj-container);
  margin-inline: auto;
  padding-inline: var(--rj-container-pad);
}

/* Content plus sidebar. Below 1023px the sidebar moves under the content. */
.rj-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rj-sidebar);
  gap: var(--rj-gap-lg);
  align-items: start;
}
@media (max-width: 1023px) {
  /* Once the sidebar sits below the article it needs a hairline above it,
     or the reader cannot tell where the article ended. */
  .rj-layout { grid-template-columns: minmax(0, 1fr); }
  .rj-layout > .rj-sidebar {
    margin-block-start: var(--rj-space-6);
    padding-block-start: var(--rj-block);
    border-block-start: var(--rj-border);
  }
}

/* Flow: one consistent vertical rhythm between sibling elements */
.rj-flow > * + * { margin-top: var(--rj-flow); }
.rj-flow-tight > * + * { margin-top: var(--rj-space-4); }

/* Prose: plain text blocks inside an article */
.rj-prose > * + * { margin-top: var(--rj-space-4); }
.rj-prose p, .rj-prose li { max-width: var(--rj-measure); }

/* Auto-fit grids, responsive without a media query.
   min() keeps them from overflowing even at 320px. */
.rj-grid { display: grid; gap: var(--rj-gap); }
/* A fixed number of cards per row: 4 on desktop, 3 on tablet, 2 on mobile.
   minmax(0, 1fr) stops a long name from widening its column. */
.rj-grid-2,
.rj-grid-3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cluster: small items on one line that wrap when they run out of room */
.rj-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rj-space-2);
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --- Skip link ----------------------------------------------------------- */
.rj-skip-link {
  position: absolute;
  inset-inline-start: var(--rj-space-4);
  top: -100px;
  z-index: 100;
  background: var(--rj-primary);
  color: var(--rj-on-primary);
  padding: var(--rj-space-2) var(--rj-space-4);
  border-radius: 0 0 var(--rj-radius) var(--rj-radius);
  font-weight: 600;
}
.rj-skip-link:focus { top: 0; color: var(--rj-on-primary); }

/* --- Site header, dark heritage bar ------------------------------------- */
.rj-header {
  position: relative;
  /* Stays above the rest of the page */
  z-index: 20;
  background: var(--rj-header-bg);
  color: var(--rj-header-ink);
}
.rj-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--rj-space-8);
  min-height: 74px;
  padding-block: var(--rj-space-3);
}

/* Wordmark: the name, a gold dot, and "कॉम". The size is set once on
   .rj-brand and the other two are measured in its em, so the proportions
   hold at every screen size. */
.rj-brand {
  display: flex;
  align-items: baseline;
  gap: 0.22em;
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(1.25rem, 1.13rem + 0.5vw, 1.5rem);
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}
.rj-brand:hover { text-decoration: none; color: inherit; }
.rj-brand-name {
  font-size: 1em;
  font-weight: 700;
  color: var(--rj-header-strong);
}
/* An empty span baselines on its own bottom edge, so this sits on the
   line exactly the way a full stop does. */
.rj-brand-dot {
  flex: 0 0 auto;
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  background: var(--rj-header-accent);
}
.rj-brand-tld {
  flex: 0 0 auto;
  font-size: 0.6em;
  font-weight: 600;
  color: var(--rj-header-accent);
}

/* --- Mobile menu toggle (CSS only, no JavaScript) ----------------------- */
/* input[type="checkbox"] sets its own width and height, and an element
   selector plus an attribute beats a bare class, so `.rj-navtoggle` alone
   never shrank this to 1px: it stayed 18px, hidden only by opacity. */
input.rj-navtoggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.rj-navtoggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  margin-inline-start: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--rj-header-line);
  border-radius: var(--rj-radius-pill);
  background: var(--rj-header-soft);
  color: var(--rj-header-strong);
  font-size: var(--rj-fs-sm);
  cursor: pointer;
  user-select: none;
}
.rj-navtoggle-bars {
  position: relative;
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: var(--rj-radius-sm);
  background: currentColor;
}
.rj-navtoggle-bars::before,
.rj-navtoggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  border-radius: var(--rj-radius-sm);
  background: currentColor;
  transition: transform var(--rj-transition), top var(--rj-transition);
}
.rj-navtoggle-bars::before { top: -5.5px; }
.rj-navtoggle-bars::after  { top: 5.5px; }

/* Open: the three lines become a ✕ */
.rj-navtoggle:checked ~ .rj-container .rj-navtoggle-bars { background: transparent; }
.rj-navtoggle:checked ~ .rj-container .rj-navtoggle-bars::before { top: 0; transform: rotate(45deg); }
.rj-navtoggle:checked ~ .rj-container .rj-navtoggle-bars::after  { top: 0; transform: rotate(-45deg); }
/* The real checkbox is hidden, so when the keyboard focuses it the ring is
   drawn on its label (the three-line button) instead. The checkbox is a
   direct child of the header, which is why the label is reached through
   ~ .rj-container. */
.rj-navtoggle:focus-visible ~ .rj-container .rj-navtoggle-btn {
  outline: 2px solid var(--rj-header-accent);
  outline-offset: 2px;
}

/* From 1000px the menu is always open and the button that would show this
   checkbox's focus ring is display:none, so the checkbox became a tab stop
   that did nothing and showed nothing: the second stop on every page, with
   no way to tell focus had landed there. display:none takes it out of the
   tab order entirely, which is correct, because at this width there is
   nothing for it to toggle. */
@media (min-width: 1000px) {
  input.rj-navtoggle { display: none; }
}

/* --- Menu panel ---------------------------------------------------------- */
.rj-header-menu {
  display: flex;
  align-items: center;
  gap: var(--rj-space-8);
  flex: 1 1 auto;
  justify-content: flex-end;
}

@media (max-width: 999px) {
  .rj-navtoggle-btn { display: inline-flex; }
  /* The menu opens inside the header rather than floating over the page, so
     everything below shifts down by exactly its height and the menu never
     covers any content. */
  .rj-header-menu {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: var(--rj-space-3);
    padding-top: var(--rj-space-3);
    border-top: 1px solid var(--rj-header-line);
  }
  /* Checking the checkbox opens the panel and pushes the rest of the page
     down, entirely in CSS */
  .rj-navtoggle:checked ~ .rj-container .rj-header-menu { display: flex; }
  /* In a column flex container flex-basis means height, so it must be reset */
  .rj-header-menu .rj-search {
    order: -1;
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: var(--rj-space-3);
  }
}

/* --- Search: a translucent pill inside the header ----------------------- */
.rj-search {
  display: flex;
  align-items: center;
  gap: var(--rj-space-2);
  flex: 0 1 250px;
  min-width: 0;
  padding: var(--rj-space-2) var(--rj-space-4);
  border: 1px solid var(--rj-header-line);
  border-radius: var(--rj-radius-pill);
  background: var(--rj-header-soft);
  color: var(--rj-header-dim);
}
.rj-search:focus-within {
  border-color: var(--rj-header-accent);
  background: rgb(255 255 255 / 16%);
}
.rj-search-icon { flex: 0 0 auto; stroke: currentColor; }
.rj-search-input {
  flex: 1 1 auto;
  /* Takes the full height of the bar, or tapping the strip just above or
     below the text does not open the field at all */
  align-self: stretch;
  min-width: 0;
  min-height: 26px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rj-header-strong);
  font-size: var(--rj-fs-sm);
}
.rj-search-input:focus { border: 0; box-shadow: none; outline: none; }
.rj-search-input::placeholder { color: var(--rj-header-dim); opacity: 1; }


/* --- The hero search bar -------------------------------------------------
   Not the header pill made bigger. This is the one thing the hero is for, so
   it is built as its own component and it is the largest thing on the band:
   it fills its column edge to edge, it is 56px tall, and its three parts are
   separated by a hairline so the eye reads a field, a scope and a button
   rather than one long empty pill with two small things floating in it.
   Still a plain form, no JavaScript. */
.rj-searchbar {
  display: flex;
  align-items: stretch;
  width: 100%;
  /* The frame the three parts sit in. Its own padding is what makes the
     button read as a solid block inside the bar and not a pill beside it. */
  padding: var(--rj-space-1);
  background: var(--rj-surface);
  border: 1.5px solid var(--rj-accent-line);
  border-radius: var(--rj-radius-pill);
  box-shadow: var(--rj-shadow);
  transition: border-color var(--rj-transition), box-shadow var(--rj-transition);
}
.rj-searchbar:focus-within {
  border-color: var(--rj-accent);
  box-shadow: var(--rj-ring);
}

.rj-searchbar-field {
  display: flex;
  align-items: center;
  gap: var(--rj-space-3);
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: var(--rj-space-5);
}
.rj-searchbar-icon { flex: 0 0 auto; stroke: currentColor; color: var(--rj-faint); }
.rj-searchbar-input {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rj-text);
  font-size: var(--rj-fs-base);
  line-height: var(--rj-lh-snug);
}
.rj-searchbar-input:focus { border: 0; box-shadow: none; outline: none; }
.rj-searchbar-input::placeholder { color: var(--rj-faint); opacity: 1; }

/* The scope, behind its own hairline. A plain <select>: no JavaScript. */
.rj-searchbar-scope {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-inline: var(--rj-space-2);
  border-inline-start: 1px solid var(--rj-line);
}
.rj-searchbar-select {
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: var(--rj-space-2);
  /* Off the rhythm on purpose: clearance for the caret, measured from it */
  padding-inline-end: 1.5rem;
  border: 0;
  border-radius: var(--rj-radius-pill);
  background-color: transparent;
  background-position: right 0.6rem center, right 0.35rem center;
  background-size: 5px 5px, 5px 5px;
  color: var(--rj-muted);
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-snug);
  cursor: pointer;
  transition: background-color var(--rj-transition), color var(--rj-transition);
}
.rj-searchbar-select:hover { background-color: var(--rj-accent-tint); color: var(--rj-text); }
.rj-searchbar-select:focus {
  border: 0;
  background-color: var(--rj-accent-tint);
  color: var(--rj-text);
  box-shadow: none;
  outline: 2px solid var(--rj-accent);
  outline-offset: 0;
}

.rj-searchbar-submit {
  flex: 0 0 auto;
  min-height: 44px;
  margin: 0;
  padding-inline: var(--rj-space-6);
  border: 0;
  border-radius: var(--rj-radius-pill);
  background: var(--rj-primary);
  color: var(--rj-on-primary);
  font-size: var(--rj-fs-base);
  font-weight: 600;
  line-height: var(--rj-lh-snug);
  cursor: pointer;
  transition: background var(--rj-transition);
}
.rj-searchbar-submit:hover { background: var(--rj-primary-dark); }

/* The bar stays one line at every width, 320px included. The room comes
   from dropping the icon and tightening both paddings, never from breaking
   the scope onto a row of its own. */
@media (max-width: 559px) {
  .rj-searchbar {
    flex-wrap: nowrap;
    padding: var(--rj-space-1);
  }
  .rj-searchbar-field {
    gap: var(--rj-space-2);
    padding-inline-start: var(--rj-space-3);
  }
  .rj-searchbar-icon { display: none; }
  .rj-searchbar-input { flex: 1 1 0; min-width: 0; }
  .rj-searchbar-scope { padding-inline: var(--rj-space-1); }
  .rj-searchbar-select {
    padding: var(--rj-space-1);
    /* Off the rhythm on purpose: clearance for the caret, measured from it */
    padding-inline-end: 1.15rem;
    background-position: right 0.45rem center, right 0.25rem center;
  }
  .rj-searchbar-submit { padding-inline: var(--rj-space-4); }
}

@media (max-width: 379px) {
  /* 320px. The last of the room comes out of the button and the scope. */
  .rj-searchbar-field { padding-inline-start: var(--rj-space-2); }
  .rj-searchbar-select { font-size: var(--rj-fs-sm); }
  .rj-searchbar-submit { padding-inline: var(--rj-space-3); }
}


/* iOS Safari zooms the whole page the moment you tap an input smaller than
   16px, and never zooms back. So on small screens it is exactly 16px. */
@media (max-width: 1023px) {
  input:where([type="text"], [type="search"], [type="email"], [type="tel"], [type="url"],
               [type="number"], [type="password"], [type="date"], [type="time"]),
  select,
  textarea,
  .rj-search-input,
  .rj-searchbar-input,
  .rj-searchbar-select { font-size: 1rem; }
}


/* --- Main nav ------------------------------------------------------------ */
.rj-nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--rj-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rj-nav-link {
  display: inline-flex;
  align-items: center;
  padding: var(--rj-space-2) 0;
  border-bottom: 2px solid transparent;
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-ui);
  color: var(--rj-header-ink);
  transition: color var(--rj-transition), border-color var(--rj-transition);
}
.rj-nav-link:hover {
  color: var(--rj-header-strong);
  border-bottom-color: var(--rj-header-line);
  text-decoration: none;
}
.rj-nav-link[aria-current="page"],
.rj-nav-link-active {
  color: var(--rj-header-strong);
  border-bottom-color: var(--rj-header-accent);
}

@media (max-width: 999px) {
  .rj-nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .rj-nav-link {
    /* flex, not inline-flex, or the divider is only as wide as the text */
    display: flex;
    width: 100%;
    min-height: 48px;
    padding: 0;
    border-bottom: 1px solid var(--rj-header-line);
  }
  .rj-nav-list li:last-child .rj-nav-link { border-bottom: 0; }

  /* On mobile the current row is white and bold. The line under it is a
     divider, not a marker, so it stays neutral. border-bottom-color is
     repeated here because the [aria-current] rule above outranks it. */
  .rj-nav-link[aria-current="page"],
  .rj-nav-link-active {
    border-bottom-color: var(--rj-header-line);
    color: var(--rj-header-strong);
    font-weight: 600;
  }
  .rj-nav-list li:last-child .rj-nav-link[aria-current="page"],
  .rj-nav-list li:last-child .rj-nav-link-active { border-bottom: 0; }
}

/* --- Breadcrumb ---------------------------------------------------------- */
.rj-breadcrumb {
  background: var(--rj-bg);
  border-bottom: var(--rj-border);
}
.rj-breadcrumb-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: var(--rj-space-3);
}
.rj-breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rj-space-1) var(--rj-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--rj-fs-sm);
}
.rj-breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--rj-space-1) var(--rj-space-2);
  margin: 0;
}
/* The separator comes from CSS; no extra span in the markup */
.rj-breadcrumb-item + .rj-breadcrumb-item::before {
  content: "\203A";
  color: var(--rj-accent-line);
  font-size: 1.05em;
  line-height: 1;
}
.rj-breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: var(--rj-space-2);
  padding-block: var(--rj-space-1);
  color: var(--rj-muted);
}
.rj-breadcrumb-link:hover { color: var(--rj-primary); }
.rj-breadcrumb-current {
  color: var(--rj-primary);
  font-weight: 600;
}
@media (max-width: 599px) {
  /* Long names wrap rather than being cut off */
  .rj-breadcrumb-list { font-size: var(--rj-fs-xs); }
}

/* --- Main + article ------------------------------------------------------ */
/* Extra room at the foot of the page so the content never runs straight
   into the "back to top" ribbon sitting on the footer. */
.rj-main { padding-block: var(--rj-block) var(--rj-space-16); }

.rj-page-head { display: flex; flex-direction: column; gap: var(--rj-space-2); }
/* A tighter gap after the H1, or the content below drifts away from it */
/* The two deliberate pairs in the flow. A component never sets its own outer
   margin: `.rj-flow > * + *` and `.rj-section > * + *` decide every gap on
   the page, and a component that redeclares one wins on equal specificity
   and quietly breaks the rhythm. Where two blocks belong together, the
   exception is written here, in the open.
     page heading -> the line under it
     intro        -> the "on this page" chips */
.rj-flow > .rj-page-head + * { margin-top: var(--rj-space-5); }
.rj-flow > .rj-toc { margin-top: var(--rj-space-5); }
.rj-kicker {
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-accent-text);
}
/* The page's own title, whatever tag carries it. On the search page the
   hero already holds the <h1>, so the results heading is an <h2>; sizing it
   here rather than off the tag keeps it the same size as the title on every
   other page instead of dropping a step. */
.rj-title {
  margin: 0;
  font-size: var(--rj-fs-h1);
  line-height: var(--rj-lh-head);
}
.rj-meta {
  display: flex;
  flex-wrap: wrap;
  /* Equal space either side of the dot: the column gap and its margin match */
  gap: var(--rj-space-1) var(--rj-space-2);
  font-size: var(--rj-fs-xs);
  color: var(--rj-muted);
  margin: 0;
}
/* display:block, not inline-flex, or the space between the text and the
   <time> disappears in flex layout */
.rj-meta-item { display: block; }
.rj-meta-item + .rj-meta-item::before {
  content: "·";
  margin-inline-end: var(--rj-space-2);
  color: var(--rj-line);
}
.rj-lead {
  font-size: var(--rj-fs-lead);
  line-height: var(--rj-lh-lead);
  color: var(--rj-ink);
  max-width: var(--rj-measure);
}

/* Inside a section every block sits the same distance from the one above it,
   whatever it is: a paragraph, a chart grid, a table, a note. It used to
   depend on what the two blocks were, which meant a census section ran
   24, 24, 24, 28, 16, 20 down the page and the reader could see it.
   A subheading is the only exception, and for a reason: it takes more room
   above and less below, so it binds to the block it names instead of
   floating between two. */
.rj-section > p { max-width: var(--rj-measure); }
.rj-section > * + * { margin-top: var(--rj-space-8); }
.rj-section > h3 { margin-top: var(--rj-space-10); }
.rj-section > h3 + * { margin-top: var(--rj-space-4); }
.rj-section-title {
  position: relative;
  /* Keep Devanagari's descending matras (ु ू ृ) clear of the rule */
  padding-bottom: var(--rj-space-3);
  border-bottom: var(--rj-border);
  margin: 0;
}
/* A short gold segment on the hairline: a light accent, not a heavy border */
.rj-section-title::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--rj-accent);
}

/* --- Cards --------------------------------------------------------------- */
.rj-card {
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  padding: var(--rj-space-4) var(--rj-space-5);
}
.rj-card > * + * { margin-top: var(--rj-space-2); }
.rj-card-title { margin: 0; }
.rj-card-text { font-size: var(--rj-fs-sm); color: var(--rj-muted); margin: 0; }
.rj-card-accent { border-inline-start: 3px solid var(--rj-accent); }

/* Clickable card: the whole area is the link */
.rj-card-link {
  display: flex;
  flex-direction: column;
  gap: var(--rj-space-1);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--rj-transition), box-shadow var(--rj-transition), transform var(--rj-transition);
}
.rj-card-link:hover {
  text-decoration: none;
  border-color: var(--rj-accent-line);
  box-shadow: var(--rj-shadow);
  transform: translateY(-1px);
}
.rj-card-link .rj-card-title { font-size: var(--rj-fs-h3); font-weight: 600; color: var(--rj-primary); }
.rj-card-link:hover .rj-card-title { color: var(--rj-primary); }
.rj-card-link .rj-card-meta { font-size: var(--rj-fs-sm); color: var(--rj-muted); }
.rj-card-current { background: var(--rj-accent-tint); border-color: var(--rj-accent-line); }
.rj-card-current .rj-card-title { color: var(--rj-primary); }

/* --- Tables -------------------------------------------------------------- */
.rj-table {
  background: var(--rj-surface);
  border: var(--rj-border);
  font-size: var(--rj-fs-sm);
  /* Every digit takes the same width, so figures line up down the column */
  font-variant-numeric: tabular-nums;
}
.rj-table caption {
  padding-bottom: var(--rj-space-2);
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-muted);
}
.rj-table th,
.rj-table td {
  padding: var(--rj-space-3) var(--rj-space-4);
  border-bottom: var(--rj-border-soft);
  vertical-align: top;
}
.rj-table thead th {
  background: var(--rj-surface-2);
  color: var(--rj-ink);
  border-bottom: var(--rj-border);
  font-size: var(--rj-fs-xs);
  font-weight: 600;
}
.rj-table tbody tr:last-child > * { border-bottom: 0; }
.rj-table-num { text-align: end; font-variant-numeric: tabular-nums; }
/* A link inside a cell is small text, and 14px is far too little for a
   fingertip. Vertical padding enlarges the touch area and an equal negative
   margin keeps the row height exactly as it was. */
.rj-table th a,
.rj-table td a {
  display: inline-block;
  padding-block: var(--rj-space-3);
  margin-block: -0.75rem;
}
.rj-table-zebra tbody tr:nth-child(even) { background: var(--rj-surface-2); }

/* Fit table: still a real table on a small screen, neither cards nor a
   scroller. table-layout:fixed keeps the columns inside the container, so
   no wrapper element is needed. */
.rj-table-fit {
  width: 100%;
  table-layout: fixed;
}
.rj-table-fit th,
.rj-table-fit td {
  padding: var(--rj-space-3);
  vertical-align: middle;
}
.rj-table-fit tbody th[scope="row"] { color: var(--rj-ink); font-weight: 600; }

/* Below this width the horizontal cell padding stops following the rhythm
   and starts following the measuring tape: it is whatever is left after the
   figures, and a step up would push a seven-digit number onto two lines on a
   320px screen. The vertical padding stays on the scale, so row heights
   still line up with everything else. */
@media (max-width: 559px) {
  .rj-table-fit { font-size: var(--rj-fs-xs); }
  .rj-table-fit th,
  .rj-table-fit td { padding: var(--rj-space-3) 0.5rem; }
}
@media (max-width: 419px) {
  .rj-table-fit { font-size: var(--rj-fs-2xs); }
  .rj-table-fit th,
  .rj-table-fit td { padding: var(--rj-space-3) 0.4rem; }
}

/* The tight table: the census one, four columns of seven-digit figures.
   Only this table may shrink its text and padding. It must come after
   .rj-table-fit, since the two rules carry equal weight. */
@media (max-width: 559px) {
  .rj-table-tight { font-size: var(--rj-fs-2xs); }
  .rj-table-tight th,
  .rj-table-tight td { padding: var(--rj-space-3) 0.45rem; }
  .rj-table-tight th:first-child { width: 31%; }
  .rj-table-tight thead th:not(:first-child) { width: 23%; }
}
@media (max-width: 419px) {
  .rj-table-tight { font-size: var(--rj-fs-3xs); }
  .rj-table-tight th,
  .rj-table-tight td { padding: var(--rj-space-2) 0.3rem; }
  /* "अनुसूचित जनजाति" does not fit in 28%. Narrowing the three number
     columns hands that room to the label. The widths belong on the thead
     <th>, which is the row fixed layout measures. */
  .rj-table-tight th:first-child { width: 33%; }
  .rj-table-tight thead th:not(:first-child) { width: 22.3%; }
}
@media (max-width: 359px) {
  /* 320px, the tightest case. The figures still hold to one line here. */
  .rj-table-tight { font-size: var(--rj-fs-3xs); }
  .rj-table-tight th,
  .rj-table-tight td { padding: var(--rj-space-2) 0.22rem; }
  .rj-table-tight th:first-child { width: 35%; }
  .rj-table-tight thead th:not(:first-child) { width: 21.6%; }
}

/* Key-value table: two columns on mobile as well, label left, value right.
   Stacking label over value cost two lines for every single row. */
.rj-table-facts {
  width: 100%;
  table-layout: fixed;
}
.rj-table-facts th[scope="row"] {
  width: 42%;
  background: var(--rj-surface-2);
  border-inline-end: var(--rj-border-soft);
  color: var(--rj-ink);
}
/* On a wide screen the label column narrows so the value stays near it. */
@media (min-width: 1024px) {
  .rj-table-facts th[scope="row"] { width: 32%; }
}

@media (max-width: 559px) {
  .rj-table-facts { font-size: var(--rj-fs-xs); }
  .rj-table-facts th,
  .rj-table-facts td { padding: var(--rj-space-3) 0.55rem; }
  .rj-table-facts th[scope="row"] { width: 46%; }
}

/* --- Census charts --------------------------------------------------------
   Five shapes, each picked for what its numbers do: a divided bar, a small
   population pyramid, 0-100 rate tracks, one value against a marked
   reference, and a ring for a single share.

   All inline SVG, no JavaScript and no image files. Width is in percent so
   a chart shrinks with its column; height is in pixels so the rounded ends
   never stretch out of shape. Colour supports identity but never carries it
   alone: every part is named with its figure beside it. */
.rj-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Exactly the gap the section puts above and below this grid, so all four
     cards sit the same distance from each other, from the paragraph above
     and from the table below: one number, every screen. A smaller gap here
     (it was 16 on a phone and 20 on a desktop) left the cards stuck to each
     other while the paragraph and the table stood clear, which is the one
     thing the eye picks up straight away. */
  gap: var(--rj-space-8);
  /* No margin of its own, and no rule zeroing one either. `.rj-charts` and
     `.rj-section > * + *` carry the same specificity, so a `margin-block: 0`
     here silently beat the section's own gap and left the grid sitting flat
     against the paragraph above it. */
}

/* One chart a row on a phone. Two in a 320px column left the bars too short
   to read and the key folded onto three lines. */
@media (max-width: 639px) {
  .rj-charts { grid-template-columns: minmax(0, 1fr); }
}
.rj-chart {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--rj-space-4);
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
}
.rj-chart-head {
  margin-bottom: var(--rj-space-3);
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-muted);
}
.rj-chart-bar { display: block; overflow: visible; }

/* Two cards in a row are the same height, so the shorter one's drawing is
   centred in the space it has rather than left hanging under the heading. */
.rj-chart > .rj-chart-bar,
.rj-chart-pyramid,
.rj-chart-rates,
.rj-chart-donut { margin-block: auto; }

/* The key sits at the bottom of the card, so two charts side by side line
   their bars up with each other even when one is taller. */
.rj-chart-key {
  display: flex;
  flex-direction: column;
  gap: var(--rj-space-1);
  margin-top: auto;
  padding-top: var(--rj-space-3);
  font-size: var(--rj-fs-sm);
  color: var(--rj-text);
}
.rj-chart-item { display: flex; align-items: baseline; gap: var(--rj-space-2); }
.rj-chart-dot {
  align-self: center;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: var(--rj-radius-sm);
  flex: none;
}
.rj-chart-dot-a { background: var(--rj-primary); }
.rj-chart-dot-b { background: var(--rj-accent); }
.rj-chart-dot-ref { background: var(--rj-ink); }
.rj-chart-name { color: var(--rj-muted); font-size: var(--rj-fs-sm); }
.rj-chart-item strong { font-weight: 600; color: var(--rj-ink); }
.rj-chart-pct { margin-inline-start: auto; color: var(--rj-muted); font-variant-numeric: tabular-nums; }

/* Pyramid: a band label above each bar, both bars measured from one centre
   line so the two rows can be read against each other. */
.rj-chart-pyramid > .rj-chart-bar + .rj-chart-band { margin-top: var(--rj-space-3); }
.rj-chart-band {
  display: block;
  margin-bottom: var(--rj-space-1);
  font-size: var(--rj-fs-2xs);
  color: var(--rj-muted);
  text-align: center;
}

/* Rate rows: name, track, figure. */
.rj-chart-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--rj-space-2);
  font-size: var(--rj-fs-sm);
}
.rj-chart-row + .rj-chart-row { margin-top: var(--rj-space-2); }
.rj-chart-label { color: var(--rj-muted); }
.rj-chart-val {
  font-weight: 600;
  color: var(--rj-ink);
  font-variant-numeric: tabular-nums;
}

/* Ring, with the share written in the middle so no angle has to be judged. */
.rj-chart-donut { display: flex; justify-content: center; padding-block: var(--rj-space-1); }
.rj-chart-donut-num {
  fill: var(--rj-ink);
  font-size: var(--rj-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Two charts a row holds at every width, so the cards get tighter rather
   than taller as the screen narrows. */
@media (max-width: 559px) {
  .rj-chart { padding: var(--rj-space-4); }
  .rj-chart-key { font-size: var(--rj-fs-xs); }
  .rj-chart-row { gap: var(--rj-space-2); font-size: var(--rj-fs-xs); }
}

/* Data table: every row becomes a card on mobile. Needs data-label="…" on
   each <td>. No page has needed it so far. */
@media (max-width: 699px) {
  .rj-table-stack {
    background: none;
    border: 0;
    font-size: var(--rj-fs-base);
  }
  .rj-table-stack caption { padding-bottom: var(--rj-space-2); }
  .rj-table-stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .rj-table-stack tbody,
  .rj-table-stack tr,
  .rj-table-stack th,
  .rj-table-stack td { display: block; width: auto; }

  .rj-table-stack tr {
    background: var(--rj-surface);
    border: var(--rj-border);
    border-radius: var(--rj-radius);
    margin-bottom: var(--rj-space-3);
    box-shadow: var(--rj-shadow-sm);
  }
  .rj-table-stack tbody tr:last-child { margin-bottom: 0; }

  .rj-table-stack td,
  .rj-table-stack tbody th {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--rj-space-4);
    padding: var(--rj-space-2) var(--rj-space-4);
    border-bottom: var(--rj-border-soft);
    text-align: end;
    font-size: var(--rj-fs-sm);
  }
  .rj-table-stack tr > *:last-child { border-bottom: 0; }
  .rj-table-stack [data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--rj-fs-2xs);
    font-weight: 600;
    color: var(--rj-muted);
    text-align: start;
  }
  /* The first cell is the card heading */
  .rj-table-stack tr > *:first-child {
    justify-content: flex-start;
    text-align: start;
    background: var(--rj-surface-2);
    border-radius: var(--rj-radius) var(--rj-radius) 0 0;
    font-size: var(--rj-fs-h3);
    font-weight: 600;
    padding-block: var(--rj-space-2);
  }
  .rj-table-stack tr > *:first-child::before { display: none; }
  .rj-table-stack .rj-table-num { text-align: end; }
}

/* --- Ad slots ------------------------------------------------------------ */
.rj-ad { display: block; }
.rj-ad-label {
  display: block;
  font-size: var(--rj-fs-3xs);
  font-weight: 600;
  color: var(--rj-faint);
  margin-bottom: var(--rj-space-2);
}
.rj-ad-slot {
  display: grid;
  place-items: center;
  width: 100%;
  border: 1px dashed var(--rj-line-soft);
  border-radius: var(--rj-radius);
  background: var(--rj-surface-2);
  color: var(--rj-faint);
  font-size: var(--rj-fs-xs);
  overflow: hidden;
}
.rj-ad-leaderboard .rj-ad-slot { min-height: 90px; }
.rj-ad-rectangle  .rj-ad-slot { min-height: 280px; }
.rj-ad-square     .rj-ad-slot { min-height: 250px; }
.rj-ad-tall       .rj-ad-slot { min-height: 600px; }
@media (max-width: 699px) {
  .rj-ad-leaderboard .rj-ad-slot { min-height: 100px; }
  .rj-ad-tall .rj-ad-slot { min-height: 280px; }
}
.rj-ad-sticky { position: sticky; top: var(--rj-space-4); }
@media (max-width: 1023px) { .rj-ad-sticky { position: static; } }

/* --- Sidebar widgets ----------------------------------------------------- */
.rj-sidebar { display: flex; flex-direction: column; gap: var(--rj-gap-lg); }
.rj-widget {
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  overflow: hidden;
}
/* overflow:hidden is what rounds the first and last rows into the corners,
   and it also clipped away three sides of every focus ring inside, leaving a
   hairline along the top that read as a divider. A negative offset draws the
   ring inside the row, where nothing clips it. */
.rj-widget-link:focus-visible,
.rj-widget-foot:focus-visible {
  outline: 2px solid var(--rj-focus);
  outline-offset: -2px;
}
.rj-widget-head {
  background: var(--rj-surface-2);
  border-bottom: var(--rj-border);
  padding: var(--rj-space-3) var(--rj-space-4);
}
.rj-widget-title {
  margin: 0;
  font-size: var(--rj-fs-h3);
  display: flex;
  align-items: baseline;
  gap: var(--rj-space-2);
}
.rj-widget-title::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  height: 0.85em;
  background: var(--rj-accent);
  border-radius: var(--rj-radius-sm);
}
.rj-widget-list { margin: 0; padding: var(--rj-space-2) 0; list-style: none; }
.rj-widget-list li + li { margin-top: 0; }
.rj-widget-link {
  display: block;
  padding: var(--rj-space-3) var(--rj-space-4);
  font-size: var(--rj-fs-sm);
  min-height: 44px;
  border-bottom: var(--rj-border-soft);
}
.rj-widget-list li:last-child .rj-widget-link { border-bottom: 0; }
.rj-widget-link:hover { background: var(--rj-surface-2); text-decoration: none; }
.rj-widget-link[aria-current="page"] { font-weight: 600; background: var(--rj-surface-2); }
.rj-widget-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--rj-space-3) var(--rj-space-4);
  background: var(--rj-surface-2);
  border-top: var(--rj-border);
  text-align: center;
  font-weight: 600;
  font-size: var(--rj-fs-sm);
}
.rj-widget-foot:hover { text-decoration: none; background: var(--rj-accent-tint); }

/* --- Chips / tags -------------------------------------------------------- */
.rj-chips { display: flex; flex-wrap: wrap; gap: var(--rj-space-2); padding: 0; list-style: none; }
.rj-chip {
  display: inline-flex;
  align-items: center;
  /* A chip is a link people tap, not a label, so it gets a real target */
  min-height: 40px;
  padding: var(--rj-space-2) var(--rj-space-3);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  background: var(--rj-surface-2);
  font-size: var(--rj-fs-sm);
}
.rj-chip:hover { background: var(--rj-accent-tint); border-color: var(--rj-accent-line); text-decoration: none; }

/* Search suggestions: a small strip directly under the search bar. It is
   not a section of the page, so it gets neither a section heading nor a
   rule. Just a quiet label with names under it. */
.rj-suggest { margin-top: var(--rj-space-5); }
.rj-suggest-label {
  margin: 0 0 var(--rj-space-3);
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-muted);
}
.rj-chip-more {
  background: none;
  border-style: dashed;
  color: var(--rj-primary);
  font-weight: 600;
}

/* --- On this page --------------------------------------------------------
   A quiet row of links to the sections below, sitting right under the
   opening paragraph. It reuses the chips, takes one line on a wide screen
   and two on a phone, and adds no box or heading of its own, so it reads as
   part of the page rather than a panel bolted on. */
.rj-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rj-space-2) var(--rj-space-3);
}
.rj-toc .rj-chips { margin: 0; }
.rj-toc-label {
  margin: 0;
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-muted);
}

/* Anchored headings stop a little below the top edge, not flush against it */
:target { scroll-margin-top: var(--rj-space-5); }

/* --- Alphabet index ------------------------------------------------------ */
.rj-alpha { display: flex; flex-wrap: wrap; gap: var(--rj-space-2); padding: 0; list-style: none; }
.rj-alpha-item {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--rj-space-2);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  background: var(--rj-surface);
  font-size: var(--rj-fs-base);
  color: var(--rj-alpha-ink);
}
.rj-alpha-item:hover { background: var(--rj-accent-tint); border-color: var(--rj-accent-line); text-decoration: none; }
.rj-alpha-item[aria-current="true"] {
  background: var(--rj-primary);
  border-color: var(--rj-primary);
  color: var(--rj-on-primary);
  font-weight: 600;
}

/* --- Link list (nearby villages) ---------------------------------------- */
.rj-linklist {
  display: grid;
  /* Small boxes holding nothing but a name. As many as the width allows,
     but never more than five in a line: at six the boxes get narrow enough
     that a long village name wraps to two lines while its neighbours sit on
     one, and the row stops looking like a row. The 4/3/2 rule for cards
     does not apply here. */
  /* auto-fill alone gave six or seven boxes on a wide article. Making the
     smallest track a fifth of the row, gaps deducted, caps the line at five
     while still dropping to four and three as the room shrinks. */
  grid-template-columns: repeat(auto-fill, minmax(max(165px, calc((100% - 4 * var(--rj-space-2)) / 5)), 1fr));
  gap: var(--rj-space-2);
  padding: 0;
  list-style: none;
}
.rj-linklist li { margin: 0; }
.rj-linklist a {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding: var(--rj-space-2) var(--rj-space-4);
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-snug);
  transition: background var(--rj-transition), border-color var(--rj-transition);
}
.rj-linklist a:hover {
  background: var(--rj-accent-tint);
  border-color: var(--rj-accent-line);
  text-decoration: none;
}

/* --- Directory list ------------------------------------------------------
   Name on the left, the links it contains in columns on the right. Nothing
   but a hairline, which is what keeps 400+ links calm.
   <dl class="rj-dir"><div class="rj-dir-row"><dt>…</dt><dd>…</dd></div> */
/* No rule of its own on top; the heading's underline is the boundary. The
   list carries no margin either: the flow above it decides that gap. */
.rj-dir { display: grid; }
.rj-dir-row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) 1fr;
  gap: var(--rj-gap);
  padding-block: var(--rj-space-4);
  border-block-end: var(--rj-border-soft);
}
.rj-dir-row:last-child { border-block-end: 0; }
.rj-dir-term { padding-block-start: var(--rj-space-2); }
.rj-dir-name {
  /* Like a table link: a bigger touch area, the same row height. The
     padding takes the target past 44px and the equal negative margin gives
     the space straight back, so nothing below it moves. */
  display: inline-block;
  padding-block: var(--rj-space-3);
  margin-block: -0.75rem;
  font-size: var(--rj-fs-h4);
  font-weight: 600;
  line-height: var(--rj-lh-tight);
  color: var(--rj-primary);
  text-decoration: none;
}
.rj-dir-name:hover,
.rj-dir-name:focus-visible { text-decoration: underline; }
.rj-dir-count {
  display: block;
  margin-block-start: var(--rj-space-1);
  font-size: var(--rj-fs-2xs);
  color: var(--rj-muted);
}
.rj-dir-def { margin: 0; }
/* A list of names across several columns. Grid, not CSS columns: those
   fill top to bottom, which breaks the reading order. */
.rj-namelist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rj-space-1) var(--rj-gap);
  padding: 0;
  list-style: none;
}
.rj-namelist li { margin: 0; }
/* The same colour every link on the site uses, so it reads immediately as
   something to click rather than as plain text. */
.rj-namelist a {
  display: flex;
  align-items: center;
  /* The same floor as .rj-linklist beside it. It used to be set only below
     768px, so at exactly tablet width these rows dropped to 38px. */
  min-height: 44px;
  padding: var(--rj-space-2);
  border-radius: var(--rj-radius);
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-snug);
  text-decoration: none;
}
.rj-namelist a:hover,
.rj-namelist a:focus-visible {
  background: var(--rj-accent-tint);
  text-decoration: underline;
}

/* --- Cards per row: 4 / 3 / 2 --------------------------------------------
   Three on tablet, two on mobile. The name list follows the same counts so
   every page reads alike. */
@media (max-width: 1023px) {
  .rj-grid-2,
  .rj-grid-3,
  .rj-namelist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .rj-grid-2,
  .rj-grid-3,
  .rj-namelist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rj-linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .rj-dir-row {
    grid-template-columns: 1fr;
    gap: var(--rj-space-2);
    padding-block: var(--rj-space-5);
  }
  .rj-dir-term { padding-block-start: 0; }
  .rj-dir-count { display: inline; margin-inline-start: var(--rj-space-2); }
  /* A full-size target for a fingertip */
  .rj-namelist a { padding-block: var(--rj-space-2); }
}

/* --- Prev / next pager ---------------------------------------------------
   No box and no rule: a small muted label, the name below it, arrows from
   CSS. No letter-spacing on Devanagari, which would break the words apart.
   Both sit on one line even at 320px; a long name wraps within its half. */
.rj-pager {
  display: flex;
  align-items: flex-start;
  gap: var(--rj-gap);
  margin: 0;
  padding: 0;
  padding-block: var(--rj-space-6) var(--rj-space-4);
  list-style: none;
}
.rj-pager-item {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}
.rj-pager-item-next {
  margin-inline-start: auto;
  text-align: end;
}
.rj-pager-link {
  display: block;
  max-width: 100%;
  color: inherit;
}
.rj-pager-link:hover { text-decoration: none; }
.rj-pager-label {
  display: block;
  font-size: var(--rj-fs-xs);
  line-height: var(--rj-lh-ui);
  color: var(--rj-muted);
}
.rj-pager-name {
  display: block;
  margin-block-start: var(--rj-space-1);
  font-size: var(--rj-fs-h4);
  font-weight: 600;
  line-height: var(--rj-lh-snug);
  color: var(--rj-primary);
}
.rj-pager-link:hover .rj-pager-name {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* The arrows point towards the name, so they wear the gold accent */
.rj-pager-item:not(.rj-pager-item-next) .rj-pager-label::before {
  content: "\2190";
  margin-inline-end: var(--rj-space-2);
  color: var(--rj-accent-text);
}
.rj-pager-item-next .rj-pager-label::after {
  content: "\2192";
  margin-inline-start: var(--rj-space-2);
  color: var(--rj-accent-text);
}

@media (max-width: 559px) {
  .rj-pager { gap: var(--rj-space-4); }
  .rj-pager-label { font-size: var(--rj-fs-2xs); }
  .rj-pager-name { font-size: var(--rj-fs-base); }
}

/* --- FAQ ----------------------------------------------------------------- */
.rj-faq { display: flex; flex-direction: column; gap: var(--rj-space-2); }
.rj-faq-q { font-size: var(--rj-fs-base); }
/* Answers are body text and take the body measure. Without it a one-line
   answer ran to 117 characters on a wide screen while the paragraph above it
   stopped at 72. */
.rj-faq-a { color: var(--rj-muted); font-size: var(--rj-fs-sm); }
.rj-faq-a p, .rj-faq-a li { max-width: var(--rj-measure); }
.rj-faq-a > * + * { margin-top: var(--rj-space-2); }

/* --- Note / callout ------------------------------------------------------ */
.rj-note {
  background: var(--rj-accent-tint);
  border: 1px solid var(--rj-accent-line);
  border-radius: var(--rj-radius);
  padding: var(--rj-space-3) var(--rj-space-4);
  font-size: var(--rj-fs-sm);
  color: var(--rj-text);
}
.rj-note > * + * { margin-top: var(--rj-space-2); }
.rj-note p { max-width: var(--rj-measure); }
.rj-note-plain { background: var(--rj-surface-2); border-color: var(--rj-line); }

/* --- Buttons ------------------------------------------------------------- */
.rj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rj-space-2);
  min-height: 44px;
  padding: var(--rj-space-2) var(--rj-space-5);
  border: 1px solid transparent;
  border-radius: var(--rj-radius);
  font-size: var(--rj-fs-sm);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background var(--rj-transition), border-color var(--rj-transition), color var(--rj-transition);
}
.rj-btn:hover { text-decoration: none; }
.rj-btn-primary { background: var(--rj-primary); color: var(--rj-on-primary); }
.rj-btn-primary:hover { background: var(--rj-primary-dark); color: var(--rj-on-primary); }
.rj-btn-ghost {
  background: var(--rj-surface);
  border-color: var(--rj-line);
  color: var(--rj-primary);
}
.rj-btn-ghost:hover { background: var(--rj-accent-tint); border-color: var(--rj-accent-line); }
.rj-btn-sm { min-height: 40px; padding: var(--rj-space-2) var(--rj-space-4); font-size: var(--rj-fs-xs); }
.rj-btn[disabled], .rj-btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

/* --- Hero ---------------------------------------------------------------- */
.rj-hero {
  background: var(--rj-bg-alt);
  border-bottom: 1px solid var(--rj-accent-line);
}
/* The hero is centred by default, at every width. On a phone and a tablet
   there is no room for a column beside anything, so a centred block is what
   reads best; a page whose hero carries no figures at all (the search page)
   stays centred on a desktop too, because there is nothing to put on the
   right and a lone left column would leave half the band empty.

   Only a hero that HAS figures splits, and only from 1024px up: see the
   rail rule below. */
.rj-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rj-space-6);
  padding-block: var(--rj-hero-pad);
  text-align: center;
}
.rj-hero-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The measure. The heading, the line under it and the search bar all end
     on this edge, so the three share one width. */
  max-width: var(--rj-hero-measure);
  width: 100%;
}
/* The kicker, the heading and the line under it sit close: they are one
   sentence broken into three, not three blocks. Only the search stands
   clear of them. */
.rj-hero-main > * + * { margin-top: var(--rj-space-2); }
.rj-hero-main > .rj-searchbar { margin-top: var(--rj-space-5); }

.rj-hero-title {
  margin: 0;
  font-size: var(--rj-fs-hero);
  line-height: var(--rj-lh-tight);
}
.rj-hero-text {
  margin: 0;
  font-size: var(--rj-fs-lead);
  color: var(--rj-text);
}

/* The rail. Fifty, ten, forty: the words take half the band, the figures
   take forty, and the ten between them is what keeps the two apart without
   a rule or a box. It adds to a hundred, so the two columns end exactly on
   the container's own edges. Same breakpoint as the article and its sidebar
   below, so the hero's split lines up with the page's. */
@media (min-width: 1024px) {

  .rj-hero-split .rj-hero-inner {
    display: grid;
    grid-template-columns: 50% 40%;
    column-gap: 10%;
    row-gap: var(--rj-space-6);
    align-items: center;
    text-align: start;
  }
  /* Grid children default to min-content, so a long name would push the
     column past its 50% instead of wrapping inside it. */
  .rj-hero-split .rj-hero-main,
  .rj-hero-split .rj-stats { min-width: 0; }

  /* The grid column is now the measure, so the cap comes off and the words
     and the bar run the full width of it. */
  .rj-hero-split .rj-hero-main {
    max-width: none;
    align-items: stretch;
  }

  /* Two tiles to a line in the rail. One to a line made each tile as wide
     as the whole rail, which is far more box than a four-digit number
     needs; at half the width the figure sits in something its own size.
     An odd last tile centres itself under the pair above it. */
  .rj-hero-split .rj-stats {
    justify-content: center;
    width: 100%;
    margin: 0;
  }
  .rj-hero-split .rj-stat {
    flex: 0 1 calc(50% - var(--rj-space-2) / 2);
    max-width: none;
    padding: var(--rj-space-2);
  }
  .rj-hero-split .rj-stat-num { font-size: 1.375rem; }
}

/* Hero figures. Loose numbers under a paragraph read as leftovers, so each
   one gets its own tile: a card on the cream ground, the figure in brand
   colour above its label. They wrap on their own, so three tiles or five
   both sit evenly without a media query. */
.rj-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rj-space-2);
  width: 100%;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rj-stat {
  /* Sized so the tiles split evenly under the bar: three fill the measure,
     and seven break 4 and 3 rather than 6 and a single orphan. */
  flex: 1 1 9.5rem;
  /* Exactly a third of the hero measure, gaps included, so a row of three
     ends on the same two edges as the search bar above it. */
  max-width: calc((var(--rj-hero-measure) - 2 * var(--rj-space-2)) / 3);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rj-space-1);
  padding: var(--rj-space-3) var(--rj-space-2);
  background: var(--rj-surface);
  border: var(--rj-border);
  border-radius: var(--rj-radius);
}
.rj-stat-num {
  font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--rj-primary);
  font-variant-numeric: tabular-nums;
}
.rj-stat-label {
  font-size: var(--rj-fs-xs);
  font-weight: 600;
  color: var(--rj-muted);
}

/* On a phone the tiles hold to three across, wrapping into further rows of
   three. Only the hero does this; card grids elsewhere still go to two. The
   figure shrinks a step so a seven-digit count still fits in a third of a
   320px screen. */
@media (max-width: 559px) {
  .rj-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rj-space-2);
  }
  .rj-stat {
    max-width: none;
    padding: var(--rj-space-2) var(--rj-space-1);
  }
  .rj-stat-num { font-size: 1.25rem; }
  .rj-stat-label { font-size: var(--rj-fs-2xs); text-align: center; }
}

@media (max-width: 359px) {
  .rj-stat-num { font-size: 1.125rem; }
}

/* --- Back to top ---------------------------------------------------------
   A narrow bookmark ribbon hanging over the top edge of the footer, cut to a
   V at the bottom the way a real ribbon end is. Just the arrow, because a
   bookmark this narrow has no room for a word and an upward arrow at the
   foot of a page needs no explaining; the label is there for screen readers.
   An ordinary anchor, so nothing floats or follows the scroll, and on a long
   village page it lands exactly where the reader runs out of content. */
.rj-totop {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  margin-bottom: -1.15rem;
  padding-inline-end: var(--rj-foot-pad);
}
.rj-totop-link {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.25rem;
  padding: 0.5rem 0 1.35rem;
  background: var(--rj-accent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.5rem), 0 100%);
  color: var(--rj-ink);
  text-decoration: none;
}
.rj-totop-link:hover {
  background: var(--rj-primary);
  color: var(--rj-on-primary);
  text-decoration: none;
}
/* clip-path cuts away anything drawn outside the shape, and an outline with
   a positive offset is drawn outside the border box: the keyboard ring was
   being clipped down to a dozen stray pixels while hover repainted the whole
   ribbon. The focus state is therefore painted inside the shape, and it
   matches what hover does so both reach the same place. */
.rj-totop-link:focus-visible {
  outline: none;
  background: var(--rj-primary);
  color: var(--rj-on-primary);
  box-shadow: inset 0 0 0 2px var(--rj-on-primary);
}
.rj-totop-link svg { color: currentColor; }

/* --- Footer -------------------------------------------------------------- */
.rj-footer {
  background: var(--rj-dark);
  color: var(--rj-on-dark);
  margin-top: auto;
}
.rj-footer a { color: var(--rj-on-dark); }
.rj-footer a:hover { color: var(--rj-on-dark-max); }

/* Wordmark left, the two lists right. All the slack collects before the
   first list, so both lists sit together at the right edge with a single
   gap in the middle. */
.rj-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rj-gap-lg) var(--rj-space-12);
  padding-block: var(--rj-foot-pad);
}
.rj-footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--rj-space-2);
  flex: 1 1 18rem;
  max-width: 40ch;
}

/* The footer wordmark is the header's, just on a darker ground */
.rj-footer-mark {
  display: flex;
  align-items: baseline;
  gap: 0.22em;
  align-self: flex-start;
  font-size: var(--rj-fs-h3);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--rj-on-dark-max);
}
.rj-footer-mark:hover { color: var(--rj-on-dark-max); text-decoration: none; }
.rj-footer-name { font-size: 1em; font-weight: 700; }
.rj-footer-dot {
  flex: 0 0 auto;
  width: 0.26em;
  height: 0.26em;
  border-radius: 50%;
  background: var(--rj-accent);
}
.rj-footer-tld { font-size: 0.7em; font-weight: 600; color: var(--rj-header-accent); }

.rj-footer-about {
  font-size: var(--rj-fs-sm);
  line-height: var(--rj-lh-body);
  color: var(--rj-on-dark-soft);
  margin: 0;
}

.rj-footer-col { flex: 0 0 auto; min-width: 8.5rem; }
.rj-footer-col:first-of-type { margin-inline-start: auto; }
/* --rj-accent measures 4.16:1 on the footer's dark ground, just under AA.
   --rj-header-accent is the same gold one step brighter and clears it at
   6.48:1; the bar at the top of the page already uses it. */
.rj-footer-title {
  margin: 0 0 var(--rj-space-2);
  font-size: var(--rj-fs-2xs);
  font-weight: 600;
  color: var(--rj-header-accent);
}
.rj-footer-list { margin: 0; padding: 0; list-style: none; }
.rj-footer-list a {
  display: inline-block;
  padding-block: var(--rj-space-2);
  font-size: var(--rj-fs-sm);
  color: var(--rj-on-dark-soft);
}
.rj-footer-list a:hover { color: var(--rj-on-dark-max); text-decoration: none; }

@media (max-width: 767px) {
  /* The wordmark takes the full width; both lists sit side by side below */
  .rj-footer-grid { row-gap: var(--rj-space-8); }
  .rj-footer-brand { flex: 1 1 100%; max-width: none; }
  .rj-footer-col { flex: 1 1 8.5rem; }
  .rj-footer-col:first-of-type { margin-inline-start: 0; }
}

/* --- Footer bottom bar --------------------------------------------------- */
.rj-footer-bottom { border-top: 1px solid var(--rj-dark-line); }
.rj-footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rj-space-3) var(--rj-space-6);
  padding-block: var(--rj-space-4);
  font-size: var(--rj-fs-xs);
  color: var(--rj-on-dark-soft);
}
.rj-footer-copy { margin: 0; }

/* The three policy links always stay on ONE line, 320px included. When
   room runs short the text and gaps shrink; the line never breaks. */
.rj-footer-legal {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 var(--rj-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rj-footer-legal li { white-space: nowrap; }
/* A faint vertical rule between links, with no extra markup */
.rj-footer-legal li + li { position: relative; }
.rj-footer-legal li + li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(var(--rj-space-5) / -2);
  top: 50%;
  width: 1px;
  height: 0.9em;
  transform: translateY(-50%);
  background: var(--rj-dark-line);
}
.rj-footer-legal a { display: inline-block; padding-block: var(--rj-space-3); }

@media (max-width: 639px) {
  /* The bar stacks in DOM order: copyright on top, the policy links below.
     Both stay flush with the container's start edge, in line with every
     other stacked block on the page. The extra padding keeps the links
     comfortable to tap. */
  .rj-footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--rj-space-4);
    padding-block: var(--rj-space-6);
  }
}
@media (max-width: 399px) {
  /* On the narrowest screens both the text and the gaps tighten a little to
     keep all three names on one line */
  .rj-footer-legal { gap: 0 var(--rj-space-3); font-size: var(--rj-fs-2xs); }
  .rj-footer-legal li + li::before { inset-inline-start: calc(var(--rj-space-3) / -2); }
}


/* ==========================================================================
   6. UTILITIES
   ========================================================================== */

.rj-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A caption must not be absolutely positioned: in Chrome an abspos caption
   wipes out every column width under table-layout:fixed. So it stays in
   flow, shrunk to 1px. Its width is 1px too, otherwise its own intrinsic
   width widens the whole table. Screen readers still read it. */
caption.rj-visually-hidden:not(:focus):not(:active) {
  position: static !important;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Tap targets: vertical padding enlarges a small text link and an equal
   negative margin leaves the layout exactly as it was. */
.rj-brand,
.rj-footer-mark { padding-block: var(--rj-space-3); margin-block: -0.75rem; }

.rj-breadcrumb-link,
.rj-breadcrumb-current { padding-block: var(--rj-space-2); margin-block: -0.5rem; }

.rj-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }

.rj-muted       { color: var(--rj-muted); }
.rj-small       { font-size: var(--rj-fs-xs); }
.rj-measure     { max-width: var(--rj-measure); }


/* Column widths, set on the head cell:
   <th scope="col" class="rjw-26">तहसील</th>
   They are percentages, so no media query is needed. Only the widths the
   site actually uses are here; add a line when a new one is needed. */
.rjw-20{width:20%}.rjw-24{width:24%}.rjw-26{width:26%}.rjw-28{width:28%}.rjw-32{width:32%}.rjw-40{width:40%}.rjw-42{width:42%}


/* ==========================================================================
   7. PRINT
   ========================================================================== */

@media print {
  :root {
    --rj-bg: #fff; --rj-bg-alt: #fff; --rj-surface: #fff; --rj-surface-2: #fff;
    --rj-ink: #000; --rj-text: #000; --rj-muted: #333; --rj-line: #999; --rj-line-soft: #ccc;
  }
  body { font-size: 11pt; line-height: 1.65; }
  .rj-nav, .rj-search, .rj-ad, .rj-sidebar,
  .rj-pager, .rj-skip-link, .rj-footer-grid { display: none !important; }
  .rj-layout { display: block; }
  .rj-breadcrumb { border-bottom: 1px solid #999; }
  a { color: #000; text-decoration: underline; }
  .rj-article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
  .rj-table { page-break-inside: avoid; }
  h1, h2, h3 { page-break-after: avoid; }
}