/* ISQ — design tokens. Change colours/type here; everything else reads from these. */
:root {
  --stone:   #ECEEE9;  /* page background, Montreal greystone */
  --paper:   #F8F9F6;  /* raised bands */
  --ink:     #1B2630;  /* body text */
  --muted:   #56625F;
  --cedar:   #1E4A3D;  /* primary */
  --brass:   #9C7A34;  /* lattice + small accents */
  --rule:    #C8CEC6;

  --serif:  "Alegreya", "Iowan Old Style", Georgia, serif;
  --arabic: "Amiri", "Traditional Arabic", "Geeza Pro", serif;

  --step--1: 0.9rem;
  --step-0:  1.125rem;
  --step-1:  1.35rem;
  --step-2:  1.8rem;
  --step-3:  clamp(2.2rem, 5vw, 3.4rem);
  --step-4:  clamp(3.2rem, 11vw, 7rem);

  --wrap: 68rem;
  --gap:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 9vw, 6.5rem);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --stone: #152026; --paper: #1C2A31; --ink: #E6EAE5; --muted: #A3AFAB;
    --cedar: #86C0A9; --brass: #D2B06A; --rule: #33444C;
  }
}
:root[data-theme="dark"] {
  --stone: #152026; --paper: #1C2A31; --ink: #E6EAE5; --muted: #A3AFAB;
  --cedar: #86C0A9; --brass: #D2B06A; --rule: #33444C;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--stone); color: var(--ink);
  font: 400 var(--step-0)/1.6 var(--serif);
  font-feature-settings: "onum", "kern";
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.15; }
p { margin: 0 0 1em; }
a { color: var(--cedar); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.lede { font-size: var(--step-1); line-height: 1.5; max-width: 38ch; }

.skip { position: absolute; left: -999px; top: 0; background: var(--cedar); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--stone) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule);
}
.site-header__inner { display: flex; align-items: center; gap: 1.25rem; min-height: 3.75rem; flex-wrap: wrap; }
.brand { font-weight: 700; font-size: var(--step-1); color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.brand { display: inline-flex; align-items: center; }
/* The source image is square with the crescent touching all four edges, so a
   50% radius clips the white JPEG corners and leaves a clean disc in dark mode. */
.brand__logo { display: block; width: 2.5rem; height: 2.5rem; border-radius: 50%; }

/* The menu never scrolls sideways: if the links do not fit on one line they wrap
   onto a second. Nothing is hidden and no script is involved. */
.site-nav { flex: 1; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.site-nav a { color: var(--ink); text-decoration: none; font-size: var(--step--1); }
.site-nav a:hover { color: var(--cedar); text-decoration: underline; }
.lang { font-size: var(--step--1); white-space: nowrap; letter-spacing: .06em; }
@media (max-width: 759px) {
  .site-header__inner { gap: .9rem; padding-block: .5rem; }
  .site-nav ul { gap: .15rem 1rem; }
}

/* Hero: the Arabic greeting is the one bold moment */
.hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 10vw, 7rem) clamp(2.5rem, 7vw, 5rem); }
.lattice {
  position: absolute; inset: 0 0 0 auto; width: min(46%, 34rem); height: 100%;
  color: var(--brass); opacity: .28;
  -webkit-mask-image: linear-gradient(to left, #000 30%, transparent);
          mask-image: linear-gradient(to left, #000 30%, transparent);
}
.hero__inner { position: relative; }
.hero__greeting {
  font-family: var(--arabic); font-size: var(--step-4); line-height: 1.1;
  color: var(--cedar); margin: 0 0 .15em; text-align: left;
}
.hero h1 { font-size: var(--step-3); max-width: 16ch; }
.hero__alt { color: var(--muted); font-style: italic; font-size: var(--step-1); margin: .35em 0 1.5em; }
.hero__tagline { font-size: var(--step-1); padding-left: 1rem; border-left: 3px solid var(--brass); max-width: 30ch; margin: 0; }

/* Bands */
.band { background: var(--paper); border-block: 1px solid var(--rule); padding-block: var(--section); }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: 1.75rem; }
.section-head .lede { margin: 0; font-size: var(--step-0); color: var(--muted); }
h2 { font-size: var(--step-2); }

/* Prayer / Moonode */
.moonode { display: flex; justify-content: center; }
/* One widget at every size: it reflows itself to whatever width we give it, so we
   give it the full content column. Tall and narrow on phones, wide on desktop. */
.moonode__frame {
  border: 0; border-radius: 16px; display: block; background: var(--stone);
  width: 100%; height: 640px;
}
/* Phones: the widget keeps its compact layout only below roughly 380px, so the frame
   is held just under that — wide enough to sit nearly flush with the text above it.
   The extra height is for Moonode's own iOS app banner, which appears inside the
   frame on iPhones only and eats around 55px that desktop browsers never show. */
@media (max-width: 759px) {
  .moonode__frame { max-width: 380px; height: 800px; }
}

/* Two-column section: heading left, content right */
.split { display: grid; gap: 1.25rem var(--gap); padding-block: var(--section); }
.wrap.split + .wrap.split { border-top: 1px solid var(--rule); }
@media (min-width: 760px) {
  .split { grid-template-columns: 14rem 1fr; }
  .split > h2 { position: sticky; top: 5.5rem; align-self: start; }
}
.split > div { max-width: 42rem; }
.band .split { padding-block: 0; }

.aims { margin-top: 1.5rem; display: grid; gap: .75rem; }
.aims li { padding-left: 1.4rem; position: relative; }
.aims li::before {
  content: ""; position: absolute; left: 0; top: .62em; width: .5rem; height: .5rem;
  background: var(--brass); transform: rotate(45deg);
}

.group-label { font-size: var(--step-0); font-style: italic; color: var(--muted); font-weight: 400; margin-bottom: .75rem; }
.group-label--planned { margin-top: 2.5rem; }
.services li { padding-block: 1rem; border-top: 1px solid var(--rule); }
.services li:last-child { border-bottom: 1px solid var(--rule); }
.services h4 { font-size: var(--step-1); margin-bottom: .2rem; }
.services p { margin: 0; color: var(--muted); }
.services--planned h4 { color: var(--muted); }

.person { display: flex; gap: 1.5rem; align-items: flex-start; }
.person + .person { margin-top: 2rem; }
.person__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex: none; }
.person__photo--mono {
  display: grid; place-items: center; background: var(--cedar); color: var(--paper);
  font-size: 2.2rem; letter-spacing: .04em;
}
.person h3 { font-size: var(--step-1); }
.person__role { color: var(--muted); font-style: italic; margin-bottom: .6rem; }
@media (max-width: 480px) { .person { flex-direction: column; } .person__photo { width: 88px; height: 88px; } .person__photo--mono { font-size: 1.6rem; } }

.inline-links { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; font-size: var(--step--1); }

.method { margin-top: 1.5rem; }
.method__title { margin: 0; color: var(--muted); }
.method__detail { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; font-size: var(--step-2); margin: .15rem 0 0; overflow-wrap: anywhere; }
.copy {
  font: inherit; font-size: var(--step--1); color: var(--cedar); background: transparent;
  border: 1px solid currentColor; border-radius: 999px; padding: .2rem .9rem; cursor: pointer;
}
.copy:hover { background: var(--cedar); color: var(--paper); }

.contact-lines { display: grid; gap: 1rem; margin: 1.5rem 0; }
.contact-lines a { display: inline-flex; flex-direction: column; font-size: var(--step-2); text-decoration: none; overflow-wrap: anywhere; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines__label { font-size: var(--step--1); color: var(--muted); }

.quote { margin-block: 0; padding-block: var(--section); border-top: 1px solid var(--rule); }
.quote > * { max-width: 42rem; }
@media (min-width: 760px) { .quote { padding-left: calc(14rem + var(--gap)); } }
.quote blockquote { margin: 0; font-size: var(--step-1); font-style: italic; line-height: 1.55; }
.quote figcaption { margin-top: 1rem; color: var(--muted); }
.quote figcaption::before { content: "— "; }

.site-footer { background: var(--cedar); color: var(--paper); padding-block: 2rem; font-size: var(--step--1); }
.site-footer a { color: inherit; }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.site-footer p { margin: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-footer { background: var(--paper); color: var(--ink); }
}
:root[data-theme="dark"] .site-footer { background: var(--paper); color: var(--ink); }