/* ============================================================
   Hansi Gita Bhawan Trust
   "The courtyard" — air, photography and inscription.
   Cormorant Garamond / Karla / Tiro Devanagari Hindi.
   Single committed light world; every colour painted explicitly.
   ============================================================ */
:root{
  color-scheme:light;

  --ground:#fbf7f0;        /* warm ivory */
  --ground-2:#f2e9dc;      /* sand band */
  --ground-3:#ece0cd;      /* deeper sand, used sparingly */
  --deep:#3b1614;          /* near-black maroon, the dark moment */
  --maroon:#7a2e2a;        /* kumkum red — headings, structure */
  --maroon-soft:#96443c;
  --gold:#a9803c;          /* antique brass — hairlines, rules (decorative only) */
  --gold-text:#8a6524;     /* brass, darkened for label TEXT so it clears WCAG AA */
  --marigold:#d98324;      /* the single accent, used sparingly */
  --ink:#2a211c;
  --ink-2:#5c4e45;
  --ink-3:#6f6155;
  --line:#e3d7c4;
  --line-soft:#eee5d6;
  --on-deep:#f3e6d8;
  --on-deep-dim:#c0a794;

  --background:var(--ground);--foreground:var(--ink);--card:var(--ground);--card-foreground:var(--ink);--popover:var(--ground);--popover-foreground:var(--ink);--primary:var(--maroon);--primary-foreground:#fff;--secondary:var(--ground-2);--secondary-foreground:var(--ink);--muted-foreground:var(--ink-3);--accent:var(--ground-2);--accent-foreground:var(--ink);--border:var(--line);--input:var(--line);--ring:var(--maroon);--radius:0;

  --display:"Cormorant Garamond",Cormorant,Garamond,Georgia,serif;
  --sans:"Karla","Helvetica Neue",Arial,sans-serif;
  --deva:"Tiro Devanagari Hindi","Noto Serif Devanagari","Kohinoor Devanagari",serif;

  --max:1160px;
  --measure:68ch;
  --gutter:clamp(22px,5vw,64px);
  --pad:max(var(--gutter),(100% - var(--max))/2);
  --rhythm:clamp(76px,9vw,124px);
  --hdr-h:122px;
  --gap-h2:40px;           /* heading to the block beneath it — one value, everywhere */
  --gap-h3:12px;           /* .hdr-top 36 + .hdr-main 86 — what .subnav must clear */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
main{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--maroon);outline-offset:3px;box-shadow:0 0 0 5px rgba(217,131,36,.28)}
h1,h2,h3,h4{font-family:var(--display);color:var(--maroon);margin:0;text-wrap:balance;font-weight:400}
h1{font-weight:300;letter-spacing:-.005em;line-height:1.08}
.hi h1,.hi h2,.hi h3,.hi h4{font-family:var(--deva);font-weight:400;letter-spacing:0}
.hi h1{line-height:1.3}
.hi h2{line-height:1.32}
.hi h3,.hi h4{line-height:1.42}
[lang=sa],.sa,.deva{line-height:1.9}
[lang=sa],.deva,.sa,.hindi-note,.dual-hi{font-family:var(--deva)}
::selection{background:var(--marigold);color:#fff}
.paper{background:var(--ground)}

/* ---------- Rhythm & measure ---------- */
.section{padding-inline:var(--pad);padding-block:var(--rhythm)}
.section.tight{padding-block:clamp(48px,6vw,76px)}
.section.sand{background:var(--ground-2)}
.section.dark{background:var(--deep);color:var(--on-deep)}
.section.dark h1,.section.dark h2,.section.dark h3{color:var(--ground)}
.section.dark .eyebrow{color:var(--marigold)}
.section.dark p,.section.dark .lede,.section.dark .prose p{color:var(--on-deep)}
.section.dark .muted{color:var(--on-deep-dim)}
.section.dark .rule-top,.section.dark .card,.section.dark .item{border-color:rgba(169,128,60,.45)}
/* one reading column, centred */
.measure{max-width:var(--measure);margin-inline:auto}
.center{text-align:center}
.lead-block{max-width:760px}
.lead-block.center{margin-inline:auto}

/* the only two-column arrangements the site uses */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.duo.tilt{grid-template-columns:1fr 1.25fr}
.duo.tilt-back{grid-template-columns:1.25fr 1fr}
.duo.centre{align-items:center}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.cols.narrow{grid-template-columns:1fr 1.4fr}
.cols.wide{grid-template-columns:1.4fr 1fr}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.two.narrow{grid-template-columns:1fr 1.4fr}
.two.wide{grid-template-columns:1.4fr 1fr}
.sticky{position:sticky;top:124px}

/* ---------- Type ---------- */
.eyebrow{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:0 0 20px}
.eyebrow .num{display:none}
.eyebrow .hi-alt{font-family:var(--deva);text-transform:none;letter-spacing:.02em;font-weight:400;font-size:14px;color:var(--ink-3);margin-left:14px}
.hi .eyebrow{font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:14.5px;font-weight:500}
.section h1{font-size:clamp(40px,5.6vw,68px);line-height:1.06}
.section h2{font-size:clamp(30px,4vw,48px);line-height:1.1;margin:0 0 22px}
.section h3{font-size:clamp(21px,2vw,26px);line-height:1.24;margin:0 0 10px;font-weight:500}
.section h4{font-size:20px;margin:0 0 8px;font-weight:500}
.lede{font-family:var(--display);font-size:clamp(21px,2.2vw,27px);line-height:1.48;color:var(--ink-2);font-weight:400;margin:0;max-width:34ch}
.lede.wide{max-width:52ch}
.hi .lede{font-family:var(--deva);font-size:clamp(18px,1.8vw,22px);line-height:1.75}
.muted{color:var(--ink-3)}
.prose{max-width:var(--measure)}
.prose p{margin:0 0 22px;font-size:17px;line-height:1.78;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--maroon);font-weight:700}
.prose .first{font-size:19px;color:var(--ink)}
.dual-hi,.hindi-note{font-size:17px;line-height:2;color:var(--maroon-soft);margin:22px 0 0;max-width:56ch}
.section.dark .dual-hi,.section.dark .hindi-note{color:var(--marigold)}
.statement{font-family:var(--display);font-size:clamp(24px,3vw,36px);line-height:1.28;color:var(--maroon);font-weight:300;margin:0;max-width:26ch}
.duo .statement,.cols .statement,.two .statement{max-width:none}
.hi .statement,.statement.hi{font-family:var(--deva);font-size:clamp(20px,2.2vw,27px);line-height:1.6;font-weight:400}
.section.dark .statement{color:var(--ground)}
.rule-top{border-top:1px solid var(--line);padding-top:22px}

/* a short marigold rule — the site's one repeating mark */
.tick{display:block;width:44px;height:2px;background:var(--marigold);border:0;margin:0 0 26px}
.tick.mid{margin-inline:auto}

/* ---------- The inscription: verses set large and centred ---------- */
.inscription{text-align:center;padding-block:clamp(12px,2vw,24px)}
.inscription .sa{font-size:clamp(24px,3.4vw,42px);line-height:1.95;color:var(--maroon);margin:0;font-weight:400}
.section.dark .inscription .sa{color:var(--marigold)}
.inscription .tr{font-family:var(--display);font-style:italic;font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--ink-2);max-width:56ch;margin:26px auto 0}
.section.dark .inscription .tr{color:var(--on-deep)}
.inscription .ref{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin-top:22px}
.hi .inscription .ref{font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:14px}

/* inline verse — smaller, left-aligned, for lists of verses */
.shloka{padding:0 0 0 24px;border-left:2px solid var(--marigold);margin:0}
.shloka+.shloka{margin-top:34px}
.shloka .sa{font-size:19px;line-height:2;color:var(--maroon);margin:0}
.shloka .tr{font-family:var(--display);font-size:18px;line-height:1.55;color:var(--ink-2);margin:12px 0 0}
.shloka .ref{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-top:12px}
.hi .shloka .ref{font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:13.5px}
.section.dark .shloka .sa{color:var(--marigold)}
.section.dark .shloka .tr{color:var(--on-deep)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 30px;background:var(--maroon);color:#fff;font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--maroon);border-radius:0;transition:background .18s,border-color .18s,color .18s}
.btn:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.btn.gold{background:transparent;color:var(--maroon);border-color:var(--gold-text)}
.btn.gold:hover{background:var(--maroon);color:#fff;border-color:var(--maroon)}
.btn.light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn.ghost{background:transparent;color:var(--maroon)}
.btn.ghost:hover{background:var(--maroon);color:#fff}
.btn.light:hover{background:#fff;color:var(--deep);border-color:#fff}
.section.dark .btn.gold{color:var(--ground);border-color:var(--gold-text)}
.section.dark .btn.gold:hover{background:var(--gold);color:var(--deep)}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.center .actions{justify-content:center}
.more{display:inline-block;margin-top:20px;font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--maroon);border-bottom:1px solid var(--marigold);padding-bottom:4px}
.more:hover{color:var(--deep);border-color:var(--maroon)}
.hi .more{font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:14px}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,247,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-top{background:var(--deep);font-size:11px;color:var(--on-deep-dim);letter-spacing:.16em;text-transform:uppercase}
.hdr-top>*{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;display:flex;justify-content:space-between;align-items:center;gap:18px;height:36px}
.hdr-top a{color:var(--on-deep-dim)}
.hdr-top a:hover{color:#fff}
.hdr-top span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hdr-top .sa{font-family:var(--deva);color:var(--marigold);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.hdr-top .lang{border-color:rgba(192,167,148,.5)}
.hdr-top .lang a{color:var(--on-deep-dim)}
.hdr-top .lang a[aria-current=true]{background:var(--maroon);color:#fff}
.hdr-main{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;height:86px}
.brand{display:flex;align-items:center;gap:15px}
.brand img{width:50px;height:44px;object-fit:contain}
.brand b{font-family:var(--display);font-size:25px;font-weight:500;line-height:1.02;display:block;color:var(--maroon)}
.brand small{display:block;font-family:var(--sans);font-size:9.5px;color:var(--ink-3);letter-spacing:.24em;text-transform:uppercase;margin-top:5px;font-weight:700}
.hi .brand b{font-family:var(--deva);font-weight:400;font-size:22px}
.hdr nav{display:flex;justify-content:flex-end;gap:34px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hi .hdr nav{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:15px;font-weight:500}
.hdr nav a{color:var(--ink-2);padding:32px 0;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s}
.hdr nav a:hover{color:var(--maroon)}
.hdr nav a[aria-current=page]{border-bottom-color:var(--marigold);color:var(--maroon)}
.lang{display:inline-flex;border:1px solid var(--line);font-size:10.5px;font-weight:700;letter-spacing:.1em}
.lang a{padding:6px 12px;color:var(--ink-3)}
.lang a[aria-current=true]{background:var(--maroon);color:#fff}
.hdr details{display:none}
.hdr summary{list-style:none;cursor:pointer;color:var(--maroon);display:flex;align-items:center}
.hdr summary::-webkit-details-marker{display:none}
.hdr details div{position:absolute;right:0;left:0;top:100%;padding:10px var(--gutter) 24px;display:grid;background:var(--ground);border-bottom:1px solid var(--line);box-shadow:0 26px 40px rgba(42,33,28,.12)}
.hdr details a{padding:15px 0;color:var(--ink);border-bottom:1px solid var(--line-soft);font-size:17px}
.hdr details a[aria-current=page]{color:var(--maroon)}

/* ---------- Home: the courtyard ---------- */
.hero{background:var(--ground);color:var(--ink);text-align:center}
.hero-photo{width:100%;height:clamp(240px,46vw,520px);object-fit:cover;display:block}
.hero-shade{display:none}
.hero-frame{display:none}
.hero-copy{width:min(820px,100%);margin-inline:auto;padding:clamp(44px,6vw,78px) var(--gutter) clamp(38px,5vw,62px)}
.hero .est{font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-text);margin:0;font-weight:700}
.hero .est-hi{font-family:var(--deva);font-size:14px;color:var(--ink-3);margin:10px 0 0;letter-spacing:.02em}
.hero h1{font-size:clamp(42px,6.6vw,82px);color:var(--maroon);margin:26px 0 0;font-weight:300;line-height:1.02}
.hero .hr-gold{width:52px;height:2px;background:var(--marigold);border:0;margin:28px auto}
.hero .tag{font-family:var(--display);font-size:clamp(19px,2vw,25px);color:var(--ink-2);margin:0;font-weight:300;font-style:italic}
.hero-motto{background:var(--deep);color:var(--on-deep);text-align:center;padding:clamp(40px,5.5vw,68px) var(--gutter)}
.hero-motto .hero-sa{font-family:var(--deva);font-size:clamp(21px,2.5vw,32px);line-height:1.8;color:var(--marigold);margin:0;font-weight:400}
.hero-motto .hero-sa-en{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep-dim);margin:18px 0 0;font-weight:700}
.hi .hero-motto .hero-sa-en{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.hero .actions{margin-top:36px;justify-content:center}

/* ---------- Page opener: photograph, then title on ivory ---------- */
.opener-band{position:relative;height:clamp(280px,38vw,460px);background:var(--deep);overflow:hidden;margin:0}
.opener-band img{width:100%;height:100%;object-fit:cover}
.opener-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,10,9,.18),rgba(30,10,9,.04) 40%,rgba(30,10,9,.22))}
.opener{padding-inline:var(--pad);padding-block:clamp(20px,3vw,34px) clamp(54px,7vw,86px);background:var(--ground)}
.opener .crumbs{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:clamp(36px,5vw,58px);font-weight:700}
.opener .crumbs a:hover{color:var(--maroon)}
.opener .crumbs a[aria-current=page]{color:var(--maroon)}
.hi .opener .crumbs{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px;font-weight:500}
.opener h1{font-size:clamp(40px,5.8vw,72px);line-height:1.06;max-width:16ch;margin:0}
.opener .lede{margin-top:26px;max-width:46ch}
.opener.flat{padding-block:clamp(44px,6vw,72px) clamp(54px,7vw,86px)}

/* ---------- Sub-navigation ---------- */
.subnav{position:sticky;top:var(--hdr-h);z-index:50;background:rgba(251,247,240,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.subnav>div{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;display:flex;flex-wrap:nowrap;gap:36px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.hi .subnav>div{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:15px;font-weight:500}
.subnav a{padding:18px 0;white-space:nowrap;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current=page]{color:var(--maroon);border-bottom-color:var(--marigold)}

/* ---------- Items: plain text blocks, one hairline, no card chrome ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4.5vw,64px)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,4.5vw,64px)}
.card,.item{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;box-shadow:none;display:flex;flex-direction:column}
.card .eyebrow{font-size:10.5px;margin-bottom:14px}
.card .sa{font-family:var(--deva);font-size:25px;color:var(--maroon);margin:0 0 8px;line-height:1.4;font-weight:400}
.card h3{margin-bottom:12px}
.card p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.72}
.card ul{margin:20px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:15.5px;line-height:1.5}
.card ul li{padding:11px 0;border-top:1px solid var(--line-soft)}
a.card:hover{border-top-color:var(--marigold)}
a.card:hover h3{color:var(--deep)}
.section.dark .card h3{color:var(--ground)}
.section.dark .card p{color:var(--on-deep)}

/* four commitments — marigold rule at the left */
.pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.6vw,52px);margin-top:12px}
.pillars div{padding:2px 0 2px 22px;border-left:2px solid var(--marigold);background:none;border-radius:0}
.pillars b{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;display:block;color:var(--maroon);margin-bottom:10px}
.hi .pillars b{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:16px;font-weight:500}
.pillars span{font-size:16px;color:var(--ink-2);line-height:1.72}

.pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(34px,4.5vw,64px);margin:30px 0 0}
.pairs div{padding:20px 0;border-top:1px solid var(--line)}
.pairs b{font-family:var(--display);font-weight:500;color:var(--maroon);font-size:20px;display:block}
.pairs span{color:var(--ink-2);font-size:16px}
.pairs .hi-line{display:block;font-family:var(--deva);font-size:16px;color:var(--ink-3);margin-top:6px;line-height:1.8}

.rule-list{list-style:none;margin:30px 0 0;padding:0}
.rule-list li{padding:20px 0;border-top:1px solid var(--line)}

/* the guiding question, set apart */
.northstar{background:var(--deep);color:#fff;padding:clamp(44px,6vw,84px) clamp(32px,5vw,72px);text-align:center}
.northstar .eyebrow{color:var(--marigold);letter-spacing:.16em;margin-bottom:26px}
.northstar p{margin:0 auto;font-family:var(--display);font-size:clamp(25px,3.2vw,40px);line-height:1.3;color:#fff;max-width:26ch;font-weight:300}
.northstar .hindi-note{font-size:17px;color:var(--on-deep-dim);margin:26px auto 0;max-width:46ch;text-align:center}

.objects{counter-reset:o;list-style:none;margin:0;padding:0}
.objects li{counter-increment:o;display:grid;grid-template-columns:64px 1fr;gap:24px;padding:30px 0;border-top:1px solid var(--line);align-items:start}
.objects li::before{content:counter(o,upper-roman);font-family:var(--display);font-size:26px;color:var(--marigold);line-height:1.1;grid-column:1;grid-row:1 / span 2;font-weight:400}
.objects strong{grid-column:2;font-family:var(--display);font-size:25px;font-weight:500;color:var(--maroon);line-height:1.2;display:block;margin-bottom:10px}
.objects p{grid-column:2;margin:0;font-size:16px;line-height:1.72;color:var(--ink-2)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:34px;padding:34px 0;border-top:1px solid var(--line)}
.timeline time{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);padding-top:10px;line-height:1.8}
.hi .timeline time{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14.5px;font-weight:500}
.timeline h3{margin-bottom:10px}
.timeline p{margin:0;max-width:60ch;font-size:16px;line-height:1.75;color:var(--ink-2)}
.people{list-style:none;margin:0;padding:0}
.people li{padding:20px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline}
.people strong{font-family:var(--display);font-size:22px;font-weight:500;color:var(--maroon)}
.people span{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);text-align:right;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.hi .people span{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.section.dark .people strong{color:var(--ground)}
.section.dark .people span{color:var(--on-deep-dim)}
.stat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.6vw,52px);margin:0}
.stat div{border-top:1px solid var(--line);padding-top:18px}
.stat b{display:block;font-family:var(--display);font-size:clamp(40px,5vw,60px);font-weight:300;line-height:1;color:var(--maroon)}
.stat span{font-family:var(--sans);font-size:10.5px;color:var(--ink-3);letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.hi .stat span{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.section.dark .stat b{color:var(--marigold)}
.stripe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.6vw,56px)}
.stripe>div{padding:22px 0 0;background:none;border-top:1px solid var(--line);border-radius:0}
.stripe b{display:block;font-family:var(--display);font-size:24px;font-weight:500;margin-bottom:10px;color:var(--maroon)}
.stripe span{font-size:15.5px;color:var(--ink-2);line-height:1.7}
.leaders{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4.5vw,64px)}
.leader{border-top:1px solid var(--line);padding-top:24px}
.leader b{display:block;font-family:var(--display);font-size:24px;font-weight:500;color:var(--maroon);line-height:1.2}
.leader span{display:block;font-family:var(--sans);font-size:10.5px;color:var(--ink-3);margin-top:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.hi .leader span{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.leader p{font-size:16px;color:var(--ink-2);line-height:1.72;margin:16px 0 0}

/* ---------- Gita themes ---------- */
.themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(34px,4.5vw,64px)}
.theme{display:block;background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:24px 0 0;box-shadow:none;color:var(--ink);text-align:left;transition:border-color .18s}
.theme:hover{border-top-color:var(--marigold)}
.theme .sa{font-family:var(--deva);font-size:27px;color:var(--maroon);line-height:1.4;margin:0 0 6px;font-weight:400}
.theme h3{font-family:var(--display);font-size:23px;margin:0 0 12px;color:var(--maroon-soft);font-weight:500}
.theme:hover h3{color:var(--deep)}
.theme p{margin:0;font-size:16px;color:var(--ink-2);line-height:1.72}
.theme small{display:block;margin-top:18px;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.hi .theme small{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}

.verse{display:grid;grid-template-columns:1fr;gap:0;padding:clamp(54px,6.5vw,88px) 0;border-top:1px solid var(--line)}
.verse > :first-child{text-align:center}
.verse > :last-child{max-width:62ch;margin-inline:auto;padding-top:clamp(30px,3.6vw,46px);
  margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--line-soft)}
.verse .ref{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.hi .verse .ref{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.verse .sa{font-family:var(--deva);font-size:clamp(23px,3vw,36px);line-height:1.95;color:var(--maroon);margin:20px auto 0;font-weight:400;max-width:28ch}
.verse .tr{font-family:var(--display);font-style:italic;font-size:clamp(16px,1.5vw,19px);color:var(--ink-3);line-height:1.55;margin:22px auto 0;max-width:58ch}
.verse h3{margin-bottom:var(--gap-h3)}
.verse .meaning{margin:0 0 20px;font-size:16.5px;line-height:1.78;color:var(--ink-2)}
.verse .lived{margin:0;padding:20px 0 0;border-top:1px solid var(--line-soft);font-size:16px;line-height:1.75;color:var(--ink-2)}
.situations{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,4.5vw,64px)}
.situation{border-top:1px solid var(--line);padding-top:26px}
.situation h3{margin-bottom:14px}
.situation .sa{font-family:var(--deva);font-size:17.5px;line-height:2;color:var(--maroon-soft);margin:0}
.situation .ref{display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--gold-text);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.hi .situation .ref{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.situation p{font-size:16px;line-height:1.72;color:var(--ink-2);margin:16px 0 0}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.4vw,48px);margin:30px 0 0;padding:0;list-style:none}
.principles li{padding:2px 0 2px 22px;border-left:2px solid var(--marigold);background:none;border-radius:0}
.principles b{display:block;font-family:var(--display);font-size:20px;font-weight:500;color:var(--maroon)}
.section.dark .principles b{color:var(--ground)}
.principles span{font-family:var(--deva);font-size:16px;color:var(--ink-3);line-height:1.9}
.journey{font-family:var(--deva);font-size:clamp(19px,2.1vw,26px);line-height:2;color:var(--maroon);margin:0;padding:0;background:none;border:0;font-weight:400}
.section.dark .journey{color:var(--marigold)}
.quote{margin:32px 0 0;padding:0 0 0 24px;border-left:2px solid var(--marigold);background:none;border-radius:0;text-align:left}
.quote p{font-family:var(--deva);font-size:18px;line-height:2;color:var(--maroon);margin:0}
.section.dark .quote p{color:var(--marigold)}
.quote cite{display:block;margin-top:12px;font-style:normal;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);font-weight:700}

.faq{max-width:820px;margin:0}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:26px 0;font-family:var(--display);font-size:23px;color:var(--maroon);display:flex;justify-content:space-between;gap:24px;font-weight:500}
.hi .faq summary{font-family:var(--deva);font-size:19px;font-weight:400}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--marigold);font-size:24px;line-height:1.1;font-weight:300}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 28px;max-width:66ch;font-size:16.5px;line-height:1.78;color:var(--ink-2)}

/* ---------- Photography ---------- */
.figure{margin:0}
.figure img{width:100%;height:100%;object-fit:cover}
.figure figcaption{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:16px;font-weight:700}
.hi .figure figcaption{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.gold-frame{position:relative;padding:0;background:none;border:0;border-radius:0;overflow:hidden}
.gold-frame img{width:100%;height:100%;object-fit:cover}
/* a photograph given the full width of the page */
.band{position:relative;margin:0;height:clamp(260px,34vw,440px);background:var(--deep);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}
.band figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px var(--pad);background:linear-gradient(180deg,transparent,rgba(30,10,9,.78));color:var(--on-deep);font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
.hi .band figcaption{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.2vw,32px)}
.gallery.cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gallery figure{margin:0}
.gallery .gold-frame{aspect-ratio:4/3}
.gallery figure.portrait .gold-frame{aspect-ratio:3/4}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{font-family:var(--display);font-size:18px;color:var(--maroon);margin-top:14px;font-weight:500}
.hi .gallery figcaption{font-family:var(--deva);font-size:16px;font-weight:400}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,80px);align-items:start}
.contact dl{margin:0;display:grid;gap:0}
.contact dl>div{padding:22px 0;border-top:1px solid var(--line)}
.contact dt{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:10px}
.hi .contact dt{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.contact dd{margin:0;font-size:17px;line-height:1.72;color:var(--ink-2)}
.contact dd a{color:var(--maroon);border-bottom:1px solid var(--marigold)}
.note{padding:22px 0 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.75;color:var(--ink-3);margin-top:30px}

/* ---------- Footer ---------- */
.ftr{background:var(--deep);color:var(--on-deep-dim);padding:clamp(64px,8vw,104px) var(--pad) 32px}
.ftr-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(34px,4.5vw,64px);align-items:start}
.ftr img{width:54px;height:48px;object-fit:contain;margin-bottom:22px}
.ftr b{display:block;font-family:var(--display);font-size:24px;color:var(--ground);font-weight:500}
.hi .ftr b{font-family:var(--deva);font-weight:400;font-size:21px}
.ftr p{margin:12px 0 0;font-size:15px;line-height:1.72}
.ftr h4,.ftr .ftr-h{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--on-deep);margin:0 0 20px}
.hi .ftr h4,.ftr .ftr-h{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.ftr nav{display:grid;gap:13px;font-size:15px}
.ftr nav a,.ftr a{color:var(--on-deep-dim)}
.ftr nav a:hover,.ftr a:hover{color:#fff}
.ftr .sa{font-family:var(--deva);font-size:17px;color:var(--marigold);margin:0 0 10px;line-height:1.9}
.ftr small{display:block;margin-top:clamp(48px,6vw,76px);padding-top:22px;border-top:1px solid rgba(192,167,148,.24);font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-deep-dim)}
.hi .ftr small{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}

/* ---------- Responsive ---------- */
@media(max-width:1024px){
  :root{--hdr-h:112px}
  .hdr-main{gap:18px;height:76px}.hdr nav{display:none}.hdr details{display:block}
  .duo,.duo.tilt,.duo.tilt-back,.cols,.cols.narrow,.cols.wide,.two,.two.narrow,.two.wide{grid-template-columns:1fr;gap:36px}
  .sticky{position:static}
  .grid3,.themes,.leaders{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stripe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .objects li{grid-template-columns:48px 1fr;gap:18px}
  .contact,.situations{grid-template-columns:1fr;gap:26px}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .timeline li{grid-template-columns:112px 1fr;gap:24px}
  .gallery,.gallery.cols3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root{--hdr-h:102px}
  .pillars,.principles,.pairs{grid-template-columns:1fr}
  .hdr-top span:first-child{display:none}.hdr-main{height:66px}.brand img{width:40px;height:36px}.brand b{font-size:19px}.brand small{display:none}
  .hero-copy{padding:92px 0 76px}
  .grid3,.grid2,.themes,.stripe,.stat,.leaders{grid-template-columns:1fr}
  .objects li{grid-template-columns:1fr;gap:10px}.objects li::before{grid-row:auto}.objects strong,.objects p{grid-column:1}
  .timeline li{grid-template-columns:1fr;gap:10px}
  .ftr-grid{grid-template-columns:1fr}
  .people li{grid-template-columns:1fr;gap:6px}.people span{text-align:left}
  .northstar{padding:44px 26px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery figure:hover img{transform:none}}


/* ---------- Devanagari: tracking overrides missed by the original .hi set ----------
   Latin letter-spacing detaches matras and conjuncts ("हां सी · ह रि या णा"). ---------- */
.hi .hero .est{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.hi .hero .hero-sa-en{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.hi .btn{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:15px;font-weight:500}
.hi .hdr-top{letter-spacing:.02em;text-transform:none;font-size:13px}
.hi .brand small{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:12px;font-weight:500}
.hi .lang{font-family:var(--deva);letter-spacing:.02em;font-size:12.5px}
.hi .quote cite{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.hi .eyebrow .hi-alt{letter-spacing:.02em}

/* ---------- Latin stacks carried no Devanagari fallback, so Hindi inside them
   silently rendered in the system font instead of Tiro. ---------- */
:root{
  --display:"Cormorant Garamond",Cormorant,"Tiro Devanagari Hindi","Noto Serif Devanagari",Garamond,Georgia,serif;
  --sans:"Karla","Helvetica Neue","Tiro Devanagari Hindi","Noto Sans Devanagari",Arial,sans-serif;
}

/* ---------- Anchors landed under the sticky header ---------- */
:target,[id]{scroll-margin-top:calc(var(--hdr-h) + 24px)}

/* ---------- Skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--maroon);color:#fff;
  padding:14px 22px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.skip:focus{left:0}
.hi .skip{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:15px}

/* ---------- Tap targets: 44px minimum on touch ---------- */
@media(max-width:1024px){
  .hdr summary{min-height:44px;min-width:44px;justify-content:center}
  .hdr-top a,.ftr a[href^="tel:"],.ftr a[href^="mailto:"]{display:inline-block;padding-block:12px}
  .lang a{padding:12px 16px}
  .opener .crumbs a{display:inline-block;padding-block:10px}
  .subnav a{padding-block:22px}
}

/* ---------- .opener was 34px top / 86px bottom, and stacked onto the next
   section's 124px with no band change between. ---------- */
.opener{padding-block:clamp(28px,4vw,52px)}
.opener + .section:not(.sand):not(.dark){padding-top:clamp(48px,6vw,76px)}


/* ---------- Spacing: the heading gap was 22/40/44/56px across the site,
   because the heading's margin and the next block's margin were set apart. ---------- */
.section h2{margin-bottom:var(--gap-h2)}
.section h3,.card h3,.timeline h3,.verse h3,.situation h3,.theme h3{margin-bottom:var(--gap-h3)}
.section h2 + .prose,.section h2 + .duo,.section h2 + .grid2,.section h2 + .grid3,
.section h2 + .situations,.section h2 + .themes,.section h2 + .faq,.section h2 + .lede,
.section h2 + .muted,.section h2 + .pillars,.section h2 + .pairs{margin-top:0}
.theme h3{font-size:clamp(21px,2vw,26px)}

/* ---------- The Deed's own words ----------
   The registered clause is set as a document, not as decoration: typewriter
   face, the Deed's own line, and our words only after it. ---------- */
.clause{max-width:62ch;margin-inline:auto;text-align:center}
.clause blockquote{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:clamp(15px,1.6vw,18.5px);line-height:1.95;color:var(--on-deep);
  margin:26px 0 0;letter-spacing:.005em;text-wrap:pretty}
.clause cite{display:block;margin-top:24px;font-style:normal;font-family:var(--sans);
  font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--marigold)}
.hi .clause cite{font-family:var(--deva);letter-spacing:.04em;text-transform:none;font-size:14px}
.clause .eyebrow{color:var(--marigold)}

/* the Deed's clause on an ivory ground, for the hub list */
.section:not(.dark) .clause blockquote{color:var(--ink)}
.section:not(.dark) .clause cite{color:var(--gold-text)}

/* ---------- Previous / next within a section ---------- */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px);
  border-top:1px solid var(--line);padding-top:26px}
.prevnext a{display:flex;flex-direction:column;gap:7px;font-family:var(--display);
  font-size:clamp(19px,1.9vw,24px);color:var(--maroon);line-height:1.2}
.prevnext a:last-child{text-align:right}
.prevnext a span{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.hi .prevnext a{font-family:var(--deva);line-height:1.4}
.hi .prevnext a span{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
@media(max-width:640px){ .prevnext{grid-template-columns:1fr;gap:22px}
  .prevnext a:last-child{text-align:left} }

/* ---------- The five objects, as the hub lists them ---------- */
.objects-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.object-row{display:grid;grid-template-columns:auto 1fr;gap:0 clamp(24px,3.5vw,54px);
  padding-block:clamp(34px,4.2vw,56px);border-bottom:1px solid var(--line-soft)}
.object-row .numeral{font-family:var(--display);font-size:clamp(34px,4.4vw,56px);
  color:var(--marigold);line-height:1;font-weight:300;font-variant-numeric:tabular-nums}
.object-row .rowbody{display:flex;flex-direction:column;gap:12px;min-width:0}
.object-row h3{font-size:clamp(23px,2.4vw,30px);color:var(--maroon)}
.object-row .deedline{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:13.5px;line-height:1.85;color:var(--ink-2);border-left:2px solid var(--gold);
  padding-left:18px;margin:2px 0 0;max-width:64ch}
.object-row .more{margin-top:6px;align-self:flex-start}
@media(max-width:640px){ .object-row{grid-template-columns:1fr;gap:14px}
  .object-row .numeral{font-size:32px} }

/* ---------- Fallback metrics: stop the flash of substituted type ----------
   The three webfonts load from Google's CDN. Until they arrive the browser
   drew the fallback at its own metrics, so text visibly jumped as you
   scrolled. These faces match the fallback to the webfont so the swap is
   almost invisible. ---------- */
@font-face{font-family:"Cormorant Fallback";src:local("Georgia"),local("Times New Roman"),local("Times");
  size-adjust:88%;ascent-override:95%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:"Karla Fallback";src:local("Helvetica Neue"),local("Helvetica"),local("Arial");
  size-adjust:97%;ascent-override:98%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Tiro Fallback";src:local("Noto Sans Devanagari"),local("Kohinoor Devanagari"),local("Mangal");
  size-adjust:100%;ascent-override:105%;descent-override:38%;line-gap-override:0%}
:root{
  --display:"Cormorant Garamond","Cormorant Fallback","Tiro Devanagari Hindi","Noto Serif Devanagari",Georgia,serif;
  --sans:"Karla","Karla Fallback","Tiro Devanagari Hindi","Noto Sans Devanagari",Arial,sans-serif;
  --deva:"Tiro Devanagari Hindi","Tiro Fallback","Noto Serif Devanagari","Kohinoor Devanagari",serif;
}

/* ---------- A chapter of the Gita ----------
   Seventy-two verses is a long read, so the inscription is set a size down
   from the theme pages and the two translations sit side by side beneath it.
   Verse, then what it means — never the two as columns of equal weight. ---- */
.ch-sa{display:block;font-family:var(--deva);font-size:.62em;color:var(--gold-text);
  line-height:1.6;margin-bottom:.28em;font-weight:400}
.ch-en{display:block}

.gita-verses{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.gverse{border-top:1px solid var(--line-soft);padding-block:clamp(34px,4vw,54px);
  display:flex;flex-direction:column;align-items:center;text-align:center;scroll-margin-top:calc(var(--hdr-h) + 80px)}
.gverse:first-child{border-top:1px solid var(--line)}

/* the speaker announcement, as the manuscripts print it */
.speaker{display:flex;flex-direction:column;align-items:center;gap:5px;margin:0 0 26px;
  padding-top:10px}
.speaker span:first-child{font-family:var(--deva);font-size:clamp(17px,1.7vw,21px);color:var(--maroon)}
.speaker .gloss{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.hi .speaker .gloss{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}

.gref{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  color:var(--gold-text);font-variant-numeric:tabular-nums}
.gref:hover{color:var(--marigold)}
.gsa{font-family:var(--deva);font-size:clamp(20px,2.4vw,29px);line-height:1.95;
  color:var(--maroon);margin:16px auto 0;max-width:30ch;font-weight:400}
.giast{font-family:var(--display);font-style:italic;font-size:clamp(14.5px,1.35vw,16.5px);
  line-height:1.6;color:var(--ink-3);margin:16px auto 0;max-width:62ch}

.gtrans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);
  margin-top:clamp(24px,3vw,36px);padding-top:clamp(22px,2.6vw,30px);
  border-top:1px solid var(--line-soft);text-align:left;width:100%;max-width:78ch}
.gtrans p{margin:0;font-size:16px;line-height:1.72;color:var(--ink-2)}
.gtrans .ghi{font-family:var(--deva);line-height:1.85}
.gpd{margin:22px auto 0;max-width:66ch;text-align:left;font-family:var(--display);
  font-style:italic;font-size:15.5px;line-height:1.65;color:var(--ink-3)}
.gpd .lbl{display:block;font-family:var(--sans);font-style:normal;font-size:9.5px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-bottom:7px}
.small{font-size:14px}

/* Where the Trust has written about a verse, the verse says so. Quiet: this is
   a footnote on the text, never a call to action competing with it. */
.gtheme{margin:20px auto 0;max-width:66ch;display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px 16px;font-family:var(--sans);font-size:13.5px}
.gtheme .lbl{font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-text)}
.hi .gtheme .lbl{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.gtheme a{color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:1px}
.gtheme a:hover{border-bottom-color:var(--marigold);color:var(--marigold)}
.hi .gtheme a{font-family:var(--deva)}

/* Who is speaking, on the theme pages where verses stand alone out of sequence. */
.spoken{margin:12px 0 0;font-family:var(--sans);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.hi .spoken{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}

/* The whole Gita, at the foot of every chapter: 18 lines, two clicks from anywhere. */
.chapter-index{margin-top:26px;display:grid;gap:0;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  column-gap:clamp(24px,3vw,48px);border-top:1px solid var(--line)}
.chapter-index a{display:grid;grid-template-columns:26px 1fr auto;align-items:baseline;
  gap:4px 12px;padding:13px 2px;border-bottom:1px solid var(--line-soft);
  text-decoration:none;color:var(--ink-2);transition:background .15s}
.chapter-index a:hover{background:rgba(169,128,60,.07)}
.chapter-index a[aria-current=page]{background:rgba(169,128,60,.11)}
.chapter-index .ci-n{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--gold-text);text-align:right}
.chapter-index .ci-sa{font-family:var(--deva);font-size:16px;color:var(--maroon);line-height:1.5}
.chapter-index .ci-en{grid-column:2;font-family:var(--display);font-size:15px;
  font-style:italic;color:var(--ink-3);line-height:1.4}
.hi .chapter-index .ci-en{font-family:var(--deva);font-style:normal;font-size:14px}
.chapter-index .ci-v{grid-row:1;grid-column:3;font-family:var(--sans);font-size:10.5px;
  font-weight:700;letter-spacing:.12em;color:var(--ink-3)}
.chapter-index a[aria-current=page] .ci-sa{color:var(--marigold)}

@media(max-width:760px){
  .gtrans{grid-template-columns:1fr;gap:18px}
  .gsa{max-width:100%}
  .chapter-index{grid-template-columns:1fr}
  .chapter-index .ci-en{font-size:14px}
}

/* Onward doors. Not cards: a row of thresholds with a gold rule above each,
   so they read as a continuation of the page rather than an advertisement. */
.onward{margin-top:30px;display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.onward a{display:flex;flex-direction:column;gap:9px;text-decoration:none;
  padding-top:20px;border-top:2px solid var(--gold);transition:border-color .2s}
.onward a:hover{border-top-color:var(--marigold)}
.onward .ow-eyebrow{font-family:var(--sans);font-size:9.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.hi .onward .ow-eyebrow{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.onward .ow-title{font-family:var(--display);font-size:clamp(22px,2.2vw,27px);
  color:var(--maroon);line-height:1.25}
.hi .onward .ow-title{font-family:var(--deva);font-size:clamp(19px,2vw,23px);line-height:1.4}
.onward .ow-text{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.hi .onward .ow-text{font-family:var(--deva);line-height:1.85}
.onward a:hover .ow-title{color:var(--marigold)}

/* The five objects on the home page. A numbered list, not a card grid: the
   Deed numbers them, and the numbering is the point. */
.objects-home{list-style:none;margin:38px 0 0;padding:0;border-top:1px solid var(--line)}
.objects-home li{border-bottom:1px solid var(--line-soft)}
.objects-home a{display:grid;grid-template-columns:clamp(46px,5vw,74px) 1fr auto;
  align-items:baseline;gap:0 clamp(14px,2vw,28px);padding:clamp(20px,2.4vw,30px) 4px;
  text-decoration:none;transition:background .16s}
.objects-home a:hover{background:rgba(169,128,60,.07)}
.objects-home .oh-num{font-family:var(--display);font-size:clamp(24px,2.6vw,33px);
  color:var(--gold-text);line-height:1;letter-spacing:.04em}
.objects-home .oh-body{display:flex;flex-direction:column;gap:6px}
.objects-home .oh-name{font-family:var(--display);font-size:clamp(24px,2.5vw,31px);
  color:var(--maroon);line-height:1.2}
.hi .objects-home .oh-name{font-family:var(--deva);font-size:clamp(20px,2.2vw,26px);line-height:1.4}
.objects-home .oh-short{font-size:16px;line-height:1.65;color:var(--ink-2)}
.hi .objects-home .oh-short{font-family:var(--deva);line-height:1.85}
.objects-home .oh-clause{font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;color:var(--ink-3);white-space:nowrap}
.objects-home a:hover .oh-name{color:var(--marigold)}
@media(max-width:640px){
  .objects-home a{grid-template-columns:34px 1fr;row-gap:8px}
  .objects-home .oh-clause{grid-column:2;letter-spacing:.12em}
}

/* One verse, on the home page, given room. Reuses the chapter-page verse
   styles so the same shloka looks the same wherever it appears. */
.home-verse{margin:44px auto 0;max-width:74ch;text-align:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:clamp(34px,4vw,52px)}
.home-verse .gtrans{margin-top:26px;text-align:left}
.home-verse .hv-ref{margin:26px 0 0}
.home-verse .hv-ref a{font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:3px}
.home-verse .hv-ref a:hover{color:var(--marigold);border-bottom-color:var(--marigold)}
.hi .home-verse .hv-ref a{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}

/* The verse list already opens on a rule and pads itself generously. Stacking a
   full section rhythm on top of the opener's bottom padding left ~200px of
   nothing between the chapter lede and the first shloka. */
.section.verses-open{padding-block:clamp(8px,1vw,16px) var(--rhythm)}

/* Mobile header. The utility bar is a single 36px line; at 390px the links were
   wrapping onto three rows and pushing the language toggle out of the bar. */
@media(max-width:640px){
  .hdr-top{font-size:10px;letter-spacing:.12em}
  .hdr-top>*{gap:10px;height:auto;min-height:40px;flex-wrap:nowrap}
  .hdr-top a{white-space:nowrap}
  .hdr-top a[href^="tel:"]{margin-inline-start:auto}
  .lang a{padding:9px 11px}
  .opener .crumbs{margin-bottom:clamp(24px,5vw,40px);line-height:2.1}
}
@media(max-width:400px){
  /* The phone number is the actionable one; the timings link is a tap away in
     the menu. */
  .hdr-top a[href$="/visit"]{display:none}
}

/* The section sub-navigation scrolls sideways on a phone. Say so with a fade
   rather than leaving a word cut in half with no affordance. */
@media(max-width:760px){
  .subnav>*{-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
  .subnav>*::-webkit-scrollbar{display:none}
}

/* The note on sources sits with the text it describes, quietly, rather than in
   its own band. Two adjacent sand sections read as one 600px stripe of nothing. */
.section.source-note{padding-block:0 clamp(40px,5vw,66px)}
.section.source-note p{max-width:74ch;margin-inline:auto;padding-top:26px;
  border-top:1px solid var(--line);text-align:left}

/* Nine themes in a single footer column made that column twice the height of
   its neighbours. */
.ftr nav.two-up{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
@media(max-width:520px){ .ftr nav.two-up{grid-template-columns:1fr} }

/* The clause reference was floating a thousand pixels from the object it
   labels on a wide screen. */
.objects-home{max-width:76ch;margin-inline:auto}

/* One text, one presentation. The theme pages now print the same verified
   shloka as the chapter pages, so they are set the same way — and at 28ch a
   pāda was breaking mid-line. */
.verse .sa{font-size:clamp(20px,2.4vw,29px);max-width:44ch}
.verse .tr{font-size:clamp(14.5px,1.35vw,16.5px);max-width:62ch}

/* A breadcrumb separator must never be orphaned at the end of a wrapped line;
   each separator travels with the crumb it introduces. */
.opener .crumbs > span{display:inline-block}

/* On the Hindi pages, Hindi reads first. Both renderings stay on the page; only
   the order of the two columns follows the reader. */
.hi .gtrans .ghi{order:1}
.hi .gtrans .gen{order:2}

/* ============================================================
   THE WHITE PAPER LAYER
   ------------------------------------------------------------
   The Foundational White Paper is the Trust's design language, and
   this file had drifted a long way from it. The white paper is:

     · maroon-led — deep maroon is a SURFACE, not an accent
     · image-led — full-bleed photographs with the headline laid on them
     · left-aligned and column-based, not centred
     · small-caps serif for labels, never letterspaced sans
     · gold as a colour for type and rules, not a hairline
     · dense and confident, not acres of ivory

   Everything below implements that vocabulary.
   ============================================================ */
:root{
  --wp-maroon:#4a1c1a;      /* the white paper's ground */
  --wp-maroon-2:#5c2422;    /* panel, one step up */
  --wp-cream:#f3e8d8;       /* type on maroon */
  --wp-cream-dim:#cdb49c;
  --wp-gold:#c9a227;        /* gold as the white paper uses it: for TYPE */
  --wp-gold-2:#e0bf55;
  --wp-rule:rgba(201,162,39,.42);
}

/* ---------- Labels: small-caps serif, as the white paper sets them ---------- */
.eyebrow,.ow-eyebrow,.oh-clause,.gpd .lbl,.gtheme .lbl{
  font-family:var(--display);
  font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  font-size:15px;font-weight:600;letter-spacing:.09em;text-transform:none;
  color:var(--gold-text);line-height:1.3}
.hi .eyebrow,.hi .ow-eyebrow{font-family:var(--deva);font-variant-caps:normal;
  font-size:14px;letter-spacing:.01em;font-weight:500}
.section.dark .eyebrow,.wp-dark .eyebrow{color:var(--wp-gold-2)}

/* ---------- The numbered section chip ---------- */
.chip{display:inline-flex;align-items:baseline;gap:12px;background:var(--wp-maroon);
  color:var(--wp-cream);padding:8px 18px 9px;margin-bottom:clamp(18px,2vw,26px)}
.chip .n{font-family:var(--display);font-size:15px;font-weight:600;color:var(--wp-gold-2);
  letter-spacing:.06em}
.chip .en{font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1,"c2sc" 1;font-size:15.5px;letter-spacing:.09em;font-weight:600}
.chip .sep{color:var(--wp-rule)}
.chip .hi-lbl{font-family:var(--deva);font-size:14px;color:var(--wp-cream-dim)}
.wp-hero .chip{background:rgba(74,28,26,.88);backdrop-filter:blur(3px)}

/* ---------- Hero: the headline lives ON the photograph ---------- */
.wp-hero{position:relative;min-height:clamp(460px,64vh,760px);display:flex;
  align-items:flex-end;background:var(--wp-maroon);overflow:hidden}
.wp-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(40,14,13,.62) 0%,rgba(40,14,13,.28) 34%,rgba(40,14,13,.86) 100%)}
.wp-hero .inner{position:relative;z-index:2;width:min(var(--max),100% - 2*var(--gutter));
  margin-inline:auto;padding-block:clamp(44px,6vw,78px);max-width:none}
.wp-hero .est{font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1;font-size:16px;letter-spacing:.16em;color:var(--wp-gold-2);margin:0}
.wp-hero .est-hi{font-family:var(--deva);font-size:14.5px;color:var(--wp-cream-dim);margin:4px 0 0}
.wp-hero h1{font-family:var(--display);color:var(--wp-cream);font-weight:400;
  font-size:clamp(46px,7vw,92px);line-height:1.02;margin:18px 0 0;max-width:15ch;
  text-shadow:0 2px 30px rgba(30,8,7,.5)}
.hi .wp-hero h1{font-family:var(--deva);font-size:clamp(34px,5.2vw,66px);line-height:1.28}
.wp-hero .rule{width:112px;height:1px;background:var(--wp-gold);margin:26px 0 22px}
.wp-hero .tag{font-family:var(--display);font-size:clamp(19px,2vw,25px);font-style:italic;
  color:var(--wp-cream);margin:0;max-width:34ch}
.hi .wp-hero .tag{font-family:var(--deva);font-style:normal;font-size:clamp(17px,1.8vw,21px)}
.wp-hero .motto{font-family:var(--deva);color:var(--wp-gold-2);font-size:clamp(19px,2.1vw,27px);
  margin:22px 0 0}
.wp-hero .actions{margin-top:clamp(26px,3vw,38px)}
.wp-hero .btn{background:var(--wp-gold);color:#33110f;border-color:var(--wp-gold)}
.wp-hero .btn:hover{background:var(--wp-gold-2);border-color:var(--wp-gold-2)}
.wp-hero .btn.ghost{background:transparent;color:var(--wp-cream);
  border:1px solid rgba(243,232,216,.55)}
.wp-hero .btn.ghost:hover{background:rgba(243,232,216,.12);border-color:var(--wp-cream)}

/* ---------- English left, Hindi right, gold rule between ---------- */
.wp-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,66px);
  align-items:start;margin-top:clamp(16px,2vw,26px)}
.wp-duo>:last-child{border-left:2px solid var(--wp-gold);padding-left:clamp(20px,2.6vw,34px)}
.wp-duo h2,.wp-duo h3{margin:0 0 14px}
.wp-duo .lede{font-family:var(--display);font-style:italic;font-size:clamp(18px,1.8vw,21px);
  color:var(--maroon);margin:0 0 12px}
.wp-duo p{margin:0 0 14px;font-size:17px;line-height:1.72;color:var(--ink-2)}
.wp-duo .hi-col{font-family:var(--deva)}
.wp-duo .hi-col h3{font-family:var(--deva);font-weight:400}
.wp-duo .hi-col p{font-family:var(--deva);line-height:1.95}
@media(max-width:820px){
  .wp-duo{grid-template-columns:1fr;gap:28px}
  .wp-duo>:last-child{border-left:0;border-top:2px solid var(--wp-gold);
    padding-left:0;padding-top:24px}
}

/* ---------- The maroon panel ---------- */
.wp-panel{background:var(--wp-maroon);color:var(--wp-cream);
  padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,52px);margin-top:clamp(30px,3.6vw,52px)}
.wp-panel .eyebrow{color:var(--wp-gold-2)}
.wp-panel h2,.wp-panel h3{color:var(--wp-cream)}
.wp-panel p{color:var(--wp-cream);margin:0 0 12px}
.wp-panel .wp-duo>:last-child{border-left-color:var(--wp-rule)}
.wp-panel .big{font-family:var(--display);font-size:clamp(21px,2.2vw,27px);line-height:1.42;
  margin:12px 0 0}
.hi .wp-panel .big,.wp-panel .big.deva{font-family:var(--deva);line-height:1.72;
  font-size:clamp(18px,1.9vw,22px)}

/* ---------- A verse, set as the white paper sets one ---------- */
.wp-verse{background:var(--wp-maroon);padding:clamp(26px,3.2vw,44px) clamp(24px,3.2vw,46px)}
.wp-verse .sa-lines{font-family:var(--deva);color:var(--wp-gold-2);
  font-size:clamp(20px,2.2vw,28px);line-height:1.85;margin:0}
.wp-verse .gloss{color:var(--wp-cream);font-size:16.5px;line-height:1.75;margin:18px 0 0}
.wp-verse .gloss.deva{font-family:var(--deva);line-height:1.95}
.wp-verse .cite{display:block;margin-top:18px;font-family:var(--display);
  font-variant-caps:all-small-caps;font-feature-settings:"smcp" 1;letter-spacing:.12em;
  font-size:15px;color:var(--wp-gold);text-decoration:none}
.wp-verse a.cite:hover{color:var(--wp-gold-2)}
.wp-verse .cite.deva{font-family:var(--deva);font-variant-caps:normal;letter-spacing:.02em;font-size:14px}

/* ---------- Rule-separated pairs, as on the Trustee Dharma page ---------- */
.wp-pairs{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(26px,3.4vw,52px);
  margin-top:clamp(22px,2.6vw,34px)}
.wp-pairs>*{border-bottom:1px solid var(--line);padding:15px 0 14px}
.wp-pairs .k{font-family:var(--display);font-size:20px;color:var(--maroon);font-weight:600}
.wp-pairs .v{font-size:16px;color:var(--ink-2);margin-left:7px}
.hi .wp-pairs .k,.hi .wp-pairs .v{font-family:var(--deva)}
.wp-panel .wp-pairs>*{border-bottom-color:var(--wp-rule)}
.wp-panel .wp-pairs .k{color:var(--wp-gold-2)}
.wp-panel .wp-pairs .v{color:var(--wp-cream)}
@media(max-width:640px){ .wp-pairs{grid-template-columns:1fr} }

/* ---------- Section openers stop being centred ---------- */
.wp-open{max-width:none;text-align:left;margin-bottom:clamp(6px,1vw,14px)}
.wp-open h2{font-size:clamp(34px,4.4vw,58px);line-height:1.08;max-width:20ch;margin:0}
.hi .wp-open h2{font-size:clamp(26px,3.4vw,42px);line-height:1.34}
.wp-open .sub{font-family:var(--display);font-style:italic;color:var(--ink-3);
  font-size:clamp(18px,1.8vw,21px);margin:14px 0 0;max-width:52ch}
.hi .wp-open .sub{font-family:var(--deva);font-style:normal}

/* ---------- A dark section, used properly and often ---------- */
.section.wp-dark{background:var(--wp-maroon);color:var(--wp-cream)}
.section.wp-dark h1,.section.wp-dark h2,.section.wp-dark h3{color:var(--wp-cream)}
.section.wp-dark p{color:var(--wp-cream)}
.section.wp-dark .sub,.section.wp-dark .muted{color:var(--wp-cream-dim)}
.section.wp-dark .btn{background:var(--wp-gold);color:#33110f;border-color:var(--wp-gold)}
.section.wp-dark .btn.ghost{background:transparent;color:var(--wp-cream);
  border:1px solid rgba(243,232,216,.5)}
.section.wp-dark .objects-home{border-top-color:var(--wp-rule)}
.section.wp-dark .objects-home li{border-bottom-color:var(--wp-rule)}
.section.wp-dark .objects-home a:hover{background:rgba(201,162,39,.1)}
.section.wp-dark .objects-home .oh-name{color:var(--wp-cream)}
.section.wp-dark .objects-home .oh-num{color:var(--wp-gold-2)}
.section.wp-dark .objects-home .oh-short{color:var(--wp-cream-dim)}
.section.wp-dark .objects-home .oh-clause{color:var(--wp-gold)}
.section.wp-dark .objects-home a:hover .oh-name{color:var(--wp-gold-2)}
.section.wp-dark .onward a{border-top-color:var(--wp-gold)}
.section.wp-dark .onward .ow-title{color:var(--wp-cream)}
.section.wp-dark .onward .ow-text{color:var(--wp-cream-dim)}
.section.wp-dark .onward a:hover .ow-title{color:var(--wp-gold-2)}

/* ---------- Image with the caption band, white-paper style ---------- */
.wp-band{position:relative;background:var(--wp-maroon)}
.wp-band>img{width:100%;height:clamp(260px,40vw,520px);object-fit:cover;display:block}
.wp-band figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:clamp(30px,4vw,48px) var(--pad) clamp(16px,2vw,22px);
  background:linear-gradient(180deg,transparent,rgba(40,14,13,.85));
  font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1;letter-spacing:.13em;font-size:15px;color:var(--wp-cream)}
.hi .wp-band figcaption{font-family:var(--deva);font-variant-caps:normal;letter-spacing:.02em;font-size:14px}

/* ---------- Buttons with more presence ---------- */
.btn{font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1;font-size:17px;letter-spacing:.1em;
  text-transform:none;padding:13px 26px;font-weight:600}
.hi .btn{font-family:var(--deva);font-variant-caps:normal;letter-spacing:.02em;font-size:15px}

/* ---------- The objects list, tightened up ---------- */
.objects-home{max-width:none}
.objects-home a{padding:clamp(17px,2vw,24px) 4px}

/* ---------- Hero corrections ---------- */
/* The label sat on open sky; the scrim needed to reach the top properly. */
.wp-hero::after{background:
  linear-gradient(180deg,rgba(40,14,13,.80) 0%,rgba(40,14,13,.34) 30%,rgba(40,14,13,.52) 62%,rgba(40,14,13,.93) 100%)}
.wp-hero .tag{max-width:46ch}
.wp-hero .est{letter-spacing:.13em;color:#e8cd72}

/* A second hero on the Trust's own painting of the dialogue. It carries a
   section chip and a headline rather than the site's name. */
.wp-hero-art{min-height:clamp(420px,58vh,660px);align-items:center}
.wp-hero-art>img{object-position:center 32%}
.wp-hero-art::after{background:
  linear-gradient(90deg,rgba(40,14,13,.90) 0%,rgba(40,14,13,.66) 42%,rgba(40,14,13,.18) 78%)}
.wp-hero-art h1{font-size:clamp(38px,5.2vw,68px);max-width:13ch}
.hi .wp-hero-art h1{font-size:clamp(28px,4vw,50px)}
.wp-hero-art .tag{max-width:40ch;font-size:clamp(17px,1.7vw,21px)}
.wp-hero-art .chip{background:rgba(201,162,39,.92);color:#2e0f0e}
.wp-hero-art .chip .n,.wp-hero-art .chip .sep{color:#5c2422}
.wp-hero-art .chip .hi-lbl{color:#5c2422}
@media(max-width:760px){
  .wp-hero-art::after{background:
    linear-gradient(180deg,rgba(40,14,13,.55) 0%,rgba(40,14,13,.35) 40%,rgba(40,14,13,.92) 100%)}
  .wp-hero-art{align-items:flex-end}
}

/* The Trustee Dharma pairs were washing out on maroon. */
.section.wp-dark .wp-pairs>*{border-bottom-color:rgba(201,162,39,.4)}
.section.wp-dark .wp-pairs .k{color:#e8cd72;font-weight:600}
.section.wp-dark .wp-pairs .v{color:var(--wp-cream)}
.section.wp-dark .wp-duo>:last-child{border-left-color:var(--wp-gold)}
.section.wp-dark .hindi-note{color:var(--wp-cream-dim)}
.section.wp-dark .wp-open .sub{color:#dcc4ad}
.section.wp-dark .objects-home .oh-short{color:#dcc4ad}

/* ---------- The page opener, in the white paper's language ---------- */
.wp-open-hero{position:relative;background:var(--wp-maroon);display:flex;align-items:flex-end;
  min-height:clamp(360px,46vh,560px);overflow:hidden}
.wp-open-hero.flat{min-height:0;align-items:stretch}
.wp-open-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wp-open-hero::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(40,14,13,.78) 0%,rgba(40,14,13,.40) 34%,rgba(40,14,13,.90) 100%)}
.wp-open-hero.flat::after{background:none}
.wp-open-hero .inner{position:relative;z-index:2;
  width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;
  padding-block:clamp(26px,3.4vw,44px) clamp(34px,4.6vw,60px)}
.wp-open-hero.flat .inner{padding-block:clamp(26px,3.4vw,44px) clamp(44px,5.6vw,74px)}
.wp-open-hero .crumbs{font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1;letter-spacing:.13em;font-size:15px;
  color:var(--wp-cream-dim);margin:0 0 clamp(18px,2.4vw,32px)}
.wp-open-hero .crumbs>span{display:inline-block}
.wp-open-hero .crumbs a{color:var(--wp-cream-dim)}
.wp-open-hero .crumbs a:hover{color:var(--wp-gold-2)}
.wp-open-hero .crumbs a[aria-current=page]{color:var(--wp-gold-2)}
.hi .wp-open-hero .crumbs{font-family:var(--deva);font-variant-caps:normal;
  letter-spacing:.02em;font-size:14px}
.wp-open-hero .chip{background:rgba(201,162,39,.93);color:#2e0f0e}
.wp-open-hero .chip .n,.wp-open-hero .chip .sep,.wp-open-hero .chip .hi-lbl{color:#5c2422}
.wp-open-hero h1{font-family:var(--display);color:var(--wp-cream);font-weight:400;
  font-size:clamp(40px,5.8vw,78px);line-height:1.05;margin:0;max-width:17ch;
  text-shadow:0 2px 26px rgba(30,8,7,.45)}
.hi .wp-open-hero h1{font-family:var(--deva);font-size:clamp(29px,4.2vw,54px);line-height:1.3}
.wp-open-hero .rule{width:96px;height:1px;background:var(--wp-gold);margin:24px 0 20px}
.wp-open-hero .lede{font-family:var(--display);font-style:italic;color:var(--wp-cream);
  font-size:clamp(18px,1.9vw,23px);line-height:1.5;margin:0;max-width:52ch}
.hi .wp-open-hero .lede{font-family:var(--deva);font-style:normal;line-height:1.8;
  font-size:clamp(16px,1.7vw,20px)}
/* The chapter pages set the Sanskrit name above the English one. */
.wp-open-hero h1 .ch-sa{display:block;font-family:var(--deva);color:var(--wp-gold-2);
  font-size:.52em;line-height:1.4;margin-bottom:.12em}
.wp-open-hero h1 .ch-en{display:block}

/* The old ivory opener is gone; keep the selectors harmless if anything still
   references them. */
.opener,.opener-band{display:none}

/* Headline widths */
.wp-hero-art h1{max-width:16ch}

/* No photograph behind it means no shadow under it. */
.wp-open-hero.flat h1{text-shadow:none}
.wp-open-hero.flat .chip{background:rgba(201,162,39,.93)}
/* The gold chip is loud at full strength on a flat plate; soften it there. */
.wp-open-hero.flat .chip{background:transparent;border:1px solid var(--wp-gold);
  color:var(--wp-gold-2);padding:7px 16px 8px}
.wp-open-hero.flat .chip .n,.wp-open-hero.flat .chip .sep{color:var(--wp-gold)}
.wp-open-hero.flat .chip .hi-lbl{color:var(--wp-cream-dim)}
/* Sub-navigation sits against the maroon opener; give it its own edge. */
.subnav{border-bottom:1px solid var(--line)}

/* ---------- Photograph handling, tuned per subject ---------- */
/* A hero box is wide and short; a face near the top of the frame must survive
   the crop, so bias every opener image upward rather than to its centre. */
.wp-open-hero>img{object-position:center 30%}
/* The temple is white marble and was being muddied by a scrim built for a
   sunset painting. Darken the left, where the words are, and let the building
   keep its own light. */
.wp-open-hero.temple::after,.wp-hero.temple::after{background:
  linear-gradient(100deg,rgba(40,14,13,.88) 0%,rgba(40,14,13,.66) 34%,rgba(40,14,13,.26) 62%,rgba(40,14,13,.14) 100%)}
@media(max-width:760px){
  .wp-open-hero.temple::after,.wp-hero.temple::after{background:
    linear-gradient(180deg,rgba(40,14,13,.52) 0%,rgba(40,14,13,.34) 36%,rgba(40,14,13,.92) 100%)}
}
/* Paintings carry their own darkness; they need less help. */
.wp-open-hero.art::after{background:
  linear-gradient(100deg,rgba(40,14,13,.90) 0%,rgba(40,14,13,.62) 40%,rgba(40,14,13,.16) 76%)}
@media(max-width:760px){
  .wp-open-hero.art::after{background:
    linear-gradient(180deg,rgba(40,14,13,.50) 0%,rgba(40,14,13,.34) 38%,rgba(40,14,13,.92) 100%)}
}

/* ============================================================
   THE ALTERNATION
   ------------------------------------------------------------
   The white paper alternates cream grounds with maroon ones — it is what gives
   its pages their rhythm and what the site was missing everywhere except the
   home page.

   Every page component already alternates `.section` with `.section.sand`,
   deliberately, as its "other" band. Making `.sand` maroon therefore converts
   the whole site's rhythm at once, without touching a single component.

   `.dark` stays the near-black maroon and remains the rarest, heaviest moment —
   the Deed's own clauses, the north star. So there are two weights of dark, as
   there are in the white paper.

   Everything below makes the components that can land inside a maroon band read
   correctly there. It is long because it is exhaustive: a half-converted band is
   worse than none.
   ============================================================ */

.section.sand{background:var(--wp-maroon);color:var(--wp-cream)}

/* ---- Type ---- */
.section.sand h1,.section.sand h2,.section.sand h3,.section.sand h4{color:var(--wp-cream)}
.section.sand p,.section.sand li,.section.sand dd,.section.sand span{color:var(--wp-cream)}
.section.sand .eyebrow{color:var(--wp-gold-2)}
.section.sand .eyebrow .hi-alt{color:var(--wp-cream-dim)}
.section.sand .muted,.section.sand .small,.section.sand .sub{color:var(--wp-cream-dim)}
.section.sand .lede,.section.sand .statement{color:var(--wp-cream)}
.section.sand .prose p{color:var(--wp-cream)}
.section.sand .prose strong{color:var(--wp-gold-2)}
.section.sand .hindi-note{color:var(--wp-cream-dim)}
.section.sand .tick{background:var(--wp-gold)}
.section.sand .hr-gold{background:var(--wp-gold)}

/* ---- Rules and edges ---- */
.section.sand .card,.section.sand .item,.section.sand .objects li,
.section.sand .timeline li,.section.sand .people li,.section.sand .verse,
.section.sand .chapter-index,.section.sand .chapter-index a,
.section.sand .object-row,.section.sand .stat > *{border-color:var(--wp-rule)}
.section.sand .card ul li{border-top-color:rgba(201,162,39,.28)}
.section.sand hr{border-color:var(--wp-rule)}

/* ---- Links and actions ---- */
.section.sand a{color:var(--wp-cream)}
.section.sand .more{color:var(--wp-gold-2);border-bottom-color:var(--wp-gold)}
.section.sand .more:hover{color:#fff;border-bottom-color:var(--wp-cream)}
.section.sand .btn{background:var(--wp-gold);color:#33110f;border-color:var(--wp-gold)}
.section.sand .btn:hover{background:var(--wp-gold-2);border-color:var(--wp-gold-2);color:#2e0f0e}
.section.sand .btn.gold,.section.sand .btn.ghost{background:transparent;color:var(--wp-cream);
  border-color:rgba(243,232,216,.5)}
.section.sand .btn.gold:hover,.section.sand .btn.ghost:hover{background:rgba(243,232,216,.14);
  border-color:var(--wp-cream);color:#fff}

/* ---- The numbered lists ---- */
.section.sand .objects li::before{color:var(--wp-gold-2)}
.section.sand .objects strong{color:var(--wp-cream)}
.section.sand .objects p{color:var(--wp-cream-dim)}
.section.sand .timeline time{color:var(--wp-gold-2)}
.section.sand .timeline time span{color:var(--wp-cream-dim) !important}
.section.sand .timeline h3,.section.sand .timeline .sa{color:var(--wp-gold-2)}
.section.sand .timeline p{color:var(--wp-cream)}
.section.sand .timeline strong{color:var(--wp-cream) !important}
.section.sand .timeline .muted{color:var(--wp-cream-dim) !important}
.section.sand .pillars div{border-left-color:var(--wp-gold)}
.section.sand .pillars b{color:var(--wp-gold-2)}
.section.sand .pillars span{color:var(--wp-cream)}
.section.sand .people span{color:var(--wp-cream-dim)}

/* ---- Shlokas: the white paper's own verse treatment ---- */
.section.sand .verse .ref{color:var(--wp-gold)}
.section.sand .verse .sa{color:var(--wp-gold-2)}
.section.sand .verse .tr{color:var(--wp-cream-dim)}
.section.sand .verse .spoken{color:var(--wp-cream-dim)}
.section.sand .verse h3{color:var(--wp-cream)}
.section.sand .verse .meaning{color:var(--wp-cream)}
.section.sand .verse .lived{color:var(--wp-cream-dim);border-top-color:var(--wp-rule)}
.section.sand .verse .lived strong{color:var(--wp-gold-2)}
.section.sand .shloka .sa{color:var(--wp-gold-2)}
.section.sand .shloka .tr{color:var(--wp-cream-dim)}
.section.sand .shloka .ref{color:var(--wp-gold)}

/* ---- The Gita text ---- */
.section.sand .gverse{border-top-color:var(--wp-rule)}
.section.sand .gsa{color:var(--wp-gold-2)}
.section.sand .giast{color:var(--wp-cream-dim)}
.section.sand .gtrans p{color:var(--wp-cream)}
.section.sand .gref{color:var(--wp-gold)}
.section.sand .speaker span:first-child{color:var(--wp-gold-2)}
.section.sand .speaker .gloss{color:var(--wp-cream-dim)}
.section.sand .chapter-index a:hover{background:rgba(201,162,39,.12)}
.section.sand .chapter-index a[aria-current=page]{background:rgba(201,162,39,.16)}
.section.sand .chapter-index .ci-n,.section.sand .chapter-index .ci-v{color:var(--wp-gold)}
.section.sand .chapter-index .ci-sa{color:var(--wp-cream)}
.section.sand .chapter-index .ci-en{color:var(--wp-cream-dim)}
.section.sand .chapter-index a[aria-current=page] .ci-sa{color:var(--wp-gold-2)}

/* ---- Questions ---- */
.section.sand .faq details{border-top-color:var(--wp-rule)}
.section.sand .faq summary{color:var(--wp-cream)}
.section.sand .faq summary:hover{color:var(--wp-gold-2)}
.section.sand .faq p{color:var(--wp-cream-dim)}

/* ---- Quotes and panels inside a maroon band ---- */
.section.sand .quote{border-left-color:var(--wp-gold);background:rgba(0,0,0,.16)}
.section.sand .quote p{color:var(--wp-cream)}
.section.sand .quote cite{color:var(--wp-gold-2)}
.section.sand .wp-panel{background:rgba(0,0,0,.22)}

/* ---- Photographs sit well on maroon; their captions need help ---- */
.section.sand .gallery figcaption,.section.sand figcaption{color:var(--wp-cream-dim)}
.section.sand .gold-frame{border-color:var(--wp-gold)}

/* ---- Definition lists (address, timings, contact) ---- */
.section.sand dt{color:var(--wp-gold-2)}
.section.sand dd,.section.sand dd a{color:var(--wp-cream)}
.section.sand dd a:hover{color:var(--wp-gold-2)}

/* ---- The onward doors ---- */
.section.sand .onward a{border-top-color:var(--wp-gold)}
.section.sand .onward .ow-eyebrow{color:var(--wp-gold-2)}
.section.sand .onward .ow-title{color:var(--wp-cream)}
.section.sand .onward .ow-text{color:var(--wp-cream-dim)}
.section.sand .onward a:hover .ow-title{color:var(--wp-gold-2)}

/* ---- The prev/next pair ---- */
.section.sand .prevnext a{color:var(--wp-cream)}
.section.sand .prevnext a span{color:var(--wp-gold)}
.section.sand .prevnext a:hover{color:var(--wp-gold-2)}
.section.sand .grid2 .card:hover h3{color:var(--wp-gold-2)}

/* ---- Focus ring has to be visible on maroon too ---- */
.section.sand :focus-visible{outline-color:var(--wp-gold-2);
  box-shadow:0 0 0 5px rgba(201,162,39,.3)}

/* ============================================================
   HEADING SCALE
   The white paper sets its section headings large and left. The site's were
   small and centred, which is most of why it read as a brochure.
   ============================================================ */
.section h2{font-size:clamp(32px,4.1vw,54px);line-height:1.08;max-width:22ch}
.hi .section h2{font-size:clamp(25px,3.1vw,39px);line-height:1.32}
.section .lead-block{max-width:none}
.section .lead-block.center,.section .center > .actions{margin-inline:0}
.section .lead-block.center{text-align:left}
.section .lead-block.center .tick.mid{margin-inline:0}
.lead-block.center h2{margin-inline:0}

/* The deep-maroon sections use the white paper's own darkest value. */
.section.dark,.northstar{background:#3a1210}
.northstar{text-align:left;padding:clamp(40px,5.5vw,76px) clamp(30px,4.5vw,64px)}
.northstar p{margin:0;max-width:24ch}
.northstar .hindi-note{margin:26px 0 0;text-align:left;max-width:46ch}
.northstar .eyebrow{color:var(--wp-gold-2)}

/* Gold, not orange, for the structural accents — marigold stays for hover only. */
.tick{background:var(--wp-gold)}
.objects li::before,.pillars b{color:var(--gold-text)}
.pillars div{border-left-color:var(--wp-gold)}
.more{border-bottom-color:var(--wp-gold)}

/* A section heading laid on a photograph is set like a hero headline but is not
   the page's h1 — a page gets one of those. */
.wp-hero h2{font-family:var(--display);color:var(--wp-cream);font-weight:400;
  font-size:clamp(38px,5.2vw,68px);line-height:1.04;margin:18px 0 0;max-width:16ch;
  text-shadow:0 2px 30px rgba(30,8,7,.5)}
.hi .wp-hero h2{font-family:var(--deva);font-size:clamp(28px,4vw,50px);line-height:1.3}

/* ---------- The illustrated marks ----------
   A second commissioned set, drawn rather than painted, on a cream ground with
   the title set into the drawing. They are 307 x 256 and are shown at that size
   or smaller — never stretched, never cropped, never laid on maroon, because
   their own ground is cream and their own lettering is part of the picture. */
.theme-mark{width:100%;max-width:307px;height:auto;border:1px solid var(--line);
  margin:0 0 20px;background:#faf5ea}
.theme .theme-mark{margin-bottom:22px;transition:border-color .2s}
.theme:hover .theme-mark{border-color:var(--wp-gold)}
.theme-mark.standalone{margin-top:26px;max-width:280px}
@media(max-width:640px){ .theme-mark{max-width:100%} }

/* ---------- The engraved chapter plates ----------
   Parchment ground, the number and name drawn into the picture. Shown at their
   own size, framed by a gold hairline, never stretched. */
.plate{display:block;width:100%;max-width:256px;height:auto;border:1px solid var(--wp-gold);
  background:#efe3cc}
.timeline time{display:flex;flex-direction:column;gap:10px;padding-top:0}
.timeline time .ch-n{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.timeline time .ch-v{font-family:var(--sans);font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.hi .timeline time .ch-n,.hi .timeline time .ch-v{font-family:var(--deva);letter-spacing:.02em;
  text-transform:none;font-size:13px}
.timeline li{grid-template-columns:276px 1fr;gap:clamp(24px,3vw,44px)}
@media(max-width:820px){
  .timeline li{grid-template-columns:1fr}
  .plate{max-width:320px}
}

/* One plate, centred, between a chapter's opener and its verses. */
.section.plate-band{padding-block:clamp(26px,3vw,40px) 0}
.section.plate-band figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.section.plate-band figcaption{font-family:var(--display);font-variant-caps:all-small-caps;
  font-feature-settings:"smcp" 1;letter-spacing:.13em;font-size:14px;color:var(--ink-3)}
.hi .section.plate-band figcaption{font-family:var(--deva);font-variant-caps:normal;
  letter-spacing:.02em;font-size:13px}

/* ============================================================
   THE IMAGE SYSTEM
   Five bodies of imagery, five jobs. Each is shown at or below its native
   size on the ground it was drawn for.
   ============================================================ */

/* ---- Line marks: no lettering, so they can sit anywhere ---- */
.line-mark{display:block;mix-blend-mode:multiply;opacity:.86;flex:none;
  /* The files are 320px square; the width/height attributes say what size the
     page wants. `auto` would let the intrinsic size win and blow the layout up,
     which is exactly what it did. */
  object-fit:contain}
.section.sand .line-mark,.section.wp-dark .line-mark{mix-blend-mode:screen;
  filter:invert(1);opacity:.62}

/* ---- Labelled ink figures: shown big enough to read their own labels ---- */
.ink-figure{margin:0;display:flex;flex-direction:column;gap:16px;align-items:center}
.ink-figure img{width:100%;max-width:460px;height:auto;mix-blend-mode:multiply}
.ink-figure.wide img{max-width:640px}
.ink-figure figcaption{font-family:var(--display);font-size:16.5px;line-height:1.6;
  color:var(--ink-2);max-width:52ch;text-align:left;
  border-top:1px solid var(--wp-gold);padding-top:14px}
.hi .ink-figure figcaption{font-family:var(--deva);line-height:1.85;font-size:15.5px}
.section.sand .ink-figure img{mix-blend-mode:screen;filter:invert(1);opacity:.9}
.section.sand .ink-figure figcaption{color:var(--wp-cream);border-top-color:var(--wp-gold)}

/* ---- A chapter opens on its plate, and its figure where it has one ---- */
.section.chapter-open{padding-block:clamp(30px,3.4vw,48px) 0}
.chapter-open-solo{display:flex;justify-content:center}
.chapter-open-duo{display:grid;grid-template-columns:256px 1fr;
  gap:clamp(30px,4vw,64px);align-items:start;max-width:var(--measure);margin-inline:auto}
.plate-figure{margin:0}
.plate-figure img{width:100%;max-width:256px;height:auto;border:1px solid var(--wp-gold)}
@media(max-width:760px){
  .chapter-open-duo{grid-template-columns:1fr;justify-items:center;gap:30px}
  .ink-figure figcaption{text-align:center}
}

/* ---- The eighteen-chapter rail, now a rail of marks ---- */
.chapter-index a{grid-template-columns:46px 24px 1fr;align-items:center;
  gap:4px 14px;padding:11px 6px}
.chapter-index .line-mark{grid-row:1 / span 2;align-self:center}
.chapter-index .ci-sa{grid-column:3}
.chapter-index .ci-en{grid-column:3;grid-row:2}
.chapter-index .ci-n{grid-column:2;grid-row:1 / span 2;align-self:center;text-align:right}
@media(max-width:760px){
  .chapter-index a{grid-template-columns:40px 22px 1fr}
}

/* Explicit sizes wherever a mark is used, so nothing depends on the file. */
.chapter-index .line-mark{width:46px;height:46px}
.theme-head .line-mark{width:64px;height:64px}
.objects-home .line-mark{width:52px;height:52px}

/* A line mark set beside a section label, reading as one unit with it. */
.theme-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.theme-head .eyebrow{margin:0}

/* The objects list, now carrying a mark in its own column. */
.objects-home a{grid-template-columns:52px clamp(40px,4.4vw,64px) 1fr auto}
.objects-home .line-mark{grid-row:1;align-self:center}
@media(max-width:640px){
  .objects-home a{grid-template-columns:40px 30px 1fr}
  .objects-home .oh-clause{grid-column:3}
}

/* A figure given a section of its own, with the argument beside it. */
.section.figure-band{background:var(--ground-2)}
.figure-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4.4vw,72px);
  align-items:center}
@media(max-width:820px){ .figure-duo{grid-template-columns:1fr;gap:34px} }

/* ---------- Final polish ---------- */
/* The clause reference was floating a screen-width away from the object it
   labels. Hold the list to a reading measure. */
.objects-home{max-width:78ch;margin-inline:auto}
.objects-home .oh-clause{align-self:center}

/* A line mark needs air around it, not a box. */
.objects-home .line-mark{opacity:.8}
.section.sand .objects-home .line-mark,.section.wp-dark .objects-home .line-mark{opacity:.72}

/* The plate and the figure should sit on the same baseline. */
.chapter-open-duo{align-items:center}

/* Figures inside a prose column stay inside the measure and get room. */
.prose .ink-figure{margin:34px 0}
.prose .ink-figure img{max-width:400px}

/* On a phone every figure and plate goes full width and centres. */
@media(max-width:640px){
  .ink-figure img,.ink-figure.wide img{max-width:100%}
  .theme-head{gap:12px}
  .theme-head .line-mark{width:48px;height:48px}
}