/* ABLAQ
   A masjid with history, built in stone and geometry rather than gradients.

   Ablaq is the alternating light and dark stone masonry of Mamluk and
   Levantine architecture, so the layout system is literal stone courses:
   full-bleed bands separated by a course divider. Cream limestone against
   red stone. Deliberately not gold, not green, not brown filigree, because
   that combination is the category reflex.

   HARD BAN: rust never sits on ink. Measured 2.72, fails AA. On the ink
   band, text is cream and the accent is carried by geometry stroke only.

   SECOND BAN: the khatam and the Arabic display face never share a viewport.
   Rust at full saturation, plus Amiri at display size, plus geometry, plus a
   "since 1987" eyebrow is exactly the combination that tips into pastiche. */

:root {
  --cream: #F3EEE5;
  --raised: #FAF7F1;
  --ink: #1E1B19;    /* 14.82 on cream, AAA, both directions */
  --body: #4A423D;   /* 8.50, AAA */
  --muted: #6A6058;  /* 5.30, AA */
  --rust: #A63D2F;   /* 5.46 on cream, both directions */
  --deep: #8E3327;   /* 6.85 on cream */
  --hair: #DED5C7;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--body);
  font-family: 'Readex Pro', ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { font-family: Faustina, Georgia, serif; font-weight: 600; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.06; letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; }
h3 { font-family: 'Readex Pro', sans-serif; font-size: 22px; font-weight: 600; color: var(--ink); margin: 0; }
p { margin: 0; }
a { color: var(--deep); }

:focus-visible { outline: 2px solid var(--deep); outline-offset: 3px; }
.band--ink :focus-visible, .band--rust :focus-visible { outline-color: var(--cream); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--ink); color: var(--cream); padding: 10px 16px; z-index: 200; }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep); }
.band--ink .label, .band--rust .label { color: rgba(243, 238, 229, 0.72); }
.num { font-variant-numeric: tabular-nums; }

.preview-flag {
  position: fixed; bottom: 12px; left: 12px; z-index: 150;
  background: var(--ink); color: var(--cream);
  font-size: 11.5px; letter-spacing: 0.04em; padding: 6px 12px;
}

/* ---------- Nav. Static, not floating. This masjid is not in a hurry. ---- */

.nav { background: var(--cream); border-bottom: 1px solid var(--hair); }
.nav-in { height: 72px; display: flex; align-items: center; gap: 32px; }
.wordmark { text-decoration: none; display: flex; flex-direction: column; line-height: 1.15; }
.wm-en { font-family: Faustina, Georgia, serif; font-weight: 600; font-size: 20px; color: var(--ink); }
.wm-ar { font-family: Amiri, serif; font-size: 16px; color: var(--muted); }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { color: var(--body); text-decoration: none; font-size: 15px; font-weight: 400; }
.nav nav a:hover { color: var(--deep); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 500; text-decoration: none; transition: background 140ms, color 140ms, border-color 140ms; }
.btn--rust { background: var(--rust); color: var(--cream); }
.btn--rust:hover { background: var(--deep); }
.btn--out { border: 1px solid var(--ink); color: var(--ink); }
.btn--out:hover { background: var(--ink); color: var(--cream); }
.btn--cream { background: var(--cream); color: var(--ink); }

/* ---------- Bands are the rhythm ---------- */

.band { padding: clamp(80px, 10vw, 144px) 0; position: relative; overflow: hidden; }
.band--cream { background: var(--cream); }
.band--raised { background: var(--raised); }
.band--ink { background: var(--ink); color: rgba(243, 238, 229, 0.86); }
.band--ink h2, .band--ink h3 { color: var(--cream); }
.band--rust { background: var(--rust); color: rgba(243, 238, 229, 0.9); }
.band--rust h2 { color: var(--cream); }

/* Course divider: a horizontal slice through the interlace, repeating on X.
   This is the stone course line between bands. */
.course {
  height: 24px;
  background:
    repeating-linear-gradient(45deg, transparent 0 10px, rgba(166, 61, 47, 0.30) 10px 11px, transparent 11px 21px),
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(166, 61, 47, 0.30) 10px 11px, transparent 11px 21px);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}

/* Khatam placements. Four, and no more. */
.kh { position: absolute; pointer-events: none; }
.kh--hero { right: -18%; top: -10%; width: 1100px; height: 1100px; color: var(--rust); opacity: 0.14; }
.kh--band { left: -6%; bottom: -22%; width: 620px; height: 620px; color: var(--cream); opacity: 0.22; }
.kh--plinth { width: 92px; height: 92px; color: var(--rust); opacity: 0.10; left: -14px; top: -22px; }

/* ---------- Hero ---------- */

.hero-in { max-width: 900px; position: relative; z-index: 1; }
.hero h1 { margin: 14px 0 22px; }
.hero p.lede { font-size: 19px; max-width: 62ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 48px; }
.facts div { padding: 0 28px; border-left: 1px solid var(--hair); }
.facts div:first-child { padding-left: 0; border-left: 0; }
.facts dt { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 4px 0 0; font-family: Faustina, Georgia, serif; font-size: 26px; font-weight: 600; color: var(--ink); }

/* ---------- Prayer band. The strongest band on the page, because it holds
     the most-wanted information. ---------- */

.ptimes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; position: relative; z-index: 1; }
.pt { padding: 22px 18px; text-align: center; border: 1px solid transparent; }
.pt.is-now { background: rgba(243, 238, 229, 0.08); border-color: rgba(243, 238, 229, 0.9); }
.pt-name { font-family: Faustina, Georgia, serif; font-size: 22px; font-weight: 600; color: var(--cream); }
.pt-ar { font-family: Amiri, serif; font-size: 16px; color: rgba(243, 238, 229, 0.7); display: block; margin-top: 2px; }
.pt-adhan { font-size: 15px; color: rgba(243, 238, 229, 0.72); margin-top: 12px; }
.pt-iqama { font-size: 28px; font-weight: 500; color: var(--cream); font-variant-numeric: tabular-nums; }
.pt-lab { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 238, 229, 0.55); }
.pband-foot { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(243, 238, 229, 0.2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }
.pband-foot a { color: var(--cream); }

/* ---------- Welcome ---------- */

.welcome { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.portrait { aspect-ratio: 4 / 5; border-radius: 4px; background: linear-gradient(155deg, #cdbfae, #8d7f70); display: flex; align-items: flex-end; padding: 18px; color: rgba(243,238,229,0.8); font-size: 13px; letter-spacing: 0.05em; text-transform: uppercase; }
.welcome p + p { margin-top: 16px; }
.sig { margin-top: 24px; font-family: Faustina, Georgia, serif; font-size: 20px; color: var(--ink); }
.sig small { display: block; font-family: 'Readex Pro', sans-serif; font-size: 14px; color: var(--muted); letter-spacing: 0.02em; }

/* ---------- Programs ---------- */

.progs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.prog { position: relative; padding-top: 8px; }
.prog-n { position: relative; font-family: Faustina, Georgia, serif; font-size: 56px; font-weight: 600; color: var(--rust); opacity: 0.22; line-height: 1; }
.prog h3 { margin: 6px 0 8px; }
.prog p { font-size: 15.5px; }
.prog a { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 500; }

/* ---------- Give ---------- */

.give-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.give-grid p { margin-top: 14px; max-width: 46ch; }
/* The progress bar IS the interlace. Geometry doing a job. */
.ilace { height: 22px; margin-top: 30px; border: 1px solid rgba(243, 238, 229, 0.35); position: relative; overflow: hidden; }
.ilace i { display: block; height: 100%; width: 0; transition: width 600ms var(--ease);
  background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(243,238,229,0.95) 8px 9.5px, transparent 9.5px 17px),
              repeating-linear-gradient(-45deg, transparent 0 8px, rgba(243,238,229,0.95) 8px 9.5px, transparent 9.5px 17px);
  background-color: rgba(243, 238, 229, 0.16); }
.give-fig { margin-top: 12px; font-size: 15px; }
.give-fig b { font-family: Faustina, Georgia, serif; font-size: 26px; color: var(--cream); }
.donate { background: var(--raised); padding: 26px; border-radius: 8px; color: var(--body);
  box-shadow: 0 2px 0 rgba(30, 27, 25, 0.18); }
.donate h3 { margin-bottom: 6px; }
.amts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.amts button { flex: 1 1 0; min-width: 72px; min-height: 46px; border-radius: 999px; border: 1px solid var(--hair); background: var(--cream); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer; }
.amts button:hover, .amts button.on { border-color: var(--rust); color: var(--deep); }
.donate .btn { width: 100%; }
.donate-note { font-size: 13px; color: var(--muted); margin-top: 12px; text-align: center; }

/* ---------- Events ---------- */

.evlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.evrow { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--hair); }
.evrow span:first-child { color: var(--muted); font-size: 14.5px; white-space: nowrap; }
.evrow span:last-child { color: var(--ink); font-size: 17px; text-align: right; }

/* ---------- Visit + footer, merged into the closing ink band ---------- */

.visit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; position: relative; z-index: 1; }
.visit-grid h4 { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243,238,229,0.6); font-weight: 500; margin: 0 0 12px; }
.visit-grid p, .visit-grid a { font-size: 16px; color: rgba(243, 238, 229, 0.86); text-decoration: none; display: block; }
.visit-grid a:hover { color: var(--cream); }
.closing-ar { font-family: Amiri, serif; font-size: 28px; color: var(--cream); margin-top: 48px; position: relative; z-index: 1; }
.foot-base { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(243, 238, 229, 0.2); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: rgba(243, 238, 229, 0.65); position: relative; z-index: 1; }
/* Credit is cream, never rust: rust on ink is 2.72 and fails. */
.credit a { color: rgba(243, 238, 229, 0.85); text-decoration: underline; text-underline-offset: 3px; }
.credit a:hover { color: var(--cream); }

/* ---------- Prayer times page ---------- */
.month { width: 100%; border-collapse: collapse; margin-top: 8px; }
.month th { text-align: right; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 0 10px 12px; }
.month th:first-child { text-align: left; }
.month td { padding: 14px 10px; text-align: right; border-top: 1px solid var(--hair); font-size: 17px; font-variant-numeric: tabular-nums; }
.month td:first-child { text-align: left; color: var(--ink); }
.month tr.is-now td { background: rgba(166, 61, 47, 0.08); font-weight: 500; }

@media (max-width: 980px) {
  .welcome, .give-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .progs { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .visit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evlist { grid-template-columns: minmax(0, 1fr); }
  .kh--hero { width: 700px; height: 700px; right: -30%; }
}
@media (max-width: 860px) {
  .nav nav { display: none; }
  .wm-ar { display: none; }
  /* Five columns of prayer times at two-up is three rows of pairs, which
     kills the one-glance claim. Go to a single stacked list instead. */
  .ptimes { grid-template-columns: minmax(0, 1fr); }
  .pt { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 16px; text-align: left; padding: 14px 12px; border-bottom: 1px solid rgba(243,238,229,0.16); border-left: 0; border-right: 0; border-top: 0; }
  .pt.is-now { border-color: rgba(243,238,229,0.9); border-width: 1px; border-style: solid; }
  .pt-adhan { margin-top: 0; }
  .pt-iqama { font-size: 22px; }
  .pt-lab { display: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .facts { flex-direction: column; gap: 16px; }
  .facts div { padding: 0; border-left: 0; }
  .visit-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ilace i { transition: none !important; }
}