/* =====================================================================
   SSMACFL — Sri Satya Sai Raithu Mutually Aided Cooperative Federation Ltd.
   Static site design system.  Groundnut & earth identity: warm cream ground,
   deep earthy brown-maroon primary, groundnut-gold accent, field-green
   secondary.  Bricolage Grotesque display over Inter body.
   All colour lives in :root — retheme from there.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:        #241a14;   /* roasted brown-black — headings, body */
  --ink-soft:   #6a564a;   /* muted body */
  --paper:      #faf5ea;   /* page ground — warm cream */
  --paper-2:    #f2e9d8;   /* alternating section wash */
  --husk:       #eadfc9;   /* soft chip / icon fills — groundnut husk */

  --earth:      #7c3f33;   /* PRIMARY — deep earthy brown-maroon */
  --earth-d:    #56271f;   /* primary, deeper */
  --clay:       #a9614d;   /* lighter earth — highlights */
  --gold:       #d99a2b;   /* groundnut gold — accents, hover bars, ticks */
  --gold-d:     #b57d16;
  --field:      #55803f;   /* field green — secondary accent, links on light */
  --field-d:    #3d5f2c;

  --card:       #ffffff;
  --card-brd:   rgba(36,26,20,.12);
  --line:       rgba(36,26,20,.14);
  --ink-on-dark:#f7f0e3;

  --grad-band:  linear-gradient(135deg,#4a2119 0%,#7c3f33 60%,#a9614d 100%);
  --grad-btn:   linear-gradient(135deg,#56271f,#7c3f33);
  --grad-sun:   linear-gradient(130deg,#d99a2b,#a9614d);
  --grad-rule:  linear-gradient(115deg,#7c3f33,#d99a2b);

  --shadow-sm:  0 2px 10px -4px rgba(36,26,20,.20);
  --shadow:     0 14px 40px -18px rgba(36,26,20,.30);
  --shadow-lg:  0 30px 70px -28px rgba(36,26,20,.42);

  --wrap:       1180px;
  --radius:     16px;
  --radius-lg:  26px;

  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;
  /* Organisation name. Aptos ships with Microsoft Office / Windows 11 and cannot be
     served as a webfont, so it is used when the reader already has it; everyone else
     falls back through close humanist sans faces. */
  --font-org:"Aptos Display","Aptos","Segoe UI Variable Display","Segoe UI","Bricolage Grotesque","Inter",system-ui,sans-serif;
  --font-body:   "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.62;
  font-size:1.02rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--field-d);text-decoration:none;transition:color .18s}
a:hover{color:var(--earth)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.08;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(2.5rem,6vw,4.6rem);font-weight:800}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.28rem}
p{max-width:68ch}
::selection{background:var(--gold);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.4rem)}
section{padding:clamp(3.5rem,8vw,6.5rem) 0}
section.tint{background:var(--paper-2)}
section.dark{background:var(--grad-band);color:var(--ink-on-dark)}
section.dark h1,section.dark h2,section.dark h3{color:#fff}
section.dark p{color:rgba(247,240,227,.82)}

/* ---------- Shared bits ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-body);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--field-d);
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:1.6rem;height:2px;background:var(--grad-rule);border-radius:2px}
section.dark .eyebrow{color:var(--gold)}
.lede{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--ink-soft);line-height:1.6}
section.dark .lede{color:rgba(247,240,227,.85)}

.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:650;font-size:.95rem;
  transition:transform .18s ease,box-shadow .18s ease,background .18s;
  text-align:center;
}
.btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.6px solid var(--card-brd)}
.btn-ghost:hover{border-color:var(--earth);color:var(--earth);transform:translateY(-2px)}
section.dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
section.dark .btn-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.btn-sun{background:var(--grad-sun);color:#fff}
.btn-sun:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}

/* ---------- Organisation name ---------- */
.org-name{
  font-family:var(--font-org);
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.005em;
  line-height:1.04;
}
.hero h1.org-name{font-size:clamp(1.85rem,4.1vw,3.35rem)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.1rem;
  padding:.75rem clamp(1rem,3vw,1.8rem);
  background:rgba(250,245,234,.88);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s,padding .2s;
}
.nav.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(36,26,20,.5)}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand-logo{height:46px;width:auto}
/* the roundel carries dark navy artwork — give it a light plate on the dark footer */
.footer .brand-logo{height:52px;background:#fff;border-radius:10px;padding:4px}
.brand-word{font-family:var(--font-org);font-weight:800;font-size:1.35rem;letter-spacing:.01em;color:var(--earth-d)}
.brand-sub{font-size:.62rem;line-height:1.15;color:var(--ink-soft);max-width:9rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.nav-spacer{flex:1}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links a{
  font-weight:600;font-size:.9rem;color:var(--ink);white-space:nowrap;
  padding:.5rem .56rem;border-radius:999px;position:relative;transition:color .15s,background .15s;
}
.nav-links a:hover{color:var(--earth);background:rgba(124,63,51,.09)}
.nav-links a.active{color:var(--earth)}
.nav-links a.active::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.28rem;height:2px;background:var(--grad-rule);border-radius:2px}

/* dropdown */
.has-sub{position:relative}
.has-sub>a::after{content:"▾";font-size:.6rem;margin-left:.35rem;opacity:.6}
.subnav{
  position:absolute;top:100%;left:0;min-width:230px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:.5rem;
  display:flex;flex-direction:column;gap:.1rem;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:all .18s ease;
}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(4px)}
.subnav a{padding:.55rem .7rem;border-radius:8px;font-size:.9rem}
.subnav a:hover{background:var(--paper-2)}

.nav-cta{margin-left:.4rem}
.nav-links a.nav-cta,.nav-links a.nav-cta:hover{color:#fff}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.4rem}
.nav-toggle span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1279.98px){
  /* backdrop-filter on the header would make it the containing block for the
     fixed-position drawer, so the menu would only be as tall as the header.
     At these widths the bar is opaque anyway. */
  .nav{backdrop-filter:none;background:var(--paper);gap:.5rem}
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(340px,84vw);
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:var(--card);padding:5.5rem 1.3rem 2rem;
    box-shadow:var(--shadow-lg);
    transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0)!important}
  .nav-links a{padding:.8rem .9rem;border-radius:10px;font-size:1rem}
  .nav-links a.active::after{display:none}
  .has-sub>a::after{float:right}
  .subnav{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:none;background:var(--paper-2);
    margin:0;padding:0;
    max-height:0;overflow:hidden;transition:max-height .25s ease,padding .25s ease,margin .25s ease;
  }
  /* collapsed submenus must take no room at all — padding alone left a stripe */
  .has-sub.open .subnav{max-height:480px!important;margin:.15rem 0 .4rem;padding:.3rem}
  .nav-cta{margin:.6rem 0 0}
}

/* Eight menu items, a brand and the language switch need about 1445px of window
   to sit at full size. Down to 1280 they still fit if the spacing and the type
   tighten a little, which is better than sending a laptop to the drawer.
   Measured against the English menu, the wider of the two. */
@media(min-width:1280px) and (max-width:1499.98px){
  .nav{gap:.8rem;padding-left:1rem;padding-right:1rem}
  .nav-links{gap:.1rem}
  .nav-links a{font-size:.82rem;padding:.5rem .42rem}
  .langsw.in-nav{margin-left:.3rem}
  .langsw button{font-size:.74rem;padding:.34rem .5rem}
}

/* ---------- Hero (home) ---------- */
.hero{position:relative;padding:clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 55% at 85% 5%,rgba(217,154,43,.24),transparent 70%),
    radial-gradient(50% 60% at 5% 90%,rgba(124,63,51,.16),transparent 70%);}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero-grid>div:first-child{align-self:center}
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--card);border:1px solid var(--line);
  padding:.4rem .9rem;border-radius:999px;font-size:.78rem;font-weight:650;color:var(--ink-soft);
  box-shadow:var(--shadow-sm);margin-bottom:1.4rem;
}
.hero-badge .pulse{width:8px;height:8px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 0 rgba(169,97,77,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(169,97,77,0)}100%{box-shadow:0 0 0 0 rgba(169,97,77,0)}}
.hero h1{margin-bottom:1.1rem;font-size:clamp(2.3rem,5vw,4rem)}
.hero h1 .accent{color:var(--earth);display:block}
.hero h1 .sun{background:var(--grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.hero-figure{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3;background:var(--earth-d)}
.hero-figure iframe,.hero-figure img{width:100%;height:100%;border:0;object-fit:cover}
.hero-figure .play-note{position:absolute;left:1rem;bottom:1rem;background:rgba(60,32,25,.84);color:#fff;font-size:.74rem;font-weight:600;padding:.35rem .75rem;border-radius:999px;backdrop-filter:blur(4px)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-figure{order:-1}}

/* ---------- Stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.stat{text-align:left;padding:1.3rem 1.4rem;background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-rule)}
.stat .n{font-family:var(--font-display);font-weight:800;font-size:2.3rem;color:var(--earth);line-height:1}
.stat .l{font-size:.86rem;color:var(--ink-soft);margin-top:.35rem;font-weight:600}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.stats{grid-template-columns:1fr}}

/* ---------- Generic card grid ---------- */
.card-grid{display:grid;gap:1.4rem;margin-top:2.6rem}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr!important}}

.card{
  background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);
  padding:1.7rem;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-rule);transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::after{transform:scaleX(1)}
.card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.4rem;background:var(--husk);margin-bottom:1rem}
.card .card-photo{margin:-1.7rem -1.7rem 1.3rem;aspect-ratio:16/9;overflow:hidden;background:var(--husk)}
.card .card-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.card:hover .card-photo img{transform:scale(1.04)}
.card h3{margin-bottom:.5rem}
.card p{font-size:.95rem;color:var(--ink-soft);max-width:none}
section.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff}
section.dark .card p{color:rgba(247,240,227,.8)}
section.dark .card .icon{background:rgba(255,255,255,.13)}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{padding:clamp(2.4rem,6vw,4rem) 0 clamp(2rem,5vw,3.2rem);text-align:center;position:relative;overflow:hidden}
.page-hero .wrap{position:relative;z-index:1;max-width:820px}
.crumbs{font-size:.8rem;color:var(--ink-soft);margin-bottom:1rem;font-weight:600}
.crumbs a{color:var(--ink-soft)}.crumbs a:hover{color:var(--earth)}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:1rem}
.page-hero .lede{margin:0 auto}
.page-hero .eyebrow{justify-content:center}

/* ---------- Split narrative (About) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split.flip>*:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr}.split.flip>*:first-child{order:0}}
.figure-stack{position:relative}
.figure-stack img{border-radius:var(--radius);box-shadow:var(--shadow)}
.figure-stack .tag{position:absolute;left:-.6rem;bottom:-.9rem;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;box-shadow:var(--shadow);font-size:.82rem;font-weight:650}
.figure-stack .tag b{color:var(--earth);display:block;font-family:var(--font-display);font-size:1.3rem}

/* ---------- Mission / Vision / Goal ---------- */
.mvg{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.6rem}
@media(max-width:860px){.mvg{grid-template-columns:1fr}}
.mvg .card .icon{background:var(--grad-sun);color:#fff}

/* ---------- Timeline ---------- */
.timeline{position:relative;margin-top:3rem;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:6px;top:.5rem;bottom:.5rem;width:2px;background:var(--line)}
.tl-item{position:relative;padding:0 0 2rem 1.8rem}
.tl-item::before{content:"";position:absolute;left:-1.55rem;top:.35rem;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--earth)}
.tl-item:last-child{padding-bottom:0}
.tl-item .yr{font-family:var(--font-display);font-weight:800;color:var(--field-d);font-size:.9rem;letter-spacing:.04em}
.tl-item h3{margin:.2rem 0 .4rem}
.tl-item p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- Board grid ---------- */
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
@media(max-width:900px){.board-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.board-grid{grid-template-columns:1fr}}
.member{background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.member:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.member .avatar{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:#fff;background:var(--grad-btn);margin-bottom:1rem;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 4px var(--husk)}
.member .avatar.photo{background:var(--husk)}
.member .avatar.photo img{width:100%;height:100%;object-fit:cover;object-position:center top}
.member h3{font-size:1.12rem;margin-bottom:.15rem}
.member .role{font-size:.82rem;font-weight:700;color:var(--field-d);text-transform:uppercase;letter-spacing:.05em}
.member .qual{font-size:.85rem;color:var(--ink-soft);margin:.5rem 0}
.member .exp{display:inline-block;margin-top:.5rem;font-size:.76rem;font-weight:700;background:var(--husk);color:var(--earth-d);padding:.25rem .6rem;border-radius:999px}
.member .bio{font-size:.9rem;color:var(--ink-soft);margin-top:.7rem}

/* ---------- Ledger (Legal facts) ---------- */
.ledger{margin-top:2.6rem;border:1px solid var(--card-brd);border-radius:var(--radius);overflow:hidden;background:var(--card);box-shadow:var(--shadow-sm)}
.ledger-row{display:grid;grid-template-columns:220px 1fr;gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid var(--line)}
.ledger-row:last-child{border-bottom:none}
.ledger-row:nth-child(odd){background:rgba(234,223,201,.38)}
.ledger-row .k{font-weight:700;font-size:.9rem;color:var(--earth-d)}
.ledger-row .v{font-size:.95rem}
.ledger-row .v small{display:block;color:var(--ink-soft);font-size:.82rem}
@media(max-width:600px){.ledger-row{grid-template-columns:1fr;gap:.2rem}}

/* ---------- Doc / certificate cards ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
@media(max-width:900px){.doc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.doc-grid{grid-template-columns:1fr}}
.doc-card{
  display:flex;flex-direction:column;gap:.5rem;text-align:left;
  background:var(--card);border:1px solid var(--card-brd);border-radius:14px;
  padding:1.3rem;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--earth)}
.doc-card .doc-ico{font-size:1.5rem}
.doc-card b{font-family:var(--font-display);font-size:1.02rem}
.doc-card small{color:var(--ink-soft);font-size:.83rem}
.doc-card .open{margin-top:auto;font-size:.8rem;font-weight:700;color:var(--field-d)}

/* ---------- Reports timeline ---------- */
.rtl{position:relative;margin-top:3rem}
.rtl-spine{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-50%)}
.rtl-spine-fill{position:absolute;inset:0 auto 0 0;width:100%;height:0;background:var(--grad-rule)}
.rtl-row{display:grid;grid-template-columns:1fr 90px 1fr;align-items:center;gap:1rem;margin-bottom:1.6rem;position:relative}
.rtl-node{grid-column:2;justify-self:center;width:66px;height:66px;border-radius:50%;background:var(--card);border:2px solid var(--earth);display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.82rem;color:var(--earth-d);box-shadow:var(--shadow-sm);z-index:1;text-align:center}
.rtl-node.is-latest{background:var(--grad-btn);color:#fff;border-color:transparent}
.rtl-card{
  display:flex;gap:.9rem;align-items:center;
  background:var(--card);border:1px solid var(--card-brd);border-radius:14px;
  padding:.9rem 1rem;cursor:pointer;box-shadow:var(--shadow-sm);position:relative;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.rtl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--earth)}
.rtl-card.left{grid-column:1;text-align:right;flex-direction:row-reverse}
.rtl-card.right{grid-column:3}
.rtl-badge{position:absolute;top:-.6rem;right:.8rem;background:var(--grad-sun);color:#fff;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px}
.rtl-card.left .rtl-badge{right:auto;left:.8rem}
.rtl-cover{flex-shrink:0;width:52px;height:68px;border-radius:6px;overflow:hidden;background:var(--husk);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.rtl-cover .fb{font-size:1.3rem}
.rtl-cover canvas{width:100%;height:100%;object-fit:cover;display:none}
.rtl-cover.is-loaded canvas{display:block}
.rtl-cover.is-loaded .fb{display:none}
.rtl-card .tx{display:flex;flex-direction:column;gap:.15rem}
.rtl-card .tx b{font-family:var(--font-display);font-size:.98rem;display:block;line-height:1.2}
.rtl-card .tx small{color:var(--ink-soft);font-size:.8rem;display:block}
.rtl-card .tx .open{font-size:.75rem;font-weight:700;color:var(--field-d);margin-top:.15rem;display:block}
.rtl-card.left .tx{align-items:flex-end}
@media(max-width:800px){
  .rtl-spine{left:20px}
  .rtl-row{grid-template-columns:44px 1fr;gap:.8rem}
  .rtl-node{grid-column:1;width:44px;height:44px;font-size:.62rem}
  .rtl-card.left,.rtl-card.right{grid-column:2;text-align:left;flex-direction:row}
  .rtl-card.left .rtl-badge{left:auto;right:.8rem}
}

/* ---------- Partner sub-page ---------- */
.partner-hero{position:relative;overflow:hidden;padding:clamp(3rem,8vw,6rem) 0 clamp(2.6rem,6vw,4rem);background:var(--grad-band);color:#fff}
.partner-hero-media{position:absolute;inset:0;background:center/cover no-repeat;opacity:0}
.partner-hero.has-photo .partner-hero-media{opacity:1}
.partner-hero.has-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,24,18,.48) 0%,rgba(38,24,18,.64) 55%,rgba(38,24,18,.84) 100%)}
.partner-hero-inner{position:relative;z-index:1;max-width:820px}
.partner-hero .crumbs{color:rgba(247,240,227,.75)}
.partner-hero .crumbs a{color:rgba(247,240,227,.75)}
.partner-hero .crumbs a:hover{color:#fff}
.partner-hero-logo{display:grid;place-items:center;width:max-content;background:#fff;border-radius:12px;padding:.75rem 1.1rem;margin:0 0 1.2rem;box-shadow:var(--shadow)}
.partner-hero-logo img{max-height:56px;max-width:220px;width:auto;object-fit:contain;display:block}
.partner-hero .eyebrow{color:var(--gold)}
.partner-hero h1{color:#fff;font-size:clamp(2.3rem,5.5vw,4rem);margin-bottom:1rem}
.partner-hero .lede{color:rgba(247,240,227,.9)}

.tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:900px){.tile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tile-grid{grid-template-columns:1fr}}
.tile{display:flex;gap:1rem;align-items:flex-start;text-align:left;background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);padding:1.4rem;cursor:pointer;font:inherit;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s}
.tile::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-rule);transform:scaleX(0);transform-origin:left;transition:transform .28s}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--earth)}
.tile:hover::after{transform:scaleX(1)}
.tile-ico{flex-shrink:0;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-size:1.5rem;background:var(--husk)}
.tile-ico.thumb{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm)}
.tile-ico.thumb .fb{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem}
.tile-ico.thumb img,.tile-ico.thumb canvas{width:100%;height:100%;object-fit:cover;object-position:top;display:none;position:relative}
.tile-ico.thumb.is-loaded img,.tile-ico.thumb.is-loaded canvas{display:block}
.tile-ico.thumb.is-loaded .fb{display:none}
.tile-tx{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.tile-tx b{font-family:var(--font-display);font-size:1.03rem;line-height:1.2}
.tile-tx small{color:var(--ink-soft);font-size:.85rem}
.tile-open{margin-top:.4rem;font-size:.78rem;font-weight:700;color:var(--field-d)}

/* ---------- Partner cards (Projects → sub-pages) ---------- */
.partner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:900px){.partner-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.partner-grid{grid-template-columns:1fr}}
.partner-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;color:var(--ink)}
.partner-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--earth);color:var(--ink)}
/* photograph, with the funder's logo as a badge sitting on its lower edge */
.partner-card-pic{position:relative;aspect-ratio:16/10;background:center/cover no-repeat var(--earth-d)}
.partner-card-pic.nophoto{background:var(--grad-band)}
.partner-card-badge{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:0 3px 12px rgba(36,26,20,.22);border:2px solid #fff;overflow:hidden;z-index:1}
.partner-card-badge img{max-width:78%;max-height:78%;width:auto;height:auto;object-fit:contain}
.partner-card-body{padding:2.3rem 1.4rem 1.3rem;display:flex;flex-direction:column;gap:.25rem;flex:1;text-align:center}
.partner-card-body b{font-family:var(--font-org);text-transform:uppercase;letter-spacing:.02em;font-size:1rem;color:var(--earth-d)}
.partner-card-body small{color:var(--ink-soft);font-size:.86rem}
.partner-card-go{margin-top:auto;padding-top:.8rem;font-size:.8rem;font-weight:700;color:var(--field-d)}

/* ---------- Supporters wall ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem;margin-top:2.6rem}
.wall .chip{
  background:var(--card);border:1px solid var(--card-brd);border-radius:12px;
  padding:1rem 1.1rem;font-size:.9rem;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:.6rem;box-shadow:var(--shadow-sm);
  transition:transform .16s,border-color .16s;
}
.wall .chip:hover{transform:translateY(-3px);border-color:var(--gold)}
.wall .chip .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* ---------- Video grid ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
@media(max-width:900px){.video-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.video-grid{grid-template-columns:1fr}}
.video-card{background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);overflow:hidden;cursor:pointer;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.video-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.video-thumb{position:relative;aspect-ratio:16/9;background:var(--earth-d) center/cover no-repeat}
.video-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(60,32,25,.58))}
.video-thumb .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;z-index:1;transition:transform .18s}
.video-card:hover .video-thumb .pin{transform:translate(-50%,-50%) scale(1.08)}
.video-thumb .pin svg{width:22px;height:22px;fill:var(--earth);margin-left:3px}
/* a meeting whose film is still to be added */
.video-thumb.no-film{display:grid;place-items:center;
  background:linear-gradient(135deg,var(--earth-d),var(--earth)),var(--earth-d)}
.video-thumb.no-film::after{display:none}
.video-thumb.no-film .soon{color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.02em;
  padding:.5rem 1rem;border:1.5px dashed rgba(255,255,255,.55);border-radius:999px}
.video-card .meta{padding:1.1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem}
.video-card .cat{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--field-d)}
.video-card h3{font-size:1.05rem;margin:.15rem 0 0}
.video-card small{color:var(--ink-soft);font-size:.83rem;line-height:1.45}
.mini-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.mini-btn{font:inherit;font-size:.76rem;font-weight:650;border:none;cursor:pointer;padding:.35rem .7rem;border-radius:999px;background:var(--earth);color:#fff;transition:filter .15s,transform .15s}
.mini-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.mini-btn.ghost{background:var(--husk);color:var(--earth-d)}

/* featured film */
.film{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-top:2.6rem;background:var(--grad-band)}
.film .thumb{position:relative;aspect-ratio:16/10;background:center/cover no-repeat var(--earth-d);cursor:pointer}
.film .thumb .pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.film .thumb .pin svg{width:26px;height:26px;fill:var(--earth);margin-left:4px}
.film .body{padding:clamp(1.6rem,3vw,2.6rem);color:#fff;display:flex;flex-direction:column;justify-content:center}
.film .body .eyebrow{color:var(--gold)}
.film .body h2{color:#fff;margin-bottom:.6rem}
.film .body p{color:rgba(247,240,227,.82)}
@media(max-width:820px){.film{grid-template-columns:1fr}}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow-sm)}
.contact-card h3{margin-bottom:.8rem}
.contact-card .row{display:flex;gap:.7rem;padding:.5rem 0;font-size:.94rem;border-bottom:1px dashed var(--line)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .row .k{font-weight:700;color:var(--earth-d);min-width:6.5rem;flex-shrink:0}
.map-embed{border-radius:var(--radius);overflow:hidden;border:1px solid var(--card-brd);box-shadow:var(--shadow-sm);min-height:320px}
.map-embed iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.bank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:2.4rem}
@media(max-width:900px){.bank-grid{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.cta-band{background:var(--grad-band);color:#fff;text-align:center}
.cta-band h2{color:#fff;margin-bottom:.7rem}
.cta-band p{color:rgba(247,240,227,.85);margin:0 auto 1.6rem}
.cta-band .hero-cta{justify-content:center}

/* ---------- Quote band ---------- */
.quote-band{background:var(--paper-2);text-align:center}
.quote-band .q{font-family:var(--font-display);font-weight:600;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;max-width:24ch;margin:0 auto;color:var(--ink)}
.quote-band .q::before{content:"\201C";color:var(--gold);font-size:2.4em;line-height:0;vertical-align:-.35em;margin-right:.05em}
.quote-band .by{margin-top:1.2rem;font-size:.9rem;font-weight:700;color:var(--field-d);letter-spacing:.04em}

/* ---------- Footer ---------- */
.footer{background:#33201a;color:rgba(247,240,227,.7);padding:clamp(3rem,6vw,4.5rem) 0 1.5rem}
.footer .brand-word{color:#fff}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:2rem}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}
.footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:1rem}
.footer-links{display:flex;flex-direction:column;gap:.5rem}
.footer-links a{color:rgba(247,240,227,.68);font-size:.9rem}
.footer-links a:hover{color:var(--gold)}
.footer .blurb{font-size:.9rem;margin:.8rem 0 1rem;max-width:34ch}
.socials{display:flex;gap:.6rem}
.socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.socials a:hover{background:var(--gold);color:var(--ink)}
.footer-bottom{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;font-size:.8rem}
.footer-bottom a.admin-link{color:rgba(247,240,227,.55)}
.footer-bottom a.admin-link:hover{color:var(--gold)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(38,24,18,.80);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s}
.lightbox.open{opacity:1;visibility:visible}
body.lb-lock{overflow:hidden}
.lb-stage{position:relative;width:min(1000px,100%);max-height:88vh;display:flex;flex-direction:column}
.lb-close{position:absolute;top:-2.8rem;right:0;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center}
.lb-close:hover{background:var(--gold);color:var(--ink)}
.lb-close svg{width:20px;height:20px}
.lb-body{background:#000;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.lb-frame{position:relative;width:100%}
.lb-frame.video{aspect-ratio:16/9}
.lb-frame.doc{height:82vh}
.lb-frame iframe{position:relative;z-index:1;width:100%;height:100%;border:0;display:block;background:#fff}
.lb-frame.image{background:#000;display:grid;place-items:center}
.lb-frame.image img{max-height:82vh;width:auto}
.lb-cap{background:var(--card);color:var(--ink);padding:.7rem 1rem;font-size:.86rem;font-weight:650}
.lb-cap small{color:var(--ink-soft);font-weight:500}
.lb-loading{position:absolute;inset:0;z-index:0;display:grid;place-items:center;gap:.6rem;color:#fff;background:var(--earth-d);font-size:.85rem;transition:opacity .3s}
.lb-loading.done{opacity:0;pointer-events:none}
.lb-spin{width:26px;height:26px;border:3px solid rgba(255,255,255,.25);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- utilities / motion ---------- */
.center{text-align:center}
.mt-0{margin-top:0}
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}

/* ---------- SSMACFL additions ---------- */
/* Brand lock-up: the acronym over the full registered name */
.brand-stack{display:flex;flex-direction:column;line-height:1.05}
.brand-stack .brand-word{font-size:1.3rem}
.brand-stack .brand-sub{font-size:.55rem;letter-spacing:.04em;max-width:13rem;margin-top:.12rem}
@media(max-width:1340px){.brand-stack .brand-sub{display:none}}
.subnav a{white-space:nowrap}

/* Friends of the federation, in the footer */
.footer-friends{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.footer-friends a{background:#fff;border-radius:10px;padding:.45rem .7rem;display:grid;place-items:center}
.footer-friends img{height:26px;width:auto;object-fit:contain}

/* A block of prose lifted from a report, set as a readable column */
.prose{max-width:72ch}
.prose p+p{margin-top:1rem}
.prose h3{margin:2rem 0 .6rem}
.prose ul{margin:.8rem 0 0 1.1rem;display:flex;flex-direction:column;gap:.45rem}
.prose li{font-size:.97rem;color:var(--ink-soft)}
.prose li::marker{color:var(--gold)}

/* Numbered list where the number carries the accent */
.steps{display:flex;flex-direction:column;gap:1.1rem;margin-top:2.2rem;counter-reset:step}
.step{display:flex;gap:1.1rem;align-items:flex-start;background:var(--card);border:1px solid var(--card-brd);
  border-radius:var(--radius);padding:1.3rem 1.5rem;box-shadow:var(--shadow-sm)}
.step::before{counter-increment:step;content:counter(step);flex-shrink:0;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;background:var(--grad-btn);color:#fff;font-family:var(--font-display);font-weight:800;font-size:1rem}
.step h3{font-size:1.08rem;margin-bottom:.25rem}
.step p{font-size:.95rem;color:var(--ink-soft);max-width:none}

/* The one-line "and here is the source document" band at the foot of a page */
.source-band{background:var(--paper-2);border-top:1px solid var(--line)}
.source-band .wrap{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.source-band .tx b{font-family:var(--font-display);font-size:1.1rem;display:block}
.source-band .tx small{color:var(--ink-soft);font-size:.88rem}

/* Two-column table of plain facts */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:2.2rem}
@media(max-width:700px){.facts{grid-template-columns:1fr}}
.fact{background:var(--card);border:1px solid var(--card-brd);border-radius:14px;padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.fact .k{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--field-d)}
.fact .v{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-top:.2rem}

/* Gallery of report pages rendered as images */
.plate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
@media(max-width:900px){.plate-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.plate-grid{grid-template-columns:1fr}}
.plate{background:var(--card);border:1px solid var(--card-brd);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-sm);cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s}
.plate:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--earth)}
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;background:var(--husk)}
.plate .cap{padding:.85rem 1rem;font-size:.9rem;font-weight:650}
.plate .cap small{display:block;color:var(--ink-soft);font-weight:500;font-size:.82rem}

/* Bilingual report rows (AGM reports) */
.agm-list{display:flex;flex-direction:column;gap:.7rem;margin-top:2.4rem}
.agm-row{display:grid;grid-template-columns:76px 1fr auto;gap:1rem;align-items:center;background:var(--card);
  border:1px solid var(--card-brd);border-radius:14px;padding:.85rem 1.1rem;box-shadow:var(--shadow-sm);
  transition:transform .16s,border-color .16s}
.agm-row:hover{transform:translateY(-2px);border-color:var(--earth)}
.agm-row .no{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--earth);line-height:1}
.agm-row .no small{display:block;font-family:var(--font-body);font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft)}
.agm-row .tx b{font-family:var(--font-display);font-size:1.02rem}
.agm-row .tx small{display:block;color:var(--ink-soft);font-size:.83rem}
.agm-row .langs{display:flex;gap:.4rem;flex-wrap:wrap}
@media(max-width:640px){.agm-row{grid-template-columns:56px 1fr;row-gap:.6rem}.agm-row .langs{grid-column:1/-1}}
.cols-5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1000px){.cols-5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cols-5{grid-template-columns:repeat(2,1fr)}}

/* ---------- Language ---------- */
/* Telugu needs its own face — Inter and Bricolage carry no Telugu glyphs.
   It is appended to both stacks so mixed pages render properly whichever
   language is showing, and promoted to the front when the page is Telugu. */
.langsw{display:inline-flex;border:1.5px solid var(--card-brd);border-radius:999px;
  overflow:hidden;background:var(--card);flex-shrink:0}
.langsw button{font:inherit;font-weight:650;font-size:.8rem;padding:.36rem .72rem;
  border:none;background:transparent;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s}
.langsw button:hover{color:var(--earth)}
.langsw button.on{background:var(--grad-btn);color:#fff}
.langsw.in-nav{margin-left:.5rem}
.langsw.out-nav{display:none}
/* same width the menu bar gives way to the drawer */
@media(max-width:1279.98px){
  .langsw.in-nav{display:none}
  .langsw.out-nav{display:inline-flex;margin-left:auto;margin-right:.7rem}
}
/* On a phone the brand, the switch and the burger have 375px between them, and
   at full size they want about 410. The switch gives up the difference: it is
   the only one of the three that can shrink and still be read and tapped. */
@media(max-width:479.98px){
  .langsw.out-nav{margin-right:.35rem}
  .langsw.out-nav button{font-size:.72rem;padding:.34rem .5rem}
}

/* Telugu is set in Anek Telugu: a modern, open face with real character in
   its headings and an easy rhythm in running text. Noto Sans Telugu and
   Windows' Nirmala UI / Gautami are the fallbacks if it cannot load. */
html[lang="te"]{
  --te-stack:"Anek Telugu","Noto Sans Telugu","Nirmala UI","Gautami",system-ui,sans-serif;
  --font-display:var(--te-stack);
  --font-org:var(--te-stack);
  --font-body:var(--te-stack);
}
html[lang="te"] h1,html[lang="te"] h2,html[lang="te"] .org-name{font-weight:700;font-stretch:92%}
html[lang="te"] h3,html[lang="te"] h4{font-weight:650}
/* Telugu has no case, and the tight tracking that suits the Latin display
   face crowds its matras. */
html[lang="te"] h1,html[lang="te"] h2,html[lang="te"] h3,html[lang="te"] h4{letter-spacing:0;line-height:1.25}
html[lang="te"] .org-name{text-transform:none;line-height:1.25}
html[lang="te"] .eyebrow{letter-spacing:.06em;text-transform:none}
html[lang="te"] body{line-height:1.75}

/* The big chooser on the home page */
.langpick{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-top:2.2rem}
.langpick button{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;min-width:210px;
  background:var(--card);border:1.6px solid var(--card-brd);border-radius:var(--radius);
  padding:1.3rem 1.8rem;cursor:pointer;font:inherit;box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.langpick button:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--earth)}
.langpick button.on{border-color:var(--earth);box-shadow:0 0 0 3px rgba(124,63,51,.14),var(--shadow-sm)}
.langpick .big{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--earth-d)}
.langpick .small{font-size:.84rem;color:var(--ink-soft);font-weight:600}

/* ---------- Page masthead ---------- */
.banner-band{padding:clamp(1.2rem,3vw,2rem) 0 0}
.banner-band .crumbs{margin-bottom:.9rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.banner-art{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:var(--husk)}
/* one frame size for every page's masthead */
.banner-art{position:relative;aspect-ratio:4/1}
.banner-art img{position:relative;z-index:1;width:100%;height:100%;display:block}
.banner-art.fit-cover img{object-fit:cover}
.banner-art.fit-contain img{object-fit:contain}
.banner-art.fit-contain::before{content:"";position:absolute;inset:-20px;background:var(--banner) center/cover no-repeat;filter:blur(18px) saturate(1.1);opacity:.55}
@media (max-width:640px){.banner-art{aspect-ratio:3/1}}
/* the heading that follows a masthead needs less air above it */
.banner-band + section.page-hero{padding-top:clamp(1.2rem,3vw,2rem)}

/* ---------- A wide illustration on its own ---------- */
/* The Federation's diagrams are drawn to be read across, so this gives one the
   whole column rather than half of it. On a narrow screen the picture would
   shrink past reading size, so it scrolls sideways instead at its own scale. */
.figure-wide{border-radius:var(--radius-lg);overflow:hidden;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);margin-top:1.6rem}
.figure-wide img{width:100%;height:auto;display:block}
.figure-wide[data-doc]{cursor:zoom-in}
.figure-cap{margin:0;padding:.9rem 1.1rem;font-size:.9rem;color:var(--ink-soft);
  border-top:1px solid var(--line);background:var(--husk)}
@media (max-width:640px){
  .figure-wide{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .figure-wide img{width:auto;max-width:none;height:auto;min-width:560px}
  .figure-cap{position:sticky;left:0}
}

/* partner logos (Our Partners) */
.logo-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;margin-top:1.4rem}
.logo-tile{display:grid;place-items:center;height:110px;padding:1rem 1.2rem;background:#fff;border:1px solid var(--card-brd);border-radius:14px;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s,border-color .18s}
.logo-tile img{max-width:100%;max-height:70px;object-fit:contain}
.logo-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--gold)}
.logo-wall + .wall{margin-top:1rem}