/* =====================================================================
   THE N. NATARAJAN CHARITABLE TRUST
   Shared stylesheet. Palette sampled from the portrait of Thiru.
   N. Natarajan: the black gown, the white bands, the tan law report
   spines behind him, the red of their labels, the gold of the tooling.

   RULE: .wrap owns all side padding. No element carrying .wrap may
   use the `padding` shorthand, only padding-block. Breaking this
   welds text to the left edge of the screen.
   ===================================================================== */

:root{
  --robe:#101216; --robe2:#171A1F; --robe3:#1F232A; --robe4:#2A2F36;
  --band:#F4F5F7; --band2:#C3C7CE; --band3:#878D97; --band4:#858A92;
  --parchment:#D9C7A3; --parchment2:#A8977A;
  --oxblood:#7E2B27; --gilt:#C9A227; --slate:#3E4A52;
  --cz:"Cinzel",Georgia,serif;
  --js:"Jost","Helvetica Neue",Arial,sans-serif;
  --portrait:linear-gradient(168deg,#2A2F36,#0C0E11);
  --maxw:1200px;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:auto;}
body{margin:0; background:var(--robe); color:var(--band);
  font-family:var(--js); font-size:16px; line-height:1.68; font-weight:300;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; display:block;}
a{color:var(--parchment);}
:focus-visible{outline:2px solid var(--parchment); outline-offset:3px;}

/* ---------- ambient ---------- */
#amb{position:fixed; top:0; left:0; width:100vw; height:100vh;
  z-index:1; pointer-events:none;}
.vig{position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(135% 92% at 50% 0%,transparent 38%,rgba(6,7,9,.88) 100%);}
.shell{position:relative; z-index:3;}
.prog{position:fixed; top:0; left:0; right:0; height:2px; z-index:70; background:rgba(255,255,255,.08);}
.prog__f{height:100%; background:var(--parchment); transform:scaleX(0); transform-origin:left;}

/* ---------- layout ---------- */
.wrap{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:26px;}
@media(min-width:700px){.wrap{padding-inline:56px;} body{font-size:17px;}}
@media(min-width:1100px){.wrap{padding-inline:88px;}}
.sec{padding-block:78px;}
@media(min-width:900px){.sec{padding-block:104px;}}
.sec--tight{padding-block:56px;}
.rule-top{border-top:1px solid var(--robe3);}

/* ---------- type ---------- */
.kick{font-family:var(--js); font-weight:500; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--parchment2); margin:0;}
.tick{width:38px; height:2px; background:var(--parchment); border:0; margin:0 0 18px;}
h1,h2,h3,h4{font-family:var(--cz); font-weight:400; letter-spacing:.02em; text-wrap:balance;}
.h-xl{font-size:clamp(1.4rem,6.8vw,4.2rem); line-height:1.12; margin:18px 0 0; white-space:nowrap;}
.h-lg{font-size:clamp(1.5rem,5.4vw,3.3rem); line-height:1.18; margin:12px 0 0;}
.h-xxl{font-size:clamp(1.9rem,7vw,4.4rem); line-height:1.08; margin:16px 0 0; letter-spacing:.01em;}
.sec-head{border-top:1px solid var(--robe3); padding-top:44px;}
.sec-head .kick{font-size:11px; color:var(--parchment);}
.h-md{font-size:clamp(1.3rem,4.2vw,2.3rem); line-height:1.22; margin:12px 0 0;}
.h-sm{font-size:1rem; letter-spacing:.05em; text-transform:uppercase; margin:0; line-height:1.45;}
.lede{color:var(--band2); max-width:48ch; margin:24px 0 0; font-size:1.02rem;}
.body{color:var(--band2); max-width:62ch; margin:16px 0 0;}
.h-xl .w{display:inline-block; white-space:nowrap;}
.h-xl .c{display:inline-block;}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:rgba(16,18,22,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--robe3);}
.nav__in{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-block:17px; max-width:var(--maxw); margin-inline:auto; padding-inline:26px;}
@media(min-width:700px){.nav__in{padding-inline:56px; padding-block:20px;}}
@media(min-width:1100px){.nav__in{padding-inline:88px;}}
.nav__b{font-family:var(--cz); font-size:clamp(15px,1.6vw,18px); letter-spacing:.12em;
  text-transform:uppercase; color:var(--band); text-decoration:none; line-height:1.25; flex-shrink:0;}
.nav__b i{display:block; font-family:var(--js); font-style:normal; font-size:10px;
  letter-spacing:.32em; color:var(--parchment2); margin-top:5px;}
.nav__l{display:none; gap:26px; align-items:center;}
@media(min-width:1180px){.nav__l{display:flex;}}
.nav__l a{position:relative; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--band3); text-decoration:none; transition:color .25s; white-space:nowrap; padding-block:6px;}
.nav__l a:hover{color:var(--band);}
.nav__l a[aria-current="page"]{color:var(--parchment);}
.nav__l a[aria-current="page"]::after{content:""; position:absolute; left:50%; bottom:-7px;
  width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--parchment);}
.nav__t{display:block; background:none; border:1px solid var(--robe4); color:var(--band);
  padding-block:9px; padding-inline:14px; cursor:pointer; font:inherit; font-size:10.5px;
  letter-spacing:.2em; text-transform:uppercase;}
@media(min-width:1180px){.nav__t{display:none;}}
.nav__m{display:none; border-top:1px solid var(--robe3); background:var(--robe2);}
.nav__m.open{display:block;}
.nav__m a{display:block; padding-block:15px; padding-inline:26px; color:var(--band2);
  text-decoration:none; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  border-bottom:1px solid var(--robe3); border-left:2px solid transparent;}
@media(min-width:700px){.nav__m a{padding-inline:56px;}}
.nav__m a[aria-current="page"]{color:var(--parchment); border-left-color:var(--parchment);
  background:var(--robe3);}

/* ---------- badges, buttons ---------- */
.pill{display:inline-block; padding-block:7px; padding-inline:16px; border-radius:999px;
  border:1px solid var(--parchment2); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--parchment);}
.btn{display:inline-block; padding-block:15px; padding-inline:32px; background:var(--band);
  color:var(--robe); text-decoration:none; font-family:var(--js); font-weight:500;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; border:0; cursor:pointer;
  transition:background .3s, transform .3s;}
.btn:hover{background:var(--parchment); transform:translateY(-3px);}
.btn--ghost{background:transparent; color:var(--band); border:1px solid var(--robe4);}
.btn--sm{padding-block:12px; padding-inline:22px; font-size:10px;}
.btn--ghost:hover{background:var(--robe3); color:var(--parchment);}
.btn[aria-disabled="true"]{background:var(--robe3); color:var(--band4); cursor:not-allowed;
  transform:none; border:1px solid var(--robe4);}

/* ---------- programme cards ---------- */
.prog-c{background:var(--robe2); border:1px solid var(--robe3); display:flex;
  flex-direction:column; gap:14px; padding-block:34px 30px; padding-inline:30px;
  position:relative; overflow:hidden; transition:border-color .35s, transform .35s;}
.prog-c:hover{border-color:var(--parchment2); transform:translateY(-5px);}
.prog-c::before{content:attr(data-n); position:absolute; top:-14px; right:10px;
  font-family:var(--cz); font-size:5.6rem; line-height:1; color:rgba(217,199,163,.05);
  pointer-events:none;}
.prog-c h3{font-size:clamp(1.15rem,3vw,1.5rem); letter-spacing:.03em; margin:6px 0 0;
  text-transform:none;}
.prog-c p{color:var(--band2); font-size:.95rem; margin:0;}
.prog-c .btn{margin-top:auto; align-self:flex-start;}
.prog-c__tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:10px;}
.prog-c__tags span{padding-block:6px; padding-inline:12px; border:1px solid var(--robe4); border-radius:999px;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--parchment2); white-space:nowrap;}

/* ---------- cards ---------- */
.card{background:var(--robe2); border:1px solid var(--robe3);
  padding-block:26px; padding-inline:24px;}
@media(min-width:700px){.card{padding-block:32px; padding-inline:30px;}}
.card--key{border-color:var(--parchment2); position:relative;}
.card--key::after{content:""; position:absolute; top:-1px; left:-1px; width:38px; height:2px;
  background:var(--oxblood);}
.grid{display:grid; gap:14px;}
@media(min-width:760px){.grid{gap:18px;}}
.grid--2{grid-template-columns:1fr;}
.grid--3{grid-template-columns:1fr;}
.grid--4{grid-template-columns:repeat(2,1fr);}
@media(min-width:700px){.grid--2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:860px){.grid--3{grid-template-columns:repeat(3,1fr);}
  .grid--4{grid-template-columns:repeat(4,1fr);}}

/* ---------- figures: odometer ---------- */
.band-s{border-block:1px solid var(--robe3); background:var(--robe2);}
.band__g{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--robe3);}
@media(min-width:1000px){.band__g{grid-template-columns:repeat(5,minmax(0,1fr));
  border-inline:1px solid var(--robe3);}}
.fig{background:var(--robe2); padding-block:34px; padding-inline:10px;
  display:flex; flex-direction:column; align-items:center; text-align:center;}
.fig:last-child{grid-column:1 / -1;}
@media(min-width:1000px){.fig{padding-block:58px;} .fig:last-child{grid-column:auto;}}
.fig__n{position:relative; font-family:var(--cz); font-size:clamp(2rem,6vw,2.8rem); line-height:1;
  color:var(--parchment); display:flex; justify-content:center;}
.od{display:block; height:1em; overflow:hidden;}
.od__r{display:block; will-change:transform;}
.od__r i{display:block; height:1em; line-height:1; font-style:normal; text-align:center;}
.fig__l{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--band3);
  margin-top:16px; line-height:1.8; text-align:center;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* ---------- kinetic words + tags ---------- */
.kin .rw{display:inline-block; margin-right:.26em; will-change:transform;}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:36px;}
.tag{padding-block:10px; padding-inline:22px; border-radius:999px;
  font-size:clamp(.74rem,1.4vw,.86rem); font-weight:400; letter-spacing:.14em;
  text-transform:uppercase; white-space:nowrap;
  background:var(--robe2); border:1px solid var(--robe4); color:var(--band2);}
.tag--lit{background:var(--parchment); border-color:var(--parchment); color:var(--robe);}
.tag--out{background:transparent; border-color:var(--parchment2); color:var(--parchment);}

/* ---------- horizontal life ---------- */
.life{position:relative; overflow:hidden; background:var(--robe);}
.ghost{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--cz); font-size:min(46vw,30rem); color:rgba(217,199,163,.045);
  pointer-events:none; user-select:none; white-space:nowrap; z-index:0;}
.life__t{padding-block:84px 38px; position:relative; z-index:1;}
.stage{overflow:hidden; position:relative; z-index:1;}
.track{display:flex; flex-direction:column; gap:14px; padding-inline:26px; padding-bottom:78px;}
@media(min-width:700px){.track{padding-inline:56px;}}
@media(min-width:900px){.track{flex-direction:row; gap:0; padding-inline:0;
  padding-left:88px; padding-bottom:0;}}
.ch{position:relative; background:var(--robe2); border:1px solid var(--robe3);
  padding-block:26px 24px; padding-inline:24px; display:flex; flex-direction:column; gap:12px;}
@media(min-width:900px){.ch{flex:0 0 clamp(278px,25vw,350px); margin-right:18px;
  padding-block:32px 28px; padding-inline:28px; min-height:min(452px,58vh);}}
.ch__i{font-size:9px; letter-spacing:.26em; color:var(--band4); font-variant-numeric:tabular-nums;}
.ch__y{font-family:var(--cz); font-size:clamp(1.7rem,5vw,2.25rem); line-height:1;
  color:var(--parchment); font-variant-numeric:tabular-nums;}
.ch__y.t{font-size:clamp(.96rem,3vw,1.12rem); line-height:1.4; color:var(--band2); letter-spacing:.06em;}
.ch__b{color:var(--band2); font-size:.93rem; margin:0;}
.ch__g{margin-top:auto; padding-top:18px; border-top:1px solid var(--robe3);
  font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--band4);
  display:flex; justify-content:space-between; gap:10px;}
.ch--k{border-color:var(--parchment2);}
.ch--k::after{content:""; position:absolute; top:-1px; left:-1px; width:38px; height:2px;
  background:var(--oxblood);}

/* ---------- marquee ---------- */
.close{position:relative; overflow:hidden; background:var(--robe2);
  border-top:1px solid var(--robe3); padding-block:96px 110px;}
.mq{position:absolute; inset:0; overflow:hidden; pointer-events:none; user-select:none; z-index:0;}
.mq__t{position:absolute; left:0; top:50%; width:100%; height:0;}
.mq__i{position:absolute; left:0; top:0; white-space:nowrap; will-change:transform;
  font-family:var(--cz); font-size:clamp(4.5rem,13vw,9rem); line-height:1;
  color:rgba(244,245,247,.055); transform:translate3d(0,-50%,0); backface-visibility:hidden;}
.close__in{position:relative; z-index:1; display:flex; flex-direction:column;
  align-items:center; text-align:center; max-width:52rem; margin-inline:auto;}
.close__n{color:var(--band2); margin:22px 0 0; max-width:44ch; font-size:1.02rem;}
.close__f{margin-top:28px; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--band4);}
.close .btn{margin-top:40px;}

/* ---------- hero: in loving memory ---------- */
.hero3d{position:relative; overflow:hidden; isolation:isolate; padding-block:64px 92px;
  border-bottom:1px solid var(--robe3);}
@media(min-width:960px){.hero3d{padding-block:92px 118px;}}
.hero3d__g{position:relative; z-index:2; display:grid; gap:46px; justify-items:center; text-align:center;}
@media(min-width:960px){.hero3d__g{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center; justify-items:stretch; text-align:left; gap:76px;}}
.dedic{margin:0 auto; max-width:40ch; font-style:italic; font-weight:300; line-height:1.6;
  font-size:clamp(1rem,2.3vw,1.14rem); color:var(--band2);}
.hero3d__t .h-xl{margin-top:14px; font-size:clamp(1.6rem,8.6vw,3.8rem);}
.hero3d__m{display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; justify-content:center;
  margin:16px 0 0; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--parchment);}
.hero3d__m s{width:6px; height:6px; flex-shrink:0; text-decoration:none; background:transparent;
  border:1px solid var(--parchment); transform:rotate(45deg);}
.hero3d__t .h-xxl{font-size:clamp(1.65rem,5.6vw,3.2rem); max-width:17ch; margin:30px auto 0;}
.hero3d__t .close__n{margin-inline:auto; max-width:46ch;}
.hero3d__b{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:38px 0 0;}
.hero3d__t .close__f{margin-top:30px;}
@media(min-width:960px){
  .dedic,.hero3d__t .close__n,.hero3d__t .h-xxl{margin-inline:0;}
  .hero3d__t .h-xl{font-size:clamp(2.4rem,4.6vw,3.8rem);}
  .hero3d__m,.hero3d__b{justify-content:flex-start;}
}

/* ---------- the portrait in three dimensions ---------- */
.p3d__float{width:clamp(210px,62vw,300px); will-change:transform;}
@media(min-width:960px){.p3d__float{width:min(100%,350px); justify-self:center;}}
.p3d{perspective:1100px;}
.p3d__card{position:relative; aspect-ratio:4/5; transform-style:preserve-3d; will-change:transform;}
.p3d__glow{position:absolute; inset:-22%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(217,199,163,.24),transparent 64%); transform:translateZ(-90px);}
.p3d__frame,.p3d__img,.p3d__sheen{position:absolute; border-radius:50% 50% 8px 8px / 36% 36% 8px 8px;}
.p3d__frame{inset:0; background:linear-gradient(165deg,#262B33,#0B0D10);
  border:1px solid rgba(217,199,163,.42);
  box-shadow:0 44px 90px rgba(0,0,0,.65), inset 0 0 0 9px #111317, inset 0 0 0 10px rgba(217,199,163,.26);}
.p3d__img{inset:14px; overflow:hidden; transform:translateZ(38px);
  background:var(--portrait) center 18% / cover no-repeat; box-shadow:0 18px 40px rgba(0,0,0,.55);}
.p3d__img::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(16,18,22,.55));}
.p3d__ph{position:absolute; inset:0; display:grid; place-items:center;}
.p3d__ph svg{width:54%; height:auto; opacity:.9;}
.has-portrait .p3d__ph{display:none;}
.p3d__sheen{inset:14px; transform:translateZ(64px); pointer-events:none; mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--sx,32%) var(--sy,22%),rgba(255,255,255,.34),transparent 46%);}
.p3d__shadow{height:26px; margin-top:34px; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6),transparent 70%);}

/* ---------- beams of light ---------- */
.beams{position:absolute; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);}

/* ---------- in memoriam ---------- */
.memo{position:relative; overflow:hidden; isolation:isolate; border-top:1px solid var(--robe3);}
.memo__in{position:relative; z-index:1;}
.memo__end{margin-top:80px; text-align:center; font-family:var(--cz); letter-spacing:.14em;
  text-transform:uppercase; font-size:clamp(1rem,2.6vw,1.3rem); color:var(--band);}
.memo__end span{display:block; margin-top:10px; font-family:var(--js); font-size:10px;
  letter-spacing:.26em; color:var(--parchment2);}
/* ---------- in memoriam: recordings carousel ---------- */
.vc{margin-top:48px;}
.vc__view{overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
.vc__view::-webkit-scrollbar{display:none;}
.vc__card{scroll-snap-align:start;}
.vc.is-live .vc__view{overflow:hidden; scroll-snap-type:none; touch-action:pan-y;}
.vc__track{position:relative; display:flex; gap:18px; will-change:transform;
  transition:transform .9s cubic-bezier(.65,0,.35,1);}
.vc__card{flex:0 0 100%; min-width:0; display:flex; flex-direction:column; text-decoration:none;
  color:inherit; background:var(--robe2); border:1px solid var(--robe3); overflow:hidden;
  transition:border-color .35s;}
@media(min-width:700px){.vc__card{flex-basis:calc((100% - 18px) / 2);}}
@media(min-width:1000px){.vc__card{flex-basis:calc((100% - 36px) / 3);}}
.vc__card:hover,.vc__card:focus-visible{border-color:var(--parchment2);}
.vc__th{position:relative; aspect-ratio:16/9; display:grid; place-items:center; overflow:hidden;
  background:linear-gradient(160deg,#1F232A,#0C0E11);}
.vc__th img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(.3) brightness(.7); transition:transform .7s, filter .7s;}
.vc__card:hover .vc__th img{transform:scale(1.05); filter:grayscale(0) brightness(.85);}
.vc__play{position:relative; width:60px; height:60px; border-radius:50%;
  border:1px solid rgba(244,245,247,.6); background:rgba(16,18,22,.5);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:transform .35s, background .35s;}
.vc__play::after{content:""; position:absolute; left:24px; top:19px;
  border-left:16px solid var(--band); border-block:11px solid transparent;}
.vc__card:hover .vc__play{transform:scale(1.08); background:rgba(217,199,163,.25);}
.vc__b{display:flex; flex-direction:column; gap:8px; flex:1; padding-block:22px 24px; padding-inline:22px;}
.vc__k{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--parchment2);}
.vc__t{font-family:var(--cz); font-size:1rem; line-height:1.45; letter-spacing:.02em; color:var(--band);}
.vc__d{font-size:.9rem; line-height:1.6; color:var(--band3);}
.vc__a{margin-top:auto; padding-top:12px; font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--parchment);}
.vc__ctl{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:26px;}
.vc__dots{display:flex; flex-wrap:wrap; gap:2px;}
.vc__dot{position:relative; width:30px; height:24px; padding:0; border:0; background:none; cursor:pointer;}
.vc__dot::before{content:""; position:absolute; left:3px; right:3px; top:11px; height:2px;
  background:var(--robe4); transition:background .3s;}
.vc__dot[aria-current="true"]::before{background:var(--parchment);}
.vc__btns{display:flex; gap:8px;}
.vc__btn{width:44px; height:44px; border-radius:50%; border:1px solid var(--robe4); background:transparent;
  color:var(--band2); cursor:pointer; display:grid; place-items:center; transition:border-color .3s, color .3s;}
.vc__btn:hover{border-color:var(--parchment2); color:var(--parchment);}
.vc__btn svg{width:15px; height:15px;}
@media (prefers-reduced-motion:reduce){.vc__track{transition:none;}}

/* ---------- case files ---------- */
.cx-index{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.cx-index a{padding-block:10px; padding-inline:18px; border:1px solid var(--robe4); border-radius:999px;
  color:var(--band2); text-decoration:none; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .3s, color .3s;}
.cx-index a:hover{border-color:var(--parchment2); color:var(--parchment);}
.case{border-top:1px solid var(--robe3); padding-block:72px;}
@media(min-width:900px){.case{padding-block:100px;}}
.case__g{display:grid; gap:36px;}
@media(min-width:960px){.case__g{grid-template-columns:minmax(0,.33fr) minmax(0,.67fr); gap:64px;}}
.case__side{display:flex; flex-direction:column; gap:18px;}
@media(min-width:960px){.case__side{position:sticky; top:112px; align-self:start;}}
.case__yr{font-family:var(--cz); font-size:clamp(2.6rem,7vw,4rem); line-height:1; color:var(--parchment);}
.case__nm{font-family:var(--cz); font-size:clamp(1.2rem,3.2vw,1.6rem); line-height:1.3; margin:0; letter-spacing:.03em;}
.case__facts{display:grid; gap:12px; margin:6px 0 0;}
.case__facts div{border-top:1px solid var(--robe3); padding-top:12px;}
.case__facts dt{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--band4);}
.case__facts dd{margin:4px 0 0; color:var(--band2); font-size:.92rem; line-height:1.55;}
.case__side .btn{align-self:flex-start; margin-top:6px;}
.case__body h3{font-family:var(--cz); font-weight:400; font-size:clamp(1.02rem,2.6vw,1.25rem);
  letter-spacing:.05em; text-transform:uppercase; margin:44px 0 0; color:var(--band);}
.case__body > h3:first-child{margin-top:0;}
.case__body p{color:var(--band2); max-width:66ch; margin:14px 0 0;}
.case__role{margin-top:30px; padding-block:22px; padding-inline:24px; background:var(--robe2);
  border:1px solid var(--robe3); border-left:2px solid var(--parchment);}
.case__role p:first-child{margin-top:0;}
.case__role .kick{margin-bottom:10px;}
.steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px;}
.steps li{display:grid; grid-template-columns:74px minmax(0,1fr); gap:16px; color:var(--band2);
  border-top:1px solid var(--robe3); padding-top:14px;}
.steps b{font-family:var(--cz); font-weight:400; color:var(--parchment);}
.case__figs{display:grid; gap:14px; margin-top:30px; grid-template-columns:1fr;}
@media(min-width:700px){.case__figs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.case__fig{margin:0;}
.case__ph{aspect-ratio:4/3; background:var(--robe2) center / cover no-repeat; border:1px solid var(--robe3);
  display:grid; place-items:center; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--band4);}
.case__ph.has-photo{color:transparent;}
.case__fig figcaption{font-size:.82rem; line-height:1.5; color:var(--band4); margin-top:10px;}
.case__src{margin-top:40px; padding-top:18px; border-top:1px solid var(--robe3);}
.case__src p{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--band4); margin:0 0 10px;}
.case__src ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.case__src a{color:var(--band3); font-size:.86rem; text-decoration:none; transition:color .25s;}
.case__src a:hover{color:var(--parchment);}
.case__src span{color:var(--band3); font-size:.86rem;}
.case__quote{margin-top:18px; font-family:var(--cz); color:var(--band); letter-spacing:.02em;}

/* ---------- MOOT: schedule spine ---------- */
.spine{position:relative; margin-top:44px;}
.spine__svg{position:absolute; left:14px; top:0; height:100%; width:60px; overflow:visible;
  pointer-events:none;}
@media(min-width:800px){.spine__svg{left:50%; transform:translateX(-30px);}}
.spine__path{fill:none; stroke:var(--parchment); stroke-width:2; stroke-linecap:round;}
.ev{position:relative; padding-left:62px; padding-bottom:34px;}
@media(min-width:800px){
  .ev{width:50%; padding-left:0; padding-right:64px; text-align:right;}
  .ev:nth-child(even){margin-left:50%; padding-right:0; padding-left:64px; text-align:left;}
}
.ev__d{font-family:var(--cz); font-size:1.05rem; color:var(--parchment); line-height:1.3;}
.ev__t{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--band4);
  margin-top:6px;}
.ev__e{margin:10px 0 0; color:var(--band2); font-size:.95rem;}
.ev__n{margin:6px 0 0; font-size:.85rem; color:var(--band4);}
.ev__dot{position:absolute; left:8px; top:6px; width:13px; height:13px; border-radius:50%;
  background:var(--robe); border:2px solid var(--parchment);}
@media(min-width:800px){.ev__dot{left:auto; right:-6.5px;}
  .ev:nth-child(even) .ev__dot{left:-6.5px; right:auto;}}
.ev--done .ev__dot{background:var(--parchment);}
.ev--done .ev__d{color:var(--band4);}
.ev--next .ev__dot{box-shadow:0 0 0 6px rgba(217,199,163,.16);}

/* ---------- MOOT: portals + docs ---------- */
.portal{display:flex; flex-direction:column; gap:14px; background:var(--robe2);
  border:1px solid var(--parchment2); padding-block:30px; padding-inline:28px;}
.portal--closed{border-color:var(--robe3);}
.portal__s{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--parchment);}
.portal--closed .portal__s{color:var(--band4);}
.doc{display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  background:var(--robe2); border:1px solid var(--robe3); padding-block:26px; padding-inline:24px;
  transition:border-color .3s, transform .3s;}
.doc:hover{border-color:var(--parchment2); transform:translateY(-4px);}
.doc__l{font-family:var(--cz); font-size:1.02rem; letter-spacing:.04em; color:var(--band);}
.doc__d{font-size:.88rem; color:var(--band3); margin:0;}
.doc__a{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--parchment);
  margin-top:auto;}

/* ---------- countdown ---------- */
.cd{display:flex; gap:22px; flex-wrap:wrap; margin-top:26px;}
.cd__u{text-align:center; min-width:64px;}
.cd__n{font-family:var(--cz); font-size:clamp(1.6rem,5vw,2.4rem); line-height:1;
  color:var(--parchment); font-variant-numeric:tabular-nums;}
.cd__l{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--band4); margin-top:8px;}

/* ---------- tables ---------- */
.tw{overflow-x:auto; margin-top:32px; border:1px solid var(--robe3);}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:.9rem;}
th,td{text-align:left; padding-block:14px; padding-inline:16px; border-bottom:1px solid var(--robe3);}
th{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--band4);
  background:var(--robe2); font-weight:500; white-space:nowrap;}
td{color:var(--band2);}
tbody tr:hover td{background:rgba(217,199,163,.04); color:var(--band);}
td:first-child{font-family:var(--cz); color:var(--parchment); white-space:nowrap;}

/* ---------- people ---------- */
.per{background:var(--robe2); border:1px solid var(--robe3); overflow:hidden;}
.per__i{aspect-ratio:1; background:var(--robe3) var(--pi,none) center/cover;
  display:grid; place-items:center; position:relative;}
.per__i svg{width:38%; opacity:.4;}
.per__i.has-photo svg{display:none;}
.per__b{padding-block:22px; padding-inline:22px;}
.per__n{font-family:var(--cz); font-size:1.05rem; color:var(--band); margin:0; letter-spacing:.03em;}
.per__r{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--parchment2);
  margin-top:8px;}
.per__x{font-size:.88rem; color:var(--band3); margin:12px 0 0;}
.rank{margin-top:52px;}
.rank__h{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--robe3); padding-bottom:14px; margin-bottom:26px;}
.rank__c{font-size:9.5px; letter-spacing:.2em; color:var(--band4);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--robe3);}
.faq__q{width:100%; background:none; border:0; color:var(--band); font:inherit; cursor:pointer;
  text-align:left; padding-block:22px; display:flex; justify-content:space-between; gap:20px;
  align-items:center; font-family:var(--cz); font-size:1rem; letter-spacing:.03em;}
.faq__q:hover{color:var(--parchment);}
.faq__i{flex-shrink:0; width:14px; height:14px; position:relative;}
.faq__i::before,.faq__i::after{content:""; position:absolute; background:var(--parchment);
  transition:transform .3s;}
.faq__i::before{left:0; top:6px; width:14px; height:2px;}
.faq__i::after{left:6px; top:0; width:2px; height:14px;}
.faq[open] .faq__i::after{transform:scaleY(0);}
.faq__a{padding-bottom:24px; color:var(--band2); max-width:70ch; margin:0;}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--robe3); background:var(--robe2); padding-block:64px 44px;}
.foot__g{display:grid; gap:36px; grid-template-columns:1fr;}
@media(min-width:800px){.foot__g{grid-template-columns:1.4fr 1fr 1fr;}}
.foot h4{font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--band4);
  margin:0 0 16px; font-family:var(--js); font-weight:500;}
.foot a{display:block; color:var(--band2); text-decoration:none; padding-block:5px; font-size:.93rem;}
.foot a:hover{color:var(--parchment);}
.foot__n{font-family:var(--cz); font-size:1.2rem; letter-spacing:.05em; color:var(--band);}
.foot__x{margin-top:44px; padding-top:24px; border-top:1px solid var(--robe3);
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--band4);}

/* ---------- moot court page ---------- */
.moot-hero{position:relative; overflow:hidden; isolation:isolate; border-bottom:1px solid var(--robe3);
  padding-block:80px 88px;}
@media(min-width:900px){.moot-hero{padding-block:112px 118px;}}
.moot-hero__in{position:relative; z-index:1;}
.h-moot{font-family:var(--cz); font-weight:400; margin:26px 0 0; line-height:1.1; letter-spacing:.01em;
  font-size:clamp(1.55rem,7.2vw,4.4rem); max-width:21ch; text-wrap:balance;}
.h-moot > span{display:block;}
.h-moot .nw{white-space:nowrap;}
.h-moot__em{color:var(--parchment);}
.moot-hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:38px;}
.btn--lg{padding-block:18px; padding-inline:42px; font-size:12px;}
.moot-hero__cd{margin-top:46px; padding-top:24px; border-top:1px solid var(--robe3); max-width:560px;}
.moot-hero__cd .cd{margin-top:18px;}
.run{list-style:none; margin:40px 0 0; padding:0; display:grid; gap:14px; grid-template-columns:1fr;}
@media(min-width:700px){.run{grid-template-columns:repeat(2,minmax(0,1fr));} .run__c:last-child{grid-column:1 / -1;}}
@media(min-width:1050px){.run{grid-template-columns:repeat(5,minmax(0,1fr));} .run__c:last-child{grid-column:auto;}}
.run__c{position:relative; display:flex; flex-direction:column; gap:10px; background:var(--robe2);
  border:1px solid var(--robe3); padding-block:26px 24px; padding-inline:22px;}
.run__n{font-family:var(--cz); font-size:1.9rem; line-height:1; color:var(--parchment);}
.run__c h3{font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; margin:6px 0 0; line-height:1.4;}
.run__c p{color:var(--band2); font-size:.9rem; margin:0;}
@media(min-width:1050px){.run__c:not(:last-child)::after{content:""; position:absolute; top:44px; right:-15px;
  width:16px; height:1px; background:var(--parchment2);}}

/* ---------- footer paragraph, contact ---------- */
.foot__p{margin:14px 0 0; max-width:46ch; font-size:.82rem; line-height:1.75; color:var(--band3);}
.contact__v{margin:14px 0 0; font-family:var(--cz); font-style:normal; font-size:clamp(1.02rem,2.6vw,1.3rem);
  line-height:1.65; letter-spacing:.02em; color:var(--band);}
.contact__v--mail{font-family:var(--js); font-weight:400; letter-spacing:.01em;}
.contact__v a{color:var(--band); text-decoration:none; overflow-wrap:anywhere;}
.contact__v a:hover{color:var(--parchment);}
.card > .btn{margin-top:22px;}

/* ---------- data states ---------- */
.ld{color:var(--band4); font-size:.92rem; padding-block:24px;}
.err{border:1px solid var(--oxblood); background:rgba(126,43,39,.12); color:var(--band2);
  padding-block:16px; padding-inline:18px; font-size:.9rem; margin-top:20px;}

@media (prefers-reduced-motion:reduce){
  .track{flex-direction:column !important; transform:none !important;}
  .stage{overflow:visible;}
  *{scroll-behavior:auto !important;}
}

/* ---------- trustees ---------- */
.trustees-sec{padding-bottom:104px;}
.trustees{display:grid; gap:14px; grid-template-columns:minmax(0,1fr);}
@media(min-width:640px){.trustees{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(min-width:1000px){.trustees{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;}}
.trustee{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:176px; overflow:hidden;
  background:linear-gradient(160deg,var(--robe2) 0%,var(--robe) 100%); border:1px solid var(--robe3);
  padding-block:28px 26px; padding-inline:26px; transition:border-color .35s, transform .35s;}
.trustee::before{content:""; position:absolute; top:-1px; left:26px; width:36px; height:2px; background:var(--parchment);}
.trustee::after{content:attr(data-initials); position:absolute; top:12px; right:18px; font-family:var(--cz); font-size:3.6rem;
  line-height:1; letter-spacing:.04em; color:var(--robe3); pointer-events:none; transition:color .35s;}
.trustee:hover{border-color:var(--parchment2); transform:translateY(-3px);}
.trustee:hover::after{color:var(--robe4);}
.trustee__n{position:relative; margin:0; font-family:var(--cz); font-weight:400; font-size:clamp(1.12rem,2.1vw,1.32rem);
  line-height:1.32; letter-spacing:.03em; color:var(--band); text-wrap:balance;}
.trustee__r{position:relative; margin:10px 0 0; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--parchment2);}
@media (prefers-reduced-motion:reduce){.trustee{transition:none;}}

/* ---------- privacy policy ---------- */
.legal{padding-bottom:104px;}
.legal__body{max-width:72ch;}
.legal__meta{margin:0 0 34px; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--parchment2);}
.legal__body h2{margin:46px 0 0; font-size:clamp(1.15rem,2.6vw,1.45rem); line-height:1.3; color:var(--band);}
.legal__meta + h2{margin-top:0;}
.legal__body p{margin:14px 0 0; color:var(--band2);}
.legal__body ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px;}
.legal__body li{position:relative; padding-left:22px; color:var(--band2);}
.legal__body li::before{content:""; position:absolute; left:2px; top:.72em; width:6px; height:6px;
  border:1px solid var(--parchment); transform:rotate(45deg);}
.legal__body a{color:var(--parchment); text-decoration:none;}
.legal__body a:hover{color:var(--band);}

/* ---------- portals shown inside the website ---------- */
.portal-page{margin:0; min-height:100vh; background:var(--robe);}
.portal-frame{position:fixed; inset:0; width:100%; height:100%; border:0; background:var(--robe); opacity:0; transition:opacity .45s ease;}
.portal-frame.is-ready{opacity:1;}
.portal-wait{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:12px; margin:0;
  color:var(--band2); font-size:.95rem;}
.portal-spin{width:18px; height:18px; border-radius:50%; border:2px solid var(--robe4); border-top-color:var(--parchment);
  animation:portalTurn .9s linear infinite;}
@keyframes portalTurn{to{transform:rotate(360deg);}}
.portal-note{max-width:640px; margin:0 auto; padding-block:120px; padding-inline:26px;}
.portal-note h1{margin:14px 0 0; font-family:var(--cz); font-weight:400; font-size:clamp(1.6rem,5.4vw,2.4rem); line-height:1.2;}
.portal-note p{color:var(--band2);}
.portal-note a:not(.btn){color:var(--parchment); text-decoration:none;}
.portal-note .btn{margin-top:14px;}
@media (prefers-reduced-motion:reduce){.portal-spin{animation:none;} .portal-frame{transition:none;}}

/* ---- homage photograph in the In memoriam section ---- */
.homage{margin:30px 0 6px; max-width:760px;}
.homage__ph{aspect-ratio:16/9; background:var(--robe3) center/cover; border:1px solid var(--robe4); border-radius:4px;}
.homage figcaption{margin-top:12px; font-size:.9rem; line-height:1.55; color:var(--band3); font-style:italic; max-width:60ch;}

/* ---- Tamil text ---- */
.ta{font-family:"Noto Sans Tamil",var(--js);}

/* ---- how to register, the step by step guide ---- */
.reg-help-card{margin-top:26px; padding:18px 20px; background:var(--robe2); border:1px solid var(--robe3);
  border-left:2px solid var(--parchment); border-radius:4px;}
.reg-help{margin:0; color:var(--band2); font-size:.98rem; line-height:1.7;}
.reg-help__k{font-weight:500; color:var(--band);}
.reg-help__o{color:var(--band4);}
.reg-help a{color:var(--parchment); text-decoration:none; white-space:nowrap;}
.reg-help a:hover{color:var(--band);}
.reg-guide{margin-top:32px;}
/* the language radios drive the toggle and which panel shows; hidden from view but focusable */
.reg-radio{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.reg-toggle{display:inline-flex; gap:4px; padding:4px; margin-bottom:24px;
  background:var(--robe2); border:1px solid var(--robe3); border-radius:999px;}
.reg-toggle label{cursor:pointer; padding:8px 20px; border-radius:999px; font-family:var(--js);
  font-size:.85rem; letter-spacing:.04em; color:var(--band3); transition:color .2s, background .2s;}
.reg-toggle label:hover{color:var(--band);}
#reg-en:checked ~ .reg-toggle label[for="reg-en"],
#reg-ta:checked ~ .reg-toggle label[for="reg-ta"]{background:var(--parchment); color:var(--robe);}
.reg-radio:focus-visible ~ .reg-toggle label[for="reg-en"]{outline:2px solid var(--parchment); outline-offset:2px;}
#reg-ta:focus-visible ~ .reg-toggle label[for="reg-ta"]{outline:2px solid var(--parchment); outline-offset:2px;}
.reg-panel{background:var(--robe2); border:1px solid var(--robe3); border-radius:4px; padding:28px 26px; max-width:760px;}
.reg-ta-panel{display:none;}
#reg-ta:checked ~ .reg-panels .reg-en-panel{display:none;}
#reg-ta:checked ~ .reg-panels .reg-ta-panel{display:block;}
.reg-h{font-family:var(--cz); font-weight:400; font-size:1.05rem; letter-spacing:.02em; color:var(--band); margin:22px 0 12px;}
.reg-h:first-of-type{margin-top:18px;}
.reg-list, .reg-steps{margin:0; padding-left:1.25em; display:grid; gap:9px; color:var(--band2);}
.reg-list li, .reg-steps li{line-height:1.62; padding-left:4px;}
.reg-list li::marker{color:var(--parchment2);}
.reg-steps li::marker{color:var(--parchment); font-family:var(--cz);}

/* ---- trustees page header with the group photograph ---- */
.trustees-head{display:grid; gap:30px; align-items:center;}
@media(min-width:900px){.trustees-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px;}}
.trustees-group{margin:0;}
.trustees-group__ph{aspect-ratio:3/2; background:var(--robe3) center/cover; border:1px solid var(--robe4); border-radius:4px;}

/* ---- chambers header with the honour-roll tally ---- */
.chambers-head{display:grid; gap:34px; align-items:center;}
@media(min-width:900px){.chambers-head{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:54px;}}
.tally{margin:0; background:var(--robe2); border:1px solid var(--robe3); border-radius:4px; padding:24px 26px;}
.tally__k{font-family:var(--js); font-weight:500; font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--parchment2); margin:0; line-height:1.5;}
.tally__list{list-style:none; margin:16px 0 0; padding:0;}
.tally__list li{display:grid; grid-template-columns:3rem minmax(0,1fr); align-items:center; gap:18px;
  padding:12px 0; border-top:1px solid var(--robe3);}
.tally__list li:first-child{border-top:0;}
.tally__n{font-family:var(--cz); font-weight:400; font-size:2.1rem; line-height:1; color:var(--parchment);
  text-align:right; font-variant-numeric:tabular-nums;}
.tally__l{font-size:.9rem; line-height:1.4; color:var(--band2);}
.tally__f{margin:16px 0 0; padding-top:16px; border-top:1px solid var(--robe3); font-size:.82rem; line-height:1.6;
  font-style:italic; color:var(--band3);}