/* ==========================================================================
   Dialgarh Jejian — a printed book, set for the screen.

   The material is a family history compiled in Punjabi in 2012. It should read
   like one: a measure you can follow, headings that are quiet but unmistakable,
   dates in the margin rather than interrupting the sentence, and Gurmukhi that
   sits level with the English instead of shrinking beside it.

   Three rules hold the whole thing together:
     1. Marigold is for rules, drop caps and the current page. Nothing else.
     2. Indigo is for links. Nothing else.
     3. Anything a reader reads for more than a sentence gets a 68ch measure.
   ========================================================================== */

@import url("fonts.css");

:root {
  /* ---- paper and ink ---- */
  --paper:      #f7f2e7;   /* the page */
  --paper-2:    #fffdf7;   /* a raised surface on it */
  --paper-3:    #ede4d1;   /* a recessed one */
  --ink:        #211a12;
  --ink-soft:   #574a3b;
  /* Dark enough to clear 4.5:1 on all three papers. The old #8b7c68 came out at
     3.6 and every small label on the site is set in it. */
  --ink-faint:  #736250;
  --rule:       #d9cbb2;
  --rule-soft:  #e7dcc7;

  --marigold:   #b8791a;
  --marigold-l: #d99b3c;
  /* Marigold as a rule or a fill reads at full strength; marigold as small text
     does not. Labels, eyebrows and dates use this one. */
  --marigold-ink: #8f5810;
  --indigo:     #29405f;
  --indigo-l:   #48628a;
  --terracotta: #97452a;

  /* A band the eye stops at, and the ground the seal is struck on. Two tones
     of the same paper — the page never turns a different colour. */
  --band:       #f1e8d7;
  --seal-bg:    #fffdf7;

  /* ---- type ---- */
  --serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino,
           "Book Antiqua", Georgia, serif;
  --gur:   "Noto Serif Gurmukhi", "Noto Sans Gurmukhi", "Nirmala UI", Raavi,
           "Mukta Mahee", sans-serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* One scale, ~1.25, so nothing is sized by eye.
     Body is 19.5px because Garamond runs small. */
  --t-xs:  0.75rem;
  --t-sm:  0.86rem;
  --t-base: 1rem;
  --t-md:  1.15rem;
  --t-lg:  1.4rem;
  --t-xl:  1.85rem;
  --t-2xl: 2.4rem;
  --t-3xl: clamp(2.6rem, 5.5vw, 4rem);

  --measure: 34em;         /* ~68 characters at the body size */
  --wrap: 1180px;
  --r: 3px;                /* corners: almost none. Paper has no radius. */

  --shadow: 0 1px 2px rgba(33,26,18,.05), 0 10px 30px -18px rgba(33,26,18,.28);
  --shadow-lg: 0 2px 4px rgba(33,26,18,.07), 0 28px 56px -28px rgba(33,26,18,.4);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #16120d;
    --paper-2:   #1e1913;
    --paper-3:   #2a231a;
    --ink:       #f2e9d9;
    --ink-soft:  #c7b8a1;
    --ink-faint: #94856f;
    --rule:      #3a3125;
    --rule-soft: #2c2519;

    --marigold:   #e0a850;
    --marigold-l: #efc177;
    --marigold-ink: #e0a850;   /* already high contrast on a dark ground */
    --indigo:     #90a8d6;
    --indigo-l:   #adc0e5;
    --terracotta: #d4795a;

    --band:      #1b1610;
    --seal-bg:   #241d15;

    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 10px 30px -18px rgba(0,0,0,.8);
    --shadow-lg: 0 2px 4px rgba(0,0,0,.5), 0 28px 56px -28px rgba(0,0,0,.9);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.62;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;   /* old-style figures */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Gurmukhi is a taller script with more above and below the baseline. Left at the
   same size as the Latin it reads smaller than it is, so it gets its own. */
[lang="pa"], .pa, .gur {
  font-family: var(--gur);
  font-size: 1.04em;
  line-height: 1.95;
  font-feature-settings: normal;
}
body.pa { font-family: var(--gur); line-height: 1.9; }

/* ---------- headings ---------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
body.pa h1, body.pa h2, body.pa h3, body.pa h4 { font-family: var(--gur); line-height: 1.4; }

h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }

p { margin: 0 0 1.05em; }
strong, b { font-weight: 600; }
em, i { font-style: italic; }

a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--indigo) 30%, transparent);
  text-underline-offset: 3px;
}
a:hover { text-decoration-color: currentColor; }

q { quotes: "\201C" "\201D"; font-style: italic; }

/* Small caps for labels. Real ones if the face has them, letterspaced caps if not. */
.label, .eyebrow, .facts dt, .figs .l, .entry .who .lbl, .ednote b {
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1;
  letter-spacing: .07em;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-faint);
}

/* padding-inline, not the `padding` shorthand: `section` sets vertical padding,
   and a shorthand here outranks it and silently flattens every section to zero.
   That is why the old pages had to lean on ornament margins for their spacing. */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 26px; }
.narrow { max-width: 780px; }

/* The measure. Anything read as prose gets it. */
.prose, .entry .body, .lede, .sechead p, .chapter-body { max-width: var(--measure); }

/* ---------- ornaments --------------------------------------------------- */
/* A hairline under a chapter title, and a typographic mark between sections.
   No religious symbols used as decoration. */
.rule-under { border: 0; border-top: 1px solid var(--rule); margin: 0 0 1.6em; }

/* A break between movements: a short hairline and a good deal of air. The
   fleuron that used to sit here was decoration standing in for hierarchy. */
.ornament {
  border: 0; border-top: 1px solid var(--rule);
  height: 0; margin: 4.2em auto; max-width: 4.5em;
}

/* A chapter opens like one: number, title, the Gurmukhi title under it, a rule. */
.chapter { margin-bottom: 56px; }
.chapter-open { margin-bottom: 1.5em; }
.chapter-open .label { display: block; color: var(--marigold-ink); margin-bottom: 8px; }
.chapter-open h2 { font-size: var(--t-2xl); margin-bottom: .12em; }
.chapter-open .gur { color: var(--ink-soft); font-size: 1.15rem; margin: 0 0 .7em; }
.chapter-body { color: var(--ink-soft); font-size: var(--t-md); margin-bottom: 2em; }

/* On a block container, ::first-letter descends to the first letter of the first
   line wherever it is — a bare text node, an <em>, or a nested <p>. The bodies
   here are all three shapes, so the container is the right place to hang it. */
.dropcap::first-letter {
  float: left;
  font-family: var(--serif);
  font-size: 3.4em;
  line-height: .82;
  font-weight: 600;
  padding: .05em .1em 0 0;
  margin: .04em .06em 0 0;
  color: var(--marigold);
}
/* Gurmukhi has no tradition of drop caps, and matras sit above the letter —
   raising one would collide with the line above. */
body.pa .dropcap::first-letter { float: none; font-size: inherit; color: inherit;
                                 padding: 0; margin: 0; line-height: inherit; }

/* ---------- header / nav ------------------------------------------------ */
header.site {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--rule);
}
/* One row. The nav used to sit on a second line under the brand, which made the
   header 120px tall on every page and pushed the title page off the screen. */
.bar { display: flex; align-items: center; gap: 22px; min-height: 66px; }

.brand { display: flex; align-items: center; gap: 11px; text-decoration: none;
         color: inherit; margin-right: auto; flex: none; }
.brand .mark { width: 34px; height: 34px; flex: none; }
.brand b { font-family: var(--serif); font-size: 1.06rem; display: block;
           line-height: 1.15; font-weight: 600; letter-spacing: .01em; }
.brand b + span { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: .13em;
                  text-transform: uppercase; font-family: var(--sans); }
body.pa .brand b + span { text-transform: none; letter-spacing: .04em; }

nav.main { display: flex; gap: 1px; align-items: center; }
nav.main a {
  padding: 6px 11px; border-radius: var(--r); text-decoration: none;
  color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap;
  letter-spacing: .01em;
}
nav.main a.minor { color: var(--ink-faint); }
nav.main a:hover { background: var(--paper-3); color: var(--ink); }
nav.main a[aria-current="page"] {
  color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--marigold);
  border-radius: 0;
}
.navsep { width: 1px; height: 16px; background: var(--rule); margin: 0 7px; }

.langtoggle { display: flex; border: 1px solid var(--rule); border-radius: var(--r);
              overflow: hidden; flex: none; }
.langtoggle button {
  border: 0; background: transparent; color: var(--ink-soft);
  padding: 7px 12px; font: inherit; font-size: var(--t-sm); cursor: pointer;
  font-family: var(--sans);
}
.langtoggle button.on { background: var(--marigold); color: var(--paper-2); }
.langtoggle button:last-child { font-family: var(--gur); }

.menubtn { display: none; border: 1px solid var(--rule); background: transparent;
           color: var(--ink); border-radius: var(--r); padding: 8px 10px;
           cursor: pointer; line-height: 0; }
.menubtn:hover { border-color: var(--marigold); color: var(--marigold); }

/* Seven links, a brand and a language toggle stop fitting on one line before
   the tablet breakpoint, so the menu collapses at 980 rather than 820. */
@media (max-width: 980px) {
  .menubtn { display: block; }
  /* The bar sizes to its content rather than to a fixed height: the brand in
     Gurmukhi, the language toggle and the menu button do not fit on one 375px
     row, and a fixed height clips whatever wraps. */
  .bar { min-height: 66px; padding: 10px 0; gap: 12px; flex-wrap: wrap; }
  header.site { position: relative; }
  nav.main {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch;
    background: var(--paper-2); border-bottom: 1px solid var(--rule);
    padding: 12px 20px 18px; gap: 1px; box-shadow: var(--shadow); z-index: 60;
  }
  nav.main:not(.open) { display: none; }
  nav.main a { font-size: var(--t-base); padding: 10px 12px; }
  nav.main a[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--marigold); background: var(--paper-3); }
  .navsep { width: auto; height: 1px; margin: 8px 0; }
  /* Drop the clan sub-line only. The markup nests the name inside a span, so an
     unqualified `.brand span` hides the village name along with it. */
  .brand b + span { display: none; }
}

/* ---------- section furniture ------------------------------------------- */
/* Half a gap each, so two sections running together give one good break. */
section { padding: clamp(32px, 4.6vw, 54px) 0; }

.sechead { margin-bottom: 32px; }
.sechead h1, .sechead h2 { margin-bottom: .3em; }
.sechead p { color: var(--ink-soft); margin: 0; font-size: var(--t-md); }
.eyebrow { display: block; color: var(--marigold-ink); margin-bottom: 14px; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); }

.card {
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 26px; text-decoration: none; color: inherit; display: block;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
a.card:hover { border-color: var(--marigold); box-shadow: var(--shadow-lg);
               transform: translateY(-2px); }
.card h3 { margin-bottom: .3em; }
.card p { color: var(--ink-soft); font-size: var(--t-base); margin: 0; }
.card .num { display: block; font-size: var(--t-2xl); color: var(--marigold);
             line-height: 1; margin-bottom: 6px; }
.stat { text-align: center; }

.pill { display: inline-block; padding: 2px 11px; border-radius: 999px;
        font-family: var(--sans); font-size: var(--t-xs);
        background: var(--paper-3); color: var(--ink-soft); border: 1px solid var(--rule); }
.pill.warn { background: color-mix(in srgb, var(--terracotta) 12%, transparent);
             color: var(--terracotta);
             border-color: color-mix(in srgb, var(--terracotta) 30%, transparent); }

.note {
  border-left: 2px solid var(--marigold); background: var(--paper-2);
  padding: 18px 24px; border-radius: 0 var(--r) var(--r) 0; color: var(--ink-soft);
}
.note strong { color: var(--ink); }

.btnrow { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 11px 24px;
  border-radius: var(--r); text-decoration: none; font-size: var(--t-base);
  border: 1px solid transparent; transition: all .14s ease;
}
.btn.primary { background: var(--indigo); color: var(--paper-2); }
.btn.primary:hover { background: var(--indigo-l); color: var(--paper-2); }
.btn.ghost { border-color: var(--rule); color: var(--ink); background: var(--paper-2); }
.btn.ghost:hover { border-color: var(--marigold); color: var(--ink); }

/* ---------- the title page ----------------------------------------------
   The plate at the front of the book. Gurmukhi is set as the title proper and
   the roman name beneath it, which is the way round a bilingual title page
   works when the material is Punjabi — and it gives the page the one large
   shape it was missing.
   ------------------------------------------------------------------------ */
.titlepage { padding: clamp(48px, 9vw, 96px) 0 clamp(34px, 5vw, 60px); }

.tp-title { margin: 0 0 .55em; letter-spacing: 0; }
.tp-gur { display: block; font-family: var(--gur);
          font-size: clamp(2.3rem, 6.2vw, 4.2rem); line-height: 1.28;
          color: var(--ink); font-weight: 600; }
.tp-en  { display: block; font-size: clamp(1.35rem, 2.9vw, 2.05rem);
          color: var(--ink-soft); font-weight: 400; letter-spacing: .015em;
          margin-top: .15em; }
.tp-title::after {
  content: ""; display: block; width: 4.5em; height: 2px;
  background: var(--marigold); margin-top: .7em; opacity: .85;
}

.titlepage-sub { font-size: var(--t-md); color: var(--ink-soft);
                 max-width: var(--measure); margin-bottom: 1em; }
.titlepage-meta { font-family: var(--sans); font-size: var(--t-sm);
                  color: var(--ink-faint); margin: 0;
                  display: flex; flex-wrap: wrap; gap: 8px 16px; }
.titlepage-meta span + span::before { content: "·"; margin-right: 16px; opacity: .55; }

/* The figures, set as a row of plates rather than a run-on sentence. */
.statbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
           margin-top: clamp(30px, 5vw, 48px); border-top: 1px solid var(--rule); }
.statbar div { padding: 18px 20px 4px 0; }
.statbar div + div { border-left: 1px solid var(--rule-soft); padding-left: 22px; }
.statbar b { display: block; font-size: var(--t-xl); font-weight: 600; line-height: 1;
             color: var(--ink); font-variant-numeric: lining-nums; }
.statbar span { display: block; margin-top: 7px; font-family: var(--sans);
                font-size: var(--t-xs); color: var(--ink-faint);
                letter-spacing: .06em; text-transform: uppercase; }
body.pa .statbar span { text-transform: none; letter-spacing: .02em;
                        font-family: var(--gur); }

.counts { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-faint);
          border-top: 1px solid var(--rule-soft); padding-top: 1.1em; margin-top: 2em; }

/* ---------- a band ------------------------------------------------------- */
/* One section per page may sit on the darker of the two papers, to stop a long
   scroll reading as a single undifferentiated sheet. */
.band { background: var(--band);
        border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ---------- the featured story ------------------------------------------- */
.feature h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-bottom: .1em; }
.feature h2 a { color: inherit; text-decoration: none; }
.feature h2 a:hover { color: var(--marigold-ink); }
.feature .gur { font-family: var(--gur); font-size: 1.15rem; color: var(--ink-soft);
                margin: 0 0 .9em; }
.feature .eyebrow { color: var(--marigold-ink); }
.feature-lede { font-size: var(--t-md); color: var(--ink-soft);
                max-width: var(--measure); margin-bottom: 1.4em; }
.feature-foot { display: flex; flex-wrap: wrap; align-items: baseline;
                gap: 10px 26px; margin: 0; padding-top: 1.1em;
                border-top: 1px solid var(--rule); }
.feature-foot .who { font-family: var(--sans); font-size: var(--t-sm);
                     color: var(--ink-faint); }
.feature-foot .who a { color: var(--ink-soft); text-decoration: none; }
.feature-foot .who a:hover { color: var(--marigold-ink); }
.feature-foot .who .sep { margin: 0 7px; opacity: .5; }

/* A link that ends a section: quiet, but unmistakably the way onward. */
.more { text-decoration: none; color: var(--indigo); font-weight: 600;
        font-size: var(--t-base); white-space: nowrap; }
.more:hover { color: var(--marigold-ink); }

/* ---------- section head with a link opposite ---------------------------- */
.row-head { display: flex; align-items: baseline; justify-content: space-between;
            gap: 20px; flex-wrap: wrap; }
.row-head h2 { margin-bottom: 0; }

/* ---------- short cards --------------------------------------------------- */
.teaser h3 { font-size: var(--t-md); margin-bottom: .35em; }
.teaser p  { color: var(--ink-soft); font-size: var(--t-base); }
a.teaser:hover h3 { color: var(--marigold-ink); }

.way { padding: 22px 24px; }
.way h3 { font-size: var(--t-base); margin-bottom: .3em;
          font-variant-caps: all-small-caps; letter-spacing: .06em; }
.way p  { color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.55; }
body.pa .way h3 { font-variant-caps: normal; letter-spacing: 0;
                  font-size: var(--t-md); }

/* The closing note, set apart from what it follows. */
.opening { border-top: 1px solid var(--rule-soft); }
.opening .prose { color: var(--ink-soft); font-size: var(--t-base); }

/* ---------- table of contents ------------------------------------------- */
/* The four pattis are a contents list, not four boxes competing for attention.
   Each carries its own colour on the edge, which is the same colour it has in
   the tree and on its own page. */
.toc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.toc li { border-bottom: 1px solid var(--rule-soft); box-shadow: inset 3px 0 0 var(--pc); }
.toc a { display: flex; align-items: center; gap: 20px; padding: 19px 6px 19px 18px;
         text-decoration: none; color: inherit; transition: background .14s ease; }
.toc a:hover { background: var(--paper-2); }
.toc a:hover .toc-t b { color: var(--pc); }
.toc-n { font-family: var(--serif); font-size: var(--t-xl); color: var(--pc);
         min-width: 1.2em; font-variant-numeric: lining-nums; line-height: 1; }
.toc-t { flex: 1; }
.toc-t b { font-weight: 600; display: block; font-size: var(--t-md); }
.toc-t small { color: var(--ink-faint); font-size: var(--t-sm); }
.toc-c { text-align: right; flex: none; }
.toc-c b { display: block; font-size: var(--t-lg); line-height: 1; color: var(--ink-soft);
           font-variant-numeric: lining-nums; }
.toc-c { font-family: var(--sans); font-size: var(--t-xs); color: var(--ink-faint);
         letter-spacing: .04em; }
.toc li.mine { background: color-mix(in srgb, var(--marigold) 7%, transparent); }
.toc-foot { margin-top: 26px; }

/* ---------- photographs -------------------------------------------------- */
/* Nothing renders until a file is actually dropped in — see js/gallery.js. */
.gallery { display: grid; gap: 12px; margin: 30px 0;
           grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gallery figure { margin: 0; }
.gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: var(--r);
               border: 1px solid var(--rule); display: block; }
.gallery figcaption { font-family: var(--sans); font-size: var(--t-xs);
                      color: var(--ink-faint); margin-top: 6px; }

/* ---------- pattis ------------------------------------------------------ */
:root {
  --patti-budh:   #2c3f63;
  --patti-dial:   #8a5a2b;
  --patti-ram:    #3f6b4a;
  --patti-makhan: #7a3350;
  --patti-none:   #8b7c68;
}
@media (prefers-color-scheme: dark) {
  :root {
    --patti-budh: #8aa4d4; --patti-dial: #d9a468;
    --patti-ram: #86bd97;  --patti-makhan: #d78fae; --patti-none: #94856f;
  }
}

.pcard { border-top: 3px solid var(--pc, var(--rule)); }
.pcard .ord { color: var(--pc, var(--ink-faint)); }
.pcard .gur { color: var(--ink-soft); margin: 0 0 .6em; }
.pcard .count { font-size: var(--t-xl); color: var(--pc); line-height: 1; }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px;
         border-radius: 999px; font-family: var(--sans); font-size: var(--t-xs);
         text-decoration: none; color: var(--pc, var(--ink-soft));
         background: color-mix(in srgb, var(--pc, var(--rule)) 12%, transparent);
         border: 1px solid color-mix(in srgb, var(--pc, var(--rule)) 32%, transparent); }

.mine { border-color: var(--marigold);
        box-shadow: 0 0 0 2px color-mix(in srgb, var(--marigold) 20%, transparent); }

/* ---------- tree -------------------------------------------------------- */
.treewrap { position: relative; background: var(--paper-2); border: 1px solid var(--rule);
            border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
#treeview { width: 100%; height: min(74vh, 800px); display: block; cursor: grab;
            touch-action: none; }
#treeview.drag { cursor: grabbing; }

.treebar { position: absolute; right: 16px; top: 16px; display: flex;
           flex-direction: column; gap: 6px; }
.treebar button {
  width: 38px; height: 38px; border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink); font-size: 1rem; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.treebar button:hover { border-color: var(--marigold); color: var(--marigold); }

.node rect { fill: var(--paper-2); stroke: var(--rule); stroke-width: 1.2; }
.node text { fill: var(--ink); font-size: 13.5px; font-family: var(--serif); }
.node .sub { fill: var(--ink-faint); font-size: 11px; }
.node:hover rect { stroke: var(--marigold); stroke-width: 2; }
.node { cursor: pointer; }
.node.root rect { fill: color-mix(in srgb, var(--marigold) 12%, var(--paper-2));
                  stroke: var(--marigold); }
.node.here rect { fill: color-mix(in srgb, var(--indigo) 14%, var(--paper-2));
                  stroke: var(--indigo); stroke-width: 2; }
.node.p-budh rect   { stroke: var(--patti-budh); }
.node.p-dial rect   { stroke: var(--patti-dial); }
.node.p-ram rect    { stroke: var(--patti-ram); }
.node.p-makhan rect { stroke: var(--patti-makhan); }
.node .bar4 { height: 3px; }
.node.p-budh .bar4   { fill: var(--patti-budh); }
.node.p-dial .bar4   { fill: var(--patti-dial); }
.node.p-ram .bar4    { fill: var(--patti-ram); }
.node.p-makhan .bar4 { fill: var(--patti-makhan); }
.node.p-none .bar4   { fill: var(--patti-none); }
.node.woman rect { stroke-dasharray: 5 3; }
.link { fill: none; stroke: var(--rule); stroke-width: 1.2; }

.toggle circle { fill: var(--paper-2); stroke: var(--marigold); stroke-width: 1.3; }
.toggle text { fill: var(--marigold); font-size: 12px; text-anchor: middle;
               font-family: var(--sans); pointer-events: none; }
.toggle { cursor: pointer; }
.toggle:hover circle { fill: var(--marigold); }
.toggle:hover text { fill: var(--paper-2); }

.treetools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
             margin-bottom: 16px; }
.treetools select, .treetools button.tt {
  padding: 8px 14px; font-family: var(--sans); font-size: var(--t-sm);
  border-radius: var(--r); border: 1px solid var(--rule);
  background: var(--paper-2); color: var(--ink); cursor: pointer;
}
.treetools button.tt:hover { border-color: var(--marigold); color: var(--marigold); }
.treetools .count { color: var(--ink-faint); font-size: var(--t-sm);
                    font-family: var(--sans); margin-left: auto; }

.legend { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px;
          font-size: var(--t-sm); color: var(--ink-faint); font-family: var(--sans); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px;
            margin-right: 7px; vertical-align: -1px; }

/* ---------- person ------------------------------------------------------ */
.crumbs { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-faint);
          margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 7px;
          align-items: center; }
.crumbs a { text-decoration: none; color: var(--ink-faint); }
.crumbs a:hover { color: var(--marigold-ink); }
.crumbs .sep { opacity: .4; }

.phead { display: flex; gap: 30px; align-items: flex-start; flex-wrap: wrap;
         padding-bottom: 30px; border-bottom: 1px solid var(--rule); margin-bottom: 34px; }
.avatar { width: 92px; height: 92px; border-radius: 50%; flex: none; display: grid;
          place-items: center; overflow: hidden;
          background: linear-gradient(155deg, var(--marigold-l), var(--terracotta));
          color: #fff; font-family: var(--serif); font-size: 2.2rem; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.phead h1 { margin-bottom: .1em; }
.phead .gur { font-size: 1.35rem; color: var(--ink-soft); margin: 0 0 .4em; }

/* Rules drawn on the cells, not as a coloured gap showing through. A gap-based
   grid leaves the unfilled tail of the last row painted in the rule colour. */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
         background: var(--paper-2); border: 1px solid var(--rule);
         border-radius: var(--r); overflow: hidden; }
.facts div { padding: 17px 19px;
             border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facts dt { margin-bottom: 5px; display: block; }
.facts dd { margin: 0; font-size: var(--t-base); }
.facts dd.none { color: var(--ink-faint); font-style: italic; font-size: var(--t-sm); }
.facts dd .why { color: var(--ink-faint); font-size: var(--t-sm); line-height: 1.5;
                 margin-top: 6px; }
.facts dd .ce, .ce { color: var(--ink-faint); font-size: .9em; }

/* A bare record. Not a profile with the fields left empty — a marker in a line,
   presented as one, with the honest sentence saying that is all there is. */
.bare { text-align: center; padding: 20px 0 8px; }
.bare .avatar { margin: 0 auto 22px; }
.bare h1 { margin-bottom: .1em; }
.bare .gur { font-size: 1.3rem; color: var(--ink-soft); margin: 0 0 1em; }
.bare-said { max-width: 40ch; margin: 0 auto 2em; color: var(--ink-faint);
             font-style: italic; }

.descent { list-style: none; margin: 0 auto; padding: 0; max-width: 30em; text-align: left;
           border-left: 1px solid var(--rule); }
.descent li { position: relative; padding: 7px 0 7px 26px; }
.descent li::before { content: ""; position: absolute; left: -4px; top: 50%;
                      width: 7px; height: 7px; border-radius: 50%;
                      background: var(--rule); transform: translateY(-50%); }
.descent li.is-here { font-weight: 600; }
.descent li.is-here::before { background: var(--marigold); width: 9px; height: 9px; left: -5px; }
.descent a { text-decoration: none; color: var(--ink-soft); }
.descent a:hover { color: var(--marigold-ink); }

.blocks { display: grid; gap: 34px; }
.block h2 { font-size: var(--t-lg); margin-bottom: .5em; padding-bottom: .35em;
            border-bottom: 1px solid var(--rule-soft); }
.rows { display: grid; gap: 12px; }
.row { background: var(--paper-2); border: 1px solid var(--rule-soft);
       border-radius: var(--r); padding: 16px 20px; }
.row .t { font-weight: 600; }
.row .d { color: var(--ink-soft); font-size: var(--t-base); margin-top: 4px; }
.row .pa { color: var(--ink-soft); margin-top: 7px; }

.people-list { display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.plink { display: flex; align-items: center; gap: 12px; padding: 11px 15px;
         border-radius: var(--r); background: var(--paper-2);
         border: 1px solid var(--rule-soft); text-decoration: none; color: inherit; }
.plink:hover { border-color: var(--marigold); }
.plink .dot { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid;
              place-items: center; background: var(--paper-3); color: var(--ink-soft);
              font-size: var(--t-sm); font-family: var(--serif); }
.plink b { font-weight: 600; font-size: var(--t-base); display: block; line-height: 1.3; }
.plink small { color: var(--ink-faint); font-size: var(--t-xs); font-family: var(--sans); }

.warnbox { border-left: 2px solid var(--terracotta);
           background: color-mix(in srgb, var(--terracotta) 5%, transparent);
           padding: 15px 20px; border-radius: 0 var(--r) var(--r) 0;
           font-size: var(--t-base); color: var(--ink-soft); }
.warnbox b { color: var(--terracotta); }

/* ---------- entries: wars, rivalries, stories, chapters ----------------- */
.entry {
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  border-radius: var(--r); padding: 32px 34px; margin-bottom: 22px;
}
.entry > h3 { margin-bottom: .12em; font-size: var(--t-xl); }
.entry .gur { color: var(--ink-soft); font-size: 1.1rem; margin: 0 0 1em; }
.entry .when { color: var(--marigold-ink); margin-bottom: 12px;
               font-variant-caps: all-small-caps; letter-spacing: .07em;
               font-size: var(--t-sm); font-weight: 600; }
.entry .body { color: var(--ink-soft); }
.entry .body strong, .entry .body b { color: var(--ink); font-weight: 600; }
.entry .body q, .entry .body em { color: var(--ink); }
.entry .body blockquote { margin: 1.5em 0; padding-left: 22px;
                          border-left: 2px solid var(--marigold);
                          font-style: italic; color: var(--ink); }
.entry .who { margin-top: 22px; }
.entry .who .lbl { display: block; margin-bottom: 9px; }
.entry.feat { border-left: 3px solid var(--marigold); }

.role { font-size: var(--t-sm); color: var(--ink-faint); }

.ednote { margin-top: 18px; padding: 16px 20px; border-radius: var(--r);
          background: var(--paper-3); border: 1px solid var(--rule-soft);
          font-size: var(--t-base); color: var(--ink-soft); }
.ednote b { display: block; margin-bottom: 6px; }

/* ---------- villages ---------------------------------------------------- */
.vcard .where { color: var(--ink-faint); font-size: var(--t-sm); }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
        background: var(--paper-2); border: 1px solid var(--rule);
        border-radius: var(--r); overflow: hidden; margin: 22px 0; }
.figs div { padding: 17px 16px; text-align: center;
            border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.figs .n { font-size: var(--t-xl); color: var(--marigold); line-height: 1.1; }
.figs .l { display: block; margin-top: 2px; }

/* ---------- search / index ---------------------------------------------- */
.searchbox { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.searchbox input, .searchbox select {
  padding: 12px 17px; font-family: var(--serif); font-size: var(--t-base);
  color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r);
}
.searchbox input { flex: 1; min-width: 240px; }
.searchbox input:focus, .searchbox select:focus {
  outline: 2px solid var(--marigold); outline-offset: 1px; border-color: transparent; }

/* ---------- article ----------------------------------------------------- */
.prose h2 { margin-top: 1.8em; }
.prose blockquote { margin: 1.6em 0; padding-left: 22px;
                    border-left: 2px solid var(--marigold);
                    color: var(--ink); font-style: italic; }
.prose cite { display: block; font-size: var(--t-sm); font-style: normal;
              color: var(--ink-faint); margin-top: .5em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .4em; }

.todo { border: 1px dashed var(--terracotta);
        background: color-mix(in srgb, var(--terracotta) 5%, transparent);
        border-radius: var(--r); padding: 22px 26px; }
.todo h3 { color: var(--terracotta); margin-bottom: .35em; }
.todo p:last-child { margin-bottom: 0; }

/* ---------- footer ------------------------------------------------------ */
footer.site { border-top: 1px solid var(--rule); background: var(--paper-2);
              margin-top: 64px; }
footer.site p { color: var(--ink-faint); font-size: var(--t-sm); margin: 0 0 .45em; }

.footgrid { display: grid; gap: 34px;
            grid-template-columns: minmax(260px, 2fr) 1fr 1fr;
            padding-top: 52px; padding-bottom: 40px; }
.footbrand .mark { width: 38px; height: 38px; margin-bottom: 14px; }
.footbrand p { max-width: 34ch; }
.footbrand p strong { color: var(--ink); font-size: var(--t-base); }
.footbrand .where { margin-top: .8em; line-height: 1.6; }

.footgrid .label { display: block; margin-bottom: 12px; }
.footgrid ul { list-style: none; margin: 0; padding: 0; }
.footgrid li { margin-bottom: 9px; }
.footgrid li a { color: var(--ink-soft); text-decoration: none; font-size: var(--t-base); }
.footgrid li a:hover { color: var(--marigold-ink); }

.footend { border-top: 1px solid var(--rule-soft);
           padding-top: 20px; padding-bottom: 34px; }
.footend p { margin: 0; }

@media (max-width: 700px) {
  .footgrid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footbrand { grid-column: 1 / -1; }
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}