/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Al-Mustafa Academy BC, Site Stylesheet
   Crafted for warmth, depth, and quiet authority.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* ── Brand palette ─────────────────────────
     Deep forest with warm cream, no gold.
     Inspired by old library bindings and
     architectural tilework. */
  --ink:        #1d2026;        /* main text */
  --ink-soft:   #4a5160;        /* secondary text */
  --ink-faint:  #5f6675;        /* tertiary / meta, 5.4:1 on paper, passes AA */
  --paper:      #faf7f2;        /* warm off-white bg */
  --paper-2:    #f3eee5;        /* warmer surface */
  --surface:    #ffffff;        /* card / panel */
  --rule:       #e8e0d2;        /* warm border */
  --rule-2:     #d4cab8;        /* stronger border */

  /* Forest greens, deeper, less corporate */
  --g:          #1f4d3b;        /* primary */
  --g-dk:       #143226;        /* darkest */
  --g-md:       #2a6249;        /* mid */
  --g-soft:     #e7eee9;        /* faint tint */
  --g-fog:      #f1f5f1;        /* mist */

  /* Section banding. index.php alternates sections between these two so a long
     page reads as distinct bands rather than one flat sheet. They were being
     used before they were ever declared, so every banded section silently fell
     back to the body colour. */
  --bg:         #faf7f2;        /* = --paper  */
  --bgs:        #f3eee5;        /* = --paper-2 */

  /* One quiet accent, clay/terracotta, used sparingly */
  --clay:       #a85842;
  --clay-soft:  #f3e5df;

  /* Functional */
  --gold:       #c9973f;        /* donate / giving accent */
  --gold-dk:    #ad7f2e;
  --live:       #962d22;
  --ok:         #2a6249;
  --warn:       #b08530;

  /* Geometry, flatter, more architectural */
  --r:    4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Shadows, soft, paper-on-paper feel */
  --sh-1: 0 1px 2px rgba(20,20,25,.04), 0 1px 4px rgba(20,20,25,.04);
  --sh-2: 0 4px 16px rgba(20,20,25,.06), 0 2px 4px rgba(20,20,25,.03);
  --sh-3: 0 18px 48px rgba(20,20,25,.10), 0 4px 8px rgba(20,20,25,.04);

  --tr: all .25s cubic-bezier(.22,.61,.36,1);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Base typography
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
html{font-size:16px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
  font-feature-settings:'kern','liga','calt','ss01';
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
/* Phone numbers and emails linked automatically by app.js. Kept in the
   surrounding text colour so a paragraph doesn't turn into a row of blue, but
   underlined so it is visibly tappable rather than a link only a mouse
   discovers. */
.auto-link{
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset:2px;
  cursor:pointer;
}
.auto-link:hover,.auto-link:focus-visible{
  color:var(--g);
  text-decoration-color:currentColor;
}
img{max-width:100%;height:auto;display:block}
iframe{max-width:100%}
ul{list-style:none}

/* Friendlier touch feedback on mobile (no blue flash) */
a,button,.btn,[role="button"]{-webkit-tap-highlight-color:rgba(31,77,59,.15)}

/* Serif display family for headlines */
h1,h2,h3,.serif{
  font-family:'Cormorant Garamond','Source Serif Pro',Georgia,serif;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
h1{font-size:clamp(2.3rem,5.2vw,3.6rem);line-height:1.08;letter-spacing:-.02em;font-weight:500}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);line-height:1.15;letter-spacing:-.015em;font-weight:500}
h3{font-size:1.22rem;font-weight:600;line-height:1.3}
h4{font-size:.98rem;font-weight:600;font-family:'Inter',sans-serif;letter-spacing:-.005em}

p{color:var(--ink-soft)}

/* ── Layout container ── */
.c{max-width:1180px;margin:0 auto;padding:0 28px}


/* ── Sections ── */
.sec{padding:104px 0;position:relative}
.sec-hdr{text-align:center;max-width:640px;margin:0 auto 64px}
.sec-hdr p{color:var(--ink-soft);margin-top:14px;font-size:1.02rem;line-height:1.65}

/* ── Buttons, sharper, more architectural ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--g);color:#fff;
  padding:13px 30px;
  border-radius:var(--r);
  font-family:'Inter',sans-serif;
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  border:1px solid var(--g);
  transition:var(--tr);
  cursor:pointer;
}
.btn:hover{background:var(--g-dk);border-color:var(--g-dk);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}

.btn-o{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:transparent;color:#fff;
  padding:13px 30px;border-radius:var(--r);
  font-weight:500;font-size:.92rem;letter-spacing:.01em;
  border:1px solid rgba(255,255,255,.55);
  transition:var(--tr);
}
.btn-o:hover{background:rgba(255,255,255,.10);border-color:#fff}

.btn-lg{padding:16px 38px;font-size:.98rem}

/* Donate CTA, warm gold so giving reads as distinct from the green nav actions */
.btn-donate{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--gold);color:#241a06;
  padding:13px 30px;border-radius:var(--r);
  font-family:'Inter',sans-serif;
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  border:1px solid var(--gold);
  transition:var(--tr);cursor:pointer;
}
.btn-donate:hover{background:var(--gold-dk);border-color:var(--gold-dk);transform:translateY(-1px);box-shadow:var(--sh-2)}
.btn-donate:active{transform:translateY(0)}
.btn-gh{
  background:transparent;color:var(--g);border:1px solid var(--g);
}
.btn-gh:hover{background:var(--g);color:#fff}

.card-lnk{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--g);font-weight:500;font-size:.88rem;
  margin-top:18px;
  border-bottom:1px solid transparent;
  padding-bottom:2px;transition:var(--tr);
}
.card-lnk:hover{border-bottom-color:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   NAVBAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.topbar{display:none} /* removed, site doesn't need it anymore */

.nav{
  position:sticky;top:0;z-index:900;
  background:rgba(250,247,242,.92);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--rule);
  transition:var(--tr);
}
.nav.scrolled{background:rgba(250,247,242,.98);box-shadow:var(--sh-1)}
.nav>.c{display:flex;align-items:center;justify-content:space-between;height:80px;gap:24px}
/* !important prevents editor's _imageStyles max-width/width/height from compressing the logo */
.nav-logo img{height:54px!important;width:auto!important;max-width:none!important}
.nav-brand{display:flex;align-items:center;gap:12px;min-width:0}
.nav-logo-text{font-family:'Amiri',serif;font-weight:700;color:var(--g,#1f4d3b);font-size:1.15rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-logo-text:empty{display:none}
.edit-mode .nav-logo-text:empty{display:inline-block;min-width:90px;color:var(--ink-soft,#5d6b63);opacity:.6;font-weight:500}
.edit-mode .nav-logo-text:empty::before{content:attr(data-placeholder)}
@media(max-width:560px){.nav-logo-text{font-size:.95rem}}
/* Desktop: the whole menu sits on ONE line and never wraps. Without this base
   rule .nav-links was a plain block element, so its links flowed as inline text
   and spilled onto a second row (LIVE/Donate dropping below the page links). */
.nav-links{
  display:flex;align-items:center;flex-wrap:nowrap;gap:1px;
  white-space:nowrap;
}
.nav-links a{
  font-family:'Inter',sans-serif;
  font-size:.88rem;font-weight:500;
  color:var(--ink-soft);
  padding:8px 11px;border-radius:var(--r);
  transition:var(--tr);cursor:pointer;letter-spacing:.005em;
  white-space:nowrap;flex:0 0 auto;
}
.nav-links a:hover{color:var(--g)}
.nav-links a.act{color:var(--g);background:var(--g-fog)}

.btn-live{
  background:var(--live)!important;color:#fff!important;
  padding:7px 14px!important;border-radius:var(--r)!important;
  font-weight:500!important;margin-left:8px;font-size:.82rem!important;
  letter-spacing:.04em;
  display:inline-flex!important;align-items:center;gap:6px;
}
.btn-live::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#fff;animation:pulse 1.5s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.btn-live:hover{background:#7a221a!important}

.btn-dn{
  background:transparent!important;color:var(--g)!important;
  padding:7px 16px!important;border-radius:var(--r)!important;
  font-weight:500!important;
  border:1px solid var(--g);font-size:.85rem!important;
}
.btn-dn:hover{background:var(--g)!important;color:#fff!important}

.hbg{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.hbg span{display:block;width:22px;height:1.5px;background:var(--ink);border-radius:2px;transition:var(--tr)}
.hbg.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hbg.open span:nth-child(2){opacity:0}
.hbg.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── Page routing ── */
[data-page]{display:none}
[data-page].show{display:block}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HERO, restrained, editorial
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.hero{
  position:relative;min-height:84vh;display:flex;align-items:center;
  background:var(--g-dk,#143226); /* fallback while the photo loads */
  overflow:hidden;
}
/* The building photo, blurred and slightly oversized so the blur's soft edge
   never shows at the box boundary. Kept on its own layer (rather than
   blurring .hero directly) so the hero text stays perfectly sharp. */
.hero::before{
  content:'';position:absolute;inset:0;
  background:url('images/hero-building.jpg') center/cover no-repeat;
  filter:blur(9px);
  transform:scale(1.08);
  z-index:0;
}
.hero::after{
  /* darken for text legibility + subtle vignette, over the blurred photo */
  content:'';position:absolute;inset:0;z-index:1;
  background:
    url('images/pattern/al-mustafa-kufi.svg') no-repeat right 4% bottom 9% / clamp(240px,32vw,520px) auto,
    linear-gradient(90deg,rgba(20,50,38,.86) 0%,rgba(20,50,38,.62) 55%,rgba(20,50,38,.38) 100%),
    linear-gradient(180deg,rgba(20,50,38,.35) 0%,rgba(20,50,38,0) 35%,rgba(20,50,38,.8) 100%);
  pointer-events:none;
}
.hero-in{position:relative;z-index:2;color:#fff;max-width:820px;padding:90px 0}
.hero-in h1{
  color:#fff;margin-bottom:24px;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
  font-weight:400;
}
.hero-in h1 em{
  font-style:italic;color:#fff;
  background:linear-gradient(transparent 65%,rgba(255,255,255,.18) 65%);
}
.hero-sub{
  font-size:1.08rem;color:rgba(255,255,255,.82);
  margin-bottom:40px;max-width:560px;
  font-weight:400;line-height:1.65;
}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
/* Al-Alaq 96:1-2, in translation, is the home banner's headline. */
.hero-verse{margin:0 0 30px;max-width:820px}
.hero-verse blockquote{margin:0}
.hero-verse .verse-en{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.3rem,5.6vw,4.4rem);line-height:1.08;letter-spacing:-.015em;
  color:#fff;margin:0;max-width:none;text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.18);
}
.hero-verse figcaption{margin-top:22px;font-size:.92rem;letter-spacing:.04em;color:rgba(255,255,255,.86)}
.hero-verse figcaption::before{content:"";display:inline-block;width:44px;height:1px;background:rgba(255,255,255,.6);vertical-align:middle;margin-right:16px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.hero-arrow{
  position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.88);font-size:1.2rem;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:.5}50%{transform:translateX(-50%) translateY(10px);opacity:.85}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PRAYER & CALENDAR
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pcal-section{background:var(--surface);padding:88px 0;border-bottom:1px solid var(--rule)}
.today-row{
  display:flex;justify-content:center;gap:22px;align-items:center;
  flex-wrap:wrap;margin-bottom:36px;
  font-size:.96rem;font-weight:500;color:var(--ink-soft);
}
.hijri-str{
  font-family:'Amiri',serif;font-size:1.18rem;color:var(--g);
  font-weight:400;letter-spacing:.01em;
}

/* Prayer cards: a drawn sun or moon, the time in bold green, a hairline with a
   small star, then the name. Six across; three across below 1000px. The DOM
   reads name then time (screen readers); order puts the time first on screen. */
.prayer-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-bottom:22px}
.pcrd{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:22px;
  padding:26px 10px 22px;transition:border-color .2s var(--ease,ease),background-color .2s;
}
.pcrd:hover{border-color:var(--rule-2)}
.p-ico{order:1;display:block;width:76px;height:52px;margin-bottom:14px;color:var(--gold)}
.p-ico svg{display:block;width:100%;height:100%}
.ptime{order:2;display:block;font-size:1.3rem;font-weight:700;line-height:1.2;color:var(--g);font-feature-settings:'tnum','lnum';text-transform:lowercase;white-space:nowrap}
.p-rule{order:3;display:block;width:96px;max-width:80%;height:12px;margin:14px 0 12px;color:var(--rule-2)}
.p-rule svg{display:block;width:100%;height:100%}
.pname{order:4;display:block;font-size:1rem;font-weight:600;color:var(--g);line-height:1.2}
/* The next prayer: the card turns green, the icon stays gold. */
.pcrd.nxt{background:var(--g);border-color:var(--g)}
.pcrd.nxt .ptime,.pcrd.nxt .pname{color:#fff}
.pcrd.nxt .p-rule{color:rgba(255,255,255,.4)}
.pcrd.loading .ptime{color:var(--ink-faint);font-weight:500}
.pcrd.loading .p-ico{opacity:.15;background:currentColor;border-radius:50%;width:44px;margin-left:auto;margin-right:auto}
@media(max-width:999px){.prayer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media(max-width:560px){
  .prayer-grid{gap:10px}
  .pcrd{padding:20px 6px 16px;border-radius:18px}
  .p-ico{width:52px;height:36px;margin-bottom:10px}
  .ptime{font-size:1.08rem}
  .p-rule{margin:10px 0 9px}
  .pname{font-size:.9rem}
}
@media(max-width:340px){.prayer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pnote{font-size:.78rem;color:var(--ink-faint);text-align:center;margin-bottom:44px;letter-spacing:.01em}
.pnote strong{color:var(--g);font-weight:500}

/* Calendar */
/* The calendar and Happening Next are one row: equal heights, edges aligned.
   The calendar's weeks share whatever height the row has. */
.cal-layout{display:grid;grid-template-columns:minmax(380px,440px) 1fr;gap:28px;align-items:stretch}
/* Side by side down to a small tablet; below that the calendar takes the full
   width with Happening Next under it. */
@media(max-width:1024px){.cal-layout{grid-template-columns:minmax(340px,400px) 1fr;gap:20px}}
@media(max-width:820px){.cal-layout{grid-template-columns:1fr}}
.cal-panel{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:26px;
  overflow:hidden;
  container-type:inline-size;
  display:flex;flex-direction:column;
}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-nav h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;line-height:1.1;text-align:center;flex:1;font-weight:600;color:var(--g-dk);font-variant-numeric:lining-nums}
.cbtn{
  background:transparent;border:1px solid var(--rule);border-radius:var(--r);
  width:44px;height:44px;flex:none;cursor:pointer;font-size:1rem;color:var(--g);
  transition:var(--tr);display:flex;align-items:center;justify-content:center;
}
.cbtn:hover{background:var(--g);color:#fff;border-color:var(--g)}
.cal-heading{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.cal-hijri-range{
  font-size:.8rem;color:var(--ink-faint);letter-spacing:.01em;
  text-align:center;line-height:1.3;
  /* Two Hijri month names plus the year cannot fit one line on a phone.
     Balance the wrap so it breaks into two even lines instead of orphaning
     "AH" on its own. */
  text-wrap:balance;
}
.cal-hijri-range:empty{display:none}
@container (max-width: 380px){
  .cal-hijri-range{font-size:.75rem}
}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
.cal-dow span{
  text-align:center;font-size:.75rem;font-weight:600;color:var(--ink-faint);
  text-transform:uppercase;padding:6px 0;letter-spacing:.08em;
}
.cal-dow .fri{color:var(--g)}
.cal-grid{
  flex:1;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(48px,1fr);
  gap:4px;
}
/* Two calendars in one cell, stacked: the Gregorian date, and the Hijri day
   in small type under it. The Hijri month NAME is never printed in a cell (it
   cannot fit); it lives in .cal-hijri-range under the month heading. */
.cday{
  min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:8px;cursor:default;position:relative;
  transition:var(--tr);font-feature-settings:'tnum','lnum';
  padding:4px 2px;overflow:hidden;
}
.cday-num{font-weight:600;font-size:1rem;line-height:1;color:var(--ink)}
.cday-hijri{
  font-size:.72rem;line-height:1;color:var(--ink-faint);
  font-weight:500;font-variant-numeric:tabular-nums;min-height:.72rem;
  pointer-events:none;
}
.cday:not([data-greg-date]){visibility:hidden}
.cday.today{background:var(--g)}
.cday.today .cday-num{color:#fff;font-weight:700}
.cday.today .cday-hijri{color:rgba(255,255,255,.85)}
/* The first day of a Hijri month: its number sits in a clay pill. */
.cday.cday-hijri-newmonth .cday-hijri{
  background:var(--clay);color:#fff;font-weight:700;
  border-radius:999px;padding:2px 6px;min-height:0;
}
.cday.today.cday-hijri-newmonth .cday-hijri{background:#ffd6c2;color:var(--g-dk)}
/* A day with a program is tinted and can be opened. */
.cday.has-ev{background:var(--g-soft);cursor:pointer}
.cday.has-ev .cday-num{color:var(--g)}
.cday.has-ev:hover{background:#d5e3da;box-shadow:inset 0 0 0 1px var(--g)}
.cday.today.has-ev{background:var(--g);box-shadow:inset 0 0 0 2px var(--gold)}
.cday.today.has-ev .cday-num{color:#fff}
.cday.today.has-ev:hover{background:var(--g-md)}
.cday.has-ev:focus-visible{outline:2px solid var(--g);outline-offset:1px}

/* ━━ Calendar event details modal ━━ */
.cem-modal{position:fixed;inset:0;z-index:1200;display:none;align-items:center;justify-content:center;padding:20px}
.cem-modal.show{display:flex}
.cem-backdrop{position:absolute;inset:0;background:rgba(20,33,30,.55);backdrop-filter:blur(2px)}
.cem-box{
  position:relative;z-index:1;background:var(--paper,#fff);border:1px solid var(--rule,#e5e7eb);
  border-radius:var(--r-lg,16px);box-shadow:0 24px 60px rgba(0,0,0,.28);
  width:min(460px,100%);max-height:85vh;overflow-y:auto;padding:26px 26px 22px;
}
.cem-close{
  position:absolute;top:12px;right:14px;border:none;background:transparent;
  font-size:1.6rem;line-height:1;color:var(--ink-soft,#4a5160);cursor:pointer;
  width:32px;height:32px;border-radius:8px;transition:var(--tr,.15s)
}
.cem-close:hover{background:var(--g-fog,#f1f5f1);color:var(--g,#1f4d3b)}
.cem-date{font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--g,#1f4d3b);margin-bottom:14px;padding-right:30px}
.cem-event + .cem-event{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule,#e5e7eb)}
.cem-title{font-size:1.18rem;margin:0 0 10px;color:var(--ink,#1d2026);line-height:1.25}
.cem-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.cem-meta-row{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--ink-soft,#5d6b63)}
.cem-meta-row svg{flex-shrink:0;color:var(--g,#1f4d3b)}
.cem-desc{font-size:.92rem;line-height:1.6;color:var(--ink,#384149);margin:0 0 14px;white-space:pre-wrap;word-break:break-word}
.cem-links{display:flex;flex-wrap:wrap;gap:8px}
.cem-link{display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:500;text-decoration:none;padding:8px 14px;border-radius:999px;transition:var(--tr,.15s)}
/* "Add to Google Calendar" is a <button> (it builds a file rather than
   navigating), so it needs the UA button styling stripped to match the
   anchors beside it. */
button.cem-link{font-family:inherit;line-height:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button.cem-link:focus-visible{outline:2px solid var(--g,#1f4d3b);outline-offset:2px}
.cem-link.gcal{background:var(--g-fog,#f1f5f1);color:var(--g,#1f4d3b);border:1px solid var(--rule,#e5e7eb)}
.cem-link.gcal:hover{background:var(--g,#1f4d3b);color:#fff;border-color:var(--g,#1f4d3b)}
.cem-link.yt{background:#fdecea;color:#c0392b;border:1px solid #f5c6c0}
.cem-link.yt:hover{background:#c0392b;color:#fff;border-color:#c0392b}

/* Events panel */
.ev-panel{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;
}
.ev-panel h3{margin-bottom:18px;font-size:1rem;color:var(--g);font-family:'Inter',sans-serif;letter-spacing:.01em}
.ev-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.ev-item:last-child{border-bottom:none}
/* Happening Next: the date tile turns green so it reads as now. */
.ev-now .ev-date{background:var(--g);border-color:var(--g)}
.ev-now .ev-date .evd,.ev-now .ev-date .evm{color:#fff}
/* Happening Next: the poster, when the event has one, runs across the top. */
.ev-now{flex-wrap:wrap}
.ev-poster{flex:0 0 100%;margin-bottom:6px;border-radius:10px;overflow:hidden;background:var(--paper-2)}
.ev-poster img{display:block;width:100%;max-height:360px;object-fit:contain}
/* Posters from Drive attachments are shown whole, not cropped. */
.event-card .ec-img.poster{aspect-ratio:auto;background:var(--paper-2)}
.event-card .ec-img.poster img{display:block;width:100%;height:auto;max-height:520px;object-fit:contain}
.cem-poster{margin:0 0 14px;border-radius:10px;overflow:hidden;background:var(--paper-2,#f3eee5)}
.cem-poster img{display:block;width:100%;max-height:min(62vh,560px);object-fit:contain}
/* A video thumbnail standing in for a poster: always 16:9, cropped to it. */
.ev-poster.video,.cem-poster.video,.event-card .ec-img.poster.video{aspect-ratio:16/9}
.ev-poster.video img,.cem-poster.video img,.event-card .ec-img.poster.video img{width:100%;height:100%;max-height:none;object-fit:cover}

/* Upcoming programs: their own section under the calendar. A grid of entries,
   three across, two on tablets, one on phones. */
.up-sec{background:var(--bgs);border-bottom:1px solid var(--rule)}
.up-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.up-list .ev-item{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:18px;align-items:flex-start;
}
.up-list .ev-item:last-child{border-bottom:1px solid var(--rule)}
.up-list .ev-item:hover{border-color:var(--rule-2);background:var(--surface)}
.up-list .ev-name{font-size:1rem;line-height:1.35}
.up-list .ev-empty{grid-column:1 / -1;text-align:center;padding:10px 0}
.up-more{text-align:center;margin-top:36px}
@media(max-width:1000px){.up-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
  .up-list{grid-template-columns:1fr;gap:12px}
  .up-sec .sec-hdr{margin-bottom:28px!important}
}
.ev-date{
  flex-shrink:0;text-align:center;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:8px 12px;min-width:56px;
}
.ev-date .evd{display:block;font-size:1.1rem;font-weight:600;color:var(--g);line-height:1;font-feature-settings:'tnum'}
.ev-date .evm{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-faint);margin-top:3px;font-weight:600}
.ev-info{flex:1}
.ev-name{font-size:.92rem;font-weight:500;margin-bottom:4px;color:var(--ink)}
.ev-time{font-size:.78rem;color:var(--ink-faint);margin-top:3px}
.ev-type{
  font-size:.66rem;padding:2px 8px;border-radius:100px;
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  display:inline-block;
}
.ev-type.bday{background:var(--g-soft);color:var(--g)}
.ev-type.mty{background:rgba(150,45,34,.08);color:var(--live)}
.ev-type.eid{background:var(--clay-soft);color:var(--clay)}
.ev-type.special{background:rgba(70,90,130,.08);color:#3a4d70}
.ev-empty{color:var(--ink-faint);font-size:.9rem;padding:14px 0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   IMAGE LOADING
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
img{opacity:1;transition:opacity .3s}
img[data-loading]{opacity:.6}
img.err{
  opacity:.3;background:var(--paper-2);border:1px solid var(--rule);
  border-radius:var(--r);min-height:60px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT, home snippet
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ab-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ab-txt h2{margin-bottom:24px;color:var(--ink);font-size:clamp(2rem,4vw,3.1rem);line-height:1.08}
.ab-txt p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75;font-size:1.02rem}
.ab-img{position:relative;isolation:isolate}
.ab-img img{
  border-radius:var(--r-lg);box-shadow:var(--sh-3);
  width:100%;object-fit:cover;max-height:480px;
}
/* A green panel of the star pattern sits behind the photo, offset to its
   lower right. */
.ab-img::before{
  content:'';position:absolute;right:-28px;bottom:-28px;
  width:64%;height:70%;
  background:var(--g) url('images/pattern/star-gold.svg') center / 112px 112px;
  border-radius:var(--r-lg);z-index:-1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SERVICE CARDS, editorial
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.sv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
/* Home: Programs sit on a deep green band. The heading stays beside the list
   as it scrolls; each program is a ruled entry, not a boxed card. */
.sv-sec{background:var(--g-dk);overflow:hidden}
.sv-sec::before{
  content:'';position:absolute;inset:0;
  background:url('images/pattern/star-gold.svg') 0 0 / 132px 132px;
  -webkit-mask-image:linear-gradient(100deg,#000,transparent 45%);
  mask-image:linear-gradient(100deg,#000,transparent 45%);
}
.sv-sec>.c{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:80px;align-items:start}
.sv-sec .sec-hdr{text-align:left;margin:0;position:sticky;top:120px}
.sv-sec .sec-hdr h2{color:#fff;font-weight:400;font-size:clamp(2.2rem,4.4vw,3.5rem);line-height:1.06}
.sv-sec .sec-hdr p{color:rgba(255,255,255,.82);font-size:1.08rem;margin-top:20px}
.sv-sec .sv-grid{grid-template-columns:1fr 1fr;gap:0 44px;background:none;border:0;border-radius:0;overflow:visible}
.sv-sec .sc{background:none;padding:30px 0 36px;border-top:1px solid rgba(255,255,255,.2)}
.sv-sec .sc:hover{background:none}
.sv-sec .sc-ico{background:var(--paper);width:60px;height:60px;margin-bottom:20px}
.sv-sec .sc-ico img{width:38px;height:38px}
.sv-sec .sc h3{color:#fff;font-size:1.7rem;font-weight:400;line-height:1.15;margin-bottom:10px}
.sv-sec .sc p{color:rgba(255,255,255,.8)}
.sv-sec .card-lnk{align-self:flex-start;color:#fff;font-weight:600;border-bottom-color:rgba(255,255,255,.45)}
.sv-sec .card-lnk:hover{border-bottom-color:#fff}
@media(max-width:1000px){
  .sv-sec>.c{grid-template-columns:1fr;gap:48px}
  .sv-sec .sec-hdr{position:static}
}
@media(max-width:600px){.sv-sec .sv-grid{grid-template-columns:1fr}}
.sc{
  background:var(--surface);
  padding:42px 32px;
  transition:var(--tr);display:flex;flex-direction:column;
}
.sc:hover{background:var(--paper)}
.sc-ico{
  width:54px;height:54px;background:var(--g-soft);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  margin-bottom:22px;padding:10px;
}
.sc-ico img{width:34px;height:34px;object-fit:contain}
.sc h3{margin-bottom:12px;font-size:1.32rem;color:var(--ink);font-weight:500}
.sc p{color:var(--ink-soft);font-size:.94rem;flex:1;line-height:1.7}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STATS, refined, no gold
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.stats{
  background:var(--g-dk);padding:72px 0;
  position:relative;overflow:hidden;
}
.stats::before{
  content:'';position:absolute;inset:0;
  background:url('images/pattern/star-gold.svg') 0 0 / 132px 132px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%);
  mask-image:linear-gradient(90deg,#000,transparent 70%);
}
.stats>.c{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;z-index:1}
.stat{text-align:left;color:#fff;border-left:1px solid rgba(255,255,255,.15);padding-left:24px}
.stat:first-child{border-left:none;padding-left:0}
.stat-n{
  display:block;font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.6rem,5vw,4.2rem);font-weight:400;
  color:#fff;line-height:1;margin-bottom:12px;letter-spacing:-.01em;
}
.stat-l{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:rgba(255,255,255,.65);font-weight:500;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   LEADERSHIP, restrained
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.team{display:flex;justify-content:center;gap:18px;flex-wrap:wrap}
.tcard{
  text-align:center;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--r-lg);
  padding:36px 28px;min-width:180px;max-width:220px;
  transition:var(--tr);
}
.tcard:hover{background:var(--surface);box-shadow:var(--sh-2);transform:translateY(-2px)}
.tavt{
  width:60px;height:60px;background:var(--g);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:500;font-size:1rem;margin:0 auto 18px;
  font-family:'Cormorant Garamond',serif;letter-spacing:.04em;
}
.tcard h4{font-size:.96rem;margin-bottom:5px;font-weight:600}
.tcard p{font-size:.82rem;color:var(--ink-faint);letter-spacing:.01em}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CTA BANNER, calmer
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cta-ban{
  background:var(--paper-2);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:72px 0;
}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.cta-in h2{color:var(--ink);margin-bottom:10px;font-weight:500;font-size:clamp(2rem,3.8vw,3rem)}
.cta-in p{color:var(--ink-soft);font-size:1.02rem}

/* Islamic geometry frames the green surfaces: an eight-pointed star pattern
   (images/pattern/star-gold.svg, built by tools/make-pattern-svg.py), faint
   and fading away from the text it surrounds. The only lettering used as
   ornament is the Academy's own name in Kufic (al-mustafa-kufi.svg, by
   tools/make-name-svg.py), in the home banner and the footer: never
   Qur'anic text or the sacred names. Reading areas stay plain paper. */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAGE HEROES, for sub-pages
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.pg-hero{
  background:var(--g-dk);
  padding:96px 0 88px;color:#fff;text-align:center;
  position:relative;overflow:hidden;
}
.pg-hero::before{
  content:'';position:absolute;inset:0;
  background:url('images/pattern/star-gold.svg') center / 132px 132px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,transparent 30%,#000 85%);
  mask-image:radial-gradient(ellipse 60% 80% at 50% 50%,transparent 30%,#000 85%);
}
.pg-hero>.c{position:relative;z-index:1}
.pg-hero h1{color:#fff;margin-top:14px;margin-bottom:18px;font-weight:400;font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.04}
/* The Academy's name in Kufic, faint, at the banner's lower right. */
.pg-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:url('images/pattern/al-mustafa-kufi.svg') no-repeat right 4% bottom 14% / clamp(220px,22vw,360px) auto;
}
@media(max-width:1100px){.pg-hero::after{display:none}}
.pg-hero p{color:rgba(255,255,255,.78);max-width:600px;margin:0 auto;font-size:1.06rem}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT PAGE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ab2-in{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ab2-txt h2{margin-bottom:22px}
.ab2-txt p{color:var(--ink-soft);margin-bottom:18px;line-height:1.75;font-size:1.02rem}
.ab-vals{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:38px;
}
.ab-vals h3{color:var(--g);margin-bottom:22px;font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:600;letter-spacing:.02em;text-transform:uppercase}
.ab-vals li{
  display:flex;align-items:flex-start;gap:14px;
  font-size:.96rem;color:var(--ink-soft);margin-bottom:14px;line-height:1.65;
}
.ab-vals li::before{
  content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--g);margin-top:10px;flex-shrink:0;
}

/* Highlight block */
.hl{
  background:var(--g-soft);border-left:2px solid var(--g);
  padding:18px 22px;margin:24px 0;font-size:.94rem;
  color:var(--g-dk);font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.08rem;
}

/* School / Madressah cards */
.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.vcard{
  background:var(--surface);
  padding:34px 28px;transition:var(--tr);
}
.vcard:hover{background:var(--paper)}
.vi{
  font-family:'Cormorant Garamond',serif;
  font-size:1.6rem;font-weight:500;color:var(--g);
  margin-bottom:14px;line-height:1;
  display:inline-block;
  padding-bottom:8px;border-bottom:1px solid var(--rule-2);
}
.vcard h3,.vcard h4{color:var(--ink);margin-bottom:10px;font-size:1.04rem;font-weight:600}
.vcard p{font-size:.92rem;color:var(--ink-soft);line-height:1.7}

/* Info block */
.ib{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:38px;margin-bottom:30px;
}
.ib h3{color:var(--ink);margin-bottom:18px;font-family:'Inter',sans-serif;font-size:1.04rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.ib p{color:var(--ink-soft);margin-bottom:14px;line-height:1.75}
.ib li{
  font-size:.94rem;color:var(--ink-soft);padding-left:22px;
  position:relative;margin-bottom:10px;line-height:1.6;
}
.ib li::before{
  content:'';position:absolute;left:0;top:11px;
  width:10px;height:1px;background:var(--g);
}

/* `.ab-txt p` is more specific than `.pull-quote`, so a pull quote placed in a
   two-column text block needs its own styling restated to win. */
.ab-txt p.pull-quote{
  color:var(--ink);font-size:1.32rem;line-height:1.55;
  margin:30px 0 26px;padding:26px 0 26px 30px;
}

/* ── School page ──────────────────────────────────────────────────────────
   The school's educational philosophy names exactly five values, and .val-grid
   is a 3-up. Five cards in a 3-up leaves a hole, and because the grid uses
   1px gaps over a --rule background, that hole renders as a grey block. So the
   last card stretches to fill the row instead. */
.val-grid--5>*:last-child{grid-column:span 2}

/* Three self-contained info blocks side by side. .ib already carries its own
   border and radius, so this is a plain gapped grid, not .val-grid, which
   would draw a second border around them. */
.ib-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ib-grid .ib{margin-bottom:0}

/* A second button beside the primary CTA. .btn-o is the outline variant for
   dark bands; this is its counterpart for the light .cta-ban. */
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}
.btn-ghost{
  background:transparent;color:var(--g);
  border-color:var(--rule-2);
}
.btn-ghost:hover{background:var(--g-soft);border-color:var(--g);color:var(--g-dk);box-shadow:none}

/* ── Drawn verses ─────────────────────────────────────────────────────────
   A verse is an SVG of the letters' outlines (images/verse/), one path per
   letter or mark, each carrying its place in the writing order as --i. A path
   is traced with a gold line, then filled, each a moment after the one
   before, so the verse writes itself right to left; then the gold line fades
   out. pathLength="1" lets one dash length fit every outline. */
.verse blockquote{margin:0}
.verse-art svg{display:block;width:100%;height:auto}
.verse-svg path{
  fill:#faf7f2;fill-opacity:0;
  stroke:#e2c483;stroke-width:var(--sw,38);stroke-linejoin:round;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;--dur:1.6s;
}
.verse-svg path.m{--dur:.9s}
.verse.is-drawing .verse-svg path{
  animation:
    verse-stroke var(--dur) cubic-bezier(.45,0,.25,1) calc(var(--i) * var(--step,30ms)) forwards,
    verse-fill .6s cubic-bezier(.16,1,.3,1) calc(var(--i) * var(--step,30ms) + var(--dur) * .75) forwards;
}
.verse.is-done .verse-svg path{stroke-dashoffset:0;fill-opacity:1;stroke-opacity:0;transition:stroke-opacity 1.2s ease-out}
@keyframes verse-stroke{to{stroke-dashoffset:0}}
@keyframes verse-fill{to{fill-opacity:1}}
/* The text version: read by screen readers, shown only if the drawing fails. */
.verse.has-art .verse-ar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:reduce){.verse.is-done .verse-svg path{transition:none}}

/* ── Donations: the giving block ─────────────────────────────────────────
   Two columns under the banner: the verse (Al-Baqarah 2:261), drawn in green
   ink with a gold pen on a deeper cream; and the giving panel: a fund, a way
   to give, then the form or the details. One column on phones, verse first. */
.give-grid{border-bottom:1px solid var(--rule)}
.give-panel-col{padding:clamp(28px,4vw,56px) clamp(20px,4vw,64px);min-width:0;max-width:800px;margin:0 auto}
/* The verse closes the page, in its own deeper-cream band after the sections
   the volunteers edit ("Where your gift goes"). */
.give-verse-sec{background:#f0ede6;border-top:1px solid var(--rule);padding:clamp(40px,6vw,88px) clamp(20px,4vw,64px)}
.give-verse{margin:0 auto;width:100%;max-width:640px}
.give-verse .verse-svg path{fill:var(--g)}
.give-verse .verse-svg{stroke:none}
.give-verse .verse-svg path{stroke:var(--gold)}
.give-verse .verse-ar{font-family:'Amiri Quran','Amiri',serif;font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:2.1;color:var(--g);margin:0;text-align:center;max-width:none}
.give-verse .verse-en{font-family:'Cormorant Garamond',serif;font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.5;color:var(--ink-soft);margin:22px auto 0;max-width:none;text-align:center;text-wrap:pretty}
.give-verse figcaption{margin-top:12px;font-size:.82rem;color:var(--ink-faint);text-align:center}

.give-step{border:0;margin:0 0 22px;padding:0;min-width:0}
.give-step legend{padding:0;margin:0 0 10px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g)}
.give-n::after{content:"\00b7";margin:0 .45em}
/* Three funds: side by side when the panel is wide enough, otherwise two and one. */
.give-panel-col{container-type:inline-size}
.give-funds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@container (max-width:539px){
  .give-funds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .give-fund:last-child:nth-child(odd){grid-column:1/-1}
}
.give-fund{
  position:relative;display:block;cursor:pointer;padding:13px 15px 14px;
  border:1px solid #dcd6ca;border-radius:12px;background:#fbfaf6;transition:border-color .15s,box-shadow .15s,background-color .15s;
}
.give-fund input,.give-way input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.give-fund .gf-t{display:block;font-family:'Cormorant Garamond',serif;font-size:1.32rem;font-weight:500;line-height:1.15;color:var(--g-dk)}
.give-fund .gf-d{display:block;margin-top:4px;font-size:.84rem;line-height:1.35;color:var(--ink-soft)}
.give-fund:hover{border-color:#bdb4a4}
.give-fund:has(input:checked){border-color:var(--g);background:#fff;box-shadow:0 0 0 1px var(--g),0 6px 18px -10px rgba(20,50,38,.35)}
.give-fund:has(input:focus-visible),.give-way:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.give-ways{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border-radius:12px;background:#ece8e0}
.give-way{flex:1 1 0;min-width:max-content;cursor:pointer}
.give-way[hidden]{display:none}
.give-way span{
  display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:9px;
  font-size:.95rem;font-weight:500;color:var(--ink-soft);border:1px solid transparent;transition:background-color .15s,color .15s;
}
.give-way:hover span{color:var(--g-dk)}
.give-way input:checked + span{background:#fff;color:var(--g-dk);font-weight:600;border-color:var(--g);box-shadow:0 1px 3px rgba(20,50,38,.12)}

.give-card{background:#fff;border:1px solid var(--rule);border-radius:16px;padding:clamp(16px,2vw,22px);box-shadow:0 2px 4px rgba(20,50,38,.04),0 14px 34px -18px rgba(20,50,38,.22)}
.give-panel h3{font-family:'Cormorant Garamond',serif;font-size:1.6rem;font-weight:500;color:var(--g-dk);margin:2px 0 6px}
.give-panel p{margin:0 0 14px;color:var(--ink-soft);line-height:1.6;max-width:none}
.give-khums-note{font-size:.92rem;background:var(--g-fog);border-radius:10px;padding:12px 14px}
.give-frame{position:relative;height:760px;border-radius:10px;overflow:hidden;background:#fbfbfd}
.give-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.give-small{margin:12px 0 0!important;font-size:.82rem;text-align:center;color:var(--ink-faint)!important}
.give-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px}
.give-copy{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 14px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:#fbfaf6}
.give-email{flex:1;min-width:0;font-weight:600;font-size:1.05rem;color:var(--g-dk);overflow-wrap:anywhere}
.give-copy-btn{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--g-md);background:#fff;color:var(--g);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.give-copy-btn:hover{background:var(--g-fog)}
.give-foot{margin:18px 0 0;font-size:.86rem;line-height:1.6;color:var(--ink-soft);font-variant-numeric:lining-nums}
.give-foot a{color:var(--g);text-decoration:underline;text-underline-offset:3px}
.nw{white-space:nowrap}

@media(max-width:860px){
  .give-verse-sec{padding:34px 20px 38px}
  .give-verse .verse-en{font-size:1.08rem;margin-top:16px}
  .give-panel-col > *{max-width:none}
}
@media(max-width:520px){
  .give-ways{display:grid;grid-template-columns:1fr 1fr}
  .give-way span{padding:0 8px}
  .give-fund .gf-t{font-size:1.2rem}
  .give-frame{height:700px}
}

/* A phone number never breaks across lines. */
a[href^="tel:"]{white-space:nowrap}

/* ── Registration block and campus cards (Madressah, School) ──────────── */
.pg-hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:28px}
.btn-w{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#fff;color:var(--g-dk);
  padding:13px 30px;border-radius:var(--r);
  font-weight:600;font-size:.92rem;letter-spacing:.01em;
  border:1px solid #fff;transition:var(--tr);
}
.btn-w:hover{background:var(--paper);transform:translateY(-1px);box-shadow:var(--sh-2)}
.reg-sec{background:var(--surface);border-bottom:1px solid var(--rule)}
.reg-in{max-width:700px;text-align:center}
.reg-in h2{margin-bottom:16px}
.reg-in p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7;margin:0 auto 12px}
.reg-in p a{color:var(--g);text-decoration:underline;text-underline-offset:3px}
.reg-in .btn{margin-top:18px}
.campus-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:980px;margin:0 auto}
.campus-grid .ib,.mad-grid .ib{margin-bottom:0}
.ib li a{color:var(--g);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
@media(max-width:768px){.campus-grid{grid-template-columns:1fr}}

/* The page shown for an address that is not a page. The big 404 is decorative,
   so it is faint, and the links underneath do the work. */
.notfound-hero{padding:88px 0 80px}
/* The donation page's banner is a short strip, not a full page header. The
   content underneath is the point of the page, so the banner should not push it
   below the fold. */
#pg-donations .pg-hero{padding:48px 0 42px}
#pg-donations .pg-hero h1{font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.12;margin-top:10px;margin-bottom:10px}
#pg-donations .pg-hero .c > p{font-size:.98rem}
@media(max-width:560px){
  #pg-donations .pg-hero{padding:36px 0 32px}
  #pg-donations .pg-hero h1{font-size:1.85rem}
}

.pg-hero .notfound-code{
  font-size:clamp(4.5rem,16vw,8.5rem);font-weight:800;line-height:1;
  letter-spacing:-.03em;color:rgba(255,255,255,.22);margin:0 0 12px;max-width:none;
}
.notfound-links{padding:64px 0 96px;text-align:center}
.notfound-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* The principal's own published words, under the student photos. */
.principal-quote{
  margin:52px auto 0;max-width:760px;text-align:center;
  padding-top:40px;border-top:1px solid var(--rule);
}
.principal-quote blockquote{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:1.38rem;line-height:1.6;color:var(--ink);margin:0;
}
.principal-quote blockquote::before{content:'\201C'}
.principal-quote blockquote::after{content:'\201D'}
.principal-quote figcaption{
  margin-top:20px;font-family:'Inter',sans-serif;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-faint);
}
.principal-quote figcaption span{color:var(--ink);font-weight:600;display:block}
.principal-quote figcaption em{font-style:normal;display:block;margin-top:5px}

/* Mission: one dark band to break up a long page of warm paper tones. */
.mission-sec{background:var(--g-dk);color:#fff;position:relative;z-index:0;overflow:hidden}
.mission-sec::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:url('images/pattern/star-gold.svg') center / 132px 132px;
  -webkit-mask-image:radial-gradient(ellipse 55% 75% at 50% 50%,transparent 35%,#000 90%);
  mask-image:radial-gradient(ellipse 55% 75% at 50% 50%,transparent 35%,#000 90%);
}
.mission-in{max-width:820px;margin:0 auto;text-align:center}
.mission-in h2{color:#fff;margin:14px 0 30px;font-weight:500}
.mission-in p{
  color:rgba(255,255,255,.84);line-height:1.85;font-size:1.04rem;
  margin-bottom:20px;
}
.mission-in p:first-of-type{
  font-family:'Cormorant Garamond',serif;font-size:1.34rem;
  color:#fff;line-height:1.6;font-style:italic;
}
.mission-in p:last-child{margin-bottom:0}

/* Careers */
.jcard{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:42px;margin-bottom:28px;
  transition:var(--tr);
}
.jcard:hover{border-color:var(--rule-2);box-shadow:var(--sh-2)}
.jbadge{
  display:inline-block;background:var(--g);color:#fff;
  font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  padding:5px 12px;border-radius:var(--r);margin-bottom:12px;
}
.jcard h3{font-size:1.5rem;margin-bottom:6px;font-weight:500}
.jmeta{font-size:.9rem;color:var(--ink-faint);letter-spacing:.01em}
.jdiv{border:none;border-top:1px solid var(--rule);margin:24px 0}
.jsec h4{
  font-size:.78rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.12em;color:var(--ink-faint);margin-bottom:12px;
}
.jsec li{font-size:.94rem;padding-left:18px;position:relative;margin-bottom:8px;color:var(--ink-soft);line-height:1.65}
.jsec li::before{content:'';position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ct-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.ct-det{display:flex;align-items:flex-start;gap:18px;margin-bottom:28px}
.ct-ico{
  width:42px;height:42px;background:var(--g-soft);color:var(--g);
  border-radius:var(--r);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ct-ico svg{width:18px;height:18px;stroke-width:1.8}
.ct-txt h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-faint);margin-bottom:6px;font-weight:600}
.ct-txt a,.ct-txt p{color:var(--ink);font-weight:500;font-size:.98rem}
.ct-txt a:hover{color:var(--g)}
.ct-form{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:44px;
}
.ct-form h3{margin-bottom:30px;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500}

.fg{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.fg label{font-size:.82rem;font-weight:600;color:var(--ink);letter-spacing:.01em}
.fg input,.fg select,.fg textarea{
  width:100%;padding:12px 14px;
  border:1px solid var(--rule);border-radius:var(--r);
  font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);
  background:var(--surface);transition:border-color .2s,box-shadow .2s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  outline:none;border-color:var(--g);
  box-shadow:0 0 0 3px rgba(31,77,59,.10);
}
.fg textarea{resize:vertical;min-height:130px;line-height:1.6}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fsub{width:100%;text-align:center;cursor:pointer;font-family:inherit}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOTER
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.footer{
  background:url('images/pattern/al-mustafa-kufi.svg') no-repeat right 4% bottom 18px / clamp(150px,18vw,280px) auto, var(--g-dk);
  color:rgba(255,255,255,.7);
  padding:80px 0 0;position:relative;z-index:0;
}
.footer::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:url('images/pattern/star-gold.svg') 0 0 / 132px 132px;
  -webkit-mask-image:linear-gradient(#000,transparent 45%);
  mask-image:linear-gradient(#000,transparent 45%);
}
.ft-in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:56px;padding-bottom:56px}
.ft-logo{
  height:54px;width:auto;margin-bottom:18px;box-sizing:content-box;
  /* The artwork is black ink on transparency, which vanished on the dark
     footer. A paper plate keeps the mark and lettering exactly as drawn. */
  background:var(--paper);padding:10px 14px;border-radius:12px;
}
.footer p{font-size:.92rem;line-height:1.75;color:rgba(255,255,255,.62)}
.ft-col h4{
  color:#fff;margin-bottom:20px;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;font-weight:600;
}
.ft-col li{margin-bottom:10px;font-size:.92rem}
.ft-col li a{color:rgba(255,255,255,.62);transition:color .2s}
.ft-col li a:hover{color:#fff}
.yt-lnk{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--r);
  font-size:.86rem;font-weight:500;
  background:transparent;color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.18);transition:var(--tr);
}
.yt-lnk:hover{background:var(--live);color:#fff;border-color:transparent}
/* Follow Us: the two channels, one above the other. */
.ft-social{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
@media(max-width:760px){.ft-social{padding-bottom:24px}}
.ig-lnk::before{
  content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.6' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ig-lnk:hover{background:var(--g-md);color:#fff;border-color:rgba(255,255,255,.35)}
/* The app download sits under Follow Us, as its own small heading. */
.ft-sub{margin-top:28px}
.app-lnk::before{
  content:"";width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4.5-4.5M12 15l4.5-4.5M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12m0 0-4.5-4.5M12 15l4.5-4.5M4 20h16'/%3E%3C/svg%3E") center/contain no-repeat;
}
.app-lnk{padding:9px 14px;white-space:nowrap}
.app-lnk:hover{background:var(--g-md);color:#fff;border-color:rgba(255,255,255,.35)}
.app-ver{margin:8px 0 0;font-size:.82rem;color:rgba(255,255,255,.78);font-variant-numeric:lining-nums}
.app-notes{margin-top:6px;max-width:260px;font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.7)}
.app-notes summary{cursor:pointer;padding:6px 0;min-height:32px;color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.app-notes summary:focus-visible{outline:2px solid var(--gold-lt,#e2c483);outline-offset:2px;border-radius:4px}
.app-notes ul{margin:4px 0 0;padding-left:18px}
.app-notes li{margin:0 0 6px}
.ft-note{margin-top:10px;max-width:260px;font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.62)}
.ft-btm{
  border-top:1px solid rgba(255,255,255,.08);padding:24px 0;
  text-align:center;font-size:.8rem;color:rgba(255,255,255,.4);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPINNERS / UTILITY
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.spin{
  display:inline-block;width:18px;height:18px;
  border:2px solid var(--g-fog);border-top-color:var(--g);
  border-radius:50%;animation:spin .7s linear infinite;
  vertical-align:middle;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   GALLERY / EVENTS GRID
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.gallery-sec{background:var(--paper-2)}
.gallery-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-auto-rows:240px;gap:12px;
}
.gal-item{
  position:relative;overflow:hidden;border-radius:var(--r-md);
  background:var(--rule);cursor:pointer;
}
.gal-item.gal-wide{grid-column:span 2}
.gal-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s;
  filter:saturate(.94);
}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.08)}
.gal-cap{
  position:absolute;bottom:0;left:0;right:0;
  padding:36px 20px 18px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.78));
  font-family:'Cormorant Garamond',serif;font-size:1.08rem;font-weight:500;
  letter-spacing:.01em;pointer-events:none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FACILITY PHOTO COMPOSITES
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.fac-photos{
  height:380px;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;background:var(--rule);
}
.fac-main{grid-row:span 2}
.fac-photos img,.fac-sub img{width:100%;height:100%;object-fit:cover;display:block}

.ev-photos{
  height:360px;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;
  gap:6px;background:var(--rule);
}
.ev-tall{grid-row:span 2}
.ev-photos img{width:100%;height:100%;object-fit:cover;display:block}

.comm-photos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.comm-photos .cp{position:relative;border-radius:var(--r-md);overflow:hidden;height:200px}
.comm-photos .cp img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(.94)}
.comm-photos .cp:hover img{transform:scale(1.05)}
.comm-cap{
  position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7));
  font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:500;
}

.students-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
.students-grid img{width:100%;height:310px;object-fit:cover;border-radius:var(--r-md);box-shadow:var(--sh-2)}

.fac-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.fac-thumbs img{width:100%;height:120px;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh-1)}

/* ── Editorial pull quote ── */
.pull-quote{
  position:relative;padding:32px 36px 32px 36px;
  background:transparent;border-left:2px solid var(--g);
  margin:36px 0;font-family:'Cormorant Garamond',serif;
  font-size:1.32rem;color:var(--ink);line-height:1.55;font-style:italic;
  font-weight:400;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   EVENTS PAGE / SECTION
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.events-sec{background:var(--paper)}
.events-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px}
.event-card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;transition:var(--tr);
  display:flex;flex-direction:column;
}
.event-card:hover{border-color:var(--rule-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.event-card .ec-img{aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;position:relative}
.event-card .ec-img img{width:100%;height:100%;object-fit:cover}
.event-card .ec-img.no-img{display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-style:italic}
.event-card .ec-body{padding:24px 26px;display:flex;flex-direction:column;flex:1}
.event-card .ec-date{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--g);font-weight:600;margin-bottom:10px;
}
.event-card h3{font-size:1.25rem;margin-bottom:8px;line-height:1.25;font-weight:500}
.event-card .ec-desc{color:var(--ink-soft);font-size:.94rem;line-height:1.65;margin-bottom:16px;flex:1}
.event-card .ec-meta{font-size:.85rem;color:var(--ink-faint);display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.event-card .ec-meta span{display:inline-flex;align-items:center;gap:5px}
.event-card .ec-yt{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--live);font-size:.86rem;font-weight:500;
  border-top:1px solid var(--rule);padding-top:14px;margin-top:auto;
}
.event-card .ec-yt:hover{color:#7a221a}
.event-badge{
  position:absolute;top:12px;left:12px;
  background:rgba(255,255,255,.95);color:var(--g);
  font-size:.7rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 10px;border-radius:var(--r);
}
.event-badge.past{color:var(--ink-faint)}
.events-empty{text-align:center;color:var(--ink-faint);padding:60px 0;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.2rem}

.events-tabs{display:flex;justify-content:center;gap:4px;margin-bottom:36px;border-bottom:1px solid var(--rule)}
.events-tab{
  background:transparent;border:none;font-family:inherit;
  font-size:.88rem;font-weight:500;color:var(--ink-faint);
  padding:14px 22px;cursor:pointer;
  border-bottom:2px solid transparent;transition:var(--tr);
  letter-spacing:.02em;
}
.events-tab:hover{color:var(--ink)}
.events-tab.active{color:var(--g);border-bottom-color:var(--g)}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RESPONSIVE
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:1024px){
  .sv-grid,.val-grid{grid-template-columns:repeat(2,1fr)}
  .ib-grid{grid-template-columns:1fr;gap:20px}
  .ft-in{grid-template-columns:1fr 1fr}
  .ab-in,.ab2-in{grid-template-columns:1fr;gap:48px}
  .ab-img{order:-1}
  .ab-img::before{display:none}
  .gallery-grid{grid-template-columns:1fr 1fr}
  .gal-item.gal-wide{grid-column:1 / -1}
  .comm-photos{grid-template-columns:1fr 1fr}
  .events-grid{grid-template-columns:1fr 1fr}
  .stats>.c{grid-template-columns:repeat(2,1fr);gap:32px}
  .stat{border-left:none;padding-left:0}
  .sec{padding:84px 0}
}

/* ── Tablet & phone: collapse the nav into a hamburger menu ──
   Raised 960 → 1024: with the page links plus LIVE and Donate the bar needs
   ~1025px to stay on one line, so anything narrower gets the hamburger. */
@media(max-width:1024px){
  .hbg{display:flex}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);flex-direction:column;align-items:stretch;
    padding:14px 24px 22px;
    border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
    box-shadow:var(--sh-2);gap:2px;
    max-height:calc(100vh - 72px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.open{display:flex}
  .nav-links a{
    width:100%;padding:13px 14px;border-radius:var(--r);
    font-size:.96rem;min-height:46px;display:flex;align-items:center;
  }
  .nav-links a.act{background:var(--g-fog)}
  /* Page links and CTAs separated visually */
  .btn-live,.btn-dn{
    margin-left:0!important;width:100%;justify-content:center;
    padding:13px 16px!important;font-size:.92rem!important;min-height:46px;
  }
  .btn-live{margin-top:10px!important}
}

@media(max-width:768px){
  .hero{min-height:72vh}
  .hero-in{padding:60px 0}
  .hero-verse{max-width:none;margin-bottom:24px}
  /* No name emblem in the phone banner: there it would sit behind the buttons. */
  .hero::after{background:
    linear-gradient(180deg,rgba(20,50,38,.78) 0%,rgba(20,50,38,.55) 60%,rgba(20,50,38,.85) 100%),
    radial-gradient(ellipse 90% 80% at 50% 50%,transparent 40%,rgba(0,0,0,.35) 100%)}
  .hero-verse .verse-en{font-size:2rem}
  .hero-ctas{flex-direction:column;align-items:stretch}
  .sv-grid,.val-grid{grid-template-columns:1fr}
  /* Single column: a card asking to span 2 would make grid invent a second
     one and push the row off the side of the screen. */
  .val-grid--5>*:last-child{grid-column:auto}
  .mission-in p:first-of-type{font-size:1.18rem}
  .cta-btns{width:100%;flex-direction:column}
  .cta-btns .btn{width:100%}
  .principal-quote{margin-top:40px;padding-top:32px}
  .principal-quote blockquote{font-size:1.16rem}
  .ct-grid,.fr{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr;gap:36px}
  .cta-in{flex-direction:column;text-align:center;align-items:center}
  .sec{padding:72px 0}
  .pg-hero{padding:72px 0 64px}
  .jcard>div[style*="grid"]{grid-template-columns:1fr!important}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:200px}
  .fac-photos,.ev-photos{grid-template-columns:1fr;height:auto}
  .fac-main,.ev-tall{grid-row:auto}
  .fac-photos img,.ev-photos img{height:220px}
  .students-grid{grid-template-columns:1fr}
  .students-grid img{height:240px}
  .comm-photos{grid-template-columns:1fr 1fr}
  .comm-photos .cp{height:160px}
  .events-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .c{padding:0 20px}
  .nav>.c{height:72px}
  .nav-logo img{height:46px!important}
  .ev-panel{max-height:none}
  .comm-photos{grid-template-columns:1fr 1fr}
  .sec{padding:60px 0}
  .pg-hero{padding:60px 0 52px}
}

/* ── Very small phones (≤380px) ── */
@media(max-width:380px){
  .c{padding:0 16px}
  .nav-logo img{height:42px!important}
  .comm-photos{grid-template-columns:1fr}
  .btn,.btn-lg{width:100%}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Accessibility, skip link (also helps SEO)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.skip-link{
  position:absolute;top:-40px;left:0;z-index:1000;
  background:var(--g-dk);color:#fff;padding:10px 16px;
  font-weight:600;font-size:.95rem;border-radius:0 0 6px 0;
  transform:translateY(-100%);transition:transform .2s;
}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--clay);outline-offset:2px}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Maintenance Mode
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
body.maint-locked{overflow:hidden}
body.maint-locked .nav,
body.maint-locked .footer,
body.maint-locked #ed-side,
body.maint-locked #ed-topbar,
body.maint-locked [data-page]:not(#pg-maintenance){display:none!important}
body.maint-locked main{padding:0;margin:0}

#pg-maintenance{display:none}
#pg-maintenance.show{display:block}

.maint-screen{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 22px;
  background:linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);
  overflow:hidden;
}
.maint-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 600px 400px at 20% 10%, rgba(31,77,59,.08), transparent 70%),
    radial-gradient(ellipse 500px 380px at 85% 90%, rgba(168,88,66,.07), transparent 70%);
}
.maint-wrap{
  position:relative;z-index:1;max-width:620px;width:100%;
  text-align:center;
}
.maint-logo{
  width:96px;height:96px;margin:0 auto 26px;
  border-radius:50%;background:#fff;padding:14px;
  box-shadow:var(--sh-2);
  object-fit:contain;
}
.maint-tag{
  display:inline-block;padding:5px 14px;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g);background:var(--g-soft);
  border-radius:999px;margin-bottom:18px;
}
.maint-head{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.1;
  color:var(--g-dk);margin-bottom:18px;font-weight:500;
}
.maint-msg{
  font-size:1.06rem;color:var(--ink-soft);line-height:1.6;
  max-width:480px;margin:0 auto 14px;
}
.maint-eta{
  font-size:.95rem;color:var(--ink-faint);font-style:italic;
  margin-bottom:38px;
}
.maint-card{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-lg);padding:24px 26px;
  box-shadow:var(--sh-1);max-width:480px;margin:0 auto;
}
.maint-card-label{
  font-size:.92rem;font-weight:600;color:var(--ink);margin-bottom:14px;
}
.maint-contact{
  display:flex;flex-direction:column;gap:10px;align-items:center;
}
.maint-link{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 18px;border-radius:8px;
  color:var(--g);font-weight:600;font-size:.98rem;
  transition:var(--tr);
}
.maint-link:hover{background:var(--g-soft);color:var(--g-dk)}
.maint-foot{
  font-size:.82rem;color:var(--ink-faint);margin-top:38px;
  letter-spacing:.02em;
}
@media(max-width:520px){
  .maint-contact{flex-direction:column}
  .maint-head{font-size:2rem}
  .maint-card{padding:20px}
}

/* Maintenance-active banner shown only to logged-in CMS users */
.maint-banner{
  position:sticky;top:0;z-index:9999;
  background:linear-gradient(90deg,#b88030,#a85842);
  color:#fff;padding:10px 18px;
  font-size:.92rem;font-weight:500;text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.maint-banner a{color:#fff;text-decoration:underline;font-weight:600;margin:0 4px}
.maint-banner button{
  background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.4);
  border-radius:6px;padding:4px 12px;font-size:.85rem;font-weight:600;
  margin-left:10px;cursor:pointer;
}
.maint-banner button:hover{background:rgba(255,255,255,.3)}

/* ── Site-wide announcement bar ─────────────────── */
.site-announcement{
  position:relative;z-index:1100;
  background:var(--g,#1f4d3b);color:#fff;
  font-size:.92rem;line-height:1.45;
}
.site-announcement .ann-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:10px 44px 10px 18px;text-align:center;
}
.site-announcement .ann-msg{font-weight:500}
.site-announcement .ann-link{
  color:#fff;text-decoration:underline;font-weight:600;white-space:nowrap;
}
.site-announcement .ann-link:hover{opacity:.85}
.site-announcement .ann-close{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:transparent;color:#fff;border:0;
  font-size:1.4rem;line-height:1;cursor:pointer;opacity:.75;
  padding:0 6px;
}
.site-announcement .ann-close:hover{opacity:1}
@media (max-width:560px){
  .site-announcement{font-size:.85rem}
  .site-announcement .ann-inner{padding:9px 40px 9px 14px;gap:8px}
}

/* Honeypot field for spam protection (must be invisible to humans) */
.hp-field{
  position:absolute!important;left:-9999px!important;
  width:1px;height:1px;opacity:0;pointer-events:none;
}

/* Contact-form status message */
.cf-status{
  margin:10px 0 0;padding:10px 14px;
  border-radius:8px;font-size:.9rem;line-height:1.5;
  border:1px solid transparent;
}
.cf-status.ok{
  color:#1f4d3b;background:#e7eee9;border-color:#bcd2c5;
}
.cf-status.err{
  color:#962d22;background:#fde8e3;border-color:#f1c2b6;
}

/* Calendar legend: what the tint, the small number and the pill mean. */
.cal-legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.8rem;color:var(--ink-faint);
}
.cal-legend > span{display:inline-flex;align-items:center;gap:7px}
.cal-legend-ev::before{
  content:'';width:16px;height:16px;border-radius:5px;background:var(--g-soft);
  box-shadow:inset 0 0 0 1px #c5d6cb;
}
.cal-legend-hijri::before{
  content:'12';font-size:.72rem;font-weight:500;color:var(--ink-faint);
  font-variant-numeric:tabular-nums lining-nums;
}
.cal-legend-newmonth::before{
  content:'1';
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 5px;border-radius:999px;
  background:var(--clay);color:#fff;
  font-size:.68rem;font-weight:700;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PAST LIVE-STREAM RECORDINGS (events page)
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.rec-hdr{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin:64px 0 28px;
}
.rec-hdr h2{margin:10px 0 6px}
.rec-hdr p{color:var(--ink-soft);max-width:520px}
.rec-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:22px;
}
/* "Show more" under the grid, the archive now holds the channel's whole back
   catalogue, so the list is paged rather than rendered all at once. */
.rec-more-wrap{display:flex;justify-content:center;margin-top:30px}
.rec-card{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  overflow:hidden;transition:var(--tr);
}
.rec-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--rule-2)}
.rec-thumb{position:relative;aspect-ratio:16/9;background:var(--paper-2);overflow:hidden}
.rec-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rec-play{
  position:absolute;inset:0;margin:auto;
  width:46px;height:46px;border-radius:50%;
  background:rgba(150,45,34,.92);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:var(--tr);
}
.rec-card:hover .rec-play{background:var(--live);transform:scale(1.08)}
.rec-body{padding:14px 16px 16px}
.rec-title{
  font-family:'Inter',sans-serif;font-size:.94rem;font-weight:600;line-height:1.4;
  color:var(--ink);margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.rec-date{margin-top:6px;font-size:.82rem;color:var(--ink-faint)}
@media(max-width:560px){
  .rec-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
  .rec-hdr{margin-top:44px}
}

/* ── Event popup: rich description (bold / underline / YT button / embed) ── */
.cem-desc{color:var(--ink-soft);line-height:1.65;font-size:.95rem}
.cem-desc strong{color:var(--ink);font-weight:600}
.cem-desc u{text-underline-offset:2px}
.cem-desc a{color:var(--g);font-weight:600}
.cem-embed{
  display:block;position:relative;width:100%;aspect-ratio:16/9;
  margin:14px 0;border-radius:10px;overflow:hidden;background:#000;
  border:1px solid var(--rule);
}
.cem-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOMEPAGE, ANNOUNCEMENTS & NEWS
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.ann-sec{padding:84px 0}
.ann-list{display:flex;flex-direction:column;gap:14px;max-width:860px;margin:0 auto}
.ann-item{
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--g);border-radius:10px;padding:20px 22px;
}
.ann-item.pinned{border-left-color:var(--gold);background:#fffdf7}
.ann-item-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ann-item-head h3{font-size:1.1rem;margin:0;flex:1 1 auto;min-width:0}
.ann-pin{
  background:var(--gold);color:#241a06;font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:999px;
}
.ann-date{font-size:.82rem;color:var(--ink-faint);white-space:nowrap}
.ann-body{color:var(--ink-soft);font-size:.94rem;line-height:1.65}

.news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.news-card{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:24px 22px;transition:var(--tr);
}
.news-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.news-date{display:block;font-size:.78rem;color:var(--ink-faint);letter-spacing:.04em;margin-bottom:8px}
.news-title{font-size:1.15rem;margin:0 0 10px}
.news-body{color:var(--ink-soft);font-size:.93rem;line-height:1.65}
.post-link{
  display:inline-block;margin-top:14px;color:var(--g);
  font-weight:600;font-size:.88rem;
  border-bottom:1px solid transparent;padding-bottom:2px;transition:var(--tr);
}
.post-link:hover{border-bottom-color:var(--g)}
.ann-body .cem-embed,.news-body .cem-embed{margin:12px 0}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STREAMING NOW banner + calendar indicator
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.live-banner{
  display:flex;align-items:center;gap:10px;
  background:var(--live);color:#fff;
  padding:10px 22px;font-size:.9rem;
  position:relative;z-index:950;
  text-decoration:none;
}
.live-banner:hover{background:#7a221a}
/* Mixed case now ("Streaming Now"), so the wide tracking that suited an
   all-caps LIVE NOW badge is dialled back. */
.live-banner strong{font-weight:800;letter-spacing:.02em;font-size:.86rem;white-space:nowrap}
/* Label and title are one flex item so the banner's gap cannot fall between
   "Streaming Now" and the colon that follows it. */
.live-lead{display:flex;align-items:baseline;gap:0;flex:1;min-width:0}
.live-title{
  flex:1;min-width:0;opacity:.94;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.live-cta{font-weight:600;white-space:nowrap;font-size:.85rem}
@media(max-width:640px){
  .live-banner{padding:9px 16px;font-size:.84rem;gap:8px}
  .live-title{display:none}
}

/* The pulsing dot. Respects reduced-motion: the dot stays solid rather than
   flashing for anyone who has asked the system to limit animation. */
.live-dot{
  width:9px;height:9px;border-radius:50%;
  background:#fff;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(255,255,255,.75);
  animation:livePulse 1.6s infinite;
}
@keyframes livePulse{
  0%  {box-shadow:0 0 0 0 rgba(255,255,255,.75)}
  70% {box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}
@media(prefers-reduced-motion:reduce){
  .live-dot{animation:none}
}

/* Calendar day whose scheduled event is the stream currently on air */
.cday.is-live{
  background:rgba(150,45,34,.10);
  box-shadow:inset 0 0 0 2px var(--live);
}
.cday.is-live .cday-num{color:var(--live);font-weight:700}
.cday.is-live::after{
  content:'';position:absolute;top:4px;right:4px;
  width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:livePulse 1.6s infinite;
}
@media(prefers-reduced-motion:reduce){
  .cday.is-live::after{animation:none}
}

/* LIVE row inside the event popup */
.cem-live{
  display:flex;align-items:center;gap:9px;
  background:var(--live);color:#fff;
  padding:10px 14px;border-radius:8px;margin:0 0 14px;
  font-weight:700;font-size:.85rem;letter-spacing:.02em;
}
.cem-live:hover{background:#7a221a}

/* Event cards open the detail popup, so they must look interactive */
.event-card[data-ev-open]{cursor:pointer}
.event-card[data-ev-open]:focus-visible{outline:2px solid var(--g);outline-offset:3px}
.ev-item[data-ev-open]{cursor:pointer;border-radius:8px;transition:var(--tr)}
.ev-item[data-ev-open]:hover{background:var(--g-fog)}
.ev-item[data-ev-open]:focus-visible{outline:2px solid var(--g);outline-offset:2px}

/* ── Privacy policy page ── */
.priv-in{max-width:760px;margin:0 auto}
.priv-in h2{font-size:1.42rem;margin:44px 0 12px;color:var(--ink);font-weight:500}
.priv-in h2:first-of-type{margin-top:28px}
.priv-in p{color:var(--ink-soft);line-height:1.8;margin-bottom:16px}
.priv-updated{font-size:.86rem;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.08em}
.priv-in p.pull-quote{color:var(--ink);font-size:1.24rem;line-height:1.6;margin:26px 0 8px}
.priv-list{margin:0 0 16px;padding-left:0;list-style:none}
.priv-list li{
  color:var(--ink-soft);line-height:1.7;margin-bottom:10px;
  padding-left:22px;position:relative;
}
.priv-list li::before{
  content:'';position:absolute;left:0;top:12px;
  width:10px;height:1px;background:var(--g);
}
.priv-contact a{color:var(--g);font-weight:600;line-height:2}

/* Footer legal row. The footer bottom bar is dark, so this takes its colour
   from that palette rather than the page's ink tokens, which are near-black
   and would have been invisible down there. */
.ft-btm{display:flex;flex-direction:column;align-items:center;gap:8px}
.ft-btm p{margin:0}
.ft-legal{
  color:rgba(255,255,255,.55);font-size:.8rem;
  text-decoration:underline;text-decoration-color:rgba(255,255,255,.22);
  text-underline-offset:3px;transition:var(--tr);
}
.ft-legal:hover,.ft-legal:focus-visible{color:#fff;text-decoration-color:rgba(255,255,255,.7)}

/* ── Giving: one recommended route, a readable receipt note, a mid-page entry ── */
.give-card{position:relative}
.give-pick{border-color:var(--g)!important;box-shadow:0 8px 24px rgba(31,77,59,.10)}
.give-badge{
  display:inline-block;margin-bottom:12px;padding:4px 11px;border-radius:999px;
  background:var(--g);color:#fff;font-size:.74rem;font-weight:600;letter-spacing:.01em;
}
.give-note{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.45}
.cta-note{margin-top:8px;font-size:.88rem;opacity:.9}
.give-strip{background:var(--g-fog);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:22px 0}
.give-strip-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.give-strip-in p{margin:0;flex:1 1 320px;color:var(--ink-soft);max-width:62ch}

/* ── Keyboard focus: one visible ring everywhere, drawn from the palette ── */
:focus-visible{outline:2px solid var(--g);outline-offset:3px;border-radius:2px}
.nav :focus-visible,.hero :focus-visible,.ft :focus-visible,footer :focus-visible,.cta-ban :focus-visible{outline-color:var(--gold)}
.fg input:focus-visible,.fg select:focus-visible,.fg textarea:focus-visible{outline:2px solid var(--g);outline-offset:1px}

/* ── Touch targets: 44px minimum for anything tapped ── */
.hbg{min-width:44px;min-height:44px;align-items:center;justify-content:center}
.cbtn{min-width:44px;min-height:44px}
@media(pointer:coarse),(max-width:760px){
  .ft-col li{margin-bottom:0}
  .ft-col li a{display:inline-flex;align-items:center;min-height:44px}
  .events-tab{min-height:44px}
}

/* ── Reduced motion: keep state changes, drop the movement ── */
@media(prefers-reduced-motion:reduce){
  .hero-arrow{animation:none}
  *,*::before,*::after{scroll-behavior:auto!important}
  .hbg span{transition:none}
}

/* ── Recoverable empty and error states ── */
.state-box{grid-column:1/-1;text-align:center;padding:36px 20px;color:var(--ink-soft)}
.state-box p{margin:0 0 14px;font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-style:italic;color:var(--ink-faint)}
.state-box .state-acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.state-box a,.state-box button{cursor:pointer}

/* ── Phones: a 44px touch target and 12px text at the least, everywhere ──
   The site was already free of sideways scrolling at 360px; this finishes the
   job for the small links and the smallest text. */
@media(pointer:coarse),(max-width:760px){
  .card-lnk{min-height:44px;margin-top:8px;padding:0 2px}
  .ft-legal{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem}
  .ct-txt a{display:inline-flex;align-items:center;min-height:44px}
  .cal-hijri-range{font-size:.75rem}
  .cal-dow span{font-size:.75rem;letter-spacing:.06em}
  .ev-date .evm{font-size:.75rem}
  .event-card .ec-date,.event-badge{font-size:.78rem}
  /* small pills in the Donations content, whose size is written into the saved HTML */
  #pg-donations [data-dynamic-section] span[style*="font-size:.7rem"]{font-size:.75rem!important}
  /* the Gregorian and Hijri dates stack on a phone, so the divider between them goes */
  .today-row{flex-direction:column;gap:2px}
  .today-sep{display:none}
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHONES: shorter, denser, still easy to read
   The home page was long on a phone because every block stacked in a single
   column. Here the blocks that can pair up do: gallery, leadership, stats,
   the footer's lists; programs get a side icon; empty event pictures shrink.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media(max-width:600px){
  /* Gallery: two across, the wide tile spans both. */
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .gal-item.gal-wide,.gal-item:last-child{grid-column:1 / -1}
  .gal-cap{padding:28px 12px 12px;font-size:.95rem}

  /* Leadership: a 2 by 2 grid. */
  .team{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-items:stretch}
  .tcard{min-width:0;max-width:none;width:auto;padding:24px 12px}
  .tavt{width:52px;height:52px;margin-bottom:12px}

  /* Stats: two across. */
  .stats{padding:56px 0}
  .stats>.c{grid-template-columns:1fr 1fr;gap:32px 20px}
  .stat,.stat:first-child{border-left:0;padding-left:0}
  .stat-n{font-size:clamp(2.3rem,11vw,3rem)}

  /* Programs on the green band: the icon sits beside each entry. */
  .sv-sec .sv-grid{gap:0}
  .sv-sec .sc{display:grid;grid-template-columns:56px 1fr;column-gap:16px;padding:22px 0 24px}
  .sv-sec .sc-ico{grid-row:1 / span 3;width:56px;height:56px;margin:2px 0 0}
  .sv-sec .sc-ico img{width:34px;height:34px}
  .sv-sec .sc h3{font-size:1.45rem;margin-bottom:6px}
  .sv-sec .sc p{font-size:.95rem;line-height:1.6}
  .sv-sec .card-lnk{margin-top:6px}

  /* Events with no picture: a slim strip that still carries the category. */
  .event-card .ec-img.no-img{aspect-ratio:auto;height:52px;color:transparent}
  .event-card .ec-img.no-img .event-badge{top:50%;transform:translateY(-50%)}
  .event-card .ec-body{padding:20px}

  /* Services: the large icon tiles are a picture's height, not a screen's. */
  .ab-img[style*="min-height"]{min-height:150px!important}
  .ab-img[style*="min-height"] img{width:96px!important}

  /* Footer: lists side by side, the follow buttons in a row. */
  .ft-in{grid-template-columns:1fr 1fr;gap:30px 20px;padding-bottom:36px}
  .ft-in > :first-child,.ft-in > :last-child{grid-column:1 / -1}
  .ft-social{flex-direction:row;flex-wrap:wrap;padding-bottom:12px}
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   DAYS OF MOURNING: the dark theme
   Switched on by index.php / app.js for Ayyam-e-Fatimiyya and each Shahadat
   (html.theme-fatimiyya), and off again by itself. Everything here is scoped
   to that class, so removing it returns the site exactly as it was.

   A designed dark theme, not an inversion: warm charcoal surfaces in three
   steps (page, raised band, card) rather than flat black; text in warm
   off-white at three strengths; the deep bands that were green become the
   darkest layer, so the page keeps its rhythm. Gold is kept for small marks
   (icons, rules, the next prayer, today) and for giving. Primary buttons are
   off-white. Photographs are quietened, never inverted.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* The salam replaces the verse in the home banner during Ayyam-e-Fatimiyya. */
.hero-salam{display:none;margin:0 0 30px;max-width:820px}
html.theme-fatimiyya:not(.fm-shahadat) .hero-salam{display:block}
html.theme-fatimiyya:not(.fm-shahadat) .hero-verse{display:none}
.hero-salam p{margin:0;max-width:none}
.hs-ar{
  font-family:'Amiri',serif;font-weight:400;font-size:clamp(2.3rem,5.4vw,4.2rem);line-height:1.45;
  color:#e2c483;text-align:left;text-shadow:0 2px 24px rgba(0,0,0,.25);
}
.hs-en{
  font-family:'Cormorant Garamond',serif;font-weight:400;font-style:italic;
  font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.15;letter-spacing:-.01em;color:#f1ece3;margin-top:6px!important;
}
.hs-cap{margin-top:22px!important;font-size:.92rem;letter-spacing:.04em;color:rgba(241,236,227,.8)}
.hs-cap::before{content:"";display:inline-block;width:44px;height:1px;background:rgba(226,196,131,.7);vertical-align:middle;margin-right:16px}

/* On a day of Shahadat a slim strip above the menu names the day. */
.fm-bar{display:none}
html.fm-shahadat .fm-bar{display:block}
.fm-bar{
  position:relative;z-index:901;background:#0d0c0e;color:#ece7de;text-align:center;
  padding:11px 20px 12px;border-bottom:1px solid #2e2d32;
}
.fm-bar p{margin:0;font-size:clamp(.95rem,2.2vw,1.06rem);font-weight:500;line-height:1.4}
.fm-day-pre{color:#d9bd84;font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-weight:500;font-size:1.15em;margin-right:.5em}

html.theme-fatimiyya{
  color-scheme:dark;
  --paper:#141316; --paper-2:#1a191c; --surface:#1f1e22;
  --bg:#141316; --bgs:#1a191c;
  --rule:#2e2d32; --rule-2:#403e45;
  --ink:#ece7de; --ink-soft:#bcb6ac; --ink-faint:#958f86;
  --g:#d4b77d; --g-md:#b99a5f; --g-dk:#0d0c0e; --g-soft:#28251f; --g-fog:#1c1b1f;
  --gold-lt:#e2c483;
  --clay:#d48c74; --clay-soft:#2a1f1b;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 18px rgba(0,0,0,.45); --sh-3:0 18px 48px rgba(0,0,0,.55);
  --fm-btn:#ece6da; --fm-btn-ink:#17161a;
}
html.theme-fatimiyya ::selection{background:#5a4a2a;color:#fff}

/* Menu */
html.theme-fatimiyya .nav,
html.theme-fatimiyya .nav.scrolled{background:rgba(20,19,22,.94);border-bottom-color:var(--rule)}
html.theme-fatimiyya .nav-logo img,
html.theme-fatimiyya .ft-logo{filter:invert(.9)}
html.theme-fatimiyya .ft-logo{background:none;padding:0}
html.theme-fatimiyya .nav-logo-text{color:var(--gold-lt)}
html.theme-fatimiyya .nav-links a.act{background:#242328;color:var(--ink)}
html.theme-fatimiyya .nav-links a:hover{color:var(--ink)}
html.theme-fatimiyya .hbg span{background:var(--ink)}

/* Banners: the photo stays, quietened; the deep bands are the darkest layer. */
html.theme-fatimiyya .hero{background:var(--g-dk)}
html.theme-fatimiyya .hero::before{filter:blur(9px) saturate(.25) brightness(.75)}
html.theme-fatimiyya .hero::after{
  background:
    url('images/pattern/al-mustafa-kufi.svg') no-repeat right 4% bottom 9% / clamp(240px,32vw,520px) auto,
    linear-gradient(90deg,rgba(13,12,14,.9) 0%,rgba(13,12,14,.7) 55%,rgba(13,12,14,.45) 100%),
    linear-gradient(180deg,rgba(13,12,14,.3) 0%,rgba(13,12,14,0) 35%,rgba(13,12,14,.85) 100%);
}
html.theme-fatimiyya .ab-img::before{background-color:#26242a}
html.theme-fatimiyya .sv-sec .sc-ico{background:#28272c}
html.theme-fatimiyya .sv-sec .sc-ico img,
html.theme-fatimiyya .sc-ico img{filter:invert(.88)}
html.theme-fatimiyya .sv-sec .sc{border-top-color:var(--rule)}
html.theme-fatimiyya img:not(.nav-logo img):not(.ft-logo):not(.sc-ico img){filter:brightness(.9) saturate(.85)}

/* Buttons: off-white for the main action, outlines for the rest, gold for giving. */
html.theme-fatimiyya .btn{background:var(--fm-btn);border-color:var(--fm-btn);color:var(--fm-btn-ink)}
html.theme-fatimiyya .btn:hover{background:#fff;border-color:#fff;color:var(--fm-btn-ink)}
html.theme-fatimiyya .btn-gh,
html.theme-fatimiyya .btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
html.theme-fatimiyya .btn-gh:hover,
html.theme-fatimiyya .btn-ghost:hover,
html.theme-fatimiyya .cbtn:hover{background:#26252a;color:var(--ink);border-color:var(--ink-faint)}
html.theme-fatimiyya .btn-dn{color:var(--ink)!important;border-color:var(--rule-2)}
html.theme-fatimiyya .btn-dn:hover{background:var(--gold)!important;color:#1c1608!important;border-color:var(--gold)!important}
html.theme-fatimiyya .btn-w{background:var(--fm-btn);color:var(--fm-btn-ink);border-color:var(--fm-btn)}
html.theme-fatimiyya .btn-w:hover{background:#fff}
html.theme-fatimiyya .jbadge,
html.theme-fatimiyya .give-badge{background:#2a2930;color:var(--ink)}
html.theme-fatimiyya .tavt{background:#2a2930;color:var(--gold-lt)}
html.theme-fatimiyya .site-announcement{background:#242328;color:var(--ink)}
html.theme-fatimiyya .site-announcement *{color:inherit}
html.theme-fatimiyya .hl,
html.theme-fatimiyya .cal-nav h3{color:var(--ink)}

/* Prayer times: the next prayer is raised and ringed in gold, not filled. */
html.theme-fatimiyya .pcrd{background:var(--surface)}
html.theme-fatimiyya .ptime,html.theme-fatimiyya .pname{color:var(--ink)}
html.theme-fatimiyya .pcrd.nxt{background:#25232a;border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
html.theme-fatimiyya .pcrd.nxt .ptime{color:var(--gold-lt)}
html.theme-fatimiyya .pcrd.nxt .pname{color:var(--ink)}
html.theme-fatimiyya .pcrd.nxt .p-rule{color:rgba(226,196,131,.45)}

/* Calendar and the next program */
html.theme-fatimiyya .cday.has-ev{background:var(--g-soft)}
html.theme-fatimiyya .cday.has-ev .cday-num{color:var(--gold-lt)}
html.theme-fatimiyya .cday.has-ev:hover{background:#332f27;box-shadow:inset 0 0 0 1px var(--g-md)}
html.theme-fatimiyya .cday.today,
html.theme-fatimiyya .cday.today.has-ev{background:transparent;box-shadow:inset 0 0 0 1.5px var(--gold-lt)}
html.theme-fatimiyya .cday.today *{color:var(--ink)}
html.theme-fatimiyya .cday.today .cday-num{color:var(--gold-lt)}
html.theme-fatimiyya .ev-now .ev-date{background:var(--g-soft);border-color:var(--g-md)}
html.theme-fatimiyya .ev-now .ev-date *{color:var(--gold-lt)}

/* Donations page */
html.theme-fatimiyya .give-verse-sec{background:var(--paper-2)}
html.theme-fatimiyya .give-verse .verse-svg path{fill:var(--gold-lt)}
html.theme-fatimiyya .give-verse .verse-ar{color:var(--gold-lt)}
html.theme-fatimiyya .give-fund{background:var(--surface);border-color:var(--rule)}
html.theme-fatimiyya .give-fund .gf-t,
html.theme-fatimiyya .give-panel h3,
html.theme-fatimiyya .give-email,
html.theme-fatimiyya .give-way:hover span{color:var(--ink)}
html.theme-fatimiyya .give-fund:hover{border-color:var(--rule-2)}
html.theme-fatimiyya .give-fund:has(input:checked){background:#25232a;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
html.theme-fatimiyya .give-ways{background:var(--paper)}
html.theme-fatimiyya .give-way input:checked + span{background:var(--fm-btn);color:var(--fm-btn-ink);border-color:var(--fm-btn);box-shadow:none}
html.theme-fatimiyya .give-card{background:var(--surface);border-color:var(--rule);box-shadow:none}
html.theme-fatimiyya .give-copy{background:var(--paper);border-color:var(--rule)}
html.theme-fatimiyya .give-copy-btn{background:transparent;color:var(--ink);border-color:var(--rule-2)}
html.theme-fatimiyya .give-copy-btn:hover{background:#26252a}
html.theme-fatimiyya .give-khums-note{background:var(--paper-2)}
html.theme-fatimiyya .give-strip{background:var(--paper-2)}

/* Sections built in the dashboard carry their own inline colours. */
html.theme-fatimiyya section[style*="background"]{background:var(--paper-2)!important}
html.theme-fatimiyya [style*="color:var(--g-dk"],
html.theme-fatimiyya [style*="color: var(--g-dk"]{color:var(--ink)!important}
html.theme-fatimiyya [style*="background:var(--g,"],
html.theme-fatimiyya [style*="background: var(--g,"]{background:#2a2930!important;color:var(--ink)!important}
html.theme-fatimiyya .event-badge{background:rgba(20,19,22,.88);color:var(--gold-lt)}