/* ============================================================
   GIT 2026 — Globalizing Indian Thought, IIM Kozhikode
   Shared stylesheet for all pages
   Palette: Indian indigo · brass · palm-leaf ivory · vermilion
   ============================================================ */

/* ───────────────  TOKENS  ─────────────── */
:root{
  --indigo-deep:#0B142E;
  --indigo:#0E1A3C;
  --indigo-soft:#1B2C57;
  --brass:#C79A2E;
  --brass-dim:#8E6E1F;
  --leaf:#EFE7D6;
  --leaf-lift:#F7F1E4;
  --paper:#FBF8F1;
  --ink:#171922;
  --ink-soft:#4A4E5C;
  --ink-hair:rgba(23,25,34,.16);
  --brass-hair:rgba(199,154,46,.30);
  --vermilion:#A8321D;

  --display:"Tiro Devanagari Hindi",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --edge:clamp(1.15rem,4vw,2.75rem);
  --wide:1220px;
  --band:clamp(3.6rem,8vw,7rem);
  --navh:74px;

  /* the jaali lattice, reused as a texture across pages */
  --jaali:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='62' height='62'%3E%3Crect x='17' y='17' width='28' height='28' fill='none' stroke='%23C79A2E' stroke-width='.7'/%3E%3Cpolygon points='31,7 55,31 31,55 7,31' fill='none' stroke='%23C79A2E' stroke-width='.7'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 12px)}
body{
  margin:0;background:var(--leaf);color:var(--ink);
  font-family:var(--body);font-size:clamp(1rem,.96rem + .18vw,1.08rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,svg{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;line-height:1.1;letter-spacing:-.012em}
p{margin:0 0 1.05em}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--edge)}
.band{padding-block:var(--band)}
.band-tight{padding-block:clamp(2.4rem,5vw,4rem)}
.on-dark{background:var(--indigo);color:var(--leaf)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--leaf)}
.on-paper{background:var(--paper)}

/* ───────────────  SHARED TYPE PIECES  ─────────────── */
.eyebrow{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass-dim);display:flex;align-items:center;gap:.85rem;margin:0 0 1.3rem;
}
.eyebrow::after{content:"";height:1px;flex:1;max-width:110px;background:currentColor;opacity:.45}
.on-dark .eyebrow{color:var(--brass)}
.h-sec{font-size:clamp(1.85rem,1.2rem + 2.7vw,3.2rem)}
.lede{text-align:justify;font-size:clamp(1.05rem,1rem + .5vw,1.28rem);color:var(--ink-soft);max-width:62ch}
.on-dark .lede{color:#B9C3DC}
.prose{max-width:66ch}
.rule{height:1px;background:var(--ink-hair);border:0;margin:0}

.btn{
  display:inline-block;font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.75rem 1.15rem;text-decoration:none;border:1px solid var(--brass);
  background:var(--brass);color:var(--indigo-deep);transition:background .2s,color .2s;
}
.btn:hover{background:transparent;color:var(--brass-dim)}
.on-dark .btn:hover{color:var(--brass)}
.btn.ghost{background:transparent;color:var(--brass-dim)}
.on-dark .btn.ghost{color:var(--brass)}
.btn.ghost:hover{background:var(--brass);color:var(--indigo-deep)}
.btn.ink{border-color:var(--indigo);background:var(--indigo);color:var(--leaf)}
.btn.ink:hover{background:transparent;color:var(--indigo)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem}

/* ───────────────  NAV (light, so the logos read)  ─────────────── */
.nav{
  position:sticky;top:0;z-index:60;background:var(--paper);
  border-bottom:1px solid var(--ink-hair);
}
.nav-in{
  max-width:var(--wide);margin-inline:auto;padding:.7rem var(--edge);
  display:flex;align-items:center;gap:1.1rem;min-height:var(--navh);
}
.lockup{display:flex;align-items:center;gap:.9rem;margin-right:auto;text-decoration:none;flex:none}
.lockup img{height:66px;width:auto;object-fit:contain}
.lockup .git-mark{height:52px}
.lockup .divider{width:1px;height:34px;background:var(--ink-hair);flex:none}
.nav-links{display:flex;align-items:center;gap:1.25rem}
.nav-links a{
  font-size:.79rem;letter-spacing:.055em;text-transform:uppercase;color:var(--ink-soft);
  text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav-links a:hover{color:var(--ink);border-color:var(--brass)}
.nav-links a.is-active{color:var(--ink);border-color:var(--vermilion)}
.nav-links .btn{color:var(--indigo-deep);border-bottom-color:var(--brass)}
.nav-links .btn:hover{color:var(--brass-dim)}
.burger{
  display:none;background:none;border:1px solid var(--ink-hair);color:var(--ink);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.62rem .8rem;cursor:pointer;flex:none;
}
@media(max-width:1080px){
  .nav-links{gap:1rem}
  .nav-links a{font-size:.74rem}
}
@media(max-width:940px){
  .lockup img{height:66px}
  .lockup .git-mark{height:44px}
  .nav-links{
    position:absolute;inset:100% 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--ink-hair);
    padding:.25rem var(--edge) 1.4rem;display:none;
    box-shadow:0 24px 40px -24px rgba(11,20,46,.35);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:.95rem 0;border-bottom:1px solid var(--ink-hair);font-size:.95rem;letter-spacing:.02em}
  .nav-links .btn{margin-top:1rem;text-align:center;font-size:.75rem;letter-spacing:.14em}
  .burger{display:block}
  .nav-in{position:relative}
}
@media(max-width:420px){
  .lockup{gap:.6rem}
  .lockup img{height:32px}
  .lockup .git-mark{height:38px}
}

/* ───────────────  HOME HERO: cover page  ───────────────
   Full-width type. Watercolour Arjuna anchored right, bleeding off the edge.
   Add class="left" to .hero-arjuna to flip him to the other side. */
.hero{
  position:relative;min-height:min(94svh,960px);display:flex;align-items:center;
  background:var(--indigo-deep);overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--jaali);background-size:62px 62px;opacity:.12;
}
.hero-arjuna{
  position:absolute;top:0;bottom:0;right:0;z-index:1;
  width:min(64%,980px);pointer-events:none;
  background:url("../images/arjuna.jpg") 62% 30%/cover no-repeat;
  /* near-full colour — the mask and veil do the blending, not brightness */
  filter:saturate(.9) brightness(1.02) contrast(1.04);
  /* dissolves left into the indigo, and down into the ticker */
  -webkit-mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%);
  mask-image:linear-gradient(100deg,transparent 0%,rgba(0,0,0,.35) 20%,#000 48%);
}
/* light bottom fade only, so the painting meets the ticker cleanly */
.hero-arjuna::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,38,84,.06) 0%,rgba(20,38,84,.1) 60%,rgba(11,20,46,.5) 100%);
}
.hero-arjuna.left{left:0;right:auto;transform:scaleX(-1)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(100deg,rgba(11,20,46,.96) 0%,rgba(11,20,46,.8) 34%,rgba(11,20,46,.1) 60%,rgba(11,20,46,0) 100%),
    linear-gradient(to top,rgba(11,20,46,.62),transparent 30%);
}
.hero-grid{position:relative;z-index:3;width:100%;padding-block:clamp(2.8rem,7vw,5rem)}
.hero-copy{max-width:min(100%,980px)}

/* full-colour GIT mark needs a light ground */
.hero-logo-plate{
  display:inline-block;background:var(--paper);border:1px solid rgba(199,154,46,.55);
  padding:clamp(.6rem,1.4vw,.9rem) clamp(.8rem,1.8vw,1.2rem);
  margin:0 0 clamp(1.3rem,3vw,2.2rem);box-shadow:0 18px 40px -22px rgba(0,0,0,.6);
}
.hero-logo{height:clamp(46px,6vw,154px);width:auto;object-fit:contain;display:block}

.hero-eyebrow{
  font-family:var(--mono);font-size:clamp(.62rem,.58rem + .18vw,.73rem);letter-spacing:.2em;
  text-transform:uppercase;color:#A9B4D0;margin:0 0 .85rem;line-height:1.7;
}
/* THE EVENT NAME — the bold line */
.hero-event{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.3rem,.75rem + 2.5vw,3rem);line-height:1.03;letter-spacing:-.012em;
  color:var(--leaf);margin:0 0 clamp(1.2rem,2.6vw,1.9rem);padding-bottom:clamp(1rem,2.2vw,1.5rem);
  border-bottom:1px solid var(--brass-hair);max-width:22ch;
}
.hero-event b{color:var(--brass);font-weight:700}
/* THE THEME — the big line */
.hero h1{
  color:var(--leaf);font-size:clamp(3rem,1rem + 9.6vw,8.6rem);line-height:.9;
  letter-spacing:-.035em;margin:0;
}
.hero h1 em{font-style:italic;color:var(--brass)}
.hero-3m{
  margin:clamp(1.1rem,2.4vw,1.8rem) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  font-size:clamp(.82rem,.72rem + .6vw,1.28rem);letter-spacing:.09em;color:#E4D8BC;
}
.hero-3m i{font-style:normal;color:var(--brass)}
.hero-meta{
  margin:clamp(1.5rem,3vw,2.2rem) 0 0;display:grid;gap:.4rem;
  font-family:var(--mono);font-size:clamp(.66rem,.62rem + .2vw,.75rem);
  letter-spacing:.1em;text-transform:uppercase;color:#A9B4D0;
}
.hero-meta b{color:var(--leaf);font-weight:500}
.hero .btn-row{margin-top:clamp(1.6rem,3vw,2.2rem)}

@media(max-width:940px){
  .hero{min-height:min(96svh,860px)}
  .hero-arjuna{width:min(88%,620px);opacity:.95}
  .hero::after{
    background:
      linear-gradient(120deg,rgba(11,20,46,.95) 0%,rgba(11,20,46,.8) 44%,rgba(11,20,46,.25) 100%),
      linear-gradient(to top,rgba(11,20,46,.8),transparent 38%);
  }
  .hero-event{max-width:100%}
}
@media(max-width:560px){
  .hero-arjuna{width:100%;opacity:.6;background-position:58% 24%}
  .hero-logo{height:44px}
}

/* ───────────────  INNER PAGE HEAD  ─────────────── */
.phead{position:relative;background:var(--indigo);overflow:hidden;border-bottom:1px solid var(--brass-hair)}
.phead::before{
  content:"";position:absolute;inset:0;background-image:var(--jaali);background-size:62px 62px;opacity:.18;
}
.phead::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,20,46,.92),rgba(11,20,46,.55));
}
.phead .wrap{position:relative;z-index:2;padding-block:clamp(2.6rem,7vw,4.6rem)}
.crumb{
  font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  margin:0 0 1.1rem;
}
.crumb a{text-decoration:none;color:#93A0BF}
.crumb a:hover{color:var(--leaf)}
.phead h1{color:var(--leaf);font-size:clamp(2.1rem,1.3rem + 4vw,4.2rem);max-width:22ch}
.phead p{color:#B9C3DC;max-width:60ch;margin:1.1rem 0 0;font-size:clamp(1rem,.97rem + .35vw,1.18rem)}

/* ───────────────  MULTILOGUE TICKER  ─────────────── */
.ticker{background:var(--indigo-deep);border-block:1px solid var(--brass-hair);overflow:hidden;position:relative}
.ticker-label{
  position:absolute;inset:0 auto 0 0;z-index:2;display:flex;align-items:center;
  padding:0 1.1rem 0 var(--edge);background:var(--indigo-deep);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  border-right:1px solid var(--brass-hair);white-space:nowrap;
}
.ticker-track{display:flex;width:max-content;animation:slide 62s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  padding:.9rem 1.8rem;font-size:.82rem;color:#9EA9C6;white-space:nowrap;display:flex;align-items:center;gap:.7rem;
}
.ticker-track span::before{content:"";width:4px;height:4px;background:var(--brass);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}
@media(max-width:760px){.ticker-label{display:none}}

/* ───────────────  3M TRIPTYCH  ─────────────── */
.triptych{display:grid;grid-template-columns:repeat(3,1fr);margin-top:2.8rem;border-top:1px solid var(--brass-hair)}
.m-panel{padding:2.4rem 1.9rem 2.7rem;border-right:1px solid var(--brass-hair);position:relative}
.m-panel:last-child{border-right:0}
.m-panel .deva{font-family:var(--display);font-size:2.5rem;color:var(--brass);line-height:1;margin:0 0 .3rem}
.m-panel .translit{font-family:var(--mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:#8E9AB8;margin:0 0 1.7rem}
.m-panel h2,.m-panel h3{font-size:clamp(1.45rem,1.2rem + 1vw,2.05rem);color:var(--leaf);margin:0 0 .85rem}
.m-panel p{color:#B9C3DC;font-size:.97rem;margin:0}
.m-panel::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.m-panel:hover::before{transform:scaleX(1)}
@media(max-width:860px){
  .triptych{grid-template-columns:1fr}
  .m-panel{border-right:0;border-bottom:1px solid var(--brass-hair);padding:2rem 0 2.2rem}
}

/* ───────────────  TRACK CARDS  ─────────────── */
.tracks{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;
  background:var(--ink-hair);border:1px solid var(--ink-hair);margin-top:2.6rem;
}
.track{background:var(--leaf);padding:1.8rem 1.6rem 2rem;position:relative;transition:background .3s}
.on-paper .track{background:var(--paper)}
.track:hover{background:var(--leaf-lift)}
.track .num{font-family:var(--mono);font-size:.71rem;color:var(--brass-dim);letter-spacing:.1em;display:block;margin-bottom:.8rem}
.track h2,.track h3{font-size:1.22rem;line-height:1.24;margin:0 0 .65rem;max-width:26ch}
.track p{font-size:.92rem;color:var(--ink-soft);margin:0}
.track .m-tag{
  display:inline-block;margin-top:1.1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass-dim);border:1px solid var(--brass-hair);padding:.22rem .5rem;
}
.track::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;background:var(--vermilion);transform:scaleY(0);transform-origin:top;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.track:hover::after{transform:scaleY(1)}

/* ───────────────  TWO-COLUMN LAYOUTS  ─────────────── */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split-even{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media(max-width:880px){.split,.split-even{grid-template-columns:1fr}}

.frame{position:relative;border:1px solid var(--ink-hair);padding:.5rem;background:#fff}
.frame img,.frame .ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.frame.wide img,.frame.wide .ph{aspect-ratio:16/10}
.frame .ph{
  background:linear-gradient(150deg,var(--indigo-soft),var(--indigo-deep));display:grid;place-items:center;
  color:rgba(239,231,214,.5);font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-align:center;padding:1rem;
}
.frame figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);padding:.8rem .2rem .15rem}

.pull{
  margin:2rem 0;padding:0 0 0 1.4rem;border-left:2px solid var(--brass);
  font-family:var(--display);font-size:clamp(1.2rem,1rem + 1.1vw,1.8rem);line-height:1.34;color:var(--ink);
}
.on-dark .pull{color:var(--leaf)}

.numlist{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--ink-hair)}
.numlist li{
  display:grid;grid-template-columns:2.5rem 1fr;gap:.85rem;padding:.95rem .2rem;
  border-bottom:1px solid var(--ink-hair);font-size:.97rem;
}
.numlist li span{font-family:var(--mono);font-size:.71rem;color:var(--brass-dim);padding-top:.3rem}
.on-dark .numlist{border-color:var(--brass-hair)}
.on-dark .numlist li{border-color:var(--brass-hair);color:#C4CDE3}

/* ───────────────  SPEC BOXES + DATES  ─────────────── */
.spec{border:1px solid var(--ink-hair);padding:1.7rem 1.5rem;margin-bottom:1.2rem;background:var(--paper)}
.on-dark .spec{border-color:var(--brass-hair);background:rgba(255,255,255,.025)}
.spec h2,.spec h3{font-size:1.3rem;margin:0 0 .3rem}
.spec .count{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-dim);margin:0 0 1rem}
.on-dark .spec .count{color:var(--brass)}
.spec p{font-size:.94rem;color:var(--ink-soft);margin:0 0 .8rem}
.on-dark .spec p{color:#B2BCD6}
.spec ol,.spec ul{margin:.2rem 0 0;padding-left:1.15rem;color:var(--ink-soft);font-size:.9rem}
.on-dark .spec ol,.on-dark .spec ul{color:#B2BCD6}
.spec li{margin-bottom:.25rem}

.dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--brass-hair)}
.dates li{display:grid;gap:.3rem;padding:1.1rem .2rem;border-bottom:1px solid var(--brass-hair)}
.dates .d{font-family:var(--mono);font-size:.73rem;letter-spacing:.11em;color:var(--brass);text-transform:uppercase}
.dates .t{font-family:var(--display);font-size:1.16rem;color:var(--leaf)}
.dates .live{
  display:inline-block;margin-left:.5rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--indigo-deep);background:var(--brass);padding:.15rem .42rem;vertical-align:.18em;
}

/* ───────────────  FEES TABLE (stacks on mobile)  ─────────────── */
.fees{width:100%;border-collapse:collapse;margin-top:2.4rem;font-size:1rem}
.fees caption{text-align:left;font-family:var(--mono);font-size:.65rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:.9rem}
.fees th,.fees td{text-align:left;padding:1.05rem .55rem;border-bottom:1px solid var(--ink-hair)}
.fees thead th{font-family:var(--mono);font-weight:400;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);border-bottom-color:rgba(23,25,34,.35)}
.fees td:last-child,.fees th:last-child{text-align:right;font-family:var(--mono);font-size:.96rem;white-space:nowrap}
.fees tbody tr:hover{background:var(--leaf-lift)}
@media(max-width:560px){
  .fees thead{display:none}
  .fees tr{display:block;border-bottom:1px solid var(--ink-hair);padding:.9rem 0}
  .fees td{display:flex;justify-content:space-between;gap:1rem;border:0;padding:.25rem 0}
  .fees td:last-child{text-align:right}
  .fees tbody tr:hover{background:none}
}
.notes{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.45rem}
.notes li{font-size:.9rem;color:var(--ink-soft);padding-left:1.05rem;position:relative}
.notes li::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;background:var(--brass);transform:rotate(45deg)}
.on-dark .notes li{color:#B2BCD6}

/* ───────────────  INFO GRID (venue logistics etc.)  ─────────────── */
.infogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--brass-hair);border:1px solid var(--brass-hair)}
.infogrid > div{background:var(--indigo);padding:1.7rem 1.5rem}
.infogrid h3{font-size:1.14rem;color:var(--leaf);margin:0 0 .55rem}
.infogrid p{font-size:.91rem;color:#AFB9D3;margin:0}
.infogrid .tag{font-family:var(--mono);font-size:.61rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);display:block;margin-bottom:.85rem}

.imgband{position:relative;min-height:clamp(300px,45vh,480px);display:flex;align-items:flex-end;overflow:hidden;background:var(--indigo-deep)}
.imgband img,.imgband .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgband .ph{background:linear-gradient(120deg,#1B2C57,#0B142E 60%,#3B2A18)}
.imgband .scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,20,46,.94) 6%,rgba(11,20,46,.5) 48%,rgba(11,20,46,.12))}
.imgband .wrap{position:relative;z-index:2;padding-block:2.8rem}
.imgband h2{color:var(--leaf);font-size:clamp(1.9rem,1.3rem + 3vw,3.4rem)}
.imgband p{color:#C2CADF;max-width:56ch;margin:.9rem 0 0}

/* ───────────────  TEAM  ─────────────── */
/* Chair — full-width feature */
.chair{
  display:grid;grid-template-columns:clamp(260px,26vw,340px) 1fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center;
  padding:clamp(1.4rem,3vw,2.2rem);border:1px solid var(--ink-hair);background:#fff;margin-top:2.4rem;position:relative;
}
.chair::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--vermilion)}
.chair .portrait,.chair .ph{width:100%;aspect-ratio:1;object-fit:cover}
/* .chair .portrait{filter:grayscale(1) contrast(1.05)} */
.chair .ph{
  background:linear-gradient(150deg,var(--indigo-soft),var(--indigo-deep));display:grid;place-items:center;
  color:var(--brass);font-family:var(--display);font-size:3rem;
}
.chair .role{font-family:var(--mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:var(--vermilion);margin:0 0 .7rem}
.chair h2{font-size:clamp(1.6rem,1.2rem + 1.5vw,2.5rem);margin:0 0 .4rem}
.chair .aff{font-size:.98rem;color:var(--ink-soft);margin:0}
.chair .note{font-size:.95rem;color:var(--ink-soft);margin:1.1rem 0 0;padding-top:1.1rem;border-top:1px solid var(--ink-hair);max-width:58ch}
@media(max-width:720px){.chair{grid-template-columns:1fr}.chair .portrait,.chair .ph{max-width:230px}}

/* Co-Chairs — large paired cards */
.cochairs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.3rem,2.4vw,2rem);margin-top:1.8rem}
.cochair{
  display:grid;grid-template-columns:clamp(190px,20vw,250px) 1fr;gap:clamp(1.3rem,2.5vw,1.9rem);
  align-items:stretch;min-height:clamp(320px,34vw,420px);
  border:1px solid var(--ink-hair);background:#fff;padding:clamp(1.2rem,2vw,1.6rem);position:relative;
}
.cochair > div:last-child{align-self:center}
.cochair::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brass)}

.cochair .role{font-family:var(--mono);font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass-dim);margin:0 0 .5rem}
.cochair h3{font-size:clamp(1.3rem,1.1rem + .85vw,1.85rem);margin:0 0 .4rem}
.cochair .aff{font-size:.94rem;color:var(--ink-soft);margin:0;max-width:26ch}
@media(max-width:900px){.cochairs{grid-template-columns:1fr}}
@media(max-width:560px){
  .cochair{grid-template-columns:1fr;min-height:0}
  .cochair .pfx{width:min(100%,220px)}
}

/* Members — compact grid */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:1.7rem 1.2rem;margin:1.8rem 0 0;list-style:none;padding:0}
.people li{display:flex;flex-direction:column;gap:.7rem}
.monogram{
  width:120px;height:120px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:.86rem;letter-spacing:.06em;color:var(--brass-dim);background:#fff;overflow:hidden;position:relative;
}
.monogram img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.people h4{font-family:var(--display);font-weight:400;font-size:1.04rem;line-height:1.26;margin:0}
.people .role{font-family:var(--mono);font-size:.61rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-soft);margin:0}

.tier-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1rem;margin-top:clamp(2.4rem,5vw,3.6rem);padding-bottom:.7rem;border-bottom:1px solid rgba(23,25,34,.22)}
.tier-head h2{font-size:clamp(1.35rem,1.2rem + .7vw,1.75rem)}
.tier-head span{font-family:var(--mono);font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);margin-left:auto}

/* ───────────────  CARDS / CONTACT  ─────────────── */
.card{border:1px solid var(--ink-hair);padding:1.7rem 1.6rem;background:var(--paper)}
.on-dark .card{border-color:var(--brass-hair);background:transparent}
.card .tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:var(--brass-dim);display:block;margin-bottom:.95rem}
.on-dark .card .tag{color:var(--brass)}
.card address{font-style:normal;color:var(--ink-soft);font-size:.95rem;line-height:1.75}
.on-dark .card address{color:#B6C0D9}
.card a{text-decoration:none;border-bottom:1px solid var(--brass-dim)}
.card a:hover{border-color:var(--brass)}

/* ───────────────  PAGE-TO-PAGE PAGINATION  ─────────────── */
.pager{border-top:1px solid var(--ink-hair);background:var(--paper)}
.pager .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;padding-block:1.6rem}
.pager a{
  text-decoration:none;display:flex;flex-direction:column;gap:.2rem;
  font-family:var(--mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.pager a b{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.pager a:hover b{color:var(--vermilion)}
.pager .next{margin-left:auto;text-align:right}

/* ───────────────  FOOTER  ─────────────── */
.foot-top{background:var(--paper);border-top:1px solid var(--ink-hair)}
.foot-top .wrap{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding-block:2rem}
.foot-logos{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.foot-logos img{height:48px;width:auto;object-fit:contain}
.foot-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:flex-end}
.foot-nav a{
  text-decoration:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);
}
.foot-nav a:hover{color:var(--vermilion)}
@media(max-width:880px){
  .foot-top .wrap{grid-template-columns:1fr;gap:1.4rem}
  .foot-nav{justify-content:flex-start}
}
.foot-bot{background:var(--indigo-deep);color:#8894B2}
.foot-bot .wrap{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:center;padding-block:1.5rem;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
}
.foot-bot .sep{flex:1}
.foot-bot a{text-decoration:none;color:#8894B2}
.foot-bot a:hover{color:var(--brass)}

/* ───────────────  CTA STRIP  ─────────────── */
.cta{background:var(--indigo-deep);color:var(--leaf);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background-image:var(--jaali);background-size:62px 62px;opacity:.13}
.cta .wrap{position:relative;z-index:2;padding-block:clamp(2.8rem,6vw,4.4rem);display:grid;gap:1.6rem}
.cta h2{color:var(--leaf);font-size:clamp(1.7rem,1.3rem + 2vw,2.8rem);max-width:24ch}
.cta p{color:#B2BCD6;max-width:56ch;margin:0}

/* ───────────────  REVEALS  ─────────────── */
.rv{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .ticker-track{animation:none}
}

/* ───────────────  PHOTO FRAMES WITH INITIALS FALLBACK  ───────────────
   .pfx wraps a real photo over an initials plate. If the photo file is
   missing, the <img> removes itself and the initials stay. Nothing breaks. */
.pfx{position:relative;overflow:hidden}
.pfx > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chair .pfx{width:100%;aspect-ratio:4/5}
.chair .pfx > img{object-position:center 18%}
.chair .pfx .ph{
  position:absolute;inset:0;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--indigo-soft),var(--indigo-deep));
  color:var(--brass);font-family:var(--display);font-size:clamp(2.2rem,6vw,3.2rem);letter-spacing:.04em;
}
.cochair .pfx{width:100%;height:100%;min-height:clamp(260px,28vw,340px);border:1px solid rgba(199,154,46,.45)}
.cochair .pfx > img{object-position:center 18%}
.cochair .pfx .ph{
  position:absolute;inset:0;background:var(--paper);
  display:grid;place-items:center;color:var(--brass-dim);font-family:var(--mono);
  font-size:clamp(1.1rem,2.2vw,1.5rem);letter-spacing:.08em;
}
@media(max-width:720px){.chair .pfx{max-width:260px}}

/* light variant of the dated list, for use on ivory sections */
.dates-light{border-top-color:var(--ink-hair)}
.dates-light li{border-bottom-color:var(--ink-hair)}
.dates-light .d{color:var(--brass-dim)}
.dates-light .t{color:var(--ink)}

/* fee rows read as pairs, not a squashed table, on small screens */
@media(max-width:560px){
  .fees td{display:block;justify-content:flex-start}
  .fees td:first-child{font-family:var(--display);font-size:1.1rem;line-height:1.3}
  .fees td:last-child{text-align:left;color:var(--brass-dim);margin-top:.2rem}
}