@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url("fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:600;font-display:swap;src:url("fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/libre-franklin-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Libre Franklin";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/libre-franklin-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/libre-franklin-latin-500-normal.woff2") format("woff2");}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/libre-franklin-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Libre Franklin";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/libre-franklin-latin-700-normal.woff2") format("woff2");}
@font-face{font-family:"Amiri";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/amiri-sub-700.woff2") format("woff2");}
/* ==========================================================================
   Idris Mosque: site stylesheet
   Palette: evergreen / pine / gold / fog / mist / ink / stone
   Type: Cormorant Garamond (display) · Libre Franklin (text) · Amiri (Arabic)
   ========================================================================== */

:root {
  --evergreen: #1f4d3a;
  --pine: #143327;
  --moss: #2b6a50;
  --gold: #c8a24a;
  --gold-deep: #7d611f;   /* text on light surfaces: >=4.5:1 on white, fog and the gold tints */
  --gold-on-dark: #d8b566; /* text on evergreen/pine: 4.9:1 and 7.0:1 */
  --gold-soft: rgba(200, 162, 74, 0.32);
  --fog: #f4f5f2;
  --paper: #ffffff;
  --mist: #e3e7e2;
  --mist-deep: #cfd6d1;
  --stone: #5c6964;
  --ink: #1b2622;
  --ink-soft: #33413b;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-text: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "Amiri", "Scheherazade New", "Noto Naskh Arabic", "Traditional Arabic", serif;

  --container: 1140px;
  --gutter: 24px;
  --section: 96px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --shadow-card: 0 1px 2px rgba(27, 38, 34, 0.06), 0 12px 32px -12px rgba(27, 38, 34, 0.18);
  --radius-sm: 4px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --error: #9b3b2a;          /* 6.9:1 on white; distinct from the gold accent */
  --field-border: #8a9792;   /* 3.1:1 on white: a boundary a low-vision reader can find */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--evergreen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a[href^="tel:"] { white-space: nowrap; }
a:hover { color: var(--pine); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-soft); }

/* ---------- Type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(40px, 5.2vw, 60px); line-height: 1.02; }
h2 { font-size: clamp(32px, 3.6vw, 44px); }
h3 { font-size: clamp(24px, 2.2vw, 28px); line-height: 1.15; }
h4 { font-size: 21px; }
p { margin: 0; }
.lede { font-size: 19px; line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.measure { max-width: 66ch; }
.muted { color: var(--stone); }
.small { font-size: 14.5px; }
.center { text-align: center; }
.ar {
  font-family: var(--font-arabic);
  direction: rtl;
  unicode-bidi: isolate;
  font-weight: 700;
  line-height: 1.6;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--evergreen);
}
.eyebrow svg { width: 12px; height: 12px; color: var(--gold); flex: none; }
.on-dark .eyebrow { color: var(--gold); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255, 255, 255, 0.86); }
.on-dark a { color: #fff; }
.on-dark .muted { color: rgba(255, 255, 255, 0.66); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }
.section--tight { padding: 64px 0; }
.section--alt { background: var(--paper); }
.section--dark { background-color: var(--evergreen); }
.section--pine { background-color: var(--pine); }
.section-head { display: grid; gap: 14px; max-width: 720px; margin-bottom: 48px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head .lede { margin-top: 2px; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stack { display: grid; gap: 16px; }
.stack-lg { display: grid; gap: 28px; }
.row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--pine); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.skip-link:focus { top: 16px; }
.pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c8a24a' stroke-opacity='0.16' stroke-width='1'%3E%3Cpolygon points='48,8 88,48 48,88 8,48'/%3E%3Crect x='19.7' y='19.7' width='56.6' height='56.6'/%3E%3Cpath d='M0 0L19.7 19.7M96 0L76.3 19.7M0 96L19.7 76.3M96 96L76.3 76.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 96px 96px;
}
.rule { height: 1px; background: var(--mist-deep); border: 0; margin: 0; }
.rule-star { display: flex; align-items: center; gap: 16px; color: var(--gold); }
.rule-star::before, .rule-star::after { content: ""; flex: 1; height: 1px; background: var(--gold-soft); }
.rule-star .star { width: 16px; height: 16px; }
.star { display: inline-block; vertical-align: middle; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: var(--radius); border: 1px solid transparent;
  font-family: var(--font-text); font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--evergreen); color: #fff; }
.btn-primary:hover { background: var(--pine); color: #fff; }
.btn-gold { background: var(--gold); color: var(--pine); }
.btn-gold:hover { background: #d9b45c; color: var(--pine); }
.btn-outline { background: transparent; color: var(--evergreen); border-color: var(--evergreen); }
.btn-outline:hover { background: var(--evergreen); color: #fff; }
.on-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.on-dark .btn-outline:hover { background: #fff; color: var(--pine); border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn .icon, .btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--evergreen); }
.link-arrow::after { content: ""; width: 15px; height: 15px; flex: none; background-color: 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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 0.2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }
.on-dark .link-arrow { color: var(--gold); }

/* ---------- Top bar + header ---------- */
.topbar { background: var(--pine); color: rgba(255, 255, 255, 0.86); font-size: 13.5px; }
.topbar .container { display: flex; justify-content: space-between; align-items: center; min-height: 38px; gap: 16px; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.topbar-contact .sep { opacity: 0.35; }
.topbar-social { display: flex; gap: 6px; }
.social-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.social-btn:hover { background: rgba(255, 255, 255, 0.12); }
.social-btn svg { width: 16px; height: 16px; }

.header { position: sticky; top: 0; z-index: 50; background: rgba(244, 245, 242, 0.94); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--mist); }
.header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand img { width: 58px; height: 58px; border-radius: 50%; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: -0.005em; }
.brand-ar { display: block; font-size: 15px; color: var(--gold-deep); line-height: 1.3; margin-top: 3px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { display: inline-block; padding: 10px 12px; text-decoration: none; color: var(--ink-soft); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; position: relative; border-radius: 3px; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--evergreen); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { display: inline-flex; margin-left: 10px; text-transform: none; letter-spacing: 0.01em; font-size: 14px; min-height: 42px; padding: 0 18px; }
.nav .btn::after { display: none; }
.nav-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--mist-deep); background: var(--paper); border-radius: var(--radius); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Hero ---------- */
.hero { background: var(--evergreen); color: #fff; position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, calc(var(--container) * 0.46)) minmax(0, calc(var(--container) * 0.54)) minmax(var(--gutter), 1fr); min-height: 600px; }
.hero-copy { grid-column: 2; padding: 56px 56px 96px 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; position: relative; z-index: 1; }
.hero-media { grid-column: 3 / 5; }
.hero-copy .eyebrow { color: var(--gold); }
.hero-copy h1 { color: #fff; font-weight: 500; max-width: 12ch; }
.hero-copy h1 em { font-style: italic; font-weight: 500; color: var(--gold); }
.hero-copy .lede { color: rgba(255, 255, 255, 0.84); max-width: 50ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero-ar { font-size: 30px; color: var(--gold); line-height: 1.2; }
.hero-media { position: relative; min-height: 420px; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 8% 50%; transform: scale(1.3); transform-origin: 8% 16%; }
.hero-media::after { content: ""; position: absolute; inset: 18px 18px 92px; border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none; }
.hero-media .hero-caption { position: absolute; left: 34px; bottom: 30px; background: rgba(20, 51, 39, 0.82); color: #fff; padding: 8px 12px; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; border-left: 2px solid var(--gold); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 18px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.hero-facts div { display: grid; gap: 2px; }
.hero-facts dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.hero-facts dd { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: #fff; }

/* Page hero (inner pages) */
.page-hero { background: var(--evergreen); color: #fff; padding: 64px 0 56px; position: relative; overflow: hidden; }
.page-hero .container { display: grid; gap: 14px; max-width: calc(var(--container) + var(--gutter) * 2); }
.page-hero h1 { color: #fff; font-weight: 500; }
.page-hero .lede { color: rgba(255, 255, 255, 0.84); }
.page-hero .eyebrow { color: var(--gold); }
.page-hero--overlap { padding-bottom: 140px; }
.page-hero--photo { padding: 0; }
.page-hero--photo .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.page-hero--photo .page-hero-copy { padding: 64px 0; display: grid; gap: 14px; }
.page-hero-media { position: relative; height: 100%; min-height: 380px; }
.page-hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Prayer clock ---------- */
.clock-section { position: relative; padding: 0 0 var(--section); background: transparent; }
.clock-section .container { position: relative; }
.clock-section--overlap { margin-top: -72px; }
.clock-section--overlap .clock { position: relative; z-index: 2; }
.clock { background: var(--paper); border: 1px solid var(--mist-deep); box-shadow: 0 2px 4px rgba(27, 38, 34, 0.06), 0 24px 48px -20px rgba(27, 38, 34, 0.35); border-radius: var(--radius); overflow: hidden; }
.clock-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 20px 28px; border-bottom: 1px solid var(--mist); background: var(--paper); }
.clock-head .eyebrow { color: var(--evergreen); }
.clock-dates { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14.5px; color: var(--stone); }
.clock-dates b { color: var(--ink); font-weight: 600; }
.clock-body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
.clock-now { padding: 22px 28px 26px; border-right: 1px solid var(--mist); display: flex; flex-direction: column; gap: 18px; background-color: var(--evergreen); color: #fff; position: relative; }
.clock-note { margin-top: auto; padding-top: 18px; }
.clock-now .label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.clock-time { font-family: var(--font-display); font-variant-numeric: lining-nums tabular-nums; font-weight: 500; font-size: clamp(56px, 6vw, 76px); line-height: 1; color: #fff; letter-spacing: -0.01em; }
.clock-time small { font-size: 0.42em; font-weight: 500; margin-left: 6px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.8); }
.clock-next { display: grid; gap: 4px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.clock-next .next-name { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: #fff; line-height: 1.1; }
.clock-next .next-name span { color: var(--gold); }
.clock-next .next-in { font-size: 15px; color: rgba(255, 255, 255, 0.82); font-variant-numeric: tabular-nums; }
.clock-note { font-size: 13px; color: rgba(255, 255, 255, 0.66); }
.clock-table { padding: 10px 28px 18px; }
.clock-table table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.clock-table th { text-align: left; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); font-weight: 600; padding: 12px 8px 10px; border-bottom: 1px solid var(--mist); }
.clock-table th:not(:first-child), .clock-table td:not(:first-child) { text-align: right; }
.clock-table td { padding: 12px 8px; border-bottom: 1px solid var(--mist); font-size: 16px; }
.clock-table tr:last-child td { border-bottom: 0; }
.clock-table td.name { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink); }
.clock-table td.name small { display: block; font-family: var(--font-text); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone); font-weight: 500; margin-top: 1px; }
.clock-table td.iq { font-weight: 600; color: var(--evergreen); }
.clock-table td.name .ar-inline, .ar-inline { font-family: var(--font-arabic); font-weight: 700; text-transform: none; letter-spacing: 0; direction: rtl; unicode-bidi: isolate; color: var(--gold-deep); font-size: 15px; line-height: 1.2; }
.clock-table td.name .ar-inline { display: block; margin-top: 2px; text-align: left; }
.nav .btn:hover { color: var(--pine); }
.clock-table tr.is-next td { background: rgba(200, 162, 74, 0.13); }
.clock-table tr.is-next td.name { box-shadow: inset 3px 0 0 var(--gold); }
.clock-table tr.is-next td.name { color: var(--evergreen); }
.clock-table tr.is-next td.name::before { content: "▸ " / ""; color: var(--gold); }
.clock-table tr.is-past td { color: var(--stone); }
.clock-table tr.is-past td.name { color: var(--stone); }
.clock-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 14px 28px 16px; border-top: 1px solid var(--mist); font-size: 13.5px; color: var(--stone); background: var(--fog); }
.clock-foot a { color: var(--evergreen); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; background: var(--mist); color: var(--ink-soft); }
.badge--live { background: rgba(43, 106, 80, 0.14); color: var(--evergreen); }
.badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 3px rgba(43, 106, 80, 0.18); }
.badge--warn { background: rgba(200, 162, 74, 0.2); color: var(--gold-deep); }
.clock-section--embedded { padding-top: 0; }
.clock-jumuah { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 28px; border-top: 1px solid var(--mist); font-size: 15px; }
.clock-jumuah b { font-weight: 600; color: var(--evergreen); }

/* ---------- Cards ---------- */
.card { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.card h3 { font-size: 25px; }
.card p { color: var(--ink-soft); }
.card .card-cta { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }
.card--accent { box-shadow: inset 0 3px 0 var(--gold); }
.card--dark { background: var(--evergreen); border-color: var(--evergreen); }
.card--dark h3, .card--dark p { color: #fff; }
.card--dark p { color: rgba(255, 255, 255, 0.84); }
.card--dark .eyebrow { color: var(--gold); }
.card-meta { font-size: 13.5px; color: var(--stone); display: flex; flex-wrap: wrap; gap: 6px 14px; }
.card-meta b { color: var(--ink); font-weight: 600; }

/* Service tiles */
.tile { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: border-color 0.2s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.tile:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-card); color: inherit; }
.tile .tile-icon { width: 44px; height: 44px; color: var(--evergreen); display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 22px 22px 4px 4px; background: var(--fog); }
.tile .tile-icon svg { width: 22px; height: 22px; }
.tile h3 { font-size: 23px; }
.tile p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.tile .link-arrow { margin-top: auto; padding-top: 6px; font-size: 14px; }

/* ---------- Arch frame ---------- */
.arch-frame { position: relative; display: block; }
.arch { position: relative; aspect-ratio: 400 / 520; overflow: hidden; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 520' preserveAspectRatio='none'%3E%3Cpath d='M0 520V218C0 108 110 40 200 0C290 40 400 108 400 218V520Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 520' preserveAspectRatio='none'%3E%3Cpath d='M0 520V218C0 108 110 40 200 0C290 40 400 108 400 218V520Z' fill='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.arch-outline { position: absolute; left: -12px; right: -12px; top: -12px; bottom: 0; width: calc(100% + 24px); height: calc(100% + 12px); pointer-events: none; color: var(--gold); }
@media (max-width: 640px) { .arch-outline { left: -7px; right: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 7px); } }
.arch--left img { object-position: 12% 20%; transform: scale(1.3); transform-origin: 12% 8%; }
.arch-outline path { fill: none; stroke: currentColor; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.arch-frame--sm { width: 160px; }

/* ---------- Story / split blocks ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split--narrow-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.split--top { align-items: start; }
.split .arch-frame { width: min(100%, 420px); margin: 0 auto; }
.split-copy { display: grid; gap: 18px; }
.split-copy .lede { max-width: 54ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 8px; }
.facts div { border-top: 1px solid var(--gold-soft); padding-top: 12px; }
.facts dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.facts dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 30px; font-weight: 600; line-height: 1; color: var(--evergreen); }
.facts dd small { display: block; font-family: var(--font-text); font-size: 13.5px; font-weight: 400; color: var(--stone); margin-top: 6px; line-height: 1.4; }

/* ---------- Photo strip / gallery ---------- */
.photo-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo-strip figure, .gallery figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--mist); }
.photo-strip img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; transition: transform 0.6s var(--ease); }
.photo-strip a:hover img, .gallery a:hover img { transform: scale(1.03); }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
.gallery figure.wide { grid-column: span 2; }
.gallery figure.wide img { aspect-ratio: 8 / 3.1; }
.gallery figcaption, .photo-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 14px 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); background: linear-gradient(to top, rgba(8, 28, 20, 0.9) 0%, rgba(8, 28, 20, 0.6) 45%, rgba(8, 28, 20, 0) 100%); }
.gallery a, .photo-strip a { display: block; }

/* ---------- Lectures ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.video { position: relative; aspect-ratio: 16 / 9; background: var(--pine); border-radius: var(--radius); overflow: hidden; border: 0; padding: 0; width: 100%; cursor: pointer; display: block; text-align: left; }
.video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.9; transition: transform 0.6s var(--ease), opacity 0.3s; }
.video:hover img { transform: scale(1.03); opacity: 1; }
.video .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--evergreen); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: transform 0.2s var(--ease); }
.video:hover .play { transform: scale(1.06); }
.video .play svg { width: 26px; height: 26px; margin-left: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-title { margin-top: 12px; font-weight: 600; font-size: 15.5px; line-height: 1.4; min-height: 2.8em; }
.video-by { font-size: 13.5px; color: var(--stone); margin-top: 2px; }

/* ---------- Quote band ---------- */
.quote-band { text-align: center; }
.quote-band blockquote { margin: 0 auto; max-width: 780px; display: grid; gap: 18px; justify-items: center; }
.quote-band blockquote p { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(26px, 3vw, 36px); line-height: 1.3; color: #fff; text-wrap: balance; }
.quote-band cite { font-style: normal; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.quote-band .hero-actions { justify-content: center; margin-top: 26px; }

/* ---------- Content pages ---------- */
.prose { display: grid; gap: 18px; max-width: 70ch; }
.prose h2 { margin-top: 12px; }
.prose h3 { margin-top: 6px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.prose li::marker { color: var(--gold-deep); }
.prose blockquote { margin: 8px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--gold); font-family: var(--font-display); font-size: 24px; line-height: 1.35; font-style: italic; color: var(--ink-soft); }
.prose blockquote cite { display: block; margin-top: 8px; font-family: var(--font-text); font-style: normal; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.callout { background: var(--paper); border: 1px solid var(--mist); border-left: 3px solid var(--gold); padding: 18px 22px; display: grid; gap: 8px; border-radius: var(--radius); }
.callout p { margin: 0; color: var(--ink-soft); }
.callout b { color: var(--ink); }
.prose dl { display: grid; gap: 6px 18px; grid-template-columns: max-content 1fr; margin: 0; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--ink-soft); }
.service-block { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; padding: 56px 0; border-top: 1px solid var(--mist-deep); max-width: 1000px; }
.service-block .prose { max-width: 41em; }
.service-block:first-of-type { border-top: 0; padding-top: 0; }
.service-aside { display: grid; gap: 12px; align-content: start; position: sticky; top: 110px; }
.service-aside h2 { font-size: 34px; text-wrap: balance; }
.service-aside .ar { font-size: 22px; color: var(--gold-deep); text-align: left; direction: rtl; }
.service-aside .service-icon { width: 52px; height: 52px; color: var(--evergreen); display: grid; place-items: center; border: 1px solid var(--gold-soft); border-radius: 26px 26px 4px 4px; background: var(--paper); }
.service-aside .service-icon svg { width: 26px; height: 26px; }
.subnav { display: flex; flex-wrap: wrap; gap: 6px; }
.subnav a { display: inline-block; padding: 8px 14px; border: 1px solid var(--mist-deep); border-radius: 999px; font-size: 13.5px; font-weight: 500; text-decoration: none; color: var(--ink-soft); background: var(--paper); }
.subnav a:hover { border-color: var(--evergreen); color: var(--evergreen); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: start; }
.contact-list { display: grid; gap: 22px; }
.contact-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.contact-item .ci { width: 44px; height: 44px; display: grid; place-items: center; color: var(--evergreen); background: var(--paper); border: 1px solid var(--gold-soft); border-radius: 22px 22px 4px 4px; }
.contact-item .ci svg { width: 22px; height: 22px; }
.contact-item h3, .contact-item h2 { font-size: 22px; }
.contact-item p, .contact-item a { font-size: 16px; }
.contact-item .note { font-size: 13.5px; color: var(--stone); }
.map-frame { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--mist); background: var(--mist); aspect-ratio: 16 / 10; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.form { display: grid; gap: 16px; background: var(--paper); border: 1px solid var(--mist); padding: 28px; border-radius: var(--radius); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--field-border); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6964' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"), none; background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; background-color: var(--fog); }
.field select { background-color: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); background: #fff; }
.form-foot { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; }
.form-status { font-size: 14px; color: var(--stone); }
.form-status.ok { color: var(--evergreen); font-weight: 600; }
.form-status.err { color: var(--error); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Embeds */
.embed { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); overflow: hidden; }
.embed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 14px 20px; border-bottom: 1px solid var(--mist); background: var(--fog); font-size: 14px; color: var(--stone); }
.embed-head b { color: var(--ink); font-weight: 600; }
.embed-body { position: relative; background: #fff; }
.embed-body iframe { display: block; width: 100%; border: 0; }
.embed-fallback { padding: 18px 20px; font-size: 14px; color: var(--stone); border-top: 1px solid var(--mist); background: var(--fog); }

/* Donate */
.give-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.give { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.give > .row { margin-top: auto; padding-top: 6px; }
.give h3, .give h2 { font-size: 26px; }
.give .give-ar { font-size: 20px; color: var(--gold-deep); }
.give p { color: var(--ink-soft); }
.give .row { margin-top: 6px; }
.give--featured { grid-column: 1 / -1; background-color: var(--evergreen); border-color: var(--evergreen); }
.give--featured h3, .give--featured h2, .give--featured p { color: #fff; }
.give--featured p { color: rgba(255, 255, 255, 0.84); }
.give--featured .give-ar { color: var(--gold); }

/* Announcement list */
.notice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(20, 51, 39, 0.94); display: none; align-items: center; justify-content: center; padding: 24px; }
.lightbox[aria-hidden="false"] { display: flex; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 84vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); background: #fff; }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 14px; font-size: 14.5px; }
.lightbox figure { margin: 0; display: grid; justify-items: center; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: #fff; cursor: pointer; display: grid; place-items: center; }
.lb-btn:hover { background: rgba(255, 255, 255, 0.2); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: 20px; right: 20px; }
.lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.lb-next { right: 20px; top: 50%; margin-top: -24px; }

/* ---------- Footer ---------- */
.footer { background: var(--pine); color: rgba(255, 255, 255, 0.8); padding: 72px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h4, .footer .foot-h { color: #fff; font-family: var(--font-text); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 16px; }
.footer a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 15px; }
.footer-brand { display: grid; gap: 14px; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand img { width: 64px; height: 64px; }
.footer-brand .brand-ar { color: var(--gold); }
.footer-brand p { font-size: 15px; max-width: 40ch; color: rgba(255, 255, 255, 0.72); }
.footer address { font-style: normal; font-size: 15px; display: grid; gap: 6px; }
.footer-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
.footer-bottom .ar { color: var(--gold); font-size: 16px; }
.footer .topbar-social .social-btn { color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.25); }

/* ---------- Mobile nav drawer ---------- */
.drawer { display: none; }
body.nav-open { overflow: hidden; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav a { padding: 10px 9px; font-size: 12.5px; letter-spacing: 0.06em; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  :root { --section: 72px; }
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .header .container { min-height: 72px; }
  .brand img { width: 48px; height: 48px; }
  .brand-name { font-size: 23px; }
  .brand-ar { font-size: 13px; }
  .drawer { display: block; position: fixed; inset: 0; top: 72px; z-index: 49; background: var(--evergreen); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s; overflow: auto; }
  .drawer.is-open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .drawer .container { padding-top: 16px; padding-bottom: 32px; display: grid; gap: 2px; }
  .drawer a { display: block; padding: 12px 4px; font-family: var(--font-display); font-size: 28px; line-height: 1.2; font-weight: 500; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .drawer a[aria-current="page"] { color: var(--gold); }
  .drawer .btn { margin-top: 16px; font-family: var(--font-text); font-size: 16px; border-bottom: 0; }
  .drawer .drawer-contact { margin-top: 20px; display: grid; gap: 6px; color: rgba(255, 255, 255, 0.75); font-size: 14.5px; }
  .drawer .drawer-contact a { display: inline; font-family: var(--font-text); font-size: 15px; padding: 0; border: 0; }
  .drawer .drawer-social { display: flex; gap: 10px; margin-top: 14px; padding-bottom: 8px; }
  .drawer .drawer-social a { display: inline-flex; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; font-size: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-copy { min-width: 0; }
  .next-strip .ns-a, .next-strip .ns-b { white-space: normal; }
  .hero-copy { grid-column: 1; padding: 52px var(--gutter) 116px; order: 2; }
  .hero-media { grid-column: 1; order: 1; min-height: 0; aspect-ratio: 16 / 10; }
  .hero-media img { position: absolute; transform: scale(1.3); transform-origin: 26% 6%; object-position: 26% 30%; }
  .clock-section--overlap { margin-top: -64px; }
  .clock-body { grid-template-columns: 1fr; }
  .clock-now { border-right: 0; border-bottom: 1px solid var(--mist); }
  .split, .split--narrow-media { grid-template-columns: 1fr; gap: 40px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid { grid-template-columns: 1fr; max-width: 640px; }
  .service-block { grid-template-columns: 1fr; gap: 24px; padding: 44px 0; }
  .service-aside { position: static; grid-template-columns: auto 1fr; align-items: start; }
  .service-aside h2 { font-size: 28px; }
  .service-aside .ar { grid-column: 2; margin-top: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery figure.wide { grid-column: span 2; }
  .page-hero--photo .container { grid-template-columns: 1fr; gap: 0; }
  .page-hero-media { min-height: 0; aspect-ratio: 16 / 9; }
  .give-grid { grid-template-columns: 1fr; }
  .topbar-contact { gap: 14px; }
  .topbar .sep, .topbar .hide-sm { display: none; }
  .topbar .keep-sm { display: inline; }
}
@media (max-width: 640px) {
  :root { --section: 64px; --gutter: 20px; }
  body { font-size: 16.5px; }
  h1 { font-size: clamp(36px, 10vw, 44px); }
  .lede { font-size: 17.5px; }
  .grid-2, .grid-3, .grid-4, .notice-grid { grid-template-columns: 1fr; }
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery figure.wide { grid-column: auto; }
  .gallery figure.wide img { aspect-ratio: 4 / 3; }
  .form-row { grid-template-columns: 1fr; }
  .clock-head, .clock-table, .clock-foot, .clock-now, .clock-jumuah { padding-left: 20px; padding-right: 20px; }
  .clock-time { font-size: 54px; }
  .clock-table td.name { font-size: 19px; }
  .hero-facts { gap: 18px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .topbar .container { justify-content: center; }
  .hero-media::after { inset: 12px; }
  .hero-media .hero-caption { left: 24px; bottom: 20px; }
  .card, .give, .form { padding: 22px; }
  .lb-prev, .lb-next { top: auto; bottom: 20px; margin: 0; }
  .lb-prev { left: 20px; } .lb-next { right: 20px; }
  .btn { width: 100%; }
  .hero-actions .btn, .card-cta .btn, .row .btn, .quote-band .btn { width: auto; }
}

/* ---------- Single-file (bundle) mode ---------- */
main[data-page]:not(.is-active) { display: none; }

/* ---------- Print ---------- */
@media print {
  .topbar, .header, .footer, .drawer, .hero-media, .video-grid, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  .clock-now { background: #fff; color: #000; border: 1px solid #000; }
  .clock-time, .clock-next .next-name { color: #000; }
}

/* ---------- Additions ---------- */
.prose figure { margin: 0 0 6px; display: grid; gap: 8px; }
.rounded { border-radius: var(--radius); }
.embed-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.embed--timetable .embed-body iframe { min-width: 900px; }
.subnav { margin-top: 10px; }
.page-hero .subnav a { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.page-hero .subnav a:hover { background: #fff; color: var(--pine); border-color: #fff; }
.give--wide { grid-column: 1 / -1; }
.photo-strip--2 { grid-template-columns: 1fr 1fr; }
.about-aside { align-self: start; position: sticky; top: 110px; }
.icw-badge { margin: 0; display: grid; gap: 12px; justify-items: center; padding: 28px; background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); }
.icw-badge img { max-width: 300px; width: 100%; }
.map-frame--wide { aspect-ratio: 21 / 8; }
@media (max-width: 640px) { .map-frame--wide { aspect-ratio: 4 / 3; } }

.page-hero .btn-outline, .hero .btn-outline, .give--featured .btn-outline, .card--dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.page-hero .btn-outline:hover, .hero .btn-outline:hover, .give--featured .btn-outline:hover, .card--dark .btn-outline:hover { background: #fff; color: var(--pine); border-color: #fff; }
.page-hero .link-arrow, .hero .link-arrow, .give--featured .link-arrow, .card--dark .link-arrow { color: var(--gold); }
.page-hero .link-arrow:hover, .hero .link-arrow:hover, .give--featured .link-arrow:hover, .card--dark .link-arrow:hover { color: #fff; }
.give--featured .eyebrow { color: var(--gold); }
.give-ar { text-align: left; display: block; }
.drawer .btn.btn-gold { display: inline-flex; justify-content: center; color: var(--pine); padding: 0 22px; width: 100%; border: 0; }
.embed-body { min-height: 120px; }
.map-frame::before { content: "Map loads here from Google Maps"; position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px; text-align: center; font-size: 14px; color: var(--stone); }
.map-frame iframe { background: transparent; }

.saw { font-family: var(--font-arabic); font-size: 1.15em; line-height: 1; display: inline-block; vertical-align: -0.12em; padding: 0 0.12em; }
.lb-count { font-size: 12.5px; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-top: 6px; }
.map-embed .embed-body { position: relative; aspect-ratio: 16 / 9; background: var(--mist); }
.map-embed .embed-body::before { content: "Map loads here from Google Maps"; position: absolute; left: 0; right: 0; top: 50%; margin-top: -10px; text-align: center; font-size: 14px; color: var(--stone); }
.map-embed .embed-body iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-embed--wide .embed-body { aspect-ratio: 21 / 8; }
@media (max-width: 640px) { .map-embed--wide .embed-body { aspect-ratio: 4 / 3; } }

.clock-jumuah .jl { flex: none; }
.next-strip { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; padding: 10px 14px 10px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: var(--radius); background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; font-size: 14.5px; font-variant-numeric: tabular-nums; width: fit-content; max-width: 100%; }
.next-strip .ns-a, .next-strip .ns-b { white-space: nowrap; }
.next-strip .ns-in, .next-strip b { white-space: nowrap; }
.next-strip:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.next-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.25); flex: none; }
.next-strip b { font-weight: 600; }
.next-strip .ns-in { color: #fff; font-weight: 600; }
.next-strip .ns-dim { color: rgba(255, 255, 255, 0.72); }
@media (max-width: 960px) {
  .hero-facts { display: none; }
  .next-strip { width: 100%; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; }
  .next-strip .ns-b { grid-column: 2; }
}
@media (max-width: 640px) {
  .clock-jumuah { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: baseline; }
  .clock-jumuah .jl { grid-column: 1 / -1; padding-bottom: 2px; border-bottom: 1px solid var(--mist); }
  .clock-jumuah .jt { display: contents; }
  .clock-jumuah .jt > span { white-space: nowrap; color: var(--ink-soft); }
  .clock-jumuah .jt > b { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
  .grid-4.tiles--compact { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tiles--compact .tile { padding: 16px 14px 14px; gap: 8px; }
  .tiles--compact .tile p, .tiles--compact .tile .link-arrow { display: none; }
  .tiles--compact .tile { position: relative; }
  .tiles--compact .tile h3 { font-size: 19px; padding-right: 22px; }
  .tiles--compact .tile h3::after { content: ""; position: absolute; right: 14px; bottom: 16px; width: 14px; height: 14px; background-color: var(--gold-deep); -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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .tiles--compact .tile .tile-icon { width: 36px; height: 36px; border-radius: 18px 18px 4px 4px; }
  .tiles--compact .tile .tile-icon svg { width: 18px; height: 18px; }
  .video-grid { display: flex; overflow-x: auto; gap: 14px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-bottom: 8px; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); max-width: none; scrollbar-width: none; }
  .video-grid::-webkit-scrollbar { display: none; }
  .video-grid > div { flex: 0 0 min(78vw, 300px); scroll-snap-align: start; }
  .hero-actions, .card-cta, .row.row--stack { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero-actions .btn, .card-cta .btn, .row.row--stack .btn { width: 100%; }
  .card-cta .link-arrow { justify-content: center; }
  .facts { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .facts dd { font-size: 22px; }
  .facts dd small { font-size: 12px; }
  .topbar .topbar-social { display: none; }
  .footer .topbar-social { display: flex; }
  .page-hero--photo .page-hero-media { margin: 0 calc(-1 * var(--gutter)); }
  .btn { white-space: normal; text-align: center; }
}

.mission { max-width: 760px; margin: 0 auto; display: grid; gap: 22px; }
.mission-quote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; color: #fff; text-align: center; text-wrap: balance; }
.mission-body { color: rgba(255, 255, 255, 0.84); max-width: 62ch; margin: 0 auto; }
.gallery figure.full { grid-column: 1 / -1; }
.gallery figure.full img { aspect-ratio: 3 / 1; object-position: 50% 60%; }
@media (max-width: 960px) { .gallery figure.full { grid-column: span 2; } .gallery figure.full img { aspect-ratio: 2 / 1; } }
@media (max-width: 640px) { .gallery figure.full { grid-column: auto; } .gallery figure.full img { aspect-ratio: 4 / 3; } }
@media (max-width: 640px) { .photo-strip figcaption { font-size: 13px; line-height: 1.25; padding: 36px 10px 10px; background: linear-gradient(to top, rgba(8, 28, 20, 0.92) 0%, rgba(8, 28, 20, 0.65) 55%, rgba(8, 28, 20, 0) 100%); } }
@media (max-width: 480px) { .hero-actions .link-arrow { justify-content: center; } .eyebrow .eyebrow-tail { display: none; } .btn { width: 100%; } .row, .card-cta, .hero-actions, .give .row { display: grid; grid-template-columns: 1fr; gap: 10px; } .row .link-arrow, .card-cta .link-arrow { justify-content: center; } .form-foot .btn { width: auto; } .form-foot { display: grid; } .form-foot .btn { width: 100%; } .clock-foot { display: grid; gap: 8px; } }
body.nav-open .header { background: var(--fog); }
.pos-top { object-position: 50% 25% !important; }

/* ---------- Building campaign banner + progress meter ---------- */
.campaign-section { padding: 0 0 var(--section); }
.campaign {
  position: relative; overflow: hidden;
  background-color: var(--evergreen); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 46px 52px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, auto); gap: 20px 56px; align-items: center;
}
.campaign::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep)); }
.campaign-copy { display: grid; gap: 14px; }
.campaign-copy h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; text-wrap: balance; }
.campaign-copy p { max-width: 62ch; font-size: 17px; }
.campaign-copy .hero-actions { margin-top: 8px; }
@media (max-width: 960px) {
  .campaign { grid-template-columns: 1fr; padding: 36px 32px; gap: 26px; }
  .campaign-copy p { max-width: none; }
}
@media (max-width: 640px) {
  .campaign { padding: 30px 22px; }
}

.pill { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 999px; background: var(--mist); color: var(--ink-soft); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; line-height: 1.4; }

/* ---------- Verse / hadith at the head of each service ---------- */
.prose blockquote.ayah { display: grid; gap: 10px; margin: 0 0 22px; padding: 6px 0 8px 22px; font-style: normal; }
.prose .ayah .ar { font-family: var(--font-arabic); font-size: 27px; line-height: 1.85; color: var(--gold-deep); text-align: right; direction: rtl; font-style: normal; font-weight: 700; }
.prose .ayah p:not(.ar) { font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.35; color: var(--ink-soft); }
.prose .ayah cite { margin-top: 0; }
@media (max-width: 640px) { .prose .ayah .ar { font-size: 24px; } .prose .ayah p:not(.ar) { font-size: 21px; } }

/* ---------- Jumu'ah notes ---------- */
.clock-jumuah .jn { display: inline-block; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); background: rgba(200, 162, 74, 0.14); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.callout--gold { background: rgba(200, 162, 74, 0.10); border-color: rgba(200, 162, 74, 0.35); border-left-color: var(--gold-deep); }

/* ---------- Clock: daylight + progress ---------- */
.clock-sun { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.clock-sun > div { display: grid; gap: 3px; }
.clock-sun .sl { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); font-weight: 600; }
.clock-sun b { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: #fff; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.clock-progress { position: relative; display: flex; justify-content: space-between; padding: 14px 0 0; margin-top: 2px; }
.clock-progress .cp-track { position: absolute; left: 6px; right: 6px; top: 19px; height: 2px; background: rgba(255, 255, 255, 0.18); }
.clock-progress .cp-track::after { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: var(--cp, 0%); background: var(--gold); }
.clock-progress .cp { position: relative; display: grid; justify-items: center; gap: 7px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.clock-progress .cp i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.45); background: var(--evergreen); box-sizing: border-box; }
.clock-progress .cp.is-done i { background: var(--gold); border-color: var(--gold); }
.clock-progress .cp.is-done { color: rgba(255, 255, 255, 0.85); }
.clock-progress .cp.is-next i { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.28); }
.clock-progress .cp.is-next { color: var(--gold); font-weight: 600; }
.clock-progress .cp em { font-style: normal; }
@media (max-width: 480px) { .clock-sun { gap: 8px; } .clock-sun b { font-size: 18px; } .clock-progress .cp { font-size: 9.5px; letter-spacing: 0.04em; } }

/* ---------- Round-4 refinements ---------- */
/* campaign: copy | meter, actions under the copy on desktop; copy -> meter -> actions on phone */
.campaign { grid-template-areas: "copy actions"; align-items: center; }
.campaign-copy { grid-area: copy; }
.campaign-actions { grid-area: actions; margin-top: 4px; }
@media (max-width: 960px) { .campaign { grid-template-areas: "copy" "actions"; } .campaign-actions { margin-top: 0; } }
/* utilities */
.nowrap { white-space: nowrap; }
.pill--gold { background: rgba(200, 162, 74, 0.22); color: var(--gold-deep); margin-left: 0; }
.topbar-note, .drawer-note { opacity: 0.8; font-style: italic; }
.drawer .drawer-note { display: block; font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.footer-note { color: var(--stone); font-size: 14px; }
.footer-note a { color: inherit; }
/* lightbox: deeper scrim, blur, breathing room */
.lightbox { background: rgba(10, 30, 20, 0.93); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 64px 24px; }
.lightbox img { max-height: 78vh; }
/* story facts: stack on narrow phones */
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; gap: 14px; } .facts dd { font-size: 26px; } }
/* equal-height give cards keep their action rows on one baseline */
.give { justify-content: flex-start; }
.give > .row { margin-top: auto; padding-top: 14px; }
/* announcement cards: link-only action rows share the button baseline */
.card .card-cta { min-height: 46px; }
/* embed placeholders while third-party frames load */
.embed-body[data-placeholder]::before { content: attr(data-placeholder); position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 14px; color: var(--stone); background: var(--fog) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23c8a24a' stroke-opacity='0.12' stroke-width='1'%3E%3Cpolygon points='48,8 88,48 48,88 8,48'/%3E%3Crect x='19.7' y='19.7' width='56.6' height='56.6'/%3E%3C/g%3E%3C/svg%3E") center / 96px 96px; }
.embed-body[data-placeholder] iframe { position: relative; z-index: 1; background: transparent; }
/* arch outline: a complete second arch, evenly offset */
.arch-outline { left: -10px; right: auto; top: -10px; bottom: auto; width: calc(100% + 20px); height: calc(100% + 10px); max-width: none; }
@media (max-width: 640px) { .arch-outline { left: -7px; top: -7px; width: calc(100% + 14px); height: calc(100% + 7px); } }
/* about: mission body centered under the quote; hero rhythm like the other pages */
.mission-body { text-align: center; }
.page-hero--photo .page-hero-copy { gap: 18px; }
/* services on phone: icon tile aligned to the top of the title group */
@media (max-width: 960px) { .service-aside { align-items: start; } .service-aside .service-icon { margin-top: 2px; } }

/* ---------- Round-5 refinements ---------- */
.clock-table tr.is-now td { background: rgba(200, 162, 74, 0.2); }
.clock-table tr.is-now td.name::before { content: "● " / ""; }
.clock-table td.name small.tmw { display: inline-block; margin-left: 8px; font-family: var(--font-text); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); font-weight: 600; vertical-align: middle; }
.tile .link-arrow { margin-top: auto; }
.swipe-cue { display: none; font-size: 13px; color: var(--stone); }
@media (min-width: 641px) and (max-width: 900px) { .swipe-cue { display: inline; } }
@media (max-width: 640px) { .embed--timetable .embed-head .link-arrow { display: none; } .embed--timetable .embed-fallback .only-frame { display: none; } }
/* about hero photo: the same inset hairline frame as the home hero */
.page-hero-media::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(255, 255, 255, 0.5); pointer-events: none; }
@media (max-width: 960px) { .page-hero-media::after { inset: 12px; } }

/* ---------- Round-6 refinements ---------- */
.clock-table td:nth-child(2), .clock-table td.iq { white-space: nowrap; }
.clock-table td.name small.tmw { display: block; margin: 2px 0 0; }
.clock-now { justify-content: flex-start; }
.clock-note { margin-top: 0; }
@media (max-width: 480px) { .card .card-cta .link-arrow, .hero-actions .link-arrow { justify-content: center; } }
@media (max-width: 960px) { .next-strip .ns-a, .next-strip .ns-b { white-space: normal; } }

/* ---------- Round-7 polish ---------- */
@media (max-width: 480px) { .card .card-cta { display: grid; grid-template-columns: 1fr; } }
@media (max-width: 340px) { .clock-now, .clock-jumuah, .clock-foot, .clock-head, .clock-table { padding-left: 14px; padding-right: 14px; } .clock-sun b { font-size: 17px; } .clock-jumuah { font-size: 14px; } }
@media (min-width: 961px) { .clock-table td.name small.tmw { display: inline-block; margin: 0 0 0 8px; } }

/* ---------- Post-audit additions (September 2026) ---------- */
/* M5: the 24-hour janazah route, on every page */
.footer-urgent { margin-top: 44px; padding: 14px 18px; border: 1px solid rgba(255, 255, 255, 0.22); border-left: 3px solid var(--gold); border-radius: var(--radius); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14.5px; color: rgba(255, 255, 255, 0.86); }
.footer-urgent b { color: #fff; font-weight: 600; }
.footer-urgent a { color: var(--gold); }
.footer-urgent .link-arrow { color: var(--gold); font-size: 14px; }
.footer-urgent .link-arrow:hover { color: #fff; }
/* M3: the clock note now carries a link, on the dark panel */
.clock-note a { color: var(--gold); }
.clock-note a:hover { color: #fff; }
/* M11: the nisab figures on the donate page */
.nisab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 2px; }
.nisab div { border-top: 1px solid var(--gold-soft); padding-top: 10px; }
.nisab dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }
.nisab dd { margin: 4px 0 0; font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--evergreen); }
.nisab dd small { display: block; font-family: var(--font-text); font-size: 13px; font-weight: 400; color: var(--stone); margin-top: 5px; line-height: 1.45; }

/* ---------- Contrast, focus and small-screen fixes (post-audit, September 2026) ---------- */
/* .on-dark a and .nav a were both beating .btn-gold on specificity, so the primary gold button
   rendered white-on-gold (2.41:1) in every closing band and grey-on-gold in the header. */
.on-dark .btn-gold, .nav .btn-gold, .footer .btn-gold { color: var(--pine); }
.on-dark .btn-gold:hover, .nav .btn-gold:hover, .footer .btn-gold:hover { color: var(--pine); }
/* Gold text on the dark bands needed lifting to clear AA at 12px/600. */
.on-dark .eyebrow, .page-hero .eyebrow, .hero-copy .eyebrow, .card--dark .eyebrow,
.give--featured .eyebrow, .clock-now .label, .clock-note a,
.on-dark .link-arrow, .page-hero .link-arrow, .hero .link-arrow, .give--featured .link-arrow, .card--dark .link-arrow,
.clock-next .next-name span, .clock-progress .cp.is-next, .footer-urgent a, .footer-urgent .link-arrow { color: var(--gold-on-dark); }
.clock-progress .cp.is-next i { border-color: var(--gold-on-dark); }
/* Focus ring: the old gold ring was invisible on the gold buttons and 2.19:1 on the header. Two
   concentric rings means one of them always has contrast, whatever it lands on. */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.92); }
.on-dark :focus-visible, .footer :focus-visible, .drawer :focus-visible, .clock-now :focus-visible,
.page-hero :focus-visible, .hero :focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px rgba(20, 51, 39, 0.92); }
/* An eyebrow tail is content (the Ramadan dates, the obligatory/voluntary split), so it wraps
   rather than disappearing below 480px. */
@media (max-width: 480px) { .eyebrow .eyebrow-tail { display: inline; } .eyebrow { flex-wrap: wrap; row-gap: 2px; } }
/* Definition lists kept a two-column grid down to 320px, squeezing descriptions into ~110px. */
@media (max-width: 560px) {
  .prose dl { grid-template-columns: 1fr; gap: 0; }
  .prose dt { margin-top: 14px; }
  .prose dt:first-child { margin-top: 0; }
  .prose dd { margin: 3px 0 0; }
  .nisab { grid-template-columns: 1fr; }
}
/* A short ayah left its Arabic marooned ~600px from its own translation. */
.prose .ayah { max-width: 52ch; }
/* the rail after the last prayer of the night: complete, with tomorrow's Fajr marked as next */
.clock-progress.is-complete .cp.is-done.is-next i { background: var(--evergreen); border-color: var(--gold-on-dark); }
.clock-progress.is-complete .cp.is-next { color: var(--gold-on-dark); }

/* Embed fallbacks: real escape hatch, not a footnote */
.embed-fallback { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.embed-fallback .btn { flex: none; }
.embed-fallback span { flex: 1 1 240px; min-width: 0; }
@media (max-width: 560px) { .embed-fallback .btn { width: 100%; justify-content: center; } }

/* Target size (WCAG 2.5.8): list and utility links were 18px tall */
.footer ul li a, .footer address a { display: inline-flex; align-items: center; min-height: 28px; }
.topbar-contact a { display: inline-flex; align-items: center; min-height: 28px; }
@media (max-width: 900px) {
  .footer ul { gap: 4px; }
  .footer ul li a, .footer address a { min-height: 40px; }
  .drawer .drawer-contact a { display: inline-flex; align-items: center; min-height: 40px; }
  .card-cta .link-arrow, .row .link-arrow, .hero-actions .link-arrow,
  .footer-urgent .link-arrow, .tile .link-arrow, .embed-head .link-arrow { min-height: 40px; }
}

/* Webmail escape hatch for the mailto: forms (shown only after a submit) */
.form-fallback { display: none; margin-top: 20px; padding: 20px; border: 1px solid var(--gold-soft); border-left: 3px solid var(--gold-deep); border-radius: var(--radius-sm, 8px); background: var(--fog); }
.form-fallback.is-open { display: block; }
.form-fallback p { margin: 0 0 12px; font-size: 14.5px; color: var(--ink-soft); }
.form-fallback .row { margin-bottom: 12px; }
.form-fallback textarea { width: 100%; font: 13px/1.55 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--ink-soft); background: var(--paper); border: 1px solid var(--mist); border-radius: 6px; padding: 12px 14px; resize: vertical; }

/* ---------- Post-review round 2 ---------- */

/* A grid item's default min-width:auto lets an un-wrappable button label inflate the whole
   hero column, which clipped the janazah emergency numbers at 320px. */
.page-hero .container, .hero .container, .page-hero-copy { min-width: 0; }
.hero-actions, .row, .card-cta { min-width: 0; }
.hero-actions .btn, .row .btn { max-width: 100%; }

/* Scroll lock behind the drawer (see setOpen in site.js) */
body.is-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* Contrast: the current-page Donate CTA inherited the lighter ink (4.0:1); the gold pill
   was 4.28:1. Both now clear AA. */
.btn-gold[aria-current="page"], .nav .btn-gold[aria-current="page"] { color: var(--pine); }
.pill--gold { color: #5f4915; }

/* The tail used to be its own flex item, so when it wrapped it started a new line with a
   hanging middle dot. Label and tail now share one item and wrap as ordinary inline text,
   with a non-breaking space keeping the separator attached to the word before it. */
.eyebrow .eyebrow-label { flex: 1 1 auto; min-width: 0; }
/* Once there is a tail to wrap, flex is the wrong model: a flex item cannot split across
   lines, so the icon ends up alone on the first row. Below the wrap point the eyebrow
   becomes ordinary inline text with the icon set inline, and everything reflows together. */
@media (max-width: 620px) {
  .eyebrow:has(.eyebrow-tail) { display: block; }
  .eyebrow:has(.eyebrow-tail) svg { display: inline-block; vertical-align: -1px; margin-right: 8px; }
  .eyebrow:has(.eyebrow-tail) .eyebrow-label { display: inline; }
}
.eyebrow .eyebrow-tail { white-space: normal; }


/* Definition lists: once stacked, the term must not read lighter than its value. */
@media (max-width: 560px) {
  .prose dt { font-family: var(--font-text); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone); margin-top: 18px; }
  .prose dd { margin-left: 0; }
}

/* Two photos side by side at 170px each are unreadable; stack them. */
@media (max-width: 600px) { .photo-strip--2 { grid-template-columns: 1fr; } }

/* Amiri's naskh proportions sit small next to Libre Franklin. */
.ar-inline { font-size: 1.14em; }

/* A provider that reserves 1,760px for a month grid should not own a screen and a half of
   phone. Bound the frame and let it scroll inside itself; the direct-open button is right below.
   (Deliberately not collapsed by script: no reliable cross-origin signal distinguishes a slow
   payment form from a dead one, and hiding a working donation form is far worse than a gap.) */
@media (max-width: 900px) {
  
  .embed-body iframe { max-height: none; }
}

/* white-space: nowrap keeps buttons tidy, but on a 320px phone a long emergency label has
   nowhere to go and pushes past the edge. Below 400px let full-width buttons wrap. */
@media (max-width: 420px) {
  .btn { white-space: normal; padding-block: 12px; line-height: 1.25; }
  .hero-actions, .row, .card-cta, .give .row { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn, .row .btn, .card-cta .btn { width: 100%; }
}

/* The campaign banner's second column held the hard-coded progress meter, which was removed
   because it contradicted the live Donorbox total. The calls to action move into it rather
   than leaving 45% of the band empty. */
.campaign-actions { justify-self: end; align-content: center; grid-auto-flow: row; gap: 12px; }
.campaign-actions .btn { width: 100%; justify-content: center; }
@media (max-width: 900px) { .campaign-actions { justify-self: stretch; } }

/* The submit handler sets aria-invalid on every field that failed; the visible marker has to
   follow it, or three problems get one border. */
.form [aria-invalid="true"] { border-color: var(--error); border-width: 2px; box-shadow: none; }
.form [aria-invalid="true"]:focus { border-color: var(--error); outline-color: var(--error); }
.field-error { display: none; font-size: 13.5px; font-weight: 600; color: var(--error); }
.field-error.is-shown { display: block; }
.form-help { font-size: 14px; color: var(--stone); }

/* An embed reserves the height its provider asks for. When the provider cannot be reached
   that becomes two viewports of empty band, so cap it at every width and let the frame
   scroll inside its own shell; the direct-open button sits right underneath. */
.embed-body iframe { max-height: none; }

/* The footer's two link columns stacked on phone made it nearly two screens tall. */
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer-brand, .footer-grid > div:nth-child(2) { grid-column: 1 / -1; }
}

/* ---------- Post-review round 4 ---------- */

/* The hero caption sat underneath the overlapping clock card at desktop: 293x37px of styled
   content no desktop visitor could ever see. */
.hero-caption { z-index: 1; }
/* …and then it sat on top of the clock card's date line, which overlaps the hero's bottom 72px.
   The caption now sits inside the photo frame, above the overlap. */
.hero-media .hero-caption { bottom: 108px; }
@media (max-width: 960px) { .hero-media .hero-caption { bottom: 84px; } }

/* Measure. The homepage runs at ~70 characters; pages added later inherited container width and
   ran to 127-157, which is past the point where the eye loses the line. */
.callout p, .give > p, .page-hero .small, .prose > dl + p { max-width: 68ch; }
.embed-fallback span { max-width: 62ch; }

/* Remote poster frames are the only images on the site without intrinsic size, so they were the
   only source of layout shift. */
.video img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }


/* ==========================================================================
   Revamp: nothing here is a schedule, and nothing here is typed in by hand.
   ========================================================================== */

/* The dates that move: Ramadan and the two Eids, computed from the Umm al-Qura calendar. */
.hijri-events ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.hijri-event { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--radius); padding: 24px 26px 22px; display: grid; gap: 6px; box-shadow: inset 0 3px 0 var(--gold-soft); }
.hijri-event.is-underway, .hijri-event.is-today { box-shadow: inset 0 3px 0 var(--gold); }
.hijri-event .he-name { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); }
.hijri-event .he-when { font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.1; color: var(--evergreen); font-variant-numeric: lining-nums; }
.hijri-event .he-meta { font-size: 14px; color: var(--stone); }
.hijri-events .he-note { margin: 14px 0 0; max-width: 68ch; }
@media (max-width: 860px) { .hijri-events ol { grid-template-columns: 1fr; gap: 12px; } .hijri-event .he-when { font-size: 26px; } }

/* The latest talks: one labelled player holding the channel's uploads. */
.video--wide { aspect-ratio: 16 / 9; }
.video--wide picture, .video--wide picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video--wide picture img { opacity: 0.55; transition: transform 0.6s var(--ease), opacity 0.3s; }
.video--wide:hover picture img { transform: scale(1.02); opacity: 0.65; }
.video--wide .video-label { position: absolute; left: 50%; top: calc(50% + 52px); transform: translateX(-50%); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.video--wide.is-playing .video-label, .video--wide.is-playing picture { display: none; }
.embed--video .embed-body { background: var(--pine); }
@media (max-width: 480px) { .video--wide .video-label { top: calc(50% + 46px); font-size: 12.5px; } .video .play { width: 56px; height: 56px; margin: -28px 0 0 -28px; } }

/* Seasonal navigation: the Ramadan link lives in the markup all year and is revealed in season. */
.nav a.nav-season { color: var(--gold-deep); }
.nav a.nav-season::after { transform: scaleX(1); }
.nav a.nav-season[hidden], .drawer a.nav-season[hidden] { display: none; }
@media (min-width: 961px) and (max-width: 1180px) { body.ramadan-season .nav a { padding: 10px 8px; letter-spacing: 0.05em; } }

/* Scripts off: say so, next to the times. */
.clock-noscript { flex-basis: 100%; font-size: 13px; color: var(--gold-deep); }

/* Amiri reads optically small; the brand lockup and the inline prayer-row Arabic sat below their Latin. */
.brand-ar { font-size: 16px; }
.clock-table td.name .ar-inline { font-size: 16px; }


/* ---------- Round 2 ---------- */

/* Measure: 70ch of a proportional face is ~99 characters. 34em is ~75. */
.prose { max-width: 34em; }
.lede { max-width: 32em; }
.footer-urgent > span { max-width: 60ch; }

/* Every number in the display face sits on the baseline the Latin does. */
h1, h2, h3, .facts dd, .nisab dd, .hero-facts dd, .hijri-event .he-when, .clock-time, .clock-sun b, .give h2, .give h3 { font-variant-numeric: lining-nums tabular-nums; }

/* The provenance note leaves the green panel: under the panel on desktop, under the table on
   phone, so the phone reaches the table 130px sooner. */
.clock-body { grid-template-areas: "now table" "note table"; grid-template-rows: 1fr auto; }
.clock-now { grid-area: now; }
.clock-table { grid-area: table; }
.clock-note { grid-area: note; margin: 0; padding: 12px 28px 16px; font-size: 13px; color: var(--stone); background: var(--fog); border-right: 1px solid var(--mist); border-top: 1px solid var(--mist); }
@media (max-width: 960px) {
  .clock-body { grid-template-areas: "now" "table" "note"; grid-template-rows: auto; }
  .clock-note { border-right: 0; padding: 12px 20px 14px; }
  .clock-now { gap: 14px; padding-bottom: 20px; }
}
@media (max-width: 340px) { .clock-note { padding-left: 14px; padding-right: 14px; } }

/* The seasonal link reads as a season, not as the current page. */
.nav a.nav-season::after { transform: scaleX(0); }
.nav a.nav-season:hover::after, .nav a.nav-season[aria-current="page"]::after { transform: scaleX(1); }
.nav a.nav-season::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 7px; vertical-align: 2px; }

/* Targets: the two links under the clock and the emergency numbers get a 24px hit area
   without moving the text. */
.clock-foot a, .footer-urgent a:not(.link-arrow) { display: inline; padding: 6px 0; }
.clock-foot a:hover { color: var(--pine); text-decoration-thickness: 2px; }
.clock-progress .cp { font-size: 11.5px; }
.pill, .pill--gold { font-size: 11.5px; }

/* The Masjidal month view is 900px wide by design; on a phone it becomes a two-axis scroll box,
   so below 640px the site sends people to it instead of framing it. */
@media (max-width: 640px) { .embed--timetable .embed-body { display: none; } .embed--timetable .embed-fallback { border-top: 0; } }
.embed--timetable .embed-body { max-height: 560px; overflow: auto; -webkit-overflow-scrolling: touch; }

/* Phone hero: the caption hid the dome; the h1 already says what it said. */
@media (max-width: 960px) { .hero-media .hero-caption { display: none; } }

/* The brand's Arabic line at 320px. */
@media (max-width: 360px) { .brand-ar { font-size: 12.5px; letter-spacing: 0; } }

/* Withheld Jumu'ah: no "more room" pill beside a dash. */
.clock-jumuah.is-withheld .jn { display: none; }

/* Screen-reader-only text. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* The lightbox is modal: the page behind it is inert (set by script) and the dialog owns focus. */
.lightbox[aria-hidden="false"] { display: flex; }



/* ---------- Round 3 ---------- */
.arch-frame--wide { width: 100%; max-width: none; }
.clock-jumuah .jn { font-size: 12px; }
/* 24px hit areas for the small standalone links without moving the text */
.embed-head .link-arrow { padding: 4px 0; margin: -4px 0; }
.contact-item p a { display: inline; padding: 6px 0; }
.footer address a { padding: 3px 0; }
/* compact tiles: the arrow sits on the title's line, whatever the title's length */
@media (max-width: 640px) {
  .tiles--compact .tile h3 { position: relative; }
  .tiles--compact .tile h3::after { top: 50%; bottom: auto; right: 0; transform: translateY(-50%); }
}
/* phone clock: the sunrise row is the one block the table can wait for */
@media (max-width: 640px) { .clock-sun { display: none; } .clock-now { gap: 12px; } }
/* a Masjidal schedule that came from this device's memory or the page itself, not a live reply */
.badge--cache { background: var(--mist); color: var(--ink-soft); }
/* Jumu'ah on a Friday: the second khutbah rides in the same cell */
.clock-table td.iq small { display: block; font-weight: 400; font-size: 12.5px; color: var(--stone); }
/* withheld iqamah: the column says so in its own header */
.clock-table th.is-withheld { color: var(--gold-deep); }


/* ---------- After round 3 ---------- */
/* "(tomorrow)" inside the green panel took the light-surface muted colour: 1.68:1. */
.clock-now .muted, .clock-next small { color: rgba(255, 255, 255, 0.72); }
/* The panel's content sits against the table's height instead of leaving a band at the foot. */
.clock-now { justify-content: space-between; }
/* Jumu'ah row at 320px: let the labels wrap rather than clip the times. */
@media (max-width: 360px) { .clock-jumuah { gap: 6px 14px; } .clock-jumuah .jt { white-space: normal; } .clock-jumuah .jn { display: none; } }
/* Season nav at iPad-landscape widths. */
@media (min-width: 961px) and (max-width: 1100px) { body.ramadan-season .nav a { font-size: 12px; padding: 10px 7px; letter-spacing: 0.04em; white-space: nowrap; } body.ramadan-season .brand-ar { white-space: nowrap; } }
/* Tablet clock: two columns inside the panel instead of a 76px time beside 400px of pattern. */
@media (min-width: 641px) and (max-width: 960px) { .clock-now { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; align-items: start; } .clock-now .label, .clock-progress { grid-column: 1 / -1; } }
.tmw { font-size: 12px; }

/* ---------- 27 Sep 2026: the heating and cooling campaign on the home page ---------- */
/* The home band names the campaign the way the Donate page and Donorbox do, says why it matters in
   three lines and gives one gold button to the campaign's giving form on the Donate page (the form
   itself stays there). Copy on the left, facts and button on the right; stacked below 961px. */
.campaign.campaign--compact { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "copy side"; align-items: center; gap: 28px 64px; padding: 44px 52px; }
.campaign--compact .campaign-copy { gap: 14px; }
.campaign--compact .campaign-copy > p { max-width: 46ch; }
.campaign-side { grid-area: side; display: grid; gap: 18px; }
.campaign-facts { display: grid; margin: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.campaign-facts div { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 2px 18px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.campaign-facts dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-on-dark); padding-top: 4px; }
.campaign-facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); }
.campaign-cta { margin-top: 0; align-items: center; }
@media (max-width: 960px) {
  .campaign.campaign--compact { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "side"; padding: 36px 32px; gap: 22px; }
  .campaign--compact .campaign-copy > p { max-width: none; }
}
@media (max-width: 640px) {
  .campaign.campaign--compact { padding: 30px 22px; }
  .campaign-facts div { grid-template-columns: minmax(0, 1fr); padding: 9px 0; }
}

/* ---------- 27 Sep 2026: focus, links and mid-width header ---------- */
/* A focused control keeps its own shape (the focus rules above no longer square it off), so the
   round icon buttons keep round rings. */
/* Inline links in running text take the outline only; the 6px halo painted over the words beside them. */
:is(p, li, dd, address, figcaption, .footer-urgent > span) a:not(.btn):focus-visible { box-shadow: none; outline-width: 2px; outline-offset: 1px; }
/* Text fields: an evergreen ring (about 9:1 on white), never fainter than the field's resting border. */
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--evergreen); outline-offset: 1px; border-color: var(--evergreen); }
/* The emergency numbers in the footer are links; underline them so they do not rely on colour alone. */
.footer-urgent a[href^="tel:"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* The current page is marked in deep gold (about 5.3:1 on the header), hover in the lighter gold. */
.nav a[aria-current="page"]::after { background: var(--gold-deep); }
/* The clock card's eyebrow is an h2; set it in the text face like every other eyebrow. */
h2.eyebrow { font-family: var(--font-text); font-size: 12px; line-height: 1.4; }
/* 961 to 1100px: the full menu on one line, the brand's Arabic on one line. */
@media (min-width: 961px) and (max-width: 1100px) {
  .nav a { font-size: 12px; padding: 10px 7px; letter-spacing: 0.04em; white-space: nowrap; }
  .nav a::after { left: 7px; right: 7px; }
  .brand-ar { white-space: nowrap; }
  .header .container { gap: 16px; }
}
/* 961 to 1100px: the strip's text wraps beside its dot instead of dropping below it. */
@media (min-width: 961px) and (max-width: 1100px) {
  .next-strip { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; }
  .next-strip .ns-a, .next-strip .ns-b { white-space: normal; }
  .next-strip .ns-b { grid-column: 2; }
}
/* Scrollable timetable: visible focus when reached by keyboard. */
.embed--timetable .embed-body:focus-visible { outline-offset: -3px; }
/* Inline links in the dark page heroes (the About page's source link): white and underlined. */
.page-hero p a:not(.btn), .hero p a:not(.btn) { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.6); }
.page-hero p a:not(.btn):hover, .hero p a:not(.btn):hover { color: var(--gold-on-dark); text-decoration-color: currentColor; }
/* Phones and tablets: a Donate button stays in the bar beside the menu button. */
.header-donate { display: none; }
@media (max-width: 960px) {
  .header .header-donate { display: inline-flex; width: auto; min-height: 40px; padding: 0 16px; margin-left: auto; font-size: 14px; white-space: nowrap; }
  .header .container { gap: 12px; }
}
@media (max-width: 359px) { .header .header-donate { display: none; } }
/* Phones: the next-prayer line sits right under the headline, above the fold. */
@media (max-width: 640px) {
  .hero-copy .eyebrow { order: 1; }
  .hero-copy h1 { order: 2; }
  .hero-copy .next-strip { order: 3; margin-top: 0; }
  .hero-copy .lede { order: 4; }
  .hero-copy .hero-actions { order: 5; }
}
/* Room for the Donate button on a phone: a slightly smaller logo, and the brand's Arabic line scales
   with the screen and never wraps. */
@media (max-width: 480px) {
  .header .container { gap: 10px; }
  .header .brand { gap: 10px; }
  .header .brand img { width: 40px; height: 40px; }
  .header .brand-name { font-size: 21px; }
  .header .brand-ar { font-size: clamp(10.5px, 3.2vw, 13px); white-space: nowrap; }
  .header .header-donate { padding: 0 12px; min-height: 38px; font-size: 13.5px; }
}
/* The drawer has its own Donate button; the bar's one steps aside while it is open. */
body.nav-open .header .header-donate { visibility: hidden; }
/* "Play the latest talks" sits on a photo: give it its own dark ground so it reads on any frame. */
.video--wide .video-label { background: rgba(8, 28, 20, 0.62); padding: 5px 10px; border-radius: 3px; text-shadow: none; }