/* ============================================================
   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);
  /* The band rhythm. Each .section carries this above and below, so where two
     bands of different ground meet the reader crosses twice this much empty
     space: it was 152px on a phone and 248px on a laptop, and read as a hole
     rather than as breathing room. */
  --rhythm:clamp(54px,6.4vw,92px);
  --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 ----------
   Five sections with drop-downs on a pointer, a full drawer on a phone.
   No JavaScript runs on this site, so the drop-down opens on :hover for the
   mouse and on :focus-within for the keyboard, and the drawer is a <details>.
-------------------------------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(251,247,240,.96);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}

/* utility bar */
.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:38px}
.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;min-width:0}
.hdr-top .sa{font-family:var(--deva);color:var(--marigold);letter-spacing:.02em;
  text-transform:none;font-size:13.5px}
.hdr-top .est-line{font-family:var(--sans);letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.hi .hdr-top .est-line{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.hdr-top-right{display:flex;align-items:center;gap:20px;flex:none}
.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}

/* brand row */
.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;min-width:0}
.brand img{width:50px;height:44px;object-fit:contain;flex:none}
.brand b{font-family:var(--display);font-size:25px;font-weight:500;line-height:1.02;
  display:block;color:var(--maroon)}
.hi .brand b{font-family:var(--deva);font-size:21px;font-weight:500}
.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}

/* main navigation */
.mainnav{grid-column:2/4;justify-self:end}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;gap:34px}
.mainnav>ul>li{position:relative;display:flex;align-items:stretch}
.mainnav>ul>li>a{display:flex;align-items:center;gap:7px;height:86px;
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s}
.hi .mainnav>ul>li>a{font-family:var(--deva);letter-spacing:.02em;text-transform:none;
  font-size:15.5px;font-weight:600}
.mainnav>ul>li>a:hover{color:var(--maroon)}
.mainnav>ul>li>a[aria-current=page]{border-bottom-color:var(--marigold);color:var(--maroon)}
.mainnav .caret{width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  opacity:.5;transition:transform .18s,opacity .18s}
.mainnav>ul>li:hover>a .caret,.mainnav>ul>li:focus-within>a .caret{opacity:1}

/* the drop-down itself */
.mainnav .dd{position:absolute;top:100%;left:50%;translate:-50% 0;min-width:248px;
  background:var(--ground);border:1px solid var(--line);
  box-shadow:0 22px 46px rgba(42,33,28,.16);padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:70}
.mainnav .dd::before{content:"";position:absolute;top:-3px;left:0;right:0;height:3px;background:var(--marigold)}
.mainnav>ul>li:hover>.dd,.mainnav>ul>li:focus-within>.dd{opacity:1;visibility:visible;transform:translateY(0)}
.mainnav .dd ul{display:block;gap:0}
.mainnav .dd li{display:block}
.mainnav .dd a{display:block;padding:11px 24px;font-family:var(--sans);font-size:13.5px;
  font-weight:600;letter-spacing:.03em;text-transform:none;color:var(--ink-2);white-space:nowrap}
.hi .mainnav .dd a{font-family:var(--deva);font-size:15.5px;letter-spacing:.02em}
.mainnav .dd a:hover{background:var(--sand,rgba(169,128,60,.09));color:var(--maroon)}
.mainnav .dd a[aria-current=page]{color:var(--maroon);box-shadow:inset 3px 0 0 var(--marigold)}

/* language pill */
.lang{display:inline-flex;border:1px solid var(--line);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;flex:none}
.lang a{padding:6px 12px;color:var(--ink-3);line-height:1.6}
.lang a[aria-current=true]{background:var(--maroon);color:#fff}

/* phone drawer */
.hdr .drawer{display:none;position:static;justify-self:end}
.hdr .drawer>summary{list-style:none;cursor:pointer;color:var(--maroon);
  display:flex;align-items:center;justify-content:center;min-width:46px;min-height:46px}
.hdr .drawer>summary::-webkit-details-marker{display:none}
.hdr .drawer .ic-close{display:none}
.hdr .drawer[open]>summary .ic-open{display:none}
.hdr .drawer[open]>summary .ic-close{display:block}
/* `position:fixed` cannot escape .hdr — its backdrop-filter makes it the
   containing block for fixed descendants, so the panel collapsed to the height
   of the header and the page showed straight through it. Absolute against the
   header, with its own scroll, does what was intended. */
.drawer-panel{position:absolute;left:0;right:0;top:100%;
  max-height:calc(100dvh - var(--hdr-h));overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--ground);padding:6px var(--gutter) 44px;
  border-top:1px solid var(--line);box-shadow:0 30px 50px rgba(42,33,28,.22);z-index:80}
.drawer-panel nav{display:block}
.drawer-panel .lvl1{display:block;padding:16px 0 14px;font-family:var(--display);
  font-size:24px;font-weight:500;color:var(--maroon);border-bottom:1px solid var(--line-soft)}
.hi .drawer-panel .lvl1{font-family:var(--deva);font-size:20px}
.drawer-group{border-bottom:1px solid var(--line-soft)}
.drawer-group .lvl1{border-bottom:0;padding-bottom:6px}
.drawer-panel .lvl2{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;padding:0 0 16px}
.drawer-panel .lvl2 a{display:block;padding:9px 0;font-family:var(--sans);font-size:14.5px;
  color:var(--ink-2);line-height:1.4}
.hi .drawer-panel .lvl2 a{font-family:var(--deva);font-size:15.5px}
.drawer-panel a[aria-current=page]{color:var(--maroon);font-weight:700}
.drawer-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;
  margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.drawer-foot .lang{border-color:var(--line)}
.drawer-foot .lang a{padding:10px 18px;font-size:12px}
.drawer-tel{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.06em;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}.mainnav{display:none}.hdr .drawer{display:block}
  .mainnav>ul>li>a{height:76px}
  .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 .est-line,.hdr-top .est-sep{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 .drawer>summary{min-height:46px;min-width:46px;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,.wp-hero>picture>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:stretch;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,.wp-band>picture>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,.wp-hero-art>picture>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,.wp-open-hero>picture>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,.wp-open-hero>picture>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}
}


/* ---------- The WebP build wraps every <img> in <picture>, which broke every
   direct-child rule written as `.x > img`. `display:contents` removes the
   wrapper's own box so the image keeps its place in the parent's layout, and
   the rules above now also match through it. ---------- */
picture{display:contents}


/* ================= LAYOUT CORRECTIONS, 13 September =====================

   1. A <figure> carries a 1em/40px margin from the browser's own stylesheet.
      The full-bleed photograph bands were therefore inset by 40px on each side
      with a white strip down one edge — which is what made them look broken.
   2. The theme marks were capped at 307px because that was the size the file
      had been generated at. They are 921px now, so let them fill the column.
   3. The gallery mixed 4:3 and 3:4 tiles in one grid, so no two rows lined up
      and the captions floated at six different heights.
   4. The chapter index was a 150px-wide plate beside a wide empty band. It is
      a grid of eighteen cards now, and the artwork is the size of the card.
======================================================================== */

.wp-band{margin:0}
figure.wp-band,figure.wp-hero,figure.wp-open-hero{margin:0}

.theme-mark{max-width:100%}
.theme .theme-mark{margin-bottom:20px}

/* A gallery page wants one shape, repeated. */
.gallery.uniform figure.portrait .gold-frame,.gallery.uniform .gold-frame{aspect-ratio:4/3}
.gallery.uniform figcaption{font-size:16px;line-height:1.45}

/* ---------- The eighteen chapters, as a grid of plates ---------- */
.chgrid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(30px,3.6vw,54px)}
.chgrid>li{margin:0}
.chgrid a{display:block;color:inherit;height:100%}
/* The plates carry their own lettering across the top, so they are never
   cropped to a common shape — the title would be the first thing to go. Each
   is shown whole, at its own proportions. */
.chgrid .plate-frame{display:block;position:relative;overflow:hidden;background:#f3ead9;
  border:1px solid var(--line)}
.chgrid .plate-frame img{width:100%;height:auto;display:block;transition:transform .6s ease}
.chgrid a:hover .plate-frame img{transform:scale(1.035)}
.chgrid a:hover .plate-frame{border-color:var(--wp-gold)}
.chgrid .ch-meta{display:flex;justify-content:space-between;gap:14px;margin:16px 0 8px;
  font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .chgrid .ch-meta{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.chgrid h3{font-family:var(--deva);font-size:22px;font-weight:400;color:var(--maroon);
  margin:0 0 6px;line-height:1.5}
.chgrid .ch-en{margin:0 0 10px;font-family:var(--display);font-size:18px;font-weight:500;
  color:var(--maroon)}
.chgrid .ch-en i{font-style:italic;font-weight:400;color:var(--ink-3);font-size:15px;margin-left:8px}
.chgrid .ch-note{margin:0 0 14px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.chgrid .more{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--maroon);border-bottom:1px solid var(--marigold);
  padding-bottom:3px}
.hi .chgrid .more{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
@media(max-width:1024px){ .chgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .chgrid{grid-template-columns:1fr;gap:38px} }

/* The five objects on the home page: the line marks were 46px of smudge. */
.objects-home img.line-mark,.objects img.line-mark{width:64px;height:64px}
@media(max-width:640px){ .objects-home img.line-mark,.objects img.line-mark{width:52px;height:52px} }

@media(max-width:760px){
  /* On a phone the headline sits over the brightest part of a tall crop. */
  .wp-hero::after{background:
    linear-gradient(180deg,rgba(40,14,13,.86) 0%,rgba(40,14,13,.52) 34%,rgba(40,14,13,.62) 62%,rgba(40,14,13,.95) 100%)}
  .wp-open-hero::after{background:
    linear-gradient(180deg,rgba(40,14,13,.80) 0%,rgba(40,14,13,.55) 40%,rgba(40,14,13,.93) 100%)}
  .wp-hero .est{font-size:13px;letter-spacing:.1em;line-height:1.7}
}

/* ================= The three new pages ==================================
   /contact, /festivals and the gallery groups were written against classes
   that did not exist yet, so they rendered as one unstyled column.
======================================================================== */

/* ---------- /contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,38px)}
.contact-card{border:1px solid var(--line);background:#fff;
  padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:2px}
.contact-card .eyebrow{margin:0 0 16px}
.contact-card .big{margin:0 0 4px;font-family:var(--display);font-size:clamp(20px,2vw,25px);
  font-weight:500;color:var(--maroon);line-height:1.35}
.hi .contact-card .big{font-family:var(--deva);font-size:clamp(17px,1.7vw,20px);font-weight:500}
.contact-card .big a{color:inherit;border-bottom:1px solid var(--marigold);padding-bottom:2px}
.contact-card .big a:hover{color:var(--ink)}
.contact-card .muted{margin:14px 0 0;font-size:14.5px;line-height:1.65;color:var(--ink-3)}
.contact-card>p:last-child{margin-bottom:0}
.contact-card a[href^="http"]{font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.08em;color:var(--maroon)}
.hi .contact-card a[href^="http"]{font-family:var(--deva);letter-spacing:.02em;font-size:15px}
@media(max-width:820px){ .contact-grid{grid-template-columns:1fr} }

/* ---------- /festivals ---------- */
.fest-list{margin-top:clamp(26px,3.4vw,44px);display:grid;gap:0}
.fest{display:grid;grid-template-columns:270px 1fr;gap:clamp(28px,4vw,58px);
  padding:clamp(26px,3vw,38px) 0;border-top:1px solid var(--line);align-items:start}
.fest:last-child{border-bottom:1px solid var(--line)}
.section.sand .fest,.section.wp-dark .fest{border-color:var(--wp-rule,rgba(201,162,39,.34))}
.fest-when>*{margin:0}
.fest-tithi{font-family:var(--display);font-size:17px;font-style:italic;color:var(--maroon);
  line-height:1.5}
.hi .fest-tithi{font-family:var(--deva);font-style:normal;font-size:16px}
.section.sand .fest-tithi{color:var(--wp-gold-2,#e8cd72)}
.fest-season{margin-top:8px;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.hi .fest-season{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.section.sand .fest-season{color:#e8cd72}
.fest-date{margin-top:12px;font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.section.sand .fest-date{color:var(--wp-cream-dim,#dcc4ad)}
.fest-body h3{margin:0 0 10px;font-family:var(--display);font-size:clamp(23px,2.2vw,29px);
  font-weight:500;color:var(--maroon);line-height:1.25}
.hi .fest-body h3{font-family:var(--deva);font-size:clamp(20px,1.9vw,24px);font-weight:500}
.section.sand .fest-body h3{color:var(--wp-cream,#f3e8d8)}
.fest-body p{margin:0;font-size:16.5px;line-height:1.78;color:var(--ink-2);max-width:62ch}
.section.sand .fest-body p{color:var(--wp-cream-dim,#dcc4ad)}
@media(max-width:820px){
  .fest{grid-template-columns:1fr;gap:14px}
  .fest-when{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px}
  .fest-when>*{margin:0}
  .fest-date{margin-top:0;flex-basis:100%}
}

/* ---------- a plain descriptive list ---------- */
.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.plainlist li{padding:24px 0;border-top:1px solid var(--line)}
.plainlist li:last-child{border-bottom:1px solid var(--line)}
.plainlist b{display:block;font-family:var(--display);font-size:22px;font-weight:500;
  color:var(--maroon)}
.hi .plainlist b{font-family:var(--deva);font-size:19px}
.plainlist .when{display:block;margin-top:5px;font-family:var(--sans);font-size:10.5px;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.hi .plainlist .when{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.plainlist p{margin:12px 0 0;font-size:16px;line-height:1.75;color:var(--ink-2);max-width:60ch}

/* ============================================================ EDITORIAL BLOCK
   Who published a page, on what basis, and when it was last looked at. Quiet
   by design: it is an assurance, not a claim, and it sits below the content it
   vouches for rather than in front of it. */
.editorial{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;max-width:var(--measure)}
.editorial .eyebrow{margin-bottom:14px}
.editorial dl{margin:0;display:grid;gap:10px}
.editorial dl>div{display:grid;grid-template-columns:170px 1fr;gap:4px 20px;align-items:baseline}
.editorial dt{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .editorial dt{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.editorial dd{margin:0;font-size:15px;line-height:1.7;color:var(--ink-2)}
.editorial a{color:var(--maroon);text-decoration:underline;text-underline-offset:2px}
@media(max-width:640px){.editorial dl>div{grid-template-columns:1fr;gap:2px}}

/* ========================================================== VERSE EXPLORER
   All 700 verses as an index — reference, speaker, opening line, and the terms
   the verse uses. Deliberately NOT the full text: that lives on the chapter
   pages, and reproducing it here would put the same words at two addresses.

   The whole list is in the HTML before any script runs. The controls are
   hidden until the script enables them, so nothing on the page is a dead
   control for a reader without JavaScript. */
.vx-note p{font-size:15.5px;color:var(--ink-3)}
.vx-controls{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:16px 20px;
  align-items:end;padding:22px 24px;background:var(--ground-2);border:1px solid var(--line);
  margin-bottom:30px}
.vx-field{margin:0;display:grid;gap:6px}
.vx-field label{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .vx-field label{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.vx-field input,.vx-field select{width:100%;padding:11px 12px;font-family:var(--sans);
  font-size:15px;color:var(--ink);background:var(--ground);border:1px solid var(--line);
  border-radius:0;appearance:none}
.hi .vx-field input,.hi .vx-field select{font-family:var(--deva)}
.vx-field input:focus,.vx-field select:focus{outline:2px solid var(--maroon);outline-offset:-1px}
.vx-count{grid-column:1/-1;margin:0;font-family:var(--sans);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.hi .vx-count{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}

.vx-list{list-style:none;margin:0;padding:0}
.vx-row{display:grid;grid-template-columns:64px 104px 1fr;gap:4px 18px;padding:16px 0;
  border-top:1px solid var(--line-soft);align-items:baseline}
.vx-row:last-child{border-bottom:1px solid var(--line-soft)}
.vx-ref{grid-row:span 2;font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:.06em;color:var(--maroon);text-decoration:none}
.vx-ref:hover{text-decoration:underline;text-underline-offset:3px}
.vx-sp{grid-row:span 2;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.hi .vx-sp{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.vx-sa{font-family:var(--deva);font-size:17px;line-height:1.65;color:var(--ink)}
.vx-iast{font-family:var(--display);font-style:italic;font-size:14.5px;color:var(--ink-3)}
.vx-tags{grid-column:3;display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.vx-tag{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text);border:1px solid var(--line);padding:3px 8px}
.hi .vx-tag{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:12.5px}
.vx-empty{margin:40px 0;text-align:center;color:var(--ink-3);font-size:16px}
@media(max-width:820px){
  .vx-controls{grid-template-columns:1fr 1fr;padding:18px}
  .vx-search{grid-column:1/-1}
  .vx-row{grid-template-columns:56px 1fr;gap:2px 14px}
  .vx-sp{grid-row:auto;grid-column:2}
  .vx-sa,.vx-iast{grid-column:2}
  .vx-tags{grid-column:2}
}

/* ============================================================ THE VOCABULARY
   One card per Sanskrit term: the word, what it means, how often the Gita says
   it, and how those occurrences fall across the eighteen chapters. */
.cxgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;background:var(--line)}
.cxcard{background:var(--ground);padding:26px 26px 24px;display:flex;flex-direction:column;gap:0}
.cx-head{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cx-sa{font-family:var(--deva);font-size:26px;line-height:1.2;color:var(--maroon)}
.cx-iast{font-family:var(--display);font-style:italic;font-size:16px;color:var(--gold-text)}
.cxcard h3{margin:10px 0 0;font-family:var(--display);font-size:20px;font-weight:500;color:var(--ink)}
.hi .cxcard h3{font-family:var(--deva);font-size:18px}
.cx-gloss{margin:8px 0 0;font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.cx-count{margin:16px 0 0;font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;gap:14px;flex-wrap:wrap}
.hi .cx-count{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.cx-count a{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.cx-first{color:var(--ink-3)}
.cx-theme{margin:10px 0 0}
.cx-theme a{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-text)}
.hi .cx-theme a{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.cx-theme a:hover{color:var(--maroon)}
/* Eighteen bars, one per chapter — enough to see the shape of a word's use
   without pretending to be a chart. */
.cx-spread{margin-top:18px;display:flex;align-items:flex-end;gap:2px;height:26px}
.cx-spread>span{flex:1;background:var(--line);min-height:2px}
.cx-spread>span.on{background:var(--maroon-soft)}

/* ================================================================= RESEARCH
   Tables of counts. The figures are the content, so they get room and a
   readable alignment rather than decoration. */
.rs-h{margin:0 0 var(--gap-h2);font-family:var(--display);font-size:clamp(26px,2.6vw,34px);
  font-weight:500;color:var(--maroon)}
.hi .rs-h{font-family:var(--deva);font-size:clamp(22px,2.2vw,28px)}
.section.sand .rs-h{color:var(--wp-cream,#f3e8d8)}
/* The answer object: the sentence this page exists to state. `.lede` is
   capped at 34ch for a display line, which breaks a sentence carrying four
   numbers into ribbons. This one is meant to be read, and quoted, whole. */
.rs-answer .lede{max-width:58ch;font-size:20px;line-height:1.7;color:var(--ink)}
.hi .rs-answer .lede{font-size:19px}
.rs-answer .lede strong{color:var(--maroon);font-weight:700}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rs-table{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px}
.hi .rs-table{font-family:var(--deva)}
.rs-table th,.rs-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:baseline;white-space:nowrap}
.rs-table thead th{font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-text);border-bottom:1px solid var(--gold)}
.hi .rs-table thead th{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}
.rs-table tbody th{font-weight:700;color:var(--ink)}
.rs-table .num{text-align:right;font-variant-numeric:tabular-nums}
.rs-table .zero{color:var(--line)}
.rs-table tfoot th,.rs-table tfoot td{border-top:1px solid var(--gold);border-bottom:none;
  font-weight:700;color:var(--ink)}
.rs-table a{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.rs-table td[lang="sa"],.rs-table th span[lang="sa"]{font-family:var(--deva);font-size:16px}
.section.sand .rs-table th,.section.sand .rs-table td{color:var(--wp-cream-dim,#dcc4ad);
  border-bottom-color:rgba(201,162,39,.22)}
.section.sand .rs-table tbody th{color:var(--wp-cream,#f3e8d8)}
.section.sand .rs-table thead th{color:var(--wp-gold-2,#e0bf55);border-bottom-color:var(--wp-rule)}
.section.sand .rs-table a{color:var(--wp-gold-2,#e0bf55)}
.section.sand .rs-table .zero{color:rgba(201,162,39,.3)}
.cite{font-family:var(--sans);font-size:14.5px;line-height:1.8;color:var(--ink-2);
  padding:16px 20px;background:var(--ground);border-left:2px solid var(--gold)}
.section.sand .cite{background:rgba(0,0,0,.14);color:var(--wp-cream-dim,#dcc4ad);
  border-left-color:var(--wp-gold,#c9a227)}
.prose h3{margin:34px 0 12px;font-family:var(--display);font-size:21px;font-weight:500;
  color:var(--maroon)}
.hi .prose h3{font-family:var(--deva);font-size:19px}
.section.sand .prose h3{color:var(--wp-gold-2,#e0bf55)}
@media(max-width:640px){
  .rs-table th,.rs-table td{padding:10px 12px;font-size:14px}
}

/* A section whose content introduces the one after it: keep the opening
   rhythm, drop the closing gap, so a note and the thing it is a note about do
   not read as two unrelated blocks separated by a field of nothing. */
.section.flush-b{padding-block-end:0}

/* ============================================================
   THE WRITTEN LAYER
   Concept pages, the daily-life pages, the four speakers, and the
   verses the Trust has written about.

   One idea runs through all of it: the answer comes first and it
   looks like the answer. `.answer-first` is the only block on these
   pages set at that size, so a reader arriving mid-scroll can see
   where the page actually answers them. Everything below it is
   elaboration and is typeset as such.

   The second idea is that the text and the Trust's reading of it
   must never be mistaken for one another. In `.cites` the Sanskrit
   and both translations are the text; `.cite-note` — indented behind
   its own gold rule — is the Trust. A reader must be able to
   disagree with the note and still trust the verse above it, and
   that is only possible if the eye can tell them apart.
   ============================================================ */

/* ---- the answer, first ---- */
.answer-first{max-width:var(--measure);margin-inline:auto;border-left:3px solid var(--marigold);
  padding:4px 0 4px clamp(20px,3vw,34px)}
.ans-q{font-family:var(--display);font-size:clamp(23px,2.5vw,31px);line-height:1.3;color:var(--maroon);
  font-weight:400;margin:0 0 18px;text-wrap:balance}
.hi .ans-q{font-family:var(--deva);font-size:clamp(19px,2vw,25px);line-height:1.55}
.ans-a{font-size:clamp(17.5px,1.55vw,19.5px);line-height:1.74;color:var(--ink);margin:0;max-width:64ch}
.hi .ans-a{font-family:var(--deva);line-height:1.9}
.ans-src{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-text);margin:22px 0 0;font-weight:700}
.hi .ans-src{font-family:var(--deva);letter-spacing:.03em;text-transform:none;font-size:13.5px}

/* ---- a note that points beyond the text, where a reader needs one ---- */
.carenote{max-width:var(--measure);margin-inline:auto;background:var(--ground-2);
  border:1px solid var(--gold);padding:clamp(20px,2.6vw,30px)}
.carenote p{margin:0;font-size:16px;line-height:1.78;color:var(--ink-2)}
.hi .carenote p{line-height:1.92}

/* ---- the verses a page rests on ---- */
.cites{margin-top:34px}
.cites ol{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3vw,42px)}
.cites li{border-top:1px solid var(--line);padding-top:22px}
.cite-ref{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;margin:0 0 14px;
  font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.cite-ref a{color:var(--maroon);border-bottom:1px solid var(--marigold);padding-bottom:3px}
.cite-spoke{color:var(--ink-3);letter-spacing:.13em}
.hi .cite-ref{font-family:var(--deva);letter-spacing:.03em;text-transform:none;font-size:14px}
.cites .sa{font-size:clamp(17px,1.55vw,20px);line-height:1.95;color:var(--maroon);margin:0 0 10px}
.cite-tr{font-family:var(--display);font-size:17.5px;line-height:1.62;color:var(--ink-2);
  margin:0 0 16px;max-width:62ch}
.hi .cite-tr{font-family:var(--deva);font-size:16.5px;line-height:1.85}
.cite-note{margin:0;font-size:15.5px;line-height:1.76;color:var(--ink);max-width:62ch;
  border-left:2px solid var(--gold);padding-left:16px}
.hi .cite-note{line-height:1.9}

/* ---- the misreading, named ---- */
.notthis{max-width:var(--measure);margin-inline:auto}
.nt-claim{font-family:var(--display);font-style:italic;font-size:clamp(19px,2vw,24px);line-height:1.45;
  margin:0 0 18px;color:var(--maroon);max-width:52ch}
.hi .nt-claim{font-family:var(--deva);font-style:normal;font-size:clamp(17px,1.7vw,21px);line-height:1.7}
.nt-answer{font-size:17px;line-height:1.76;margin:0;max-width:62ch}
.hi .nt-answer{line-height:1.9}

/* ---- three or four things a person can actually do ---- */
.dolist{list-style:none;counter-reset:d;margin:0;padding:0;display:grid;gap:24px}
.dolist li{counter-increment:d;position:relative;padding-left:52px;font-size:16.5px;line-height:1.76}
.dolist li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:var(--display);font-size:21px;font-weight:500;color:var(--gold-text)}

/* ---- onward words ---- */
.chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:baseline;gap:9px;padding:9px 16px;border:1px solid var(--line);
  background:var(--ground);font-family:var(--sans);font-size:14px;color:var(--ink-2)}
.hi .chips a{font-family:var(--deva);font-size:15px}
.chips a:hover{border-color:var(--marigold);color:var(--maroon)}
.chips [lang=sa]{font-family:var(--deva);color:var(--maroon);font-size:15.5px}
.cxcard h3 a{border-bottom:1px solid var(--marigold);padding-bottom:2px}

/* ---- the daily-life index ---- */
/* Hairlines drawn by each card rather than by a coloured gap behind the grid:
   seventeen cards do not divide evenly into four columns, and a background
   showing through the empty cells of the last row reads as a large blank
   panel somebody forgot to fill. */
.lifegrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(278px,1fr));gap:1px;background:var(--ground)}
.lifegrid li{background:var(--ground);box-shadow:0 0 0 1px var(--line)}
.lifegrid a{display:block;height:100%;padding:clamp(22px,2.4vw,30px)}
.lifegrid a:hover{background:var(--ground-2)}
.lifegrid h3{font-size:21px;margin:0 0 10px}
.hi .lifegrid h3{font-size:19px}
.lg-q{margin:0 0 18px;font-size:15px;line-height:1.7;color:var(--ink-2)}
.lg-refs{margin:0;font-family:var(--sans);font-size:11px;letter-spacing:.14em;color:var(--gold-text);
  font-weight:700}
.lg-care{margin:10px 0 0;font-family:var(--sans);font-size:12.5px;color:var(--ink-3)}
.hi .lg-care,.hi .lg-refs{font-family:var(--deva);letter-spacing:.02em;font-size:13.5px}

/* ---- the four speakers ---- */
.speakgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line)}
.speakgrid li{background:var(--ground)}
.speakgrid a{display:block;height:100%;padding:clamp(24px,2.6vw,34px)}
.speakgrid a:hover{background:var(--ground-2)}
.sp-sa{font-family:var(--deva);font-size:30px;line-height:1.3;color:var(--marigold);margin:0 0 12px}
.speakgrid h3{font-size:22px;margin:0 0 8px}
.sp-role{margin:0 0 22px;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.sp-bar{display:block;height:6px;background:var(--line-soft);margin:0 0 12px}
.sp-bar span{display:block;height:100%;background:var(--marigold)}
.sp-count{margin:0;font-family:var(--sans);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.sp-count b{color:var(--maroon);font-size:15px}
.hi .sp-count{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}

/* ---- the counted facts on a speaker's page ---- */
.factrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(20px,2.6vw,40px);margin:26px 0 0}
.fact{border-top:1px solid var(--line);padding-top:16px}
.fact b{display:block;font-family:var(--display);font-size:clamp(32px,4vw,48px);font-weight:300;
  line-height:1;color:var(--maroon)}
.fact span{display:block;margin-top:8px;font-family:var(--sans);font-size:10.5px;color:var(--ink-3);
  letter-spacing:.18em;text-transform:uppercase;font-weight:700}
.hi .fact span{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}

/* Verses spoken per chapter. Eighteen numbers drawn in CSS rather than paid
   for in a charting library that would block the render of every page. */
.chapbars{display:flex;align-items:flex-end;gap:4px;height:150px;margin:40px 0 12px;padding-bottom:20px}
.chapbars>span{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;position:relative}
.chapbars>span>span{display:block;min-height:2px;background:var(--line-soft)}
.chapbars>span>span.on{background:var(--marigold)}
.chapbars em{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-style:normal;
  font-family:var(--sans);font-size:9.5px;color:var(--ink-3)}

/* ---- a single verse at its own address ---- */
.versefull{max-width:var(--measure);margin-inline:auto;text-align:center}
.versefull .spoken{font-family:var(--deva);font-size:16px;color:var(--gold-text);margin:0 0 28px}
.vf-block{margin:0 0 28px}
.vf-n{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;font-weight:700;
  color:var(--ink-3);margin-bottom:12px}
.versefull .sa{font-size:clamp(20px,2.3vw,29px);line-height:2;color:var(--maroon);margin:0 0 14px}
.versefull .tr{font-family:var(--display);font-style:italic;font-size:16px;line-height:1.6;
  color:var(--ink-3);margin:0}
.vf-tr{border-top:1px solid var(--line);padding-top:28px;margin-top:32px}
.vf-main{font-family:var(--display);font-size:clamp(19px,2vw,23px);line-height:1.6;color:var(--ink);
  margin:0 auto;max-width:60ch}
.hi .vf-main{font-family:var(--deva);font-size:clamp(17px,1.7vw,20px);line-height:1.88}
.vf-alt{margin:20px auto 0;max-width:60ch;font-size:15.5px;line-height:1.76;color:var(--ink-3)}
.vf-alt strong{color:var(--gold-text)}
.vmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(28px,3.4vw,54px)}
.relverses{list-style:none;margin:28px 0 16px;padding:0;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.relverses li{background:var(--ground)}
.relverses a{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:16px 20px;align-items:baseline}
.relverses a:hover{background:var(--ground-2)}
.rv-ref{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--maroon)}
.rv-text{font-size:15.5px;line-height:1.65;color:var(--ink-2)}

/* ---- the term, in the margin of its own page ---- */
.cx-term{font-family:var(--deva);font-size:clamp(36px,4.2vw,56px);line-height:1.2;color:var(--maroon);margin:0}
.sticky .cx-iast{display:block;font-family:var(--display);font-style:italic;font-size:17px;
  color:var(--ink-3);margin:6px 0 22px}
.more-wrap{margin-top:26px}

/* ---- the same, on the maroon bands ---- */
.section.sand .answer-first{border-left-color:var(--wp-gold)}
.section.sand .ans-q,.section.sand .nt-claim{color:var(--wp-gold-2)}
.section.sand .ans-a,.section.sand .nt-answer{color:var(--wp-cream)}
.section.sand .ans-src{color:var(--wp-gold-2)}
.section.sand .carenote{background:rgba(0,0,0,.16);border-color:var(--wp-rule)}
.section.sand .carenote p{color:var(--wp-cream)}
.section.sand .cites li{border-top-color:var(--wp-rule)}
.section.sand .cites .sa{color:var(--wp-cream)}
.section.sand .cite-ref a{color:var(--wp-gold-2);border-bottom-color:var(--wp-gold)}
.section.sand .cite-spoke,.section.sand .cite-tr{color:var(--wp-cream-dim)}
.section.sand .cite-note{color:var(--wp-cream);border-left-color:var(--wp-gold)}
.section.sand .chips a{background:rgba(0,0,0,.14);border-color:var(--wp-rule);color:var(--wp-cream)}
.section.sand .chips a:hover{border-color:var(--wp-gold-2)}
.section.sand .chips [lang=sa]{color:var(--wp-gold-2)}
.section.sand .dolist li::before{color:var(--wp-gold-2)}

@media(max-width:640px){
  .answer-first{padding-left:18px}
  .dolist li{padding-left:40px}
  .relverses a{grid-template-columns:1fr;gap:6px}
  .chapbars{height:110px}
  .chapbars em{font-size:8px}
}

/* The label that introduces the Deed's English wording on the Hindi pages, so a
   Hindi reader knows at a glance that the block is a quotation from a
   registered document and not the site failing to translate itself. */
.object-row .deedlbl{font-family:var(--deva);color:var(--gold-text);font-size:13px}

/* The Trust's chapter notes, from *The Gita for Life*: the words to carry
   through a chapter, and the verse groups the manuscript marks as its spine. */
.chnote{margin:30px 0 0;display:grid;gap:22px}
.chnote dt{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:8px}
.hi .chnote dt{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.chnote dd{margin:0;font-size:15.5px;line-height:1.75}
.chnote-refs{display:flex;flex-wrap:wrap;gap:8px}
.chnote-refs a{display:inline-block;padding:5px 12px;border:1px solid var(--line);
  font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.06em;color:var(--maroon)}
.chnote-refs a:hover{border-color:var(--marigold)}
.section.sand .chnote dt{color:var(--wp-gold-2)}
.section.sand .chnote dd{color:var(--wp-cream)}
.section.sand .chnote-refs a{border-color:var(--wp-rule);color:var(--wp-gold-2);background:rgba(0,0,0,.14)}
.section.sand .chnote-refs a:hover{border-color:var(--wp-gold-2)}

/* ============================================================
   THE MANUSCRIPT LAYER
   Who is who, what happened before 1.1, and how the Trust reads.
   All of it transcribed from the Trust's own book.
   ============================================================ */

/* A verse reference inside prose, made a door rather than a decoration. */
.inref{border-bottom:1px solid var(--marigold);white-space:nowrap;color:var(--maroon)}
.section.sand .inref{color:var(--wp-gold-2);border-bottom-color:var(--wp-gold)}

/* ---- who is who ---- */
.peoplegrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1px;background:var(--ground)}
.peoplegrid li{background:var(--ground);box-shadow:0 0 0 1px var(--line)}
.peoplegrid a{display:block;height:100%;padding:clamp(20px,2.2vw,28px)}
.peoplegrid a:hover{background:var(--ground-2)}
.peoplegrid h3{font-size:21px;margin:0 0 10px}
.hi .peoplegrid h3{font-size:19.5px}
.peoplegrid p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink-2)}
.peoplegrid li.speaks{box-shadow:0 0 0 1px var(--gold)}
.pg-speaks{margin-top:14px !important;font-family:var(--sans);font-size:10.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text) !important}
.hi .pg-speaks{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13px}

.speaks-note{padding:14px 20px;border-left:2px solid var(--marigold);font-size:15.5px;
  line-height:1.7;color:var(--ink-2);margin:0}
.speaks-note a{color:var(--maroon);border-bottom:1px solid var(--marigold)}

.profile{display:grid;gap:clamp(26px,3vw,38px)}
.pblock h2{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text);margin:0 0 12px}
.hi .pblock h2{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14.5px}
.pblock p{margin:0;font-size:17px;line-height:1.78;max-width:64ch}
.hi .pblock p{line-height:1.92}

/* ---- before the Gita ---- */
.tablewrap{overflow-x:auto;margin-top:30px}
.kuru{border-collapse:collapse;width:100%;min-width:640px;font-size:15px}
.kuru th,.kuru td{text-align:left;vertical-align:top;padding:16px 20px;border-bottom:1px solid var(--line)}
.kuru thead th{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text);border-bottom-width:2px}
.hi .kuru thead th{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:13.5px}
.kuru tbody th{font-weight:500;color:var(--maroon);white-space:nowrap}
.section.sand .kuru th,.section.sand .kuru td{border-bottom-color:var(--wp-rule);color:var(--wp-cream)}
.section.sand .kuru thead th,.section.sand .kuru tbody th{color:var(--wp-gold-2)}

.roadlist{list-style:none;counter-reset:r;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,2.6vw,38px)}
.roadlist li{counter-increment:r;position:relative;padding-top:38px}
.roadlist li::before{content:counter(r,decimal-leading-zero);position:absolute;top:0;left:0;
  font-family:var(--display);font-size:26px;font-weight:300;color:var(--gold-text)}
.roadlist h3{font-size:19px;margin:0 0 10px}
.roadlist p{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:tl}
.timeline li{position:relative;padding-left:22px;font-size:15px;line-height:1.7}
.timeline li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border:1px solid var(--gold);border-radius:50%}
.section.sand .timeline li::before{border-color:var(--wp-gold)}

/* ---- how we read ---- */
.voices{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:1px;background:var(--ground)}
.voices li{background:var(--ground);box-shadow:0 0 0 1px var(--line);display:grid;
  grid-template-columns:86px 1fr;align-items:start;padding:clamp(22px,2.4vw,30px)}
.v-n{font-family:var(--display);font-size:34px;font-weight:300;line-height:1;color:var(--gold-text)}
.voices h3{font-size:21px;margin:0 0 10px}
.voices p{margin:0;font-size:16px;line-height:1.75;color:var(--ink-2);max-width:62ch}

.sources{margin:34px auto 0;display:grid;gap:22px}
.sources dt{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text);margin-bottom:7px}
.hi .sources dt{font-family:var(--deva);letter-spacing:.02em;text-transform:none;font-size:14px}
.sources dd{margin:0;font-size:15.5px;line-height:1.75;color:var(--ink-2)}

.guardrails{list-style:none;margin:34px auto 0;padding:0;display:grid;gap:18px}
.guardrails li{position:relative;padding-left:30px;font-size:16px;line-height:1.75}
.guardrails li::before{content:"—";position:absolute;left:0;color:var(--gold-text)}
.section.sand .guardrails li{color:var(--wp-cream)}
.section.sand .guardrails li::before{color:var(--wp-gold-2)}

@media(max-width:640px){
  .voices li{grid-template-columns:1fr;gap:10px}
  .roadlist li{padding-top:34px}
}

/* ============================================================
   INDEPENDENT REVIEW — 14 September 2026
   Six reviewers went through the built site. These are the
   rendering and contrast failures they found, fixed here rather
   than in the components because every one of them is a
   cascade problem: a rule written for one ground winning on
   another, or a selector that lost its prefix.
   ============================================================ */

/* ---- 1. The Deed's own clause was invisible on the maroon band.
     `.section.sand` is not `.section.dark`, so the light-ground override
     was winning and printing near-black ink on maroon at 1.1:1. This was
     the single most important sentence on /activities. ---- */
.section:not(.dark):not(.sand) .clause blockquote{color:var(--ink)}
.section:not(.dark):not(.sand) .clause cite{color:var(--gold-text)}
.section.sand .clause blockquote{color:var(--wp-cream)}
.section.sand .clause cite{color:var(--wp-gold-2)}

/* ---- 2. Maroon headings on the maroon band, 1.53:1. Every trustee's name
     on /trust and all five things a gift pays for on /donate. The sand
     conversion block covered `.pillars b` and nothing else. ---- */
.section.sand .pairs b,
.section.sand .people strong,
.section.sand .stripe b,
.section.sand .leader b,
.section.sand .plainlist b,
.section.sand .roadlist h3,
.section.sand .voices h3,
.section.sand .prose strong{color:var(--wp-gold-2)}
.section.sand .pairs span,
.section.sand .pairs .hi-line,
.section.sand .stripe span,
.section.sand .leader p,
.section.sand .roadlist p,
.section.sand .voices p,
.section.sand .v-n{color:var(--wp-cream)}

/* ---- 3. The focus ring was maroon on maroon everywhere except one band.
     Keyboard users lost the caret on the home hero, every dark panel, the
     utility bar and the whole footer. WCAG 2.4.7 and 1.4.11. ---- */
.section.sand :focus-visible,.section.dark :focus-visible,.section.wp-dark :focus-visible,
.wp-panel :focus-visible,.wp-verse :focus-visible,.wp-hero :focus-visible,
.wp-open-hero :focus-visible,.northstar :focus-visible,.hdr-top :focus-visible,
.ftr :focus-visible{outline-color:var(--wp-gold-2);box-shadow:0 0 0 5px rgba(201,162,39,.35)}

/* ---- 4. Two different lists share `.timeline`, and the later rule never
     reset the grid the earlier one set — so /history left 43% of the page
     empty beside a lone date, and /gita/before broke its fifteen entries
     across two columns with a stray bullet. Separate them by whether the
     entry carries a <time>. ---- */
.timeline li:has(time){display:grid;grid-template-columns:clamp(96px,11vw,132px) 1fr;
  gap:clamp(20px,2.4vw,34px);padding:28px 0;border-top:1px solid var(--line)}
.timeline li:has(time)::before{content:none}
.timeline li:not(:has(time)){display:block;grid-template-columns:none;border-top:0;
  padding:0 0 0 22px}
.timeline li:not(:has(time)) .inref{display:inline;width:auto}

/* ---- 5. `.cite` on the research page is a blockquote treatment; it was also
     matching the verse link inside the home page's maroon panel and punching
     an ivory box into it. ---- */
.wp-verse .cite,.wp-verse a.cite{background:none;padding:0;border-left:0;color:var(--wp-gold-2)}

/* ---- 6. The `.hi` prefix was dropped from the second selector, so every
     ENGLISH page set its footer column headings in Tiro Devanagari. ---- */
.ftr .ftr-h{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase}
.hi .ftr .ftr-h{font-family:var(--deva);font-size:14px;letter-spacing:.02em;text-transform:none}

/* ---- 7. The section subnav was clipped mid-word at 1280 with no scroll
     affordance — the last tab rendered as a single letter. Wrap it above the
     phone breakpoint instead of scrolling it. ---- */
@media(min-width:761px){
  .subnav>div{flex-wrap:wrap;overflow-x:visible;gap:0 30px}
  .subnav a{padding:14px 0}
}

/* ---- 8. Anchors landed 34–43px under the sticky header, so every link into
     a verse or a cited passage arrived with the thing you clicked for hidden. ---- */
[id],:target{scroll-margin-top:calc(var(--hdr-h) + 84px)}

/* ---- 9. The header is taller than the variable that reserves room for it,
     at all three breakpoints. ---- */
:root{--hdr-h:126px}
@media(max-width:1024px){:root{--hdr-h:116px}}
@media(max-width:640px){:root{--hdr-h:110px}}

/* ---- 10. Hindi h2 and h3 were four pixels apart in the same face, with the
     lower level set heavier — two levels reading as one. And the Hindi h1 was
     28% smaller than its English twin, which compounds because Devanagari has
     a smaller optical height at the same size. ---- */
.hi .section h2{font-size:clamp(29px,3.6vw,46px);line-height:1.4}
.hi .section h3,.hi .card h3,.hi .lifegrid h3,.hi .peoplegrid h3,.hi .speakgrid h3,
.hi .section h4{font-size:clamp(19px,1.9vw,23px);line-height:1.52}
.hi .wp-open-hero h1{font-size:clamp(33px,4.8vw,62px);line-height:1.4}
.hi .wp-hero h1{line-height:1.4}

/* ---- 11. Hover made a verse reference less readable, not more: marigold on
     ivory is 2.72:1. Marigold is a rule colour, not a text colour. ---- */
.gref:hover,.gtheme a:hover,.home-verse .hv-ref a:hover,.objects-home a:hover .oh-name,
.onward a:hover .ow-title,.chgrid a:hover h3{color:var(--maroon)}
.gtheme a:hover{border-bottom-color:var(--marigold)}

/* ---- 12. The FAQ's only affordance was a 2.72:1 plus sign. ---- */
.faq summary::after{color:var(--gold-text)}

/* ---- 13. Page content ghosted through the sticky bars — at 390 the words of
     a verse smeared legibly across the subnav. The blur bought nothing at 94%. ---- */
.hdr{background:var(--ground)}
.subnav{background:var(--ground)}

/* ---- 14. The gold rule marking the bilingual pair on the home page ran 224px
     past the end of the text it marks. ---- */
.wp-duo{align-items:start}

/* ---- 15. The detail pages ran a single 600px column down a 1150px page, so
     45% of every profile and every editorial block was empty from top to bottom. ---- */
.profile,.editorial,.notthis,.answer-first,.guardrails,.sources{margin-inline:auto}

/* ---- 16. The brand wrapped to two lines at 1.02 leading, putting the second
     line's shirorekha inside the first line's descenders. ---- */
.brand b{line-height:1.14}
.hi .brand b{line-height:1.45}
@media(max-width:420px){.brand b{font-size:17px}.hi .brand b{font-size:18px}}

/* ---- 17. The data displays.

     The concept spread drew chapters with one, two and three occurrences at
     exactly the same height, on a site whose whole claim is that its counts
     are checkable. It also carried on/off in hue alone, at 1.33:1 for a zero.
     Proportional height with a real minimum, and maroon rather than marigold. ---- */
.cx-spread>span{background:var(--line);min-height:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.cx-spread>span.on{background:var(--maroon)}
.chapbars>span>span.on,.sp-bar span{background:var(--maroon)}
.chapbars{border-bottom:1px solid var(--line)}
.sp-bar span{min-width:2px}
.speakgrid a{display:flex;flex-direction:column;height:100%}
.sp-bar{margin-top:auto}
.section.sand .rs-table .zero{color:rgba(201,162,39,.55)}

/* ---- 18. Touch targets under 44px at 390: the language switcher, the phone
     number, all thirty-two footer links, the chips and the onward links. ---- */
@media(max-width:640px){.lang a{padding:13px 15px}}
.hdr-top a[href^="tel:"]{padding-block:14px}
.ftr nav{gap:0}
.ftr nav a{display:block;padding-block:11px}
@media(max-width:1024px){.more,.chips a{display:inline-block;padding-block:11px}}

/* ---- 19. Missing conversions on the dark grounds: the Hindi half of every
     bilingual eyebrow at 2.39:1, and the verse reference label at 3.11:1. ---- */
.wp-panel .eyebrow .hi-alt,.section.dark .eyebrow .hi-alt,
.section.wp-dark .eyebrow .hi-alt{color:var(--wp-cream-dim)}
.section.dark .shloka .ref,.section.dark .verse .ref,
.section.dark .inscription .ref{color:var(--wp-gold-2)}
.chip .sep{color:rgba(201,162,39,.8)}
.chip .hi-lbl{color:#4a1c1a}

/* ---- 20. Marigold on ivory as large text, 2.72:1 against a 3:1 requirement.
     And on /gita/speakers the Devanagari name was set larger but weaker than
     the Latin beneath it — the hierarchy inverted on a bilingual page. ---- */
.object-row .numeral{color:var(--gold-text)}
.sp-sa{color:var(--gold-text);font-size:26px}
.speakgrid h3{font-size:24px}

/* ---- 21. Twenty-two cards in a four-column grid left a stepped outline at the
     bottom right. The same treatment was already applied to .lifegrid. ---- */
.peoplegrid{background:var(--ground)}
.peoplegrid li{box-shadow:0 0 0 1px var(--line)}

/* ---- 22. Fifteen label classes sat below 11px on a phone, several of them in
     tracked uppercase, which costs legibility again. ---- */
@media(max-width:640px){
  .ow-eyebrow,.gpd .lbl,.hdr-top a,.oh-clause,.gref,.contact dt,.prevnext span,
  .speaker .gloss{font-size:11.5px}
  .chapbars em{font-size:9.5px}
}

/* ── Related words under a concept count ──────────────────────────────────
   The headline number counts the headword. Words of the same idea that are
   NOT forms of it are printed here, named, with their own total, so the
   sentence "open the verse and the word is there" stays true of the number
   above and the reader can still see the wider family. */
.cx-also{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.7;
  color:var(--ink-3);letter-spacing:.02em}
.hi .cx-also{font-family:var(--deva);font-size:13.5px}
.cx-also [lang="sa"]{font-family:var(--deva);color:var(--ink-2);letter-spacing:0}
.cx-also a{color:var(--maroon);text-decoration:underline;text-underline-offset:3px}
.section.dark .cx-also,.section.sand .cx-also{color:var(--wp-cream)}
.section.dark .cx-also [lang="sa"],.section.sand .cx-also [lang="sa"]{color:var(--wp-cream)}
.section.dark .cx-also a,.section.sand .cx-also a{color:var(--wp-gold-2)}

/* ── The Trust's reading, under a verse on a theme page ────────────────────
   Set apart from `.meaning` (which holds the translation) so a paraphrase can
   never be read as a rendering of the Sanskrit. Same visual weight as `.lived`,
   with its own rule above it. */
.verse .vnote{margin:0;padding:20px 0 0;border-top:1px solid var(--line-soft);
  font-size:16px;line-height:1.75;color:var(--ink-2)}
.verse .vnote strong,.verse .lived strong{font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text);
  display:block;margin-bottom:8px}
.hi .verse .vnote strong,.hi .verse .lived strong{font-family:var(--deva);font-size:12.5px;
  letter-spacing:.04em;text-transform:none}
.section.sand .verse .vnote,.section.sand .verse .lived{color:var(--wp-cream)}
.section.sand .verse .vnote strong,.section.sand .verse .lived strong{color:var(--wp-gold-2)}

/* ── "written" marker in the verse index ──────────────────────────────────
   Marks the 45 verses that have a page of their own, so the index says which
   rows lead somewhere beyond the chapter text. */
.vx-written{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text);border:1px solid var(--line-soft);
  border-radius:2px;padding:2px 6px;white-space:nowrap;align-self:center}
.hi .vx-written{font-family:var(--deva);font-size:11px;letter-spacing:.02em;text-transform:none}

/* ── Headings that exist for structure, not for the eye ───────────────────
   Seven index pages go straight from the page's h1 to the h3 of the first
   card, because the grid is the page and needs no title a reader would want
   to see. The heading is supplied here for the reader who navigates by
   heading level, and taken out of the layout for everyone else. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── Seams between sections of the same ground ────────────────────────────
   Every .section carries a full --rhythm above and below it. Where the ground
   changes — cream to maroon — that pair of paddings is the band's own breathing
   room and is meant to be felt. Where it does not change, the two paddings add
   up to a gap of nothing between two things that look like one continuous
   surface: 230px of empty cream at desktop, 152px on a phone, at every such
   seam. One padding is enough there, so the second is reduced to a seam.

   /visit ran two maroon bands together this way and the boundary was invisible;
   the reader met 1,600px of unbroken maroon with a hole in the middle. */
:root{--seam:clamp(30px,3.6vw,52px)}
.section:not(.sand):not(.dark):not(.wp-dark):not(.flush-t)
  + .section:not(.sand):not(.dark):not(.wp-dark){padding-block-start:var(--seam)}
.section.sand + .section.sand{padding-block-start:var(--seam)}
.section.dark + .section.dark,
.section.wp-dark + .section.wp-dark{padding-block-start:var(--seam)}
/* A section that ends flush has no padding to double up, so its neighbour
   keeps the full rhythm. */
.section.flush-b + .section{padding-block-start:var(--rhythm)}
.section.flush-b + .section.tight{padding-block-start:clamp(48px,6vw,76px)}

/* ── Page-opening heroes: stop the plate's own lettering fighting the page ─
   Several chapter and concept plates carry their own title painted into the
   artwork ("2 · Sankhya Yoga · The wisdom of the Self"). The old overlay
   thinned to 40% exactly across the band where that lettering sits, so on a
   phone the breadcrumb ran through "Sankhya Yoga", the gold chip sat on top of
   "The wisdom of the Self", and the page's own h1 had a second, competing
   headline showing through it.

   The gradient now holds a darker floor through that band. The artwork still
   reads; the words painted on it no longer compete with the words on the page.
   The proper fix is artwork without lettering — this keeps the pages legible
   until that exists. */
.wp-open-hero::after{background:
  linear-gradient(180deg,
    rgba(40,14,13,.90) 0%,
    rgba(40,14,13,.80) 30%,
    rgba(40,14,13,.76) 52%,
    rgba(40,14,13,.94) 100%)}

/* A breadcrumb that wrapped mid-crumb left its separator stranded at the head
   of the next line ("/ Chapter 2"). Each crumb now keeps its own separator. */
.wp-open-hero .crumbs{line-height:1.7}
.wp-open-hero .crumbs>span{white-space:nowrap}

/* Room under the sub-navigation before the breadcrumb starts, on the narrow
   screens where the two were nearly touching. */
@media(max-width:760px){
  .wp-open-hero .inner{padding-block:clamp(30px,6vw,44px) clamp(34px,4.6vw,60px)}
}

/* The `.art` heroes — chapters, concepts, for-life — carry their own, lighter
   overlay, and on a phone it thinned to 34% exactly where the plate's painted
   title sits. That is the rule that was actually in force on those pages, so
   it is the one that has to change. Desktop keeps its left-to-right wash: there
   the text sits on the dark side and the artwork is clear of it. */
@media(max-width:760px){
  .wp-open-hero.art::after{background:
    linear-gradient(180deg,
      rgba(40,14,13,.90) 0%,
      rgba(40,14,13,.80) 30%,
      rgba(40,14,13,.78) 54%,
      rgba(40,14,13,.95) 100%)}
}

/* ── Two-column blocks whose columns are not the same length ──────────────
   A duo pairs an English column with a Hindi one, or a long explanation with a
   short note. The two are top-aligned, so when one runs three paragraphs and
   the other runs one, the short column simply stops and leaves a tall empty
   rectangle hanging under it — most visible on the home page, /trust and
   /gita.

   Each column becomes a column box of its own, and the link that closes it is
   pushed to the bottom. The empty space then sits between the text and the
   link, where it reads as spacing, instead of below the column, where it reads
   as an unfinished page — and the two links line up across the pair. */
@media(min-width:761px){
  /* The columns have to be the same height for the bottom-aligned link to mean
     anything, and for the gold rule down the Hindi column to run the full
     depth of the pair instead of stopping halfway. */
  .wp-duo:has(a.more),.wp-duo:has(.actions){align-items:stretch}
  .wp-duo>*{display:flex;flex-direction:column}
  .wp-duo>* > p:last-child:has(> a.more),
  .wp-duo>* > p.actions:last-child,
  .wp-duo>* > .actions:last-child{margin-top:auto;padding-top:18px}
  .duo>*:has(> .actions:last-child),
  .cols>*:has(> .actions:last-child){display:flex;flex-direction:column}
  .duo>* > .actions:last-child,
  .cols>* > .actions:last-child{margin-top:auto}
}

/* ── Phone: things that were touching ─────────────────────────────────────
   Measured at 390px. Each of these had under 10px between it and whatever sat
   above, which on a small screen reads as one block rather than two. */
@media(max-width:760px){
  .wp-duo{gap:38px}
  .wp-duo>:last-child{border-left:0;border-top:2px solid var(--wp-gold);
    padding-left:0;padding-top:26px}
  .duo,.cols{gap:34px}
  figure.figure figcaption,.band figcaption,.wp-band figcaption{padding-top:12px}
  .gallery figcaption{padding-top:10px;line-height:1.6}
  .prose>p+p{margin-top:16px}
  .section>.eyebrow+h2,.section>.chip+h2{margin-top:14px}
}

/* ── Gallery rows that did not line up ────────────────────────────────────
   The pictures in a row are all the same height, but a one-line caption next
   to a three-line one made the row shorter, and the next row's pictures
   started at a different height. Down a column of eight tiles the images
   drifted visibly out of line. Every row is now as tall as the tallest, so the
   pictures sit on the same rules all the way down. */
.gallery{grid-auto-rows:1fr}
.gallery figure{display:grid;grid-template-rows:auto 1fr;align-content:start}

/* ── The Trust's reading of the 700 verses ────────────────────────────────
   From *The Gita for Life*. Three things, all editorial, all kept visually
   apart from the text and the translations above them: the movement a verse
   opens, the Trust's own theme for the verse, and — on the forty-five anchor
   verses — a note on the word or the turn that carries the weight. */

/* A movement band inside the verse list. Marks where one run of verses ends
   and the next begins; the chapter's argument, visible while scrolling. */
.gmove{max-width:66ch;margin:0 auto clamp(30px,3.4vw,44px);padding:18px 0 0;
  border-top:2px solid var(--gold);display:flex;flex-direction:column;gap:6px;text-align:left}
.gverse:first-child .gmove{padding-top:0;border-top:0}
.gmove-r{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text)}
.gmove-n{font-family:var(--display);font-size:clamp(20px,2.1vw,26px);line-height:1.3;
  color:var(--maroon)}
.gmove-g{font-size:15.5px;line-height:1.7;color:var(--ink-3)}
.hi .gmove-r{font-family:var(--deva);font-size:12px;letter-spacing:.03em;text-transform:none}
.hi .gmove-n{font-family:var(--deva);font-size:clamp(19px,2vw,24px);line-height:1.45}
.hi .gmove-g{font-family:var(--deva);line-height:1.85}

/* The Trust's theme sits beside the nine written themes but is marked as the
   Trust's reading of the verse, which the lexical tags are not. */
.gtheme-own{border-bottom-style:dotted !important}

/* An anchor verse's note. */
.ganchor{max-width:66ch;margin:22px auto 0;padding:20px 0 0;
  border-top:1px solid var(--line-soft);text-align:left}
.ga-term{margin:0;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .ga-term{font-family:var(--deva);font-size:13px;letter-spacing:.03em;text-transform:none}
.ga-note{margin:10px 0 0;font-size:16.5px;line-height:1.78;color:var(--ink-2)}
.hi .ga-note{font-family:var(--deva);line-height:1.92}
.ga-deep{margin:12px 0 0;font-size:15.5px;line-height:1.75;color:var(--ink-3)}
.ga-deep strong{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .ga-deep{font-family:var(--deva)}
.hi .ga-deep strong{font-family:var(--deva);font-size:12.5px;letter-spacing:.03em;text-transform:none}
.ga-src{margin:12px 0 0;font-family:var(--sans);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.hi .ga-src{font-family:var(--deva);font-size:12px;letter-spacing:.02em;text-transform:none}
.section.sand .ga-note,.section.dark .ga-note{color:var(--wp-cream)}
.section.sand .ga-term,.section.dark .ga-term{color:var(--wp-gold-2)}

/* ── Reading paths ────────────────────────────────────────────────────────
   Nine threads across the chapters, then the fifty-six themes under which the
   Trust has placed every verse. Both are the Trust's reading, and the page
   says so; the styling keeps them looking like editorial apparatus rather
   than like the text. */
.rp-nets,.rp-themes{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:clamp(22px,2.6vw,34px)}
.rp-nets{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.rp-themes{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rp-nets > li,.rp-themes > li{padding-top:18px;border-top:2px solid var(--gold);scroll-margin-top:140px}
.rp-nets h3{margin:0 0 12px;font-family:var(--display);font-size:clamp(21px,2.1vw,26px);
  line-height:1.3;color:var(--maroon)}
.hi .rp-nets h3{font-family:var(--deva);line-height:1.45}
.rp-why{margin:12px 0 0;font-size:16px;line-height:1.75;color:var(--ink-2)}
.hi .rp-why{font-family:var(--deva);line-height:1.9}
.rp-chain{display:block;font-family:var(--sans);font-size:13px;line-height:2;color:var(--ink-3)}
.hi .rp-chain{font-family:var(--deva);font-size:14px}
.rp-chain a{color:var(--maroon);text-decoration:none;border-bottom:1px solid var(--line)}
.rp-chain a:hover{color:var(--marigold);border-bottom-color:var(--marigold)}
.rp-sep{padding:0 7px;color:var(--gold-text)}
.rp-t-head{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.rp-t-name{font-family:var(--display);font-size:clamp(19px,1.9vw,23px);color:var(--maroon)}
.hi .rp-t-name{font-family:var(--deva)}
.rp-t-n{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text);text-decoration:none;border-bottom:1px solid transparent}
.rp-t-n:hover{border-bottom-color:currentColor}
.hi .rp-t-n{font-family:var(--deva);font-size:12px;letter-spacing:.02em;text-transform:none}
.rp-q{margin:10px 0 0;font-family:var(--display);font-style:italic;font-size:16.5px;
  line-height:1.65;color:var(--ink-2)}
.hi .rp-q{font-family:var(--deva);font-style:normal;line-height:1.85}
.section.sand .rp-nets > li,.section.sand .rp-themes > li{border-top-color:var(--wp-gold)}
.section.sand .rp-t-name,.section.sand .rp-q,.section.sand .rp-why{color:var(--wp-cream)}
.section.sand .rp-chain{color:var(--wp-cream-dim)}
.section.sand .rp-chain a{color:var(--wp-gold-2);border-bottom-color:rgba(201,162,39,.4)}
.section.sand .rp-t-n,.section.sand .rp-sep{color:var(--wp-gold-2)}

/* Where a verse stands, on its own page. */
.vp-range{margin:0 0 12px;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.vp-range a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
.vp-range a:hover{border-bottom-color:currentColor}
.hi .vp-range{font-family:var(--deva);font-size:13px;letter-spacing:.02em;text-transform:none}
.vp-theme{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.vp-theme .lbl{font-family:var(--sans);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-text)}
.hi .vp-theme .lbl{font-family:var(--deva);font-size:12px;letter-spacing:.02em;text-transform:none}
.vp-theme a{font-family:var(--display);font-size:clamp(19px,1.9vw,23px);color:var(--maroon);
  text-decoration:none;border-bottom:1px solid var(--line)}
.vp-theme a:hover{color:var(--marigold);border-bottom-color:var(--marigold)}
.hi .vp-theme a{font-family:var(--deva)}
.vp-q{margin:0 0 14px;font-family:var(--display);font-style:italic;font-size:17px;
  line-height:1.65;color:var(--ink-2)}
.hi .vp-q{font-family:var(--deva);font-style:normal;line-height:1.88}

/* The caution under a chapter's answer. Same block, quieter voice: it qualifies
   the answer above it and must not be mistaken for it. */
.answer-first .ans-caution{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:16px;line-height:1.75;color:var(--ink-3)}
.ans-caution strong{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-text);display:block;margin-bottom:8px}
.hi .ans-caution{font-family:var(--deva);line-height:1.9}
.hi .ans-caution strong{font-family:var(--deva);font-size:12.5px;letter-spacing:.03em;text-transform:none}
.section.sand .ans-caution{color:var(--wp-cream)}
.section.sand .ans-caution strong{color:var(--wp-gold-2)}