/* Darust — the house.
 *
 * Two registers, one identity:
 *   THE BOARD    deep green, painted Gurmukhi — the object the project is about.
 *                Used for the hero and for moments that should feel like a sign.
 *   THE SPECIMEN warm off-white, editorial type, ghosted Gurmukhi behind the
 *                argument. Everything you actually read sits here.
 *
 * The recurring device is the DOUBLE SPELLING: the same village written two
 * ways, set large and pale behind the page. The disagreement is the wallpaper.
 */

:root{
  --paper:#F4EED8; --ink:#1D160E; --soft:#5E5648; --faint:#9A9180;
  --rule:#E0D8BF; --band:#EDE5CB; --sheet:#FBF7E9;
  --board:#1D160E; --board-ink:#F4EED8;
  --brand:#FA7621;        /* shapes only — 2.35:1 on cream, never for text */
  --sign:#B8480C;         /* text + links — 4.55:1 on cream, passes AA */
  --wrong:#A81F1F; --ghost:rgba(20,20,20,.055);
  --grot:'Archivo','Helvetica Neue',Arial,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;
  --display:'Fraunces','Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --gur:'Noto Serif Gurmukhi','Nirmala UI',serif;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#14110C; --ink:#F4EED8; --soft:#A69C86; --faint:#6F6656;
  --rule:#2E2A22; --band:#1C1913; --sheet:#1A1710;
  --board:#0F0C08; --board-ink:#F4EED8; --brand:#FF8A3D; --sign:#FF8A3D;
  --wrong:#F0817A; --ghost:rgba(237,234,227,.05);
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
     font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;
     display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
main{flex:1}
a{color:var(--sign)}
h1,h2,h3{margin:0}
p{margin:0 0 1em}
.w{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.5vw,58px);width:100%}
.gur{font-family:var(--gur)}
.mono{font-family:var(--mono)}
.soft{color:var(--soft)}
:focus-visible{outline:2px solid var(--sign);outline-offset:3px}

/* eyebrow */
.k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
   color:var(--wrong);margin:0 0 26px}

/* display type — Fraunces is the voice of this project */
.display{font-family:var(--display);font-weight:900;letter-spacing:-.042em;line-height:.9;
         text-wrap:balance}
.display em{font-style:italic;font-weight:300}

/* ---------------------------------------------------------------- nav */
.nav{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;background:var(--paper)}
.nav .w{display:flex;align-items:center;gap:22px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink)}
.brand .mark{display:block;width:104px;color:var(--ink)}
.brand .mark svg{display:block;width:100%;height:auto}
.brand .tick{width:7px;height:7px;border-radius:50%;background:var(--brand);
             display:block;margin-bottom:7px}
.brand b{font-family:var(--gur);font-size:21px;font-weight:600;line-height:1}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint)}
.nav nav{display:flex;gap:clamp(14px,2vw,26px);margin-left:auto;flex-wrap:wrap}
.nav nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
           color:var(--soft);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent}
.nav nav a:hover{color:var(--ink)}
.nav nav a[aria-current]{color:var(--ink);border-bottom-color:var(--wrong)}
/* One nav, two scripts. Not scoped to a page class: the nav is on every page, so
   the switch has to be too. */
.nav nav a .pa{display:none;font-family:var(--gur);font-size:14px;letter-spacing:0}
@media (max-width:640px){
  .nav nav a .en{display:none}
  .nav nav a .pa{display:inline}
}

/* ---------------------------------------------------------- home page
 * A search page is a search box. Everything else is warmth: a cream ground,
 * the name in Punjabi first, and a real village drifting through the
 * placeholder so the archive shows what it holds instead of saying so.
 */
body.home{justify-content:center}
/* 100vh on a phone is the height with the address bar HIDDEN, so the page was
   taller than the screen it loads into and scrolled for nothing. svh is the
   height with the bars showing. vh stays first as the fallback. */
.hero{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:clamp(24px,4vw,44px)}
.hero-in{margin:auto;width:100%;max-width:640px;text-align:center}

.wordmark{position:relative;display:flex;align-items:flex-end;justify-content:center;
          gap:clamp(7px,1.1vw,12px);color:var(--ink);margin:0 0 22px}
.wordmark .mark{display:block;width:clamp(168px,26vw,264px)}
.wordmark .mark svg{display:block;width:100%;height:auto}
.wordmark i{width:clamp(10px,1.5vw,15px);height:clamp(10px,1.5vw,15px);border-radius:50%;
            background:var(--brand);flex:none;margin-bottom:clamp(7px,1.2vw,13px)}
.tagline{font-family:var(--gur);font-size:clamp(17px,2.2vw,21px);color:var(--soft);margin:0 0 4px}
.tagline-en{font-family:var(--grot);font-size:13px;letter-spacing:.04em;color:var(--faint);
            margin:0 0 clamp(30px,4.4vw,44px)}

.searchwrap{position:relative;text-align:left}
.rulefield{display:flex;align-items:center;gap:14px;background:var(--sheet);
           border:1px solid var(--rule);border-radius:999px;padding:0 24px;
           box-shadow:0 2px 10px rgba(60,45,20,.05);
           transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease}
.rulefield:hover{box-shadow:0 5px 18px rgba(60,45,20,.09)}
.rulefield:focus-within{border-color:var(--sign);box-shadow:0 7px 26px rgba(14,110,82,.16)}
.rulefield svg{flex:none;width:19px;height:19px;color:var(--faint);transition:color .2s}
.rulefield:focus-within svg{color:var(--sign)}
.rulefield input{flex:1;border:0;background:transparent;color:var(--ink);
                 font-family:var(--gur);font-size:clamp(19px,2.4vw,23px);
                 padding:18px 0;min-width:0;outline:none}
.rulefield input::placeholder{color:var(--faint);transition:opacity .26s ease}
.rulefield input.fading::placeholder{opacity:0}
/* hide the browser's own clear button — we draw our own, and two were showing */
.rulefield input::-webkit-search-cancel-button,
.rulefield input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.rulefield .clearq{border:0;background:none;color:var(--faint);font-size:25px;line-height:1;
                   cursor:pointer;padding:0 2px}
.rulefield .clearq:hover{color:var(--ink)}
.hint{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin:15px 0 0;
      text-align:center;letter-spacing:.06em;min-height:1.2em}

.lucky{margin:clamp(22px,3vw,30px) 0 0;text-align:center}
.lucky a{font-family:var(--gur);font-size:15px;color:var(--soft);text-decoration:none;
         border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s,border-color .18s}
.lucky a span{font-family:var(--grot);font-size:12.5px;color:var(--faint)}
.lucky a:hover{color:var(--sign);border-bottom-color:var(--sign)}

.results{position:absolute;left:0;right:0;top:calc(100% + 12px);background:var(--sheet);
         border:1px solid var(--rule);border-radius:16px;max-height:52vh;overflow:auto;
         box-shadow:0 20px 48px rgba(60,45,20,.16);z-index:40;overflow-x:hidden}
.results:empty{display:none}
.hit{display:flex;align-items:baseline;gap:14px;padding:13px 24px;text-decoration:none;
     color:var(--ink);border-bottom:1px solid var(--rule);transition:background .12s}
.hit:last-child{border-bottom:0}
.hit:hover,.hit.on{background:var(--band)}
.hit .g{font-family:var(--gur);font-size:21px;font-weight:600;flex:none}
.hit .r{font-family:var(--grot);font-size:13.5px;color:var(--soft)}
.hit .loc{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-left:auto;
          flex:none;letter-spacing:.12em;text-transform:uppercase}
.nohit{padding:18px 24px;font-family:var(--grot);font-size:14.5px;color:var(--soft)}

/* One quiet line at the foot. The banded block read as a floating slab:
   inset from the edges by the hero's own padding, too tall, and marooned by
   a gap above it. */
/* The village horizon.
 * Fills the lower part of the screen and dissolves upward into the paper, so
 * there is no edge anywhere — the village simply emerges. It sits below
 * everything that is read, and the footer's contrast over it was measured,
 * not assumed.
 */
.horizon{position:fixed;left:0;right:0;bottom:0;height:74vh;
         background:url('scene.webp') bottom center / 100% auto no-repeat;
         opacity:0.15;pointer-events:none;z-index:0;
         -webkit-mask-image:linear-gradient(to bottom,
            transparent 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.28) 48%,
            rgba(0,0,0,.62) 70%, rgba(0,0,0,.92) 88%, #000 100%);
         mask-image:linear-gradient(to bottom,
            transparent 0%, rgba(0,0,0,.06) 26%, rgba(0,0,0,.28) 48%,
            rgba(0,0,0,.62) 70%, rgba(0,0,0,.92) 88%, #000 100%)}
@media (prefers-color-scheme:dark){
  .horizon{background-image:url('scene-dark.webp');opacity:0.20}
}
body.home .hero{position:relative;z-index:1}
@media (max-width:700px){.horizon{height:56vh;opacity:0.12}}
@media (max-height:560px){.horizon{display:none}}

.homefoot{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
          gap:8px 22px;padding:clamp(20px,3vw,28px) 0 0;margin:0;
          /* the global footer{} rule paints a band and adds a rule — on the
             home page that read as a floating slab, so undo both here */
          background:none;border-top:0}
.homefoot a,.homefoot span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
                           color:var(--faint);white-space:nowrap}
.homefoot a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;
            transition:color .18s,border-color .18s}
.homefoot a:hover{color:var(--ink);border-bottom-color:var(--sign)}
.homefoot b{color:var(--soft);font-weight:400}
/* a hairline between the links and the credit, on one row only */
.homefoot span:first-of-type::before{content:"";display:inline-block;width:1px;height:10px;
  background:var(--rule);margin-right:22px;vertical-align:-1px}
@media (max-width:620px){.homefoot span:first-of-type::before{display:none}}

/* settle in once the villages are loaded, rather than arriving pre-animated */
.home .hero-in>*{opacity:0;transform:translateY(9px)}
.home.ready .hero-in>*{opacity:1;transform:none;
  transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.home.ready .tagline{transition-delay:.05s}
.home.ready .tagline-en{transition-delay:.09s}
.home.ready .searchwrap{transition-delay:.14s}
.home.ready .lucky{transition-delay:.2s}
@media (prefers-reduced-motion:reduce){
  .home .hero-in>*{opacity:1;transform:none;transition:none}
}

/* -------------------------------------------------------------- table */
.pagehead{padding:clamp(34px,5vw,64px) 0 0;position:relative}
.pagehead h1{font-family:var(--display);font-weight:900;letter-spacing:-.04em;line-height:.92;
             font-size:clamp(30px,5.2vw,58px);max-width:16ch;margin:0 0 18px}
.pagehead .lede{font-size:clamp(16px,1.9vw,19px);color:var(--soft);max-width:56ch}

.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;
          padding:clamp(22px,3vw,34px) 0;border-bottom:1px solid var(--rule)}
/* ⚠ A <select> sizes itself to its WIDEST <option>, and these options carry the
   Gurmukhi district name as well as the Roman one — so the district picker grew
   to 550px and pushed the whole page sideways on a phone. min-width alone does
   not hold it; the field has to be allowed to shrink too. */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.field select,.field input{font-family:var(--grot);font-size:14px;padding:9px 11px;
  background:var(--sheet);color:var(--ink);border:1px solid var(--rule);border-radius:0;
  min-width:min(158px,100%);max-width:100%;text-overflow:ellipsis}
.count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--soft);padding-bottom:9px;letter-spacing:.08em}

.scroll{overflow-x:auto;margin:0 0 48px}
table{border-collapse:collapse;width:100%;font-size:15px}
tbody td{padding:13px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
td.empty,.empty{color:var(--soft);font-family:var(--mono);font-size:11.5px}

/* ═════════════════════════════════════════════════════════ THE SHEET ═════
 * The villages table. Everything here is scoped to .sheet — a bare `thead th`
 * rule used to be global, and it was reaching about.html's table too.
 *
 * ⚠ THE SHEET IS NEVER WRAPPED IN .scroll. `overflow-x:auto` makes overflow-y
 * compute to `auto`, which turns that div into the sticky SCROLLPORT: the
 * <th>s then offset from the div's own top edge instead of the viewport, land
 * ~58px below their own row, and — because positioned elements paint above
 * static ones — cover row 1. That hid the first village of all 181 tehsils.
 * The page itself is the scrollport. Keep it that way.
 *
 * --stick is MEASURED from the real nav at runtime, never hardcoded.
 * --rowh is MEASURED from the tallest rendered row, so every row is exactly
 * that tall: the heights are even AND nothing is ever cut off. No ellipsis.
 */
/* THE SHEET IS A TOOL, NOT PROSE, so it does not sit in the 1180px reading
   measure — it runs the width of the screen. Gill: "can we do full screen for
   table so that we can have more space and look better?" The width goes into
   the columns, which means fewer wrapped lines, which means shorter rows and
   more villages on a screen. The headline and lede stay in the measure above,
   because those ARE prose. Padding is a little tighter than .w so the sheet
   reads as edge-to-edge rather than as a wider box. */
.wide{width:100%;padding:0 clamp(14px,2.2vw,40px)}

/* On the sheet page the nav lines up with the sheet, not with a 1180px measure
   it is no longer sitting above. A toolbar inset from an edge-to-edge sheet
   reads as a mistake. Scoped to this page — the other three keep the measure. */
body.sheetpage .nav .w{max-width:none;padding:0 clamp(14px,2.2vw,40px)}
/* Measured: 774px of preamble put ZERO villages on a 1536x900 screen. Every
   number below came off that measurement, not off taste — the eyebrow's 26px
   margin, the h1 wrapping to two lines inside 24ch, the 34px control padding,
   and .count's inherited 1em paragraph margin. */
body.sheetpage .pagehead{padding:clamp(22px,2.4vw,30px) 0 0}
body.sheetpage .pagehead .k{margin-bottom:12px}
body.sheetpage .pagehead h1{font-size:clamp(26px,3.2vw,40px);max-width:44ch;margin-bottom:10px}
body.sheetpage .pagehead .lede{font-size:clamp(15px,1.5vw,17px);max-width:96ch}
body.sheetpage .controls{padding:16px 0;gap:14px 20px}
body.sheetpage .count{margin:0;padding-bottom:0;align-self:flex-end}

/* Says what is on screen and in what order, at rest, in the reader's own
   script — so nobody has to infer the order from the rows. */
.nowline{margin:18px 0 14px;display:flex;flex-direction:column;gap:3px}
.nowline .pa{font-family:var(--gur);font-size:15.5px;color:var(--ink);line-height:1.4}
.nowline .en{font-family:var(--grot);font-size:12.5px;color:var(--soft);letter-spacing:.02em}

.sheet{margin:0 0 clamp(30px,4vw,52px)}
.sheet table{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%}

/* ── the three records, each with its own ground ── */
.sheet{--plrs:#F5E4AC; --cen:#DAE9C5; --wik:#DCE3EE;
       --grid:#CFC4A2; --head:#1D160E; --head2:#2A2119; --headink:#F4EED8}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet{
  --plrs:#472E10; --cen:#143323; --wik:#152A45;
  --grid:#443E32; --head:#4A4439; --head2:#3B362D; --headink:#F4EED8}}
.rec-p{background:var(--plrs)} .rec-c{background:var(--cen)} .rec-w{background:var(--wik)}

/* ── the frozen head: a block, not a heavier row ── */
.sheet thead th{position:sticky;background:var(--head);color:var(--headink);
  text-align:left;font-weight:400;vertical-align:bottom;padding:9px 12px}
.sheet thead tr.rec th{top:var(--stick,58px);padding:13px 12px 11px;
  border-top:8px solid transparent;z-index:3}
.sheet thead tr.rec th:first-child{width:3.5%}
.sheet thead tr.rec th.p{width:44%} .sheet thead tr.rec th.c{width:29%}
.sheet thead tr.rec th.w{width:23.5%}
.sheet thead tr.fld th{top:calc(var(--stick,58px) + var(--recH,62px));
  background:var(--head2);padding-bottom:12px;z-index:2;
  box-shadow:inset 0 -3px 0 var(--barc,transparent)}
.sheet thead tr.rec th.p{border-top-color:#C8952A} .sheet thead tr.fld th.p{--barc:#C8952A}
.sheet thead tr.rec th.c{border-top-color:#5C7E4E} .sheet thead tr.fld th.c{--barc:#5C7E4E}
.sheet thead tr.rec th.w{border-top-color:#3E6591} .sheet thead tr.fld th.w{--barc:#3E6591}
.sheet .rname2{font-family:var(--gur);font-size:21.5px;font-weight:600;line-height:1.15;display:block}
.sheet .rsub{font-family:var(--grot);font-size:11.5px;letter-spacing:.05em;display:block;
  margin-top:3px;color:var(--headink);opacity:.82}
.sheet .fl{font-family:var(--gur);font-size:14px;font-weight:600;line-height:1.2;display:block}
.sheet .fl2{font-family:var(--grot);font-size:11px;letter-spacing:.06em;display:block;
  margin-top:2px;color:var(--headink);opacity:.8}
.sheet th.sortable{cursor:pointer;user-select:none}
.sheet th.sortable:hover .fl{text-decoration:underline;text-underline-offset:3px}
.sheet th[aria-sort] .fl::after{content:"";display:inline-block;margin-left:7px;
  border-left:4px solid transparent;border-right:4px solid transparent}
.sheet th[aria-sort="ascending"] .fl::after{border-bottom:5px solid var(--headink)}
.sheet th[aria-sort="descending"] .fl::after{border-top:5px solid var(--headink)}
.sheet .ordnow{font-family:var(--gur);font-size:11.5px;display:block;margin-top:4px;
  color:var(--headink);opacity:.95}

/* ── the body: a hairline on every cell, verticals included ── */
.sheet tbody td{height:var(--rowh,74px);padding:9px 12px;vertical-align:middle;
  border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);
  overflow-wrap:break-word;word-break:normal}
.sheet tbody td:first-child{border-left:1px solid var(--grid)}
.sheet tbody tr:first-child td{border-top:1px solid var(--grid)}
.sheet td.gname{font-family:var(--gur);font-size:20px;font-weight:600;line-height:1.3}
.sheet td.rname{font-family:var(--grot);font-size:14.5px;line-height:1.35}
.sheet td.gname2{font-family:var(--gur);font-size:18px;line-height:1.3}
.sheet td.num{font-family:var(--mono);font-size:14px;text-align:right;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.sheet td.ltr{font-family:var(--gur);font-size:15px;font-weight:600;text-align:center;
  color:var(--ink);background:var(--band);padding:0 2px}
.sheet tbody tr:hover td{box-shadow:inset 0 0 0 9999px rgba(184,72,12,.085)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"])
  .sheet tbody tr:hover td{box-shadow:inset 0 0 0 9999px rgba(255,138,61,.10)}}

/* how a record spells it, said in words — never a code, never a mark with an
   off-screen key. Punjabi over English, both readable. */
/* The revenue-subdivision marker, beside the name rather than inside it. Quiet:
   it is administration, not a name, and it must never be mistaken for one. */
.sheet .half{display:inline-block;margin-left:6px;padding:1px 5px;font-family:var(--mono);
  font-size:10.5px;line-height:1.5;color:var(--soft);background:var(--band);
  border:1px solid var(--grid);border-radius:2px;vertical-align:2px}
.sheet td.c-rom .half{margin-left:5px;vertical-align:1px}
.vhead .big .half{font-family:var(--mono);font-size:.28em;vertical-align:.9em;margin-left:.25em;
  padding:2px 7px;color:var(--soft);background:var(--band);border:1px solid var(--rule);border-radius:2px}

.sheet .rl{display:none}          /* the frozen head names the record up here */
.sheet .rv{display:block}
.sheet .say{font-family:var(--gur);font-size:12.5px;line-height:1.3;color:var(--soft);
  display:block;margin-top:3px}
.sheet .say i{font-style:normal;font-family:var(--grot);font-size:10.5px;display:block;
  letter-spacing:.03em;opacity:.95}
.sheet .none{font-family:var(--gur);font-size:13px;color:var(--soft);line-height:1.3}
.sheet .none i{font-style:normal;font-family:var(--grot);font-size:10.5px;display:block;
  letter-spacing:.03em;margin-top:2px}
/* An alert dot sat here beside every note in ਲਿਖਤ ਬਾਰੇ. A note says what the
   record contains; it raises no alarm, so it gets no dot. Deliberately removed —
   do not put it back. */
.sheet .vlink{color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--sign);padding-bottom:1px}
.sheet .vlink:hover{color:var(--sign)}
.sheet .vlink::after{content:"›";color:var(--sign);font-size:.8em;margin-left:5px;
  border-bottom:0;display:inline-block}

.sheet .foot{font-family:var(--grot);font-size:13px;color:var(--soft);line-height:1.6;
  margin-top:14px;max-width:80ch}
.sheet .foot b{color:var(--ink);font-weight:600}

/* Punjabi or English, by width. Both are in the markup rather than swapped by
   script, so neither depends on JS and both are in the page for a crawler.
   On a desktop the English reads; on a phone — where the reader is a Punjabi
   speaker looking for their own village — the Punjabi does. */
body.sheetpage .pagehead h1 .pa,
body.sheetpage .controls label .pa{display:none}

/* ═══════════════════════════════════════════════════════ THE TREE ══════
 * One tree, not a picker above a table. District opens to tehsils, tehsil opens
 * to its villages, and everything shuts again — so the whole archive can be
 * explored by opening and closing, without filling in a form first.
 *
 * A plus and a minus as real characters inside the button, never a background
 * image: they reach a screen reader and they survive a stylesheet that did not
 * load. aria-expanded carries the state.
 */
.tree{margin:0 0 clamp(30px,4vw,54px)}
.tree .empty.pad{padding:14px 2px;margin:0}

.dist{border-top:1px solid var(--rule)}
.dist:last-child{border-bottom:1px solid var(--rule)}
.dist h2,.teh h3{margin:0;font-weight:400}

.dbtn{display:flex;align-items:baseline;gap:10px;width:100%;min-height:46px;
  background:none;border:0;cursor:pointer;padding:9px 4px;text-align:left;
  color:var(--ink);font-family:var(--serif)}
.dbtn:hover{background:var(--band)}
.dbtn .pm{font-family:var(--mono);font-size:17px;line-height:1;color:var(--sign);
  width:15px;flex:none;text-align:center;align-self:center}
.dbtn .dn{font-family:var(--gur);font-size:19px;line-height:1.25}
.dbtn .de{font-family:var(--grot);font-size:12.5px;color:var(--soft)}
.dbtn .dc{margin-left:auto;font-family:var(--gur);font-size:12.5px;color:var(--soft);flex:none}
.dist.open>h2>.dbtn{background:var(--band)}
.dist.open>h2>.dbtn .dn{font-weight:600}

/* the tehsils sit under their district, indented by the width of the mark so the
   plus signs line up down the page like a contents list */
.dbody{padding:2px 0 14px 25px}
.teh{border-top:1px solid var(--rule)}
.teh:first-child{border-top:0}
.tbtn{display:flex;align-items:baseline;gap:9px;width:100%;min-height:44px;
  background:none;border:0;cursor:pointer;padding:7px 4px;text-align:left;
  color:var(--ink);font-family:var(--serif)}
.tbtn:hover{background:var(--sheet)}
.tbtn .pm{font-family:var(--mono);font-size:14px;line-height:1;color:var(--sign);
  width:13px;flex:none;text-align:center;align-self:center}
.tbtn .tn{font-family:var(--gur);font-size:16px}
.tbtn .te{font-family:var(--grot);font-size:11.5px;color:var(--soft)}
.tbtn .tc{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--soft);flex:none}
.teh.open>h3>.tbtn .tn{font-weight:600}
.teh.open>h3>.tbtn{border-left:3px solid var(--sign);padding-left:6px;margin-left:-9px}

/* a tehsil's sheet, set in from its own heading */
.teh .sheet{margin:2px 0 20px 22px}

/* ═══════════════════════════════════════════════════ THE LIVE CELL ══════
 * From candidate 8. Point at any spelling — mouse OR arrow keys — and its whole
 * row and its whole column light together, so you can see at once which village
 * it belongs to and which record wrote it.
 *
 * 8's own column wash was almost invisible (land record and Wikipedia measured
 * 5/255 apart) because the crosshair was carrying the load. Here the shipped
 * tints stay as they are and the crosshair is added on top: the colour says which
 * record at rest, the crosshair says it when you point. Both channels, neither
 * shouting.
 *
 * The arms are translucent so the record wash reads through them — nothing is
 * erased and no text colour has to change to survive being lit.
 */
.sheet{--cx-arm:rgba(184,72,12,.10); --cx-cell:rgba(184,72,12,.16)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sheet{
  --cx-arm:rgba(255,138,61,.12); --cx-cell:rgba(255,138,61,.20)}}

.sheet tbody tr.cx td{background-image:linear-gradient(var(--cx-arm),var(--cx-arm))}
.sheet tbody td.cx{background-image:linear-gradient(var(--cx-arm),var(--cx-arm))}
.sheet tbody tr.cx td.cx{background-image:linear-gradient(var(--cx-cell),var(--cx-cell))}
.sheet thead th.cx{box-shadow:inset 0 -3px 0 var(--brand)}
.sheet tbody td:focus-visible{outline:2px solid var(--sign);outline-offset:-2px}

/* What you are pointing at, said in words under the sheet — so the crosshair
   is not a colour effect you have to interpret. */
.sheet .cross{font-family:var(--grot);font-size:13px;color:var(--soft);
  min-height:1.5em;margin:10px 0 0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.sheet .cross .cell{font-family:var(--gur);font-size:17px;color:var(--ink);font-weight:600}
.sheet .cross b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:no-preference){
  .sheet tbody td{transition:background-image .09s linear}
}

/* ═══════════════════════════════════════════════════════ THE CARD ══════
 * From candidate 12. Below 640px the grid stops pretending to be a table: each
 * village becomes a block, and each of the three records carries its own NAME
 * beside its own spelling — so no cell ever depends on a header that has scrolled
 * away. Measured: 235px per village before, ~127px after; zero villages on the
 * first screen before, four after.
 *
 * The cells are laid out with grid areas rather than hidden with display:none —
 * hiding a cell in a fixed-layout table removes its track and slides every other
 * column one to the left, which is how a header ends up labelling the wrong
 * column. There is no header down here at all, so there is nothing to misalign.
 */
@media (max-width:640px){
  .sheet colgroup,.sheet thead,.sheet .cross,
  body.sheetpage .pagehead .k,body.sheetpage .pagehead .lede,.count{display:none}

  /* The nav scrolls away on a phone. A sticky bar tall enough to hold 44px
     targets would eat an eighth of the screen on every single scroll. */
  .nav{position:static}
  body.sheetpage .nav .w{padding:3px 10px;min-height:0;gap:6px}
  .brand{min-height:44px;align-items:center;gap:8px}
  .brand .mark{width:84px}
  .brand .tick{margin-bottom:0}
  .nav nav{width:100%;margin-left:0;gap:0;flex-wrap:nowrap;
           justify-content:space-between;border-top:1px solid var(--rule)}
  .nav nav a{font-size:10.5px;letter-spacing:.055em;padding:0 2px;border-bottom:0;
             min-height:44px;display:flex;align-items:center}
  .nav nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--wrong)}

  .wide{padding:0 10px}
  body.sheetpage .pagehead{padding:14px 0 0}
  body.sheetpage .pagehead h1{font-family:var(--gur);font-weight:600;font-size:21px;
    letter-spacing:0;line-height:1.25;margin:0 0 5px;max-width:none}

  /* Search first. Somebody with a village in mind should not scroll past two
     pickers to type it. */
  body.sheetpage .controls{padding:10px 0;gap:8px;align-items:stretch}
  .controls .field{flex:1 1 calc(50% - 4px);min-width:0;gap:4px}
  .controls .field.find{flex:1 1 100%;order:-1}
  .controls .field label{font-family:var(--gur);font-size:12px;letter-spacing:0;
                         text-transform:none;color:var(--soft)}
  .field select,.field input{font-size:16px;padding:11px 10px;min-height:46px;width:100%}

  .nowline{margin:8px 0 10px}
  .nowline .pa{font-size:14.5px;line-height:1.35}
  .nowline .en{display:none}

  .sheet table,.sheet tbody{display:block;width:100%}
  .sheet tbody tr{
    display:grid;grid-template-columns:28px minmax(0,1fr);
    grid-template-areas:"lt nm" "lt rm" "lt cn" "lt wk";
    /* NOT levelled to --rowh: that is a table property. One long census name was
       lifting all 52 cards by 20px to accommodate one. A card sizes to itself. */
    min-height:0;
    background:var(--sheet);border:1px solid var(--grid);margin:0 0 6px}
  .sheet tbody td{display:block;height:auto;padding:0;border:0;vertical-align:baseline}
  .sheet tbody tr:hover td,.sheet tbody tr.cx td,.sheet tbody td.cx{box-shadow:none;background-image:none}

  /* The letter rail: the desktop gutter stood on end. Black only where the letter
     CHANGES, and it stops level with the name it announces — a tab, not a bar.
     Scrolling, the alphabet arrives as a dark mark you can see from a metre away. */
  .sheet td.c-ltr{grid-area:lt;background:var(--band);border-right:1px solid var(--grid);
    font-size:15px;font-weight:700;line-height:1;padding:8px 0 0;text-align:center}
  .sheet td.c-ltr:not(:empty){color:var(--headink);
    background:linear-gradient(var(--head) 0 46px,var(--band) 46px)}

  /* The name band IS the tap target — the link fills it, so a 44px touch area
     costs no extra height. Chasing 44px with padding instead would have added
     20px to every card, and the cards are levelled to the tallest. */
  .sheet td.c-gur{grid-area:nm;padding:0;font-size:21px;line-height:1.2}
  .sheet td.c-gur .vlink{display:flex;align-items:center;min-height:44px;
    padding:2px 10px;border-bottom:0}
  .sheet td.c-gur .vlink::after{margin-left:auto}
  .sheet td.c-rom{grid-area:rm;padding:0 10px 3px}
  .sheet td.c-rom .rl{display:none}      /* the gold ground already said it */
  .sheet td.c-rom .rv{margin-left:0;font-size:13.5px;color:var(--soft)}
  .sheet td.c-cen{grid-area:cn;padding:4px 10px}
  .sheet td.c-wik{grid-area:wk;padding:4px 10px}
  .sheet td.c-note,.sheet td.c-hb{display:none}      /* both live on the village page */

  /* Each band keeps its record's ground, and names that record in words beside
     the spelling. Colour is the second channel: the card reads in greyscale. */
  .sheet td.c-gur,.sheet td.c-rom{background:var(--plrs)}
  .sheet td.c-cen{background:var(--cen)}
  .sheet td.c-wik{background:var(--wik)}
  .sheet td.c-cen,.sheet td.c-wik{border-top:1px solid var(--grid)}

  .sheet .rl{display:block;float:left;width:66px;font-family:var(--gur);font-size:11px;
             line-height:1.4;color:var(--soft)}
  .sheet .rv{display:block;margin-left:72px;font-size:14px;line-height:1.4}
  .sheet td.c-wik .rv{font-family:var(--gur);font-size:15px}
  /* the hedge rides on the same line as the name — a second line would lift
     every card, because the rows are levelled to the tallest */
  .sheet .rv em{font-style:normal;font-family:var(--gur);font-size:11px;color:var(--soft)}
  .sheet .rv .en{display:none}
  .sheet .say,.sheet .none{display:inline;margin:0;font-size:11px;font-family:var(--gur);
    color:var(--soft)}
  .sheet .rv .say::before{content:"·";margin:0 5px;color:var(--faint)}
  .sheet .say i,.sheet .none i{display:none}

  .sheet td.c-gur .vlink{border-bottom-width:2px}
  .sheet td.c-gur .vlink::after{float:right;font-size:1em;margin:0}
  .sheet .foot{font-size:12.5px;margin-top:12px}
  body.sheetpage .pagehead h1 .pa{display:block;font-family:var(--gur);font-weight:600}
  body.sheetpage .pagehead h1 .en{display:none}
  /* must match the base rule's specificity — a media query adds none, so plain
     `.controls label .pa` loses to `body.sheetpage .controls label .pa` and the
     label renders empty */
  body.sheetpage .controls label .pa{display:inline}
  body.sheetpage .controls label .en{display:none}

  /* On a phone the tree IS the page: one column, big targets, and the sheet set
     in only a little so a 390px screen keeps its width for names. */
  .dbody{padding:0 0 10px 12px}
  .teh .sheet{margin:2px 0 14px 0}
  .dbtn{min-height:50px;padding:10px 2px;gap:8px}
  .dbtn .dn{font-size:17px}
  .dbtn .de{display:none}
  .tbtn{min-height:46px;gap:7px}
  .tbtn .te{display:none}
  footer .fine a.pplink{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
}

@media (max-width:900px){
  .sheet .rname2{font-size:18px}
  .sheet td.gname{font-size:18px}
  .sheet tbody td,.sheet thead th{padding-left:8px;padding-right:8px}
}

/* ------------------------------------------------------- village page */
.vhead{position:relative;overflow:hidden;padding:clamp(30px,4.4vw,58px) 0 clamp(16px,2.2vw,26px)}
.vhead .ghost{position:absolute;left:-2vw;top:clamp(6px,2vw,30px);right:0;font-family:var(--gur);
              font-size:clamp(110px,20vw,250px);line-height:.82;color:var(--ghost);
              white-space:nowrap;pointer-events:none;user-select:none}
.vhead .w{position:relative}
.crumb{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.crumb a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.crumb a:hover{color:var(--ink)}
.vhead .big{font-family:var(--gur);font-size:clamp(44px,9vw,104px);font-weight:600;line-height:1.05;margin-top:14px}
.vhead .sub{font-family:var(--mono);font-size:12.5px;color:var(--soft);margin-top:10px;letter-spacing:.06em}
.vhead .alarm{font-family:var(--grot);font-size:14.5px;font-weight:600;color:var(--wrong);margin-top:12px}

.fam{margin:0 0 clamp(32px,4.4vw,52px)}
.fam h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
        color:var(--wrong);border-top:2px solid var(--ink);padding-top:13px;margin-bottom:6px;font-weight:400}
.claim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;
       padding:18px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.claim .val{font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.2}
.claim .val.g{font-family:var(--gur)}
.claim .val.r{font-family:var(--grot);letter-spacing:-.015em}
.claim .meta{font-family:var(--grot);font-size:13.5px;color:var(--soft);line-height:1.55}
.claim .meta b{color:var(--ink);font-weight:700}
/* --wrong is the site's defect colour. These are observations about what the
   record contains, not faults in it, so they are not painted as faults. */
.claim .note{font-family:var(--grot);font-size:13px;color:var(--soft)}
.emptyfam{font-family:var(--grot);font-size:14.5px;color:var(--soft);padding:16px 0;border-bottom:1px solid var(--rule)}

/* The People family asks rather than waits. It is the only block on a village
   page addressed TO the reader, so it is the only one that carries a ground. */
.askbox{padding:20px 22px;margin-top:10px;background:var(--band);
        border:1px solid var(--rule);border-radius:2px;max-width:62ch}
.ask-pa{font-family:var(--gur);font-size:clamp(19px,2.3vw,23px);font-weight:600;
        line-height:1.35;margin:0 0 6px}
/* Punjabi first, English under, at every width — no breakpoint switch. A reader
   who came here looking for their own village reads the Punjabi line. */
.ask-en{font-family:var(--gur);font-size:15px;color:var(--soft);line-height:1.6;margin:0 0 16px}
.ask-en span{display:block;font-family:var(--grot);font-size:13.5px;line-height:1.55;margin-top:4px}
.ask-go{display:inline-block;font-family:var(--gur);font-size:16px;font-weight:600;
        text-decoration:none;color:var(--paper);background:var(--ink);
        padding:11px 17px;border-radius:2px;min-height:44px;box-sizing:border-box}
/* the English sub-label wrapped to an orphaned word at 390px; it gets its own line */
.ask-go span{display:block;font-family:var(--grot);font-size:12px;font-weight:400;
             letter-spacing:.04em;opacity:.82;margin-top:3px}
.ask-go:hover,.ask-go:focus-visible{background:var(--wrong)}
.ask-fine{font-family:var(--gur);font-size:13px;color:var(--soft);line-height:1.6;margin:16px 0 0}
/* --faint is 2.5:1 on --band and 3.2:1 in dark — it reads as grey on a tinted
   ground but does not pass AA there. The two halves separate by typeface. */
.ask-fine span{display:block;font-family:var(--grot);font-size:12.5px;color:var(--soft);margin-top:3px}

/* ------------------------------------------------------------- footer */
footer{border-top:1px solid var(--rule);padding:clamp(36px,5vw,66px) 0;margin-top:auto;background:var(--band)}
footer .fine{font-family:var(--grot);font-size:12.5px;color:var(--soft);max-width:76ch;line-height:1.7}
footer .fine b{color:var(--ink)}
footer .fine a.pplink{color:var(--ink);font-weight:600;text-decoration:none;
                      border-bottom:1px solid var(--sign);padding-bottom:1px}
footer .fine a.pplink:hover{color:var(--sign)}

@media (max-width:700px){
  thead th{position:static}
  .claim{grid-template-columns:1fr;gap:8px}
  .hit .loc{display:none}
  .spec .ghost,.vhead .ghost{opacity:.6}
}