/* ===========================================================================
   THE BEHRA JAGIR — stylesheet
   ---------------------------------------------------------------------------
   Typography and colour follow the printed volume: deep maroon on warm cream,
   gold rules, a serif text face, generous measure. No web fonts are loaded, so
   the site renders identically offline and on a machine with no network.
   Light and dark are both defined; dark is a lamplit reading of the same page.
   =========================================================================== */

/* --- tokens -------------------------------------------------------------- */

:root {
  /* the printed palette */
  --maroon:        #7d1f2e;
  --maroon-deep:   #5c1622;
  --maroon-soft:   #a84356;
  --gold:          #a68a4c;
  --gold-soft:     #d8c9a3;
  --ink:           #2a2422;
  --ink-soft:      #5c5450;
  --ink-faint:     #8a8078;
  --paper:         #faf6ee;
  --paper-raised:  #fffdf8;
  --paper-sunk:    #f2ebdd;
  --rule:          #ded2bc;
  --rule-strong:   #c4b391;

  /* semantic */
  --bg:            var(--paper);
  --surface:       var(--paper-raised);
  --surface-sunk:  var(--paper-sunk);
  --text:          var(--ink);
  --text-soft:     var(--ink-soft);
  --text-faint:    var(--ink-faint);
  --accent:        var(--maroon);
  --accent-soft:   var(--maroon-soft);
  --border:        var(--rule);
  --border-strong: var(--rule-strong);
  --link:          var(--maroon);
  --shadow:        0 1px 2px rgba(42,36,34,.06), 0 8px 24px -12px rgba(42,36,34,.18);

  /* flag colours */
  --flag-tradition: #8a6d3b;
  --flag-conflict:  #9c3328;
  --flag-unrecorded:#6b6560;
  --flag-inferred:  #6a5490;
  --flag-note:      #4a6656;

  /* type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  --sans:  "Segoe UI", Inter, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --gurmukhi: "Noto Sans Gurmukhi", "Nirmala UI", "Raavi", "Gurmukhi MN", var(--serif);

  /* measure and rhythm */
  --measure: 34rem;
  --measure-wide: 52rem;
  --gap: 1.5rem;
  --radius: 3px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #16130f;
    --surface:       #1e1a15;
    --surface-sunk:  #120f0c;
    --text:          #e9e0d0;
    --text-soft:     #b8ac99;
    --text-faint:    #8a8070;
    --accent:        #e2a3ae;
    --accent-soft:   #c9808f;
    --border:        #362e25;
    --border-strong: #4a3f31;
    --link:          #e8b0ba;
    --gold:          #c8ab68;
    --gold-soft:     #6b5c3a;
    --shadow:        0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
    --flag-tradition: #c9a86a;
    --flag-conflict:  #e4897c;
    --flag-unrecorded:#a09890;
    --flag-inferred:  #b3a0d8;
    --flag-note:      #8fbaa2;
  }
}

:root[data-theme="dark"] {
  --bg:            #16130f;
  --surface:       #1e1a15;
  --surface-sunk:  #120f0c;
  --text:          #e9e0d0;
  --text-soft:     #b8ac99;
  --text-faint:    #8a8070;
  --accent:        #e2a3ae;
  --accent-soft:   #c9808f;
  --border:        #362e25;
  --border-strong: #4a3f31;
  --link:          #e8b0ba;
  --gold:          #c8ab68;
  --gold-soft:     #6b5c3a;
  --shadow:        0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  --flag-tradition: #c9a86a;
  --flag-conflict:  #e4897c;
  --flag-unrecorded:#a09890;
  --flag-inferred:  #b3a0d8;
  --flag-note:      #8fbaa2;
}

/* --- reset --------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-style: solid; }
button { font: inherit; color: inherit; }

:where(h1, h2, h3, h4) { line-height: 1.2; font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

[lang="pa"] { font-family: var(--gurmukhi); line-height: 1.9; }

/* --- skeleton ------------------------------------------------------------ */

.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
}

/* --- masthead ----------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(8px);
}

.masthead__inner {
  display: flex; align-items: center; gap: var(--gap);
  padding-block: .7rem; flex-wrap: wrap;
}

.wordmark {
  display: flex; align-items: baseline; gap: .6rem;
  text-decoration: none; color: inherit; margin-inline-end: auto;
}
.wordmark__motif { color: var(--maroon); flex: none; }
:root[data-theme="dark"] .wordmark__motif,
:root:not([data-theme="light"]) .wordmark__motif { color: var(--accent); }
.wordmark__name {
  font-size: 1.15rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent);
}
.wordmark__sub {
  font-size: .78rem; color: var(--text-faint); font-style: italic;
  letter-spacing: .01em;
}
@media (max-width: 40rem) { .wordmark__sub { display: none; } }

.tools { display: flex; align-items: center; gap: .4rem; }

.btn {
  appearance: none; border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-soft);
  padding: .35rem .7rem; border-radius: var(--radius);
  font-family: var(--sans); font-size: .78rem; letter-spacing: .02em;
  cursor: pointer; line-height: 1.4;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--surface-sunk); color: var(--text); border-color: var(--accent-soft); }
.btn[aria-pressed="true"], .btn.is-on {
  background: var(--accent); border-color: var(--accent); color: var(--paper-raised);
}
:root[data-theme="dark"] .btn[aria-pressed="true"],
:root[data-theme="dark"] .btn.is-on { color: #16130f; }

.langswitch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.langswitch .btn { border: 0; border-radius: 0; }
.langswitch .btn + .btn { border-inline-start: 1px solid var(--border-strong); }

/* --- navigation --------------------------------------------------------- */

.nav {
  border-bottom: 1px solid var(--border);
  background: var(--surface-sunk);
  overflow-x: auto; scrollbar-width: thin;
}
.nav__list {
  display: flex; gap: 0; list-style: none; margin: 0; padding: 0;
  white-space: nowrap;
}
.nav__link {
  display: block; padding: .6rem .9rem;
  font-family: var(--sans); font-size: .8rem; letter-spacing: .02em;
  color: var(--text-soft); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link[aria-current="page"] {
  color: var(--accent); border-bottom-color: var(--accent); font-weight: 700;
}

/* --- page furniture ----------------------------------------------------- */

main { padding-block: clamp(2rem, 5vw, 4rem) 5rem; }

.page { max-width: var(--measure-wide); margin: 0 auto; }
.page--wide { max-width: 78rem; }

.section-mark {
  font-family: var(--sans); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold);
  display: block; margin-bottom: .6rem;
}

.page__title {
  font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
  color: var(--accent); margin-bottom: .5rem;
}
.page__title + .page__intro { margin-top: 1rem; }

.page__intro {
  font-style: italic; color: var(--text-soft);
  max-width: var(--measure); font-size: 1.02em;
}
[lang="pa"].page__intro { font-style: normal; }

.rule {
  border: 0; height: 1px; background: var(--border);
  margin-block: 2.5rem; position: relative;
}
.rule--ornament {
  height: 0; border-top: 1px solid var(--border);
  margin-block: 3rem; overflow: visible;
}
.rule--ornament::after {
  content: "❦"; position: absolute; inset-inline-start: 50%;
  transform: translate(-50%, -.72em);
  background: var(--bg); padding-inline: .7rem;
  color: var(--gold); font-size: .9rem;
}

.prose { max-width: var(--measure); }
.prose h3 {
  font-size: 1.15rem; color: var(--accent); font-style: italic;
  margin: 2.2rem 0 .7rem;
}
.prose b, .prose strong { color: var(--accent); font-weight: 700; }
:root[data-theme="dark"] .prose b { font-weight: 600; }

/* --- title page --------------------------------------------------------- */

.titlepage { text-align: center; padding-block: 1rem; }
.titlepage__frame {
  border: 1px solid var(--border-strong);
  outline: 1px solid var(--border); outline-offset: 5px;
  padding: clamp(2rem, 6vw, 5rem) clamp(1.25rem, 5vw, 4rem);
  background: var(--surface);
  max-width: 54rem; margin: 0 auto;
}
.titlepage__toprule { width: 5rem; height: 2px; background: var(--maroon); margin: 0 auto 1.5rem; }
:root[data-theme="dark"] .titlepage__toprule { background: var(--accent); }
.titlepage__title {
  font-size: clamp(2rem, 1.2rem + 4vw, 3.6rem);
  letter-spacing: .01em; color: var(--text); margin-bottom: .2rem;
}
.titlepage__title-pa { font-size: clamp(1.6rem, 1rem + 3vw, 2.6rem); color: var(--accent); margin-bottom: 1.2rem; }
.titlepage__sub { font-style: italic; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: var(--accent); margin-bottom: 1.5rem; }
.titlepage__stand { max-width: 32rem; margin: 0 auto 2rem; color: var(--text-soft); }
.titlepage__royal {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--maroon); margin-bottom: 2.5rem;
}
:root[data-theme="dark"] .titlepage__royal { color: var(--accent); }

.escutcheon { margin: 0 auto 2.5rem; max-width: 11rem; }
.escutcheon img {
  width: 100%; height: auto;
  /* The device is drawn on white. Multiply drops that ground into the cream of
     the page instead of sitting on it as a pale rectangle; in dark mode the
     figure is lightened instead, so it reads on the dark ground. */
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] .escutcheon img { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) saturate(1.3); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .escutcheon img { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) saturate(1.3); }
}

.factlist {
  list-style: none; margin: 0 auto 2rem; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .4rem 1.6rem; max-width: 40rem;
}
.factlist li { font-size: .92rem; }
.factlist dt, .factlist .factlist__k {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-faint); display: block;
}
.factlist .factlist__v { color: var(--text); }

.provenance {
  font-size: .84rem; color: var(--text-faint);
  max-width: 36rem; margin: 0 auto; padding-top: 1.75rem;
  border-top: 1px solid var(--border);
}

/* --- the standing notice ------------------------------------------------ */

.standing {
  border: 1px solid var(--border-strong);
  border-inline-start: 3px solid var(--gold);
  background: var(--surface-sunk);
  padding: 1.1rem 1.3rem;
  font-size: .92rem; color: var(--text-soft);
  max-width: var(--measure-wide); margin-inline: auto;
}
.standing__label {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .4rem;
}

/* --- cards and grids ---------------------------------------------------- */

.grid { display: grid; gap: var(--gap); }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.grid--gallery { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

.card {
  border: 1px solid var(--border); background: var(--surface);
  padding: 1rem 1.1rem; border-radius: var(--radius);
  text-decoration: none; color: inherit; display: block;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover { border-color: var(--accent-soft); box-shadow: var(--shadow); transform: translateY(-1px); }
.card__gen {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); display: block; margin-bottom: .3rem;
}
.card__name { font-size: 1.02rem; font-weight: 700; color: var(--accent); margin-bottom: .15rem; }
.card__name-pa { font-size: .95rem; color: var(--text-soft); }
.card__dates { font-size: .84rem; color: var(--text-faint); font-variant-numeric: oldstyle-nums; }
.card__titles { font-size: .84rem; color: var(--text-soft); font-style: italic; margin-top: .35rem; }

/* --- figures ------------------------------------------------------------ */

figure { margin: 2rem 0; }
figure img {
  border: 1px solid var(--border-strong);
  background: var(--surface-sunk);
  width: 100%;
}
figcaption {
  font-size: .84rem; color: var(--text-faint);
  font-style: italic; text-align: center; margin-top: .6rem;
  max-width: 32rem; margin-inline: auto;
}
[lang="pa"] figcaption { font-style: normal; }

.figrow {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 2rem 0;
}
.figrow figure { margin: 0; }

.imgslot {
  aspect-ratio: 4 / 5;
  border: 1px dashed var(--border-strong);
  background: var(--surface-sunk);
  display: grid; place-items: center; text-align: center;
  padding: 1rem; color: var(--text-faint);
  font-family: var(--sans); font-size: .74rem; letter-spacing: .04em;
}
.imgslot span { max-width: 14rem; }

/* --- flags: what is uncertain ------------------------------------------ */

.flag {
  border-inline-start: 3px solid var(--flag-note);
  background: var(--surface-sunk);
  padding: .8rem 1rem; margin: 1.25rem 0;
  font-size: .9rem; color: var(--text-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.flag--tradition  { border-color: var(--flag-tradition); }
.flag--conflict   { border-color: var(--flag-conflict); }
.flag--unrecorded { border-color: var(--flag-unrecorded); }
.flag--inferred   { border-color: var(--flag-inferred); }
.flag--note       { border-color: var(--flag-note); }

.flag__label {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .13em;
  text-transform: uppercase; display: block; margin-bottom: .3rem;
  color: var(--flag-note);
}
.flag--tradition  .flag__label { color: var(--flag-tradition); }
.flag--conflict   .flag__label { color: var(--flag-conflict); }
.flag--unrecorded .flag__label { color: var(--flag-unrecorded); }
.flag--inferred   .flag__label { color: var(--flag-inferred); }

.pill {
  display: inline-block; font-family: var(--sans);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .45rem; border: 1px solid currentColor;
  border-radius: 999px; color: var(--text-faint); vertical-align: .12em;
}
.pill--direct { color: var(--accent); }
.pill--open   { color: var(--flag-conflict); }
.pill--resolved { color: var(--flag-note); }
.pill--tradition { color: var(--flag-tradition); }
.pill--recorded { color: var(--flag-note); }
.pill--mixed { color: var(--flag-tradition); }

/* --- person page -------------------------------------------------------- */

.person { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) {
  .person { grid-template-columns: 15rem 1fr; align-items: start; }
  .person__aside { position: sticky; top: 7.5rem; }
}

.person__portrait { margin: 0 0 1.25rem; }
.person__name { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); color: var(--accent); }
.person__name-pa { font-size: 1.25rem; color: var(--text-soft); margin-top: .2rem; }
.person__titles { font-style: italic; color: var(--text-soft); margin-top: .5rem; }
.person__alt { font-size: .88rem; color: var(--text-faint); margin-top: .3rem; }

.deflist { margin: 0; display: grid; gap: .55rem; }
.deflist > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: .75rem; align-items: baseline; }
.deflist dt {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); margin: 0;
}
.deflist dd { margin: 0; font-size: .95rem; }
.deflist dd a { text-decoration-color: var(--border-strong); }
@media (max-width: 30rem) {
  .deflist > div { grid-template-columns: 1fr; gap: .1rem; }
}

.relatives { list-style: none; margin: .3rem 0 0; padding: 0; }
.relatives li { margin-bottom: .2rem; }

/* --- generations timeline ---------------------------------------------- */

.genentry {
  border-top: 1px solid var(--border);
  padding-block: 2.25rem;
  display: grid; gap: 1.25rem;
}
@media (min-width: 48rem) {
  .genentry { grid-template-columns: 8rem 1fr; gap: 2.5rem; }
}
.genentry__mark { position: relative; }
.genentry__num {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.genentry__roman {
  font-size: 2.4rem; color: var(--accent); line-height: 1;
  font-variant-numeric: oldstyle-nums; opacity: .85;
}
.genentry__heading { font-size: 1.1rem; font-style: italic; color: var(--accent); margin-bottom: .8rem; }
.genentry__body { max-width: var(--measure); }
.genentry__people {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 1.1rem 0 0; padding: 0;
}
.genentry__people a {
  font-family: var(--sans); font-size: .74rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .2rem .6rem; text-decoration: none; color: var(--text-soft);
}
.genentry__people a:hover { border-color: var(--accent); color: var(--accent); }

/* --- events (Fatehabad) ------------------------------------------------ */

.event { border-top: 1px solid var(--border); padding-block: 2.25rem; }
.event__head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin-bottom: .9rem; }
.event__n {
  font-family: var(--sans); font-size: .8rem; color: var(--gold);
  border: 1px solid var(--gold-soft); border-radius: 50%;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center; flex: none;
}
.event__title { font-size: 1.2rem; color: var(--accent); }
.event__year { font-family: var(--sans); font-size: .78rem; color: var(--text-faint); letter-spacing: .06em; }
.event__body { max-width: var(--measure); }
.event__verdict {
  margin-top: 1.1rem; padding: .8rem 1rem;
  background: var(--surface-sunk); border-inline-start: 3px solid var(--gold);
  font-size: .9rem; color: var(--text-soft); max-width: var(--measure);
}
.srclist { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.srclist li {
  font-family: var(--sans); font-size: .7rem; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: var(--radius); padding: .15rem .45rem;
}

/* --- epigraph ---------------------------------------------------------- */

.epigraph {
  text-align: center; max-width: 40rem; margin: 0 auto 3rem;
  padding: 1.75rem 1rem; border-block: 1px solid var(--border);
}
.epigraph__sanskrit { font-style: italic; color: var(--text-soft); font-size: .95rem; margin-bottom: .8rem; }
.epigraph__gurmukhi { font-family: var(--gurmukhi); color: var(--accent); font-size: 1rem; line-height: 2; margin-bottom: .9rem; }
.epigraph__translation { font-style: italic; margin-bottom: .7rem; }
.epigraph__attr {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint);
}

/* --- sources ----------------------------------------------------------- */

.srcgroup + .srcgroup { margin-top: 2.5rem; }
.srcgroup__title { font-size: 1.1rem; font-style: italic; color: var(--accent); margin-bottom: 1rem; }
.srcentry { border-top: 1px solid var(--border); padding-block: 1.1rem; max-width: var(--measure-wide); }
.srcentry__full { font-size: .95rem; }
.srcentry__note { font-size: .87rem; color: var(--text-faint); font-style: italic; margin-top: .4rem; }
.srcentry__used { font-family: var(--sans); font-size: .72rem; color: var(--text-faint); margin-top: .5rem; }
.srcentry__used a { margin-inline-end: .5rem; }

/* --- the tree ---------------------------------------------------------- */

.treewrap {
  border: 1px solid var(--border-strong);
  background: var(--surface-sunk);
  position: relative; overflow: hidden;
  height: clamp(28rem, 72vh, 52rem);
  border-radius: var(--radius);
  touch-action: none;
}
.treewrap svg { display: block; width: 100%; height: 100%; cursor: grab; }
.treewrap svg.is-dragging { cursor: grabbing; }

.treebar {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
  margin-bottom: .9rem;
}
.treebar__spacer { margin-inline-start: auto; }
.treehint {
  font-family: var(--sans); font-size: .74rem; color: var(--text-faint);
  margin-top: .6rem;
}

.node { cursor: pointer; }
.node__box {
  fill: var(--surface); stroke: var(--border-strong); stroke-width: 1;
  transition: stroke .15s, fill .15s;
}
.node:hover .node__box { stroke: var(--accent); }
.node__box--direct { stroke: var(--accent); stroke-width: 1.75; }
.node__box--behra { fill: var(--surface); }
.node__box--kapurthala { stroke-dasharray: 3 2; }
.node__box--collateral { stroke-dasharray: 1 3; }
.node__box--marriedin { fill: var(--surface-sunk); }
.node__name {
  font-family: var(--serif); font-size: 12px; fill: var(--text);
  dominant-baseline: middle;
}
.node__name--direct { fill: var(--accent); font-weight: 700; }
.node__dates {
  font-family: var(--sans); font-size: 9.5px; fill: var(--text-faint);
  dominant-baseline: middle;
}
.node.is-focus .node__box { stroke: var(--gold); stroke-width: 2.5; }
.edge { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.edge--direct { stroke: var(--accent-soft); stroke-width: 1.75; }
.genband { fill: var(--text-faint); font-family: var(--sans); font-size: 9px; letter-spacing: .12em; }
.genline { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }

.legend {
  display: flex; flex-wrap: wrap; gap: .3rem 1.2rem;
  margin-top: .9rem; font-family: var(--sans); font-size: .74rem;
  color: var(--text-faint);
}
.legend__item { display: flex; align-items: center; gap: .4rem; }
.legend__swatch { width: 1.4rem; height: .8rem; border: 1px solid var(--border-strong); flex: none; }
.legend__swatch--direct { border-color: var(--accent); border-width: 1.75px; }
.legend__swatch--kapurthala { border-style: dashed; }
.legend__swatch--collateral { border-style: dotted; }
.legend__swatch--marriedin { background: var(--surface-sunk); }

/* --- search ------------------------------------------------------------ */

.searchbar { margin-bottom: 1.5rem; max-width: 26rem; }
.searchbar input {
  width: 100%; font: inherit; font-size: .95rem;
  padding: .5rem .7rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.searchbar input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.genheading {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  border-bottom: 1px solid var(--border); padding-bottom: .4rem;
  margin: 2.5rem 0 1rem;
}
.genheading:first-child { margin-top: 0; }

/* --- footer ------------------------------------------------------------ */

.foot {
  border-top: 1px solid var(--border); background: var(--surface);
  padding-block: 2rem; font-size: .84rem; color: var(--text-faint);
}
.foot__inner { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; }
.foot__status {
  font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}
.foot a { color: var(--text-soft); }

/* --- pending punjabi notice ------------------------------------------- */

.pending {
  font-family: var(--sans); font-size: .74rem; color: var(--flag-tradition);
  border: 1px dashed var(--flag-tradition); border-radius: var(--radius);
  padding: .35rem .6rem; margin-bottom: .8rem; display: block;
}

/* --- utility ---------------------------------------------------------- */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}
.scroller { overflow-x: auto; }

/* --- print ------------------------------------------------------------ */

@media print {
  :root { --bg: #fff; --surface: #fff; --surface-sunk: #fff; --text: #000; --text-soft: #333; }
  .masthead, .nav, .tools, .treebar, .treehint, .foot__status { display: none !important; }
  body { font-size: 10.5pt; }
  main { padding: 0; }
  .page, .prose, .person { max-width: none; }
  .genentry, .event, .srcentry { break-inside: avoid; page-break-inside: avoid; }
  a { text-decoration: none; color: #000; }
  a[href^="#/"]::after { content: ""; }
  figure { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}