/* Masjid Theme — the one stylesheet.
   Design: direction C.2 "Today rail" (docs/mockups/c/, commit a290b02; deviations in docs/design-decisions.md).
   Ported from docs/mockups/_shared/tokens.css + the shell layers of docs/mockups/c/c.css, with C's
   override layers consolidated into their final values. --hm-* names are kept as in the brand kit.
   Motion: every duration is listed with its reduced-motion fallback in docs/mockups/c/NOTES.md.

   Contents
   1  Tokens            7  Today rail
   2  Fonts             8  Phone bar
   3  Base              9  Pane + page content (page.php, index.php, 404, search)
   4  Type roles       10  Footer
   5  Buttons          11  Home; 11b Prayer Times page; 11c give.css (GiveWP surfaces); 11d content pages (M5)
   6  Masthead, nav,   12  Desktop shell (≥ 1100px): grid, rail by window height, collapsed rail
      drawer           13  Reduced motion, print */

/* ============================================================ 1 Tokens */
:root {
  /* Brand palette (verbatim from assets/brand/kit/brand-tokens.css) */
  --hm-forest: #234E36;
  --hm-deep: #143C2B;
  --hm-ivory: #F7F4EC;
  --hm-white: #fff;
  --hm-sage: #E8EDE4;
  --hm-brass: #B69A62;
  --hm-ink: #24342A;
  --hm-muted: #56675B;
  --hm-brass-ink: #7A5C28;
  --hm-line: #D9DED4;
  --hm-error: #9B3E32;

  --hm-font-heading: 'Libre Baskerville', Georgia, serif;
  --hm-font-body: 'Source Sans 3', Arial, sans-serif;
  --hm-font-arabic: 'Noto Naskh Arabic', serif;

  --hm-space-1: 4px;
  --hm-space-2: 8px;
  --hm-space-3: 12px;
  --hm-space-4: 16px;
  --hm-space-6: 24px;
  --hm-space-8: 32px;
  --hm-space-12: 48px;
  --hm-space-16: 64px;
  --hm-space-20: 80px;
  --hm-space-24: 96px;
  --hm-space-32: 128px;

  --hm-radius: 6px;
  --hm-focus: 0 0 0 3px var(--hm-ivory), 0 0 0 5px var(--hm-forest);

  /* Semantic aliases */
  --hm-surface: var(--hm-ivory);
  --hm-surface-alt: var(--hm-white);
  --hm-surface-quiet: var(--hm-sage);
  --hm-surface-dark: var(--hm-deep);
  --hm-text: var(--hm-ink);
  --hm-text-secondary: var(--hm-muted);
  --hm-text-on-dark: var(--hm-ivory);
  --hm-text-on-dark-secondary: #C9D5CC; /* 8.11:1 on deep */
  --hm-action: var(--hm-forest);
  --hm-action-hover: var(--hm-deep);
  --hm-control-border: #7D8C81; /* 3.22:1 on ivory, 3.54:1 on white: 1.4.11 non-text contrast */
  --hm-rule: var(--hm-line);

  /* Type ramp (DESIGN.md roles; display and headline are fluid) */
  --hm-text-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --hm-text-headline: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem);
  --hm-text-title: 1.3125rem;
  --hm-text-body: 1.125rem;
  --hm-text-label: 1rem;
  --hm-text-small: 0.9375rem;
  --hm-text-prayer-name: 1.125rem;
  --hm-text-prayer-time: 1.375rem;
  --hm-text-prayer-arabic: 1.5rem;
  --hm-leading-body: 1.6;
  --hm-leading-heading: 1.2;
  --hm-tracking-heading: -0.02em;
  --hm-measure: 66ch;

  --hm-container: 1280px;
  --hm-gutter: 48px;
  --hm-tap: 44px;

  --hm-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hm-dur-fast: 160ms;
  --hm-dur-base: 280ms;
  --hm-dur-slow: 520ms;

  /* Shell (C) */
  --rail-w: clamp(372px, 28vw, 420px);
  --rail-strip-w: 128px;
  --bar-h: 58px;
  --actions-h: 82px;      /* desktop rail foot: Donate / Prayer Times / collapse */
  --hair-brass: rgb(182 154 98 / 0.7);
  --hair-dark: rgb(247 244 236 / 0.16);
  --pane-pad: var(--hm-gutter);
  --sec: 48px;            /* section spacing: 48 phones, 64 desktop */
  --ui-dur: 250ms;        /* bar condensation, drawer, hover */
  --enter-dur: 360ms;     /* section entrances (home) */
  --ease: var(--hm-ease-out);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23B69A62' fill='none' stroke-width='1'%3E%3Cpolygon points='50,7 61.863,21.36 80.406,19.594 78.64,38.137 93,50 78.64,61.863 80.406,80.406 61.863,78.64 50,93 38.137,78.64 19.594,80.406 21.36,61.863 7,50 21.36,38.137 19.594,19.594 38.137,21.36'/%3E%3Cpath d='M50 7V0M93 50h7M50 93v7M7 50H0'/%3E%3C/g%3E%3C/svg%3E");
}
@media (max-width: 700px) { :root { --hm-gutter: 22px; } }
@media (max-width: 380px) { :root { --hm-text-prayer-name: 1.0625rem; --hm-text-prayer-time: 1.25rem; } }
@media (max-width: 360px) { :root { --hm-gutter: 16px; } }

/* ============================================================ 2 Fonts (self-hosted, not subset) */
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/libre-baskerville-400.woff2) format('woff2'); }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/libre-baskerville-700.woff2) format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/noto-naskh-arabic-400.woff2) format('woff2'); }
@font-face { font-family: 'Noto Naskh Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/noto-naskh-arabic-600.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/source-sans-3-400.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/source-sans-3-600.woff2) format('woff2'); }
@font-face { font-family: 'Source Sans 3'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/source-sans-3-700.woff2) format('woff2'); }

/* ============================================================ 3 Base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar-h) + 16px);
  scroll-behavior: smooth;
}
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--hm-ivory);
  color: var(--hm-ink);
  font: 400 var(--hm-text-body) / var(--hm-leading-body) var(--hm-font-body);
  font-kerning: normal;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
address { font-style: normal; }
table { font-variant-numeric: tabular-nums; }
[hidden] { display: none !important; }
::selection { background: var(--hm-forest); color: var(--hm-ivory); }
.rail ::selection, .footer ::selection, .bar ::selection, .drawer ::selection { background: var(--hm-ivory); color: var(--hm-deep); }
a { color: var(--hm-forest); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--hm-brass-ink); }

/* Focus: 3px forest ring, 3px offset; ivory on the dark surfaces (rail, bar, drawer, footer, phone masthead). */
:focus-visible { outline: 3px solid var(--hm-forest); outline-offset: 3px; }
.rail :focus-visible, .rail-actions :focus-visible, .footer :focus-visible, .bar :focus-visible,
.drawer :focus-visible, .masthead :focus-visible { outline-color: var(--hm-ivory); }
main:focus { outline: none; }
input, textarea { caret-color: var(--hm-forest); accent-color: var(--hm-forest); }

.sr-only, .screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  background: var(--hm-ivory); color: var(--hm-deep); font-weight: 600; border-radius: var(--hm-radius);
}
.skip:focus { top: 12px; }
.hm-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ui { width: 20px; height: 20px; flex: none; }
.ic { width: 24px; height: 24px; flex: none; }

/* ============================================================ 4 Type roles */
.h1-page {
  font: 400 var(--hm-text-display) / 1.06 var(--hm-font-heading);
  letter-spacing: -0.025em;
  color: var(--hm-ink);
}
.h2 { font: 400 var(--hm-text-headline) / 1.2 var(--hm-font-heading); letter-spacing: -0.02em; color: var(--hm-ink); }
.h3 { font: 600 var(--hm-text-title) / 1.3 var(--hm-font-body); color: var(--hm-ink); }
.lead { font-size: 1.1875rem; line-height: 1.6; max-width: 54ch; color: var(--hm-ink); }
:lang(ar) { font-family: var(--hm-font-arabic); letter-spacing: 0; font-feature-settings: normal; }

/* ============================================================ 5 Buttons
   Hover: light-ground buttons darken to deep green; dark-ground buttons step down one tone; arrows shift 4px. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 10px 22px;
  border: 1px solid transparent; border-radius: var(--hm-radius);
  font: 600 1rem / 1.2 var(--hm-font-body); text-decoration: none; cursor: pointer;
  transition: background-color var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease), border-color var(--ui-dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .ui { transition: transform var(--ui-dur) var(--ease); }
.btn:hover .ui { transform: translateX(4px); }
.btn-primary { background: var(--hm-forest); color: var(--hm-white); }
.btn-primary:hover { background: var(--hm-deep); color: var(--hm-white); }
.btn-outline { background: transparent; color: var(--hm-forest); border-color: var(--hm-forest); }
.btn-outline:hover { background: var(--hm-deep); border-color: var(--hm-deep); color: var(--hm-white); }
.btn-ivory { background: var(--hm-ivory); color: var(--hm-deep); }
.btn-ivory:hover { background: var(--hm-sage); color: var(--hm-deep); }
.btn-line { background: transparent; color: var(--hm-ivory); border-color: rgb(247 244 236 / 0.7); }
.btn-line:hover { background: var(--hm-ivory); color: var(--hm-deep); border-color: var(--hm-ivory); }

/* ============================================================ 6 Masthead, nav, drawer
   Phones/tablets: a deep strip (logo, Donate, Menu). Desktop: an ivory strip, tiers by window width in section 12. */
.masthead {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 12px;
  background: var(--hm-deep); color: var(--hm-ivory);
}
.brand { display: block; margin-right: auto; padding: 0; flex: none; }
.brand img { width: 284px; height: 56px; }
.head-donate { min-height: 44px; padding: 8px 16px; }
.menu-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--hm-radius);
  background: transparent; color: var(--hm-ivory); cursor: pointer;
}
.menu-btn:hover { background: rgb(247 244 236 / 0.12); }
.menu-btn .ui { width: 24px; height: 24px; }
.topnav { display: none; }
@media (max-width: 439px) { .brand img { width: 212px; height: 44px; } }
@media (max-width: 359px) {
  .head-donate { display: none; }
  .bar-main { font-size: 0.9375rem; }
  .bar-dot { margin-inline: 4px; }
}

/* Labels stored upper-case in WP ("SERVICES"): the text is kept, the case is set here. */
.nav-caps .nav-label { display: inline-block; text-transform: lowercase; }
.nav-caps .nav-label::first-letter { text-transform: uppercase; }

.sub-toggle {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--hm-radius); background: transparent; color: var(--hm-forest); cursor: pointer;
}
.sub-toggle .ui { transition: rotate var(--hm-dur-fast) var(--hm-ease-out); }
.sub-toggle[aria-expanded="true"] .ui { rotate: 180deg; }
.sub-toggle:focus-visible { outline-offset: -3px; }

/* UI links: a 1px underline grows left to right (250ms). Links inside running text keep a permanent underline. */
.drawer-list .sub a, .topnav .nav-top, .svc a span, .doors a span, .post-title a {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease);
}
.drawer-list .sub a:hover, .drawer-list .sub a:focus-visible,
.svc a:hover span, .svc a:focus-visible span, .doors a:hover span, .doors a:focus-visible span,
.post-title a:hover, .post-title a:focus-visible { background-size: 100% 1px; text-decoration: none; }
.svc a span, .doors a span { padding-bottom: 1px; }

/* drawer: slides from the right, backdrop fades (in 280ms ease-out, out 200ms ease-in) */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer-scrim {
  position: absolute; inset: 0; background: rgb(20 60 43 / 0.55);
  opacity: 0; transition: opacity 200ms var(--ease-in);
}
.drawer-panel {
  position: absolute; inset: 0 0 0 auto; width: min(380px, 90vw);
  display: flex; flex-direction: column;
  background: var(--hm-deep); color: var(--hm-ivory);
  border-left: 1px solid var(--hm-brass);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--hm-brass) transparent;
  transform: translateX(100%);
  transition: transform 200ms var(--ease-in);
}
.drawer.is-open .drawer-scrim { opacity: 1; transition: opacity 280ms var(--ease); }
.drawer.is-open .drawer-panel { transform: none; transition: transform 280ms var(--ease); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--hair-dark);
}
.drawer-title { font: 400 1.375rem / 1 var(--hm-font-heading); }
.drawer-close {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--hm-radius); background: transparent; color: var(--hm-ivory); cursor: pointer;
}
.drawer-close:hover { background: rgb(247 244 236 / 0.12); }
.drawer-close .ui { width: 24px; height: 24px; }
.drawer-list { list-style: none; padding: 8px 10px 8px 22px; }
.drawer-list > li { border-bottom: 1px solid var(--hair-dark); }
.drawer-list .nav-row { display: flex; align-items: center; }
.drawer-list .nav-top {
  flex: 1; display: flex; align-items: center; min-height: 52px;
  color: var(--hm-ivory); text-decoration: none; font-size: 1.1875rem; font-weight: 600;
}
.drawer-list .nav-top[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hm-brass); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.drawer-list .sub-toggle { color: var(--hm-ivory); }
.drawer-list .sub-toggle:hover { background: rgb(247 244 236 / 0.12); }
.drawer-list .nav-donate .nav-row { gap: 8px; padding: 10px 0; }
.drawer-list .nav-donate .nav-top {
  justify-content: center; min-height: 48px; border-radius: var(--hm-radius);
  background: var(--hm-ivory); color: var(--hm-deep); text-decoration: none;
}
.drawer-list .nav-donate .nav-top:hover { background: var(--hm-white); }
.drawer-list .nav-donate .sub-toggle { border: 1px solid rgb(247 244 236 / 0.55); width: 48px; height: 48px; }
.drawer-list .sub { list-style: none; padding: 0 0 10px 14px; }
.drawer-list .sub a {
  display: flex; align-items: center; min-height: 44px; color: var(--hm-text-on-dark-secondary);
  font-size: 1.0625rem;
}
.drawer-list .sub a:hover { color: var(--hm-ivory); }
.drawer-list .sub a[aria-current="page"] { color: var(--hm-ivory); text-decoration: underline; text-decoration-color: var(--hm-brass); }
.drawer-list .sub .nav-account { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hair-dark); }
.drawer-contact { display: grid; padding: 16px 22px 28px; margin-top: auto; }
.drawer-contact a { display: flex; align-items: center; min-height: 44px; color: var(--hm-ivory); }

/* ============================================================ 7 Today rail
   Phones: the Today panel, first in the source (full pages) — hidden on compact pages, where the bar stands in.
   Tablets: two columns. Desktop: the right-hand column (section 12). */
.rail {
  position: relative;
  background: var(--hm-deep); color: var(--hm-ivory);
  padding: 4px var(--hm-gutter) 28px;
  border-top: 1px solid var(--hair-dark);
}
.rail-head { position: relative; padding: 12px 0 14px; }
.rail-date { font: 600 1.0625rem / 1.3 var(--hm-font-body); letter-spacing: 0; }
.rail-hijri { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 2px; }
.rail-hijri [lang="ar"] { font-size: 1.25rem; line-height: 1.6; }
.hijri-en { font-size: var(--hm-text-small); color: var(--hm-text-on-dark-secondary); }

/* next prayer: the iqamah clock time is the large figure, the countdown its caption */
.next {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px;
  padding: 14px 0 16px; margin-bottom: 4px;
  border-top: 1px solid var(--hair-brass); border-bottom: 1px solid var(--hair-brass);
}
.next-what, .next-at { display: grid; align-content: end; }
.next-at { justify-items: end; text-align: right; }
.next-when, .next-label { font-size: var(--hm-text-small); line-height: 1.3; color: var(--hm-text-on-dark-secondary); }
.next-label { color: var(--hm-ivory); font-weight: 600; }
.next-name { display: block; margin-top: 4px; font: 400 2rem / 1.1 var(--hm-font-heading); letter-spacing: -0.02em; white-space: nowrap; }
.next-ar { display: block; margin-top: 4px; font-size: 1.25rem; line-height: 1.3; text-align: left; color: var(--hm-text-on-dark-secondary); }
.next-time {
  margin-top: 2px; white-space: nowrap;
  font: 600 3.25rem / 1 var(--hm-font-body); letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.next-time .t { font-size: inherit; line-height: inherit; }
.next-time .ap { font-size: 0.8125rem; margin-left: 4px; letter-spacing: 0.04em; font-weight: 600; color: var(--hm-text-on-dark-secondary); }
/* countdown caption: tabular and a fixed 13ch box, so the minute change never moves anything */
.next-in {
  display: inline-block; min-width: 13ch; margin-top: 6px;
  font-size: var(--hm-text-small); font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums;
  color: var(--hm-ivory); white-space: nowrap;
}

/* today's table */
.today-wrap { position: relative; }
.today-table { position: relative; z-index: 1; width: 100%; border-collapse: collapse; table-layout: fixed; }
.today-table .c-name { width: 46%; }
.today-table .c-time { width: 27%; }
.today-table thead th {
  padding: 10px 0 6px; text-align: right;
  font: 600 0.9375rem / 1.2 var(--hm-font-body); color: var(--hm-text-on-dark-secondary);
}
.today-table thead th:last-child { color: var(--hm-ivory); padding-right: 8px; }
.today-table tbody tr { border-top: 1px solid var(--hair-dark); }
.today-table tbody th, .today-table td { padding: 5px 0; }
.today-table tbody th { text-align: left; font-weight: 600; padding-left: 6px; }
.today-table td { text-align: right; padding-left: 6px; }
.today-table td .t { white-space: nowrap; }
.today-table td:last-child { padding-right: 8px; }
.pn { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; min-width: 0; }
.pi { width: 22px; height: 22px; flex: none; color: var(--hm-brass); }
.pn-en { font-size: var(--hm-text-prayer-name); line-height: 1.2; }
.pn-ar { font-size: 1.25rem; line-height: 1.6; font-weight: 400; color: var(--hm-text-on-dark-secondary); }
.t { font-size: 1.1875rem; line-height: 1.2; }
.ap { font-size: 0.8125rem; margin-left: 3px; letter-spacing: 0.02em; color: inherit; }
.today-table td.b { color: var(--hm-text-on-dark-secondary); }
.today-table td.iq { color: var(--hm-ivory); font-weight: 600; }
.today-table td.iq .t { font-size: var(--hm-text-prayer-time); }
.today-table .is-sunrise th, .today-table .is-sunrise td { color: var(--hm-text-on-dark-secondary); font-weight: 400; }
.today-table .is-sunrise .pi { opacity: 0.7; }
.jm-cell { font-size: 0.9375rem; font-weight: 600; color: var(--hm-text-on-dark-secondary); }

/* next-prayer highlight: without JS the row itself is marked; with JS one band slides between rows (450ms) */
.today-table tr.is-next > * {
  background: rgb(247 244 236 / 0.09);
  border-top: 1px solid var(--hm-brass); border-bottom: 1px solid var(--hm-brass);
}
.has-hl .today-table tr.is-next > * { background: none; border-color: transparent; }
.today-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
  height: var(--hl-h, 0); transform: translateY(var(--hl-y, 0));
  background: rgb(247 244 236 / 0.09); border-block: 1px solid var(--hm-brass);
  opacity: 0;
}
.has-hl .today-wrap::before { opacity: 1; }
.has-hl.hl-off .today-wrap::before { opacity: 0; }
.hl-anim .today-wrap::before { transition: transform 450ms var(--ease), height 450ms var(--ease), opacity var(--ui-dur) var(--ease); }
.today-table tr.is-next .pi { color: var(--hm-ivory); }
.today-table tr.is-next td.b { color: var(--hm-ivory); }

/* after Isha: tomorrow's Fajr row carries the highlight and a small tag on its own line (design-decisions 7) */
.today-table tr.is-tomorrow .pn { flex-wrap: wrap; row-gap: 2px; }
.tmr-line { flex-basis: 100%; padding-left: 30px; line-height: 1; }
.tmr-tag {
  display: inline-block; padding: 0 6px;
  font: 600 0.75rem / 1.5 var(--hm-font-body); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--hm-ivory); border: 1px solid var(--hm-brass); border-radius: 4px;
}

.notice {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 12px;
  border: 1px solid var(--hair-brass); border-radius: var(--hm-radius);
  font-size: 1rem; line-height: 1.35;
}
.notice-ic { width: 22px; height: 22px; flex: none; color: var(--hm-brass); }

.jumuah { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 12px; }
/* unavailable: the last cached Jumuah slots and when they were fetched (M4.1, decision 35) */
.rail-fallback .jumuah--cached { margin-top: 16px; }
.jumuah--cached .rail-note { grid-column: 1 / -1; margin-top: 0; }
.jumuah.is-next { padding: 8px; background: rgb(247 244 236 / 0.09); border-block: 1px solid var(--hm-brass); }
.jm-title { font: 400 1.375rem / 1 var(--hm-font-heading); letter-spacing: -0.01em; }
.jm-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.jm-list li { display: grid; text-align: right; }
.jm-l { font-size: 0.9375rem; color: var(--hm-text-on-dark-secondary); line-height: 1.3; }
.jm-t { font-weight: 600; font-variant-numeric: tabular-nums; }
.rail-note { margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; color: var(--hm-text-on-dark-secondary); }
.rail-foot { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rail-foot .btn { flex: 1 1 auto; }
.rail-foot .btn-ivory { display: none; }
.rail-actions, .rail-toggle { display: none; }
@media (max-width: 359px) {
  .rail-foot .btn-ivory { display: inline-flex; }
  .today-table .pi { display: none; }
  .today-table .c-name { width: 44%; }
  .today-table .c-time { width: 28%; }
}

/* fail-soft: Masjidal unreachable. Quiet, no alarm colour; the fallback is centred on desktop. */
.rail-fallback { margin-top: 18px; padding: 18px 0 4px; border-top: 1px solid var(--hair-brass); }
.fb-title { font: 400 1.375rem / 1.3 var(--hm-font-heading); }
.fb-text { margin-top: 6px; font-size: var(--hm-text-small); color: var(--hm-text-on-dark-secondary); }
.fb-links { list-style: none; margin-top: 10px; border-top: 1px solid var(--hair-dark); }
.fb-links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 48px;
  border-bottom: 1px solid var(--hair-dark); color: var(--hm-ivory); text-decoration: none; font-weight: 600;
}
.fb-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.is-unavailable .rail-foot .btn-line { display: none; }

@media (min-width: 700px) and (max-width: 1099px) {
  .rail-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
  .rail-body > * { grid-column: 1; }
  .rail-body > .today-wrap { grid-column: 2; grid-row: 1 / span 6; }
  .rail-body > .next { border-bottom: 0; }
}
@media (max-width: 1099px) { .is-compact .rail { display: none; } }

/* ============================================================ 8 Phone bar (phones and tablets)
   Full pages: fixed, revealed by height (clip-path) + opacity in 250ms when the Today panel leaves; content settles 8px.
   Compact pages: sticky under the masthead; the Menu button fades in once the masthead is gone. */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; gap: 8px;
  min-height: var(--bar-h); padding: 4px 8px 4px var(--hm-gutter);
  background: var(--hm-deep); color: var(--hm-ivory);
  border-bottom: 1px solid var(--hm-brass);
  clip-path: inset(0 0 100% 0); opacity: 0; visibility: hidden;
  transition: clip-path var(--ui-dur) var(--ease), opacity var(--ui-dur) var(--ease), visibility 0s linear var(--ui-dur);
}
.bar > * { transition: transform var(--ui-dur) var(--ease); transform: translateY(-8px); }
.bar.is-shown { clip-path: inset(0 0 -2px 0); opacity: 1; visibility: visible; transition-delay: 0s; }
.bar.is-shown > * { transform: none; }
.bar--sticky { position: sticky; top: 0; clip-path: none; opacity: 1; visibility: visible; transition: none; }
.bar--sticky > * { transform: none; }
.bar--sticky .bar-menu { opacity: 0; visibility: hidden; transition: opacity var(--ui-dur) var(--ease), visibility 0s linear var(--ui-dur); }
.bar--sticky.has-menu .bar-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.bar-link {
  flex: 1; min-width: 0; min-height: 48px; display: grid; align-content: center;
  color: var(--hm-ivory); text-decoration: none;
}
.bar-link:hover { color: var(--hm-ivory); }
.bar-main { font-size: 1.0625rem; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bar-dot { margin-inline: 6px; color: var(--hm-brass); }
.bar-sub { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; line-height: 1.3; color: var(--hm-text-on-dark-secondary); }
.bar-go { width: 16px; height: 16px; }
.bar-link:hover .bar-sub { color: var(--hm-ivory); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================ 9 Pane + page content
   Page content width follows C's Services page: the pane gutter, running text held to the reading measure.
   :where() keeps these at zero specificity so builder markup (until M5) and block styles still win. */
.pane { display: block; min-width: 0; overflow-x: clip; }
.entry-head { display: grid; gap: 16px; justify-items: start; padding: 32px var(--pane-pad) 28px; }
.entry-head.sr-only { padding: 0; }
.entry-meta { display: flex; flex-wrap: wrap; gap: 0 16px; font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-brass-ink); font-variant-numeric: tabular-nums; }
.entry-cats { font-weight: 400; color: var(--hm-muted); }
.entry-content { padding: 0 var(--pane-pad) var(--sec); overflow-wrap: break-word; }
.entry-content :where(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) { max-width: var(--hm-measure); }
.entry-content :where(p, ul, ol, dl, blockquote, figure, table, pre) { margin: 0 0 1em; }
.entry-content :where(ul, ol) { padding-left: 1.4em; }
.entry-content :where(li + li) { margin-top: 0.25em; }
.entry-content :where(h2) { margin: 1.4em 0 0.5em; font: 400 var(--hm-text-headline) / 1.2 var(--hm-font-heading); letter-spacing: -0.02em; }
.entry-content :where(h3) { margin: 1.4em 0 0.4em; font: 600 var(--hm-text-title) / 1.3 var(--hm-font-body); }
.entry-content :where(h4, h5, h6) { margin: 1.2em 0 0.4em; font: 600 1.125rem / 1.3 var(--hm-font-body); }
.entry-content :where(blockquote) { padding-left: 20px; border-left: 1px solid var(--hair-brass); }
.entry-content :where(table) { border-collapse: collapse; }
.entry-content :where(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--hm-line); text-align: left; }
.entry-content :where(img, video, iframe, embed, object) { max-width: 100%; }
.entry-content :where(hr) { border: 0; border-top: 1px solid var(--hm-line); margin: 2em 0; }
.entry-content > :where(:first-child) { margin-top: 0; }
.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption-text, .wp-element-caption { font-size: var(--hm-text-small); color: var(--hm-muted); margin-top: 6px; }

/* archive / search list */
.post-list { list-style: none; margin: 0 var(--pane-pad); border-top: 1px solid var(--hm-line); }
.post-item { display: grid; gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--hm-line); }
.post-item-date { font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-brass-ink); font-variant-numeric: tabular-nums; }
.post-item-title { font: 600 1.25rem / 1.3 var(--hm-font-body); }
.post-item-title a { color: var(--hm-ink); text-decoration: none; }
.post-item-title a:hover { color: var(--hm-forest); text-decoration: underline; }
.post-item-ex { max-width: 64ch; font-size: 1.0625rem; }
.entry-pager { padding: 24px var(--pane-pad) var(--sec); }
.entry-pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1px solid var(--hm-control-border); border-radius: var(--hm-radius); text-decoration: none; font-weight: 600;
}
.page-numbers.current { background: var(--hm-forest); border-color: var(--hm-forest); color: var(--hm-white); }
.page-numbers.dots { border: 0; }

/* search form + 404 */
.search-form { display: grid; gap: 8px; max-width: 520px; margin-bottom: 24px; }
.search-label { font-weight: 600; }
.search-row { display: flex; gap: 8px; }
.search-input {
  flex: 1; min-width: 0; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--hm-control-border); border-radius: var(--hm-radius);
  background: var(--hm-white); color: var(--hm-ink); font: inherit;
}
.search-input:focus-visible { outline-offset: 2px; }
.entry-search .search-form { margin-bottom: 0; }
.entry-content .entry-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 24px; }
.entry-links li + li { margin-top: 0; }
.entry-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ============================================================ 10 Footer
   Donate strip, address/contacts, newsletter + social, base line. Lattice frieze at 8% in the band above the CTA. */
.footer { position: relative; isolation: isolate; background: var(--hm-deep); color: var(--hm-ivory); padding: 56px var(--pane-pad) 24px; }
.footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 36px; z-index: -1; pointer-events: none;
  background: var(--lattice) center top / 36px 36px repeat-x; opacity: 0.08;
}
.footer a { color: var(--hm-ivory); }
.footer a:hover { color: var(--hm-ivory); text-decoration-color: var(--hm-brass); }
.footer .btn-ivory, .footer .btn-ivory:hover { color: var(--hm-deep); }
.foot-cta { display: grid; gap: 14px; justify-items: start; padding-bottom: 40px; border-bottom: 1px solid var(--hair-brass); }
.foot-title { font: 400 var(--hm-text-headline) / 1.2 var(--hm-font-heading); letter-spacing: -0.02em; }
.foot-cta p { max-width: 60ch; color: var(--hm-text-on-dark-secondary); }
.foot-cta p a { color: var(--hm-ivory); }
.footer--no-cta .foot-grid { padding-top: 0; } /* decision 56: no donation band on Donate and the form pages */
.foot-grid { display: grid; gap: 28px; padding: 32px 0; align-items: start; }
.foot-id { display: grid; gap: 12px; justify-items: start; }
.foot-brand { display: inline-block; }
.foot-brand img { width: 212px; height: 44px; }
.foot-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; color: var(--hm-text-on-dark-secondary); }
.foot-line a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-h { font: 400 1.375rem / 1.2 var(--hm-font-heading); margin-bottom: 8px; }
.foot-social, .foot-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.foot-social { margin-top: 12px; }
.foot-social a, .foot-menu a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-block-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; max-width: 34ch; font-weight: 600; }
.foot-base {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px;
  padding-top: 16px; border-top: 1px solid var(--hair-dark);
  font-size: var(--hm-text-small); color: var(--hm-text-on-dark-secondary);
}
.foot-base > a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 700px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-cta { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 40px; }
  .foot-cta .foot-title, .foot-cta p { grid-column: 1; }
  .foot-cta .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 699px) {
  .footer { padding-top: 48px; }
  .foot-cta { padding-bottom: 32px; }
  .foot-grid { gap: 20px; padding: 24px 0; }
  .foot-social { gap: 0 18px; margin-top: 4px; }
  .foot-base { gap: 0 14px; }
}

/* ============================================================ 11 Home (M3): front-page.php, ported from C.2 (docs/mockups/c/c.css).
   Selectors and cascade as in C; card rules are scoped to .news-list (WP gives every post <article> the class "post"),
   photo-box rules to the home figures. Phones/tablets: doors first, then hero (desktop Tab order: hero → doors → rooms). */
.hero--home { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--hm-deep); color: var(--hm-ivory); }
.hero--home :focus-visible { outline-color: var(--hm-ivory); }
.hero--home .hero-photo { overflow: hidden; background-color: var(--hm-deep); }
.hero--home .hero-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 66%; }
.hero--home .hero-text { padding: 22px var(--pane-pad) 30px; }
.hero-sig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; line-height: 0; }
.hero-lead { font: 400 1.25rem / 1.5 var(--hm-font-heading); letter-spacing: -0.01em; max-width: 32ch; color: var(--hm-ivory); }
.hero-actions, .give-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.hero--home .hero-actions { margin-top: 20px; }

/* doors row: right under Today on phones, under the hero on desktop */
.doors { padding: 16px var(--pane-pad) 20px; border-bottom: 1px solid var(--hm-line); }
.doors ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.doors a {
  display: flex; align-items: center; gap: 10px; min-height: 60px; height: 100%; padding: 10px 12px;
  background: var(--hm-white); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  color: var(--hm-ink); text-decoration: none; font-weight: 600; font-size: 1.0625rem; line-height: 1.25;
  transition: border-color var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease);
}
.doors .ic { color: var(--hm-forest); }
.doors .go, .svc .go { margin-left: auto; color: var(--hm-muted); transition: transform var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease); }
.doors .go { display: none; }
.doors a:hover { border-color: var(--hm-forest); color: var(--hm-forest); }
.doors a:hover .go, .doors a:focus-visible .go, .svc a:hover .go, .svc a:focus-visible .go { transform: translateX(4px); color: var(--hm-forest); }

/* rooms: photo cards, then the School band and the Funerals panel */
.house { border-top: 1px solid var(--hm-line); }
.room { padding: var(--sec) var(--pane-pad); }
.room-copy > p:not(.room-fact) { margin-top: 12px; max-width: 52ch; }
.room-copy .svc { margin-top: 20px; }
.room-fact { margin-top: 16px; font-size: var(--hm-text-small); color: var(--hm-brass-ink); font-variant-numeric: tabular-nums; }
.svc { list-style: none; border-top: 1px solid var(--hm-line); }
.svc a {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 2px;
  border-bottom: 1px solid var(--hm-line);
  color: var(--hm-ink); text-decoration: none; font-weight: 600; font-size: 1.125rem; line-height: 1.3;
}
.svc a .ic { color: var(--hm-forest); }
.svc a:hover { color: var(--hm-forest); }
.rooms { display: grid; }
.room--card { padding: 0; display: grid; align-content: start; }
.room--card .room-photo { background: var(--hm-sage); overflow: hidden; }
.room--card .room-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.room--card .room-copy { padding: 24px var(--pane-pad) var(--sec); }
.room--card .room-copy .svc { margin-top: 16px; }
.room:hover .room-photo img { filter: brightness(1.06); }
.prices { display: flex; flex-wrap: wrap; gap: 2px 24px; margin-top: 18px; font-weight: 600; font-size: 1.125rem; color: var(--hm-forest); font-variant-numeric: tabular-nums; }
.prices + .room-fact { margin-top: 4px; }
.room--band { border-top: 1px solid var(--hm-line); }
.band-head p { margin-top: 12px; max-width: 56ch; }
.room--band .svc--row { margin-top: 24px; }
/* services with unconfirmed destinations: one plain line of text, not rows that look tappable (C decision 5) */
.also { list-style: none; display: flex; flex-wrap: wrap; margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; color: var(--hm-ink); }
.also li:not(:last-child)::after { content: "·"; margin: 0 10px; color: var(--hm-brass-ink); }
.also-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 6px; }
.also-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.care { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: var(--sec) var(--pane-pad); background: var(--hm-sage); }
.care-h { display: flex; align-items: center; gap: 14px; }
.care-ic { width: 40px; height: 40px; flex: none; color: var(--hm-forest); }
.care-lead { margin-top: 0; font: 400 1.25rem / 1.5 var(--hm-font-heading); max-width: 40ch; color: var(--hm-ink); }
.care .svc { margin-top: 8px; max-width: 520px; border-top-color: var(--hm-control-border); }
.care .svc a { border-bottom-color: var(--hm-control-border); }

/* brass arch on a hairline: the divider between major sections (never inside tables, controls or forms) */
.arch {
  display: block; height: 28px; margin: 0 var(--pane-pad); border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M5 27.5V15c0-6 4.5-9.5 9-13 4.5 3.5 9 7 9 13v12.5' fill='%23F7F4EC' stroke='%23B69A62' stroke-width='1.25'/%3E%3Cpath d='M10 27.5V18c0-3 2-5 4-6.5 2 1.5 4 3.5 4 6.5v9.5' fill='none' stroke='%23B69A62' stroke-width='1'/%3E%3C/svg%3E") center bottom / 28px 28px no-repeat,
    linear-gradient(to right, transparent, var(--hair-brass) 14%, var(--hair-brass) 86%, transparent) center bottom 0.5px / 100% 1px no-repeat;
}

/* Donate: one primary action; Masjid first among the funds; Donor Dashboard set apart as an account link */
.give { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: var(--sec) var(--pane-pad); border-top: 1px solid var(--hm-line); }
.give-copy > p:not(.give-actions) { margin-top: 12px; max-width: 54ch; }
.give-funds { display: grid; gap: 8px; align-content: start; }
.fund-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; align-content: start; padding-top: 4px; }
.fund-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--hm-forest); font-size: 1.0625rem; }
.fund-links a:hover { color: var(--hm-brass-ink); }
.give-account { padding-top: 8px; border-top: 1px solid var(--hm-line); }
.give-account a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

.visit { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--hm-line); }
.visit-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.visit-body { padding: 28px var(--pane-pad) var(--sec); display: grid; justify-items: start; align-content: start; }
.visit-body .h3 { margin-top: 28px; }
.visit-addr { margin: 6px 0 12px; font-size: 1.25rem; }
.visit-body > p { margin-top: 8px; max-width: 52ch; }
.visit-body > .btn-outline { margin-top: 16px; }
.visit-cols { display: grid; gap: 4px 32px; justify-self: stretch; margin-top: 8px; }
.visit-cols .h3 { margin-top: 16px; }
.contact-list { list-style: none; margin-top: 6px; display: grid; }
.contact-list li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.contact-list a { display: inline-flex; align-items: center; min-height: 44px; }
.cl-label { color: var(--hm-muted); font-size: var(--hm-text-small); }

/* announcements: the three newest, small cards, dates first; the whole card is the title link */
.news { padding: var(--sec) var(--pane-pad); background: var(--hm-white); border-top: 1px solid var(--hm-line); }
.news-list { list-style: none; margin-top: 24px; display: grid; gap: 12px; }
.news-list > .post {
  position: relative; display: grid; align-content: start; gap: 4px; padding: 16px 18px;
  background: var(--hm-ivory); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  transition: border-color var(--ui-dur) var(--ease);
}
.news-list > .post:hover { border-color: var(--hm-forest); }
.post-date { font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-brass-ink); font-variant-numeric: tabular-nums; }
.news-list .post-title { font: 600 1.125rem / 1.3 var(--hm-font-body); }
.news-list .post-title a { color: var(--hm-ink); }
.news-list .post-title a:hover { color: var(--hm-forest); }
.news-list .post-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.post-ex { margin-top: 2px; max-width: 64ch; color: var(--hm-ink); font-size: 1rem; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.post-cats { margin-top: 2px; font-size: var(--hm-text-small); color: var(--hm-muted); }
/* the post's featured image (an event flyer): contained, never cropped; hidden on phones, where C keeps cards short */
.post-flyer { margin-bottom: 8px; background: var(--hm-sage); border-radius: 2px; overflow: hidden; }
.post-flyer img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; }
.news-more { margin-top: 24px; }
.news--join .svc { margin-top: 24px; } /* decision 58: the join row in place of stale announcements */

/* photos fade in once decoded (theme.js); sage/deep grounds hold the space */
.room-photo, .visit-photo { background-color: var(--hm-sage); }
.hero-photo img, .room-photo img, .visit-photo img, .post-flyer img { transition: opacity 400ms var(--ease), filter var(--ui-dur) var(--ease); }
.pane figure img.is-loading { opacity: 0; }
/* section entrances: one fade-and-rise, once, staggered in a group (theme.js; nothing hidden without it) */
.reveal-ready [data-reveal] { transition: opacity var(--enter-dur) var(--ease) var(--d, 0ms), transform var(--enter-dur) var(--ease) var(--d, 0ms), border-color var(--ui-dur) var(--ease); }
.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(10px); }

@media (max-width: 699px) {
  .room--card .room-photo img { aspect-ratio: 16 / 9; }
  .svc a { min-height: 52px; }
  .care { gap: 12px; }
  .care-lead { font-size: 1.125rem; }
  .home .visit-photo, .post-flyer, .post-ex { display: none; }
  .home .visit-body { padding-top: var(--sec); }
  .news-list { gap: 10px; margin-top: 20px; }
  .news-list > .post { padding: 14px 16px; }
  .news-more { margin-top: 20px; }
}
@media (min-width: 440px) { .doors .go { display: block; } }
/* where a door is under ~180px wide (4 across), "Membership" cannot wrap: drop the arrow there as phones do (M3 critique) */
@media (min-width: 700px) and (max-width: 819px), (min-width: 1100px) and (max-width: 1219px) { .doors .go { display: none; } }
@media (min-width: 700px) {
  .hero--home .hero-photo img { aspect-ratio: 21 / 9; }
  .hero-lead { font-size: 1.5rem; }
  .doors ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; padding: var(--sec) var(--pane-pad); }
  .room--card .room-copy { padding: 22px 0 0; }
  .give { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .visit-cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .visit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .visit-photo img { height: 100%; aspect-ratio: auto; }
}
@media (max-width: 1099px) {
  .home .pane { display: flex; flex-direction: column; }
  .home .doors { order: -1; }
}
@media (min-width: 1100px) {
  /* the brushstroke: solid deep green behind the text, fading out to the right and upward, in the block's padding
     (measured worst case 9.02:1 against the photo, design-decisions 9) */
  .hero--home { isolation: isolate; align-items: end; min-height: clamp(400px, calc(100vh - 330px), 500px); }
  .hero--home .hero-photo { position: absolute; inset: 0; z-index: -1; }
  .hero--home .hero-photo img { height: 100%; aspect-ratio: auto; object-position: 50% 52%; }
  .hero--home .hero-text { position: relative; justify-self: start; align-self: end; width: 37rem; max-width: 100%; padding: 72px 112px 44px var(--pane-pad); }
  .hero--home .hero-text::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: rgb(20 60 43 / 0.93);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 112px), rgb(0 0 0 / 0.55) calc(100% - 56px), transparent), linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 30px, #000 64px);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, #000 calc(100% - 112px), rgb(0 0 0 / 0.55) calc(100% - 56px), transparent), linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.55) 30px, #000 64px);
    mask-composite: intersect;
  }
  .hero-lead { line-height: 1.4; max-width: none; }
  .hero--home .hero-actions { margin-top: 24px; }
  .doors { padding: 24px var(--pane-pad); }
  .doors a { min-height: 72px; padding: 14px 16px; font-size: 1.125rem; }
  .doors .ic { width: 28px; height: 28px; }
  .rooms { gap: 0 48px; }
  .room--card .room-copy { padding-top: 28px; }
  .svc--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
  .svc--row li { border-top: 1px solid var(--hm-line); }
  .visit { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .visit-photo { align-self: stretch; }
  .visit-photo img { height: 100%; aspect-ratio: auto; }
  .visit-body { padding-block: var(--sec); }
  .news-list > .post { padding: 20px 22px; }
}

/* ============================================================ 11b Prayer Times page (M4): page-prayer-times.php, ported from C.2
   (docs/mockups/c/prayer-times.html). One cell per prayer and day holds Begins + Iqamah as two spans: side by side
   where the section is ≥ 840px wide (C's two sub-columns), stacked below (phones, tablets, desktop windows under ~1250px), so phones never scroll sideways
   (design-decisions 27). "Iqamah only" is pure CSS (:has on the radio); theme.js makes it the phone default. */
.pt-head { padding: 40px var(--pane-pad) 32px; display: grid; gap: 16px; justify-items: start; }
.pt-note { color: var(--hm-brass-ink); font-size: 1rem; }
.pt-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.friday { display: grid; gap: 20px; padding: 32px var(--pane-pad); background: var(--hm-sage); }
.friday-copy p { margin-top: 10px; max-width: 54ch; }
.month-sec { padding: 40px 0 56px; container: month / inline-size; }
.month-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; padding: 0 var(--pane-pad); }
.mh-hijri { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: baseline; margin-top: 6px; font: 400 1rem / 1.5 var(--hm-font-body); letter-spacing: 0; color: var(--hm-muted); }
.mh-hijri [lang="ar"] { font-size: 1.0625rem; }
.view-switch { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.view-switch legend { float: left; margin-right: 8px; padding: 0; font-size: var(--hm-text-small); color: var(--hm-muted); line-height: 44px; }
.view-switch label { position: relative; display: inline-flex; }
.view-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.view-switch span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--hm-control-border); border-radius: var(--hm-radius);
  font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-forest); background: var(--hm-white);
  transition: background-color var(--ui-dur) var(--ease), border-color var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease);
}
.view-switch input:checked + span { background: var(--hm-forest); border-color: var(--hm-forest); color: var(--hm-white); }
.view-switch input:hover + span { border-color: var(--hm-forest); }
.view-switch input:focus-visible + span { outline: 3px solid var(--hm-forest); outline-offset: 3px; }
.month-nav { flex-basis: 100%; }
.month-nav a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.month-nav a span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.month-nav .is-earlier .ui { transform: scaleX(-1); }
.month-nav .is-later { flex-direction: row-reverse; }
.month-jumuah {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 20px;
  margin: 20px var(--pane-pad) 0; padding: 10px 16px;
  background: var(--hm-sage); border-radius: var(--hm-radius); font-size: 1rem;
}
.mj-h { font: 400 1.25rem / 1.2 var(--hm-font-heading); }
.mj-slots { display: flex; flex-wrap: wrap; gap: 0 20px; }
.mj-from { font-weight: 600; }
p.mj-from { flex-basis: 100%; font-weight: 400; font-size: var(--hm-text-small); color: var(--hm-muted); }
.month-jumuah strong { color: var(--hm-forest); font-variant-numeric: tabular-nums; }
/* the scroller is only a safety net (enlarged text): theme.js drops it whenever the table fits, so the header row can stick */
.month-scroll { margin-top: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--hm-control-border) var(--hm-sage); }
.month-scroll.fits { overflow: visible; }
.month-scroll.fits .month thead th { position: sticky; top: var(--bar-h); z-index: 3; }
.month {
  --sub-w: 2.95em; --sub-gap: clamp(8px, 1.2cqi, 14px);
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem; font-variant-numeric: tabular-nums;
}
.month th, .month td { padding: 9px 7px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--hm-line); }
.month tr > :last-child { padding-right: var(--pane-pad); }
.month thead th { background: var(--hm-ivory); font-weight: 600; font-size: 1rem; line-height: 1.3; vertical-align: bottom; color: var(--hm-ink); border-bottom-color: var(--hm-ink); }
.month thead .c-p, .month thead .c-su { text-align: center; }
.ph-en { display: inline; }
.mh-ar { display: block; font-size: 1.125rem; line-height: 1.5; font-weight: 400; color: var(--hm-muted); }
.ph-sub { display: flex; justify-content: flex-end; gap: var(--sub-gap); margin-top: 6px; font-size: 0.9375rem; color: var(--hm-muted); }
.ph-sub > span { width: var(--sub-w); text-align: right; }
.ph-sub .s-i { color: var(--hm-forest); }
.mer { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--hm-muted); }
.month .c-p, .month .c-su, .month td.p, .month td.su { border-left: 1px solid var(--hm-line); }
.month .b, .month .i { display: inline-block; width: var(--sub-w); text-align: right; }
.month .b + .i { margin-left: var(--sub-gap); }
.month .b { color: var(--hm-ink); }
.month .i { color: var(--hm-forest); font-weight: 600; }
.month .ap { margin-left: 2px; font-size: 0.75rem; font-weight: 400; }
.month .jm-cell { font-size: 0.875rem; font-weight: 600; color: var(--hm-forest); }
.month .c-date { text-align: left; padding-left: var(--pane-pad); background: var(--hm-ivory); }
.month tbody th { font-weight: 400; }
.d-num { display: inline-block; min-width: 1.6em; font-weight: 600; }
.d-wd { color: var(--hm-muted); font-size: 0.9375rem; }
.d-tag { display: block; font-size: 0.75rem; font-weight: 600; line-height: 1.2; color: var(--hm-brass-ink); }
.month tbody tr > * { background: var(--hm-ivory); transition: background-color var(--ui-dur) var(--ease); }
.month tr.is-fri > * { background: var(--hm-sage); }
.month tbody tr:hover > * { background: var(--hm-white); }
.month tr.is-today > *, .month tbody tr.is-today:hover > * { background: var(--hm-forest); color: var(--hm-white); border-bottom-color: var(--hm-forest); }
.month tr.is-today :is(.b, .i, .d-wd, .d-tag, .jm-cell) { color: var(--hm-white); }
.month tbody tr.is-today:hover > * { background: var(--hm-deep); }
/* Iqamah only: Begins and Sunrise leave the table */
.month-sec:has(.view-switch input[value="iqamah"]:checked) .month :is(.b, .s-b, .c-su, td.su) { display: none; }
.month-sec:has(.view-switch input[value="iqamah"]:checked) .month .b + .i { margin-left: 0; }
.month-sec:has(.view-switch input[value="iqamah"]:checked) .month { --sub-w: auto; }
.month-partial, .month-src { margin-top: 20px; padding: 0 var(--pane-pad); max-width: calc(64ch + var(--pane-pad) * 2); font-size: 1rem; color: var(--hm-muted); }
.month-partial { color: var(--hm-ink); font-weight: 600; }
.month-fallback { margin: 16px var(--pane-pad) 0; padding: 20px; background: var(--hm-sage); border-radius: var(--hm-radius); max-width: 60ch; }
.month-fallback .fb-title { font-weight: 600; color: var(--hm-ink); }
.month-fallback p + p { margin-top: 6px; }
.month-fallback a[href^="tel:"] { white-space: nowrap; }
.print-foot, .print-only { display: none; }
/* Iqamah only on wide tables: the five prayer columns share the width evenly */
@container month (min-width: 840px) {
  .month-sec:has(.view-switch input[value="iqamah"]:checked) .month .c-p { width: 15%; }
}
/* narrow (phones): both columns stack in each cell, Begins small above Iqamah; the date's weekday drops under the number */
@container month (max-width: 839px) {
  .month { font-size: 0.9375rem; }
  .month th, .month td { padding: 8px 3px; }
  .month .c-date { padding-right: 6px; }
  .month thead th { font-size: 0.875rem; }
  .mh-ar { font-size: 1rem; }
  .d-num { display: block; min-width: 0; }
  .d-wd { font-size: 0.8125rem; }
  .d-tag { font-size: 0.6875rem; }
  .month .b, .month .i { display: block; width: auto; }
  .month .b + .i { margin-left: 0; }
  .month .b { font-size: 0.8125rem; line-height: 1.35; color: var(--hm-muted); }
  .month .jm-cell { font-size: 0.75rem; }
  .ph-sub { flex-direction: column; align-items: flex-end; gap: 0; margin-top: 4px; font-size: 0.75rem; line-height: 1.3; }
  .ph-sub > span { width: auto; }
  .ph-sub .mer { display: none; }
  .month tr.is-today .b { color: var(--hm-text-on-dark-secondary); }
  .month-sec:has(.view-switch input[value="iqamah"]:checked) .ph-sub .mer { display: block; }
  .month-sec:has(.view-switch input[value="iqamah"]:checked) .d-num { display: inline-block; min-width: 1.6em; }
  .month-sec:has(.view-switch input[value="iqamah"]:checked) .month th,
  .month-sec:has(.view-switch input[value="iqamah"]:checked) .month td { padding-inline: 4px; }
}
@media (min-width: 1100px) {
  .pt-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 32px; row-gap: 8px; padding: 32px var(--pane-pad) 24px; }
  .pt-head .h1-page { font-size: clamp(2.75rem, 4vw, 3.5rem); white-space: nowrap; }
  .pt-head .pt-note { grid-row: 2; }
  .pt-actions { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .friday { padding-block: 20px; }
  .friday-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: baseline; }
  .friday-copy .h2 { font-size: 1.75rem; }
  .friday-copy p { margin-top: 0; max-width: 62ch; font-size: 1.0625rem; }
  .month-sec { padding-top: 28px; }
  .month-nav { flex-basis: auto; }
  .month-scroll.fits .month thead th { top: 0; }
}

/* print: the month on one letter page, landscape (C.2). Always Begins + Iqamah side by side, whatever the screen view;
   the masjid's name, address and the fetch date in the footer; no rail, nav, buttons or Friday band (section 13 hides the shell). */
@media print {
  @page { size: letter landscape; margin: 10mm; }
  .pt-actions, .view-switch, .month-nav, .month-src, .friday { display: none !important; }
  .pt-head { display: block; padding: 0 0 2pt; }
  .pt-head .h1-page { font-size: 16pt; line-height: 1.1; letter-spacing: 0; color: #000; }
  .print-only { display: inline; }
  .pt-note { margin-top: 2pt; font-size: 8.5pt; color: #333; }
  .month-sec { padding: 0; }
  .month-head { display: block; padding: 0; }
  .month-head .h2 { font-size: 12pt; line-height: 1.2; color: #000; }
  .mh-hijri { margin-top: 0; font-size: 9pt; color: #333; }
  .mh-hijri [lang="ar"] { font-size: 9.5pt; }
  .month-jumuah { margin: 3pt 0 0; padding: 0; gap: 0 12pt; background: none; font-size: 9pt; }
  .mj-h { font-size: 10pt; }
  .month-jumuah strong { color: #000; }
  .month-scroll { overflow: visible; margin-top: 4pt; }
  .month { --sub-w: 3em !important; --sub-gap: 6pt !important; font-size: 10.5pt; break-inside: avoid; }
  /* fridge-first (M4.1, decision 36): Iqamah first and bold, Begins second and lighter. Each cell keeps its two
     spans in source order (Begins, Iqamah); an RTL cell lays them out right to left, each time stays LTR inside. */
  .month td.p { direction: rtl; text-align: right; }
  .month td.p .b + .i { margin-left: 0 !important; margin-right: var(--sub-gap) !important; }
  .month td.p > span { direction: ltr; }
  .month .i { font-weight: 700 !important; }
  .month td.p .b { color: #444 !important; font-size: 9.5pt !important; }
  .ph-sub { flex-direction: row-reverse !important; justify-content: flex-start !important; }
  .month .b, .month .i, .ph-sub > span { display: inline-block !important; width: var(--sub-w) !important; }
  .month .b + .i { margin-left: var(--sub-gap) !important; }
  .ph-sub { display: flex !important; gap: var(--sub-gap) !important; margin-top: 1pt; font-size: 8pt; }
  .ph-sub .mer { display: block !important; font-size: 8pt; }
  .month .c-su, .month td.su { display: table-cell !important; }
  .month th, .month td { padding: 0.25pt 4pt !important; line-height: 1.1; }
  .month thead th { position: static !important; font-size: 9pt; background: none; color: #000; border-bottom-color: #000; }
  .mh-ar { font-size: 8.5pt; line-height: 1.2; color: #333; }
  .month .c-date { padding-left: 2pt !important; background: none !important; }
  .month tr > :last-child { padding-right: 2pt !important; }
  .d-num { display: inline-block !important; min-width: 1.6em; }
  .d-wd { color: #000 !important; font-size: inherit !important; }
  .month td.su .b { color: #000 !important; font-size: inherit !important; }
  .d-tag { display: inline; margin-left: 3pt; font-size: 8pt; color: #000; }
  .month .i, .month .jm-cell { color: #000 !important; }
  .month .jm-cell { font-size: inherit !important; }
  .month tbody tr > *, .month tr.is-fri > * { background: none; }
  .month tr.is-today > * { background: none !important; color: #000 !important; border-bottom-color: #ccc !important; }
  .month tr.is-today :is(.b, .i, .d-wd, .d-tag, .jm-cell) { color: #000 !important; }
  .month tr.is-today .d-tag { display: none; } /* a printed month hangs for weeks: no "Today" */
  .month .c-p, .month .c-su, .month td.p, .month td.su { border-left-color: #bbb; }
  .month td, .month tbody th { border-bottom-color: #ccc; }
  .month-partial { margin-top: 3pt; padding: 0; font-size: 8.5pt; color: #000; }
  .print-foot { display: block; margin-top: 5pt; font-size: 9pt; color: #333; }
}

/* ============================================================ 11c give.css (M4b): GiveWP surfaces, ported from C.2 (docs/mockups/c/donate.html).
   The theme styles around GiveWP, never its internals. Selectors stop at: the Donate page's own markup, the frame
   (.givewp-frame) and the form-grid cards inside it, the single-form wrapper (.gf-*), and on the account pages
   (body.hm-give) the donor-dashboard shell, the receipt, the email-access form and the history/subscription tables.
   Nothing targets the inside of the v3 form: it renders in GiveWP's own iframe. */
.don-head { padding: 40px var(--pane-pad) 32px; display: grid; gap: 16px; }
.don-assure { max-width: 60ch; padding-top: 14px; border-top: 1px solid var(--hm-line); color: var(--hm-muted); font-size: 1rem; } /* decision 56 */
.funds-sec { padding: 0 var(--pane-pad) 40px; display: grid; gap: 36px; }
.fg-head { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--hm-ink); }
.fg-desc { color: var(--hm-muted); font-size: 1rem; max-width: 64ch; }
.funds { list-style: none; }
.fund {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px 18px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--hm-line);
}
.fund-media { grid-row: span 2; align-self: start; width: 72px; height: 72px; display: grid; place-items: center; background: var(--hm-sage); border-radius: 4px; overflow: hidden; }
.fund-photo { width: 100%; height: 100%; object-fit: cover; }
.emblem { width: 56px; height: 56px; color: var(--hm-forest); }
.fund-title { font: 600 1.25rem / 1.3 var(--hm-font-body); color: var(--hm-ink); }
.fund-desc { margin-top: 4px; font-size: 1rem; color: var(--hm-muted); max-width: 60ch; }
.fund-goal { grid-column: 2; font-variant-numeric: tabular-nums; }
.goal-l { font-size: var(--hm-text-small); color: var(--hm-muted); }
.goal-amt { font-weight: 600; font-size: 1.125rem; }
.fund-btn { grid-column: 2; justify-self: start; }
.form-frame { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--hm-white); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.ff-photo { background-color: var(--hm-sage); }
.ff-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity 400ms var(--ease); }
.ff-body { padding: 32px var(--pane-pad) 48px; min-width: 0; }
.givewp-frame { margin-top: 20px; border: 2px solid var(--hm-forest); border-radius: var(--hm-radius); background: var(--hm-ivory); overflow: hidden; }
.gw-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 16px;
  padding: 10px 16px; background: var(--hm-forest); color: var(--hm-white); font-size: var(--hm-text-small);
}
.gw-tag { font-weight: 700; letter-spacing: 0.02em; }
.gw-note { color: var(--hm-text-on-dark-secondary); }
.gw-slot { padding: 8px 16px 16px; }
.dashboard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: center; padding: 40px var(--pane-pad) 56px; }
.dash-ic { width: 48px; height: 48px; color: var(--hm-forest); }
.dashboard .btn { grid-column: 1 / -1; justify-self: start; }

/* single form: a quiet header (emblem, fund title), GiveWP's form, then the other funds */
.gf-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 28px var(--pane-pad) 20px; }
.gf-head .fund-media { grid-row: auto; }
.gf-kicker { font-size: var(--hm-text-small); font-weight: 600; }
.gf-kicker a { color: var(--hm-brass-ink); }
.gf-title { font: 400 var(--hm-text-headline) / 1.15 var(--hm-font-heading); letter-spacing: -0.02em; color: var(--hm-ink); }
.gf-form { padding: 0 var(--pane-pad) 32px; min-height: 480px; }
.gf-other { display: grid; gap: 8px; margin: 0 var(--pane-pad); padding: 24px 0 var(--sec); border-top: 1px solid var(--hm-line); }

/* the form grid inside the frame: GiveWP's cards brought to the tokens (white card, hairline, forest link; no shadow).
   GiveWP sets the title size and the link colour with !important / inline styles, so those overrides need !important. */
.givewp-frame .give-wrap .give-grid { grid-template-columns: minmax(0, 1fr); grid-gap: 10px; margin: 0; }
.givewp-frame .give-wrap .give-card {
  height: 100%; background: var(--hm-white); border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  box-shadow: none; color: var(--hm-ink); transition: border-color var(--ui-dur) var(--ease);
}
.givewp-frame .give-wrap .give-card:hover, .givewp-frame .give-wrap .give-card:focus-visible { border-color: var(--hm-forest); box-shadow: none; }
.givewp-frame .give-form-grid-content { gap: 4px; padding: 14px 16px; justify-content: flex-start; }
.givewp-frame .give-form-grid-content > h3 { font: 600 1.125rem / 1.3 var(--hm-font-body) !important; color: var(--hm-ink); }
.givewp-frame .give-form-grid-content > p:empty, .givewp-frame .give-form-grid-media:empty { display: none; }
.givewp-frame .give-form-grid-content > .give-card__button { font: 600 1rem / 1.4 var(--hm-font-body); color: var(--hm-forest) !important; text-decoration-color: currentColor !important; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.givewp-frame .give-form-grid-progress, .givewp-frame .form-grid-raised { background: var(--hm-ivory); }
.givewp-frame .give-form-grid-progress { padding: 4px 16px 12px; border-top: 1px solid var(--hm-line); border-radius: 0 0 var(--hm-radius) var(--hm-radius); }
.givewp-frame .give-form-grid-progress-bar { margin: 10px 0 8px; }
.givewp-frame .give-form-grid-progress-bar .give-progress-bar { height: 8px; background: var(--hm-sage); box-shadow: none; border-radius: 4px; }
.givewp-frame .give-form-grid-progress-bar .give-progress-bar > span { background: var(--hm-forest) !important; border-radius: 4px; }
.givewp-frame .form-grid-raised__details { font-size: var(--hm-text-small); font-variant-numeric: tabular-nums; }
.givewp-frame .form-grid-raised__details > span:last-child { color: var(--hm-muted); font-size: var(--hm-text-small); }
.givewp-frame .give-page-numbers:empty { display: none; }

/* account pages (page.php): the donor-dashboard shell, the receipt, the email-access form, history and subscription tables */
.hm-give .entry-content { max-width: calc(var(--hm-measure) + var(--pane-pad) * 2); }
.hm-give--dashboard .entry-content, .hm-give--receipt .entry-content { max-width: none; }
.hm-give--dashboard .entry-content iframe[name="give-embed-donor-profile"] { display: block; border-radius: var(--hm-radius); }
.hm-give--dashboard .entry-content .iframe-loader > div { box-shadow: none !important; border: 1px solid var(--hm-line); border-radius: var(--hm-radius) !important; }
.hm-give #give-email-access-form { display: grid; gap: 8px; max-width: 420px; margin-top: 4px; padding: 20px; background: var(--hm-white); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
.hm-give #give-email-access-form p { margin: 0 0 4px; }
.hm-give #give-email-access-form label { font-weight: 600; }
.hm-give #give-email-access-form input[type="email"] {
  min-height: 48px; padding: 10px 14px; border: 1px solid var(--hm-control-border); border-radius: var(--hm-radius);
  background: var(--hm-white); color: var(--hm-ink); font: inherit;
}
.hm-give #give-email-access-form .give-submit {
  justify-self: start; min-height: 48px; padding: 10px 22px; border: 0; border-radius: var(--hm-radius);
  background: var(--hm-forest); color: var(--hm-white); font: 600 1rem / 1.2 var(--hm-font-body); cursor: pointer;
  transition: background-color var(--ui-dur) var(--ease);
}
.hm-give #give-email-access-form .give-submit:hover { background: var(--hm-deep); }
.hm-give .entry-content :is(#give_user_history, .give-table, #give_subscription_history, .give-recurring-subscriptions-table, #give-donation-receipt, table.give-table) {
  width: 100%; border-collapse: collapse; font-size: 1rem; font-variant-numeric: tabular-nums; background: var(--hm-white); border: 1px solid var(--hm-line);
}
.hm-give .entry-content :is(#give_user_history, .give-table, #give_subscription_history, .give-recurring-subscriptions-table, #give-donation-receipt) :is(th, td) {
  padding: 10px 12px; border: 0; border-bottom: 1px solid var(--hm-line); text-align: left; vertical-align: top;
}
.hm-give .entry-content :is(#give_user_history, .give-table, #give_subscription_history, .give-recurring-subscriptions-table, #give-donation-receipt) thead th {
  background: var(--hm-sage); font-weight: 600; color: var(--hm-ink);
}
.hm-give .entry-content #give-receipt { max-width: 760px; }
.give-next { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
/* the receipt prints without the shell (section 13) and without the page's own buttons */
@media print {
  .hm-give--receipt .entry-head { padding: 0 0 8pt; }
  .hm-give--receipt .entry-head .h1-page { font-size: 18pt; color: #000; }
  .hm-give--receipt .entry-content { padding: 0; }
  .hm-give--receipt .entry-content :is(#give-donation-receipt, .give-table) { border-color: #bbb; }
  .hm-give--receipt .entry-content :is(#give-donation-receipt, .give-table) thead th { background: none; }
  .hm-give--receipt .entry-content :is(.give-btn, button, .give-receipt__download) { display: none !important; }
  .hm-give--receipt iframe { width: 100% !important; }
}

@media (min-width: 700px) {
  .fund { grid-template-columns: 88px minmax(0, 1fr) auto; }
  .fund-media { width: 88px; height: 88px; }
  .fund-btn { grid-column: 3; grid-row: 1; align-self: center; }
  .fund-goal { grid-column: 2 / 4; }
  .dashboard { grid-template-columns: auto minmax(0, 1fr) auto; }
  .dashboard .btn { grid-column: 3; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .form-frame { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ff-photo img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 1100px) {
  .form-frame { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .ff-photo { align-self: stretch; }
  .ff-photo img { height: 100%; aspect-ratio: auto; }
  .gf-head { padding-top: 36px; }
}
@media (min-width: 1280px) { .givewp-frame .give-wrap .give-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================ 11d Content pages (M5): Services (page-services.php, ported
   from C.2's services.html / c.css), migrated block content, the "In this section" row, call row, people rosters,
   Contact (CF7, wrapper-scoped), Live, single posts and the announcement lists. Block content rules stay inside
   .entry-content so GiveWP's and other plugin markup elsewhere is untouched. */

/* Services hero: the photo is a band above the text on phones/tablets, beside it from 1280px (C) */
.hero--services { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero--services .hero-photo { order: -1; overflow: hidden; }
.hero--services .hero-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 35%; }
.hero--services .hero-text { padding: 28px var(--pane-pad) 44px; }
.hero--services .lead { margin-top: 20px; }
.toc { margin-top: 24px; }
.toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.toc a {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--hm-forest);
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 10px) / 0 1px no-repeat;
  transition: background-size var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease);
}
.toc a:hover, .toc a:focus-visible { color: var(--hm-deep); background-size: 100% 1px; }
.toc a[aria-current="page"] { color: var(--hm-ink); background-size: 100% 1px; }
.toc--section { margin-top: 0; }

/* rooms on Services: photo rooms (Prayer halls, Gymnasium) and text bands; the eleven entries as .svc rows */
.room-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.room--photo { display: grid; padding: var(--sec) var(--pane-pad); } /* C: the photo sits inside the page gutter */
.room--photo .room-copy { padding: 28px 0 0; } /* C adds the gutter again here on phones; the copy aligns with the photo instead */
.room--band > .svc { margin-top: 20px; }
.svc .is-plain .svc-row {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 8px 2px;
  border-bottom: 1px solid var(--hm-line); color: var(--hm-ink); font-size: 1.125rem; line-height: 1.3;
}
.svc .is-plain .svc-row { color: var(--hm-muted); } /* not a link: muted, no arrow (critique run 1); 5.48:1 */
.svc .is-plain .ic { color: var(--hm-muted); }
.care .call-row { margin-top: 8px; max-width: 520px; }
.svc--quiet a { font-weight: 400; min-height: 48px; }
.band-cols { display: grid; gap: 28px; margin-top: 24px; }
.band-sub .h3 { margin-bottom: 10px; }
.school-list { margin: 20px 0 0; display: grid; gap: 16px; }
.school-list div { padding-top: 14px; border-top: 1px solid var(--hm-line); }
.school-list dt a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; font-size: 1.125rem; }
.school-list dd { margin: 0; color: var(--hm-ink); font-size: 1.0625rem; max-width: 60ch; }
.care--inset { margin-top: 28px; padding: 24px; gap: 12px; border-radius: var(--hm-radius); }
.care--inset .care-h { font: 400 1.5rem / 1.2 var(--hm-font-heading); }
.care--inset .care-ic { width: 32px; height: 32px; }
.care-qs { list-style: none; margin-top: 8px; display: grid; gap: 2px; max-width: 60ch; }
.care-qs a { display: flex; align-items: center; min-height: 44px; padding: 6px 0; line-height: 1.4; }
.rental { margin-top: 28px; padding: 20px; background: var(--hm-white); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); max-width: 460px; }
.rental-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.rental-table th, .rental-table td { padding: 10px 0; border-bottom: 1px solid var(--hm-line); font-size: 1.0625rem; }
.rental-table th { text-align: left; font-weight: 400; }
.rental-table td { text-align: right; font-weight: 600; color: var(--hm-forest); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.rental-notes { list-style: none; margin-top: 10px; font-size: var(--hm-text-small); color: var(--hm-brass-ink); }
.belong { display: grid; border-top: 1px solid var(--hm-line); }
.belong-block { padding: var(--sec) var(--pane-pad); }
.belong-block + .belong-block { border-top: 1px solid var(--hm-line); }
.belong-block .h3 { margin-top: 14px; }
.belong-block > p:not(.belong-actions) { margin-top: 10px; max-width: 58ch; }
.belong-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.h-ic { width: 32px; height: 32px; color: var(--hm-forest); vertical-align: -4px; margin-right: 12px; }
.tiers { list-style: none; margin-top: 14px; display: grid; gap: 14px; max-width: 60ch; }
.tiers li { padding: 14px 0; border-top: 1px solid var(--hm-line); }
.tiers strong { color: var(--hm-forest); }
.fine { font-size: var(--hm-text-small); color: var(--hm-muted); }
.toc a, .care-qs a { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* under a page's h1: the call row (Funerals, Facility Rental) */
.entry-head .call-row { justify-self: stretch; max-width: 520px; }
.call-row a { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* migrated block content (core blocks only; colour and size presets of the old builders have no CSS here) */
.entry-content :where(.wp-block-buttons) { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 1.25em; }
.entry-content :where(.wp-block-button) { margin: 0; }
.entry-content .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 22px;
  border: 1px solid var(--hm-forest); border-radius: var(--hm-radius); background: var(--hm-forest); color: var(--hm-white);
  font: 600 1rem / 1.25 var(--hm-font-body); text-align: center; text-decoration: none;
  transition: background-color var(--ui-dur) var(--ease), border-color var(--ui-dur) var(--ease);
}
.entry-content .wp-block-button__link:hover { background: var(--hm-deep); border-color: var(--hm-deep); color: var(--hm-white); }
/* the old builders' colour presets (e.g. Facility Rental's vivid-red Donate) carry !important in core's preset classes */
.entry-content .wp-block-button__link:is(.has-background, .has-text-color) { background-color: var(--hm-forest) !important; color: var(--hm-white) !important; }
.entry-content .wp-block-button__link:is(.has-background, .has-text-color):hover { background-color: var(--hm-deep) !important; }
.entry-content .is-style-outline .wp-block-button__link { background: transparent; color: var(--hm-forest); }
.entry-content .wp-block-button__link :is(strong, em, mark) { font: inherit; color: inherit; background: none; }
.entry-content .aligncenter.wp-block-button, .entry-content .wp-block-buttons:has(.aligncenter) { justify-content: flex-start; }
.entry-content :where(.wp-block-file) { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 1em; max-width: var(--hm-measure); }
.entry-content .wp-block-file { font-size: inherit; } /* core sets 0.8em */
.entry-content .wp-block-file > a:first-child { font-weight: 600; }
.entry-content .wp-block-file__button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hm-forest); border-radius: var(--hm-radius);
  background: transparent; color: var(--hm-forest); font-weight: 600; text-decoration: none;
}
.entry-content .wp-block-file__button:hover { background: var(--hm-deep); border-color: var(--hm-deep); color: var(--hm-white); }
.entry-content :where(.wp-block-image, .wp-block-embed) { max-width: 720px; }
.entry-content :where(.wp-block-image img) { height: auto; border-radius: 2px; }
.entry-content :where(.wp-block-embed iframe) { border: 0; border-radius: var(--hm-radius); }
.entry-content :where(.wp-block-quote) { margin: 1.5em 0; padding: 4px 0 4px 20px; }
.entry-content :where(.wp-block-quote p) { font: 400 1.25rem / 1.5 var(--hm-font-heading); }
.entry-content :where(p:lang(ar)) { font-family: var(--hm-font-arabic); font-size: 1.375rem; line-height: 1.8; }
.entry-content :where(pre.wp-block-preformatted) { font: inherit; white-space: pre-wrap; margin: 0 0 0.5em; }
.entry-content :where(.wp-block-columns) { gap: 32px 48px; margin-bottom: 1em; }
.entry-content :where(.has-text-align-center) { text-align: left; } /* the old pages centred headings; the theme reads left-aligned */
.entry-content :where(.wp-block-separator) { border: 0; border-top: 1px solid var(--hm-line); opacity: 1; margin: 2em 0; }
.entry-content :where(a:not([class])) { color: var(--hm-forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content :where(a:not([class]):hover) { color: var(--hm-deep); }

/* About: its two sentences read as the page's lead */
.hm-page--about .entry-content > p:first-child { font: 400 1.25rem / 1.5 var(--hm-font-heading); max-width: 46ch; }

/* people rosters (Board Members, Imam): quiet cards, photo + name + role, from the team-members fields */
.entry-content .people { list-style: none; padding: 0; margin: 0 0 1em; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); column-gap: 32px; }
.entry-content .people--one { grid-template-columns: minmax(0, 420px); }
.person { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hm-line); }
.person + .person { margin-top: 0; }
.person-photo { width: 96px; aspect-ratio: 1; margin: 0; border-radius: var(--hm-radius); overflow: hidden; background: var(--hm-sage); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.person-photo--none { display: grid; place-items: center; color: var(--hm-forest); }
.entry-content .person-name { margin: 0; max-width: none; font: 600 1.1875rem / 1.3 var(--hm-font-body); letter-spacing: 0; }
.person-role { margin: 2px 0 0; font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-brass-ink); }
.person-mail { margin: 2px 0 0; font-size: var(--hm-text-small); overflow-wrap: anywhere; }
.person-mail a { display: inline-flex; align-items: center; min-height: 44px; }

/* Contact: Contact Form 7, wrapper-scoped (CF7's own stylesheet loads on this page only) */
.entry-content .wpcf7 { max-width: 560px; margin: 0 0 1.5em; }
.wpcf7 form { display: grid; gap: 18px; }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: grid; gap: 6px; font-weight: 600; }
.wpcf7-form-control-wrap { display: block; }
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea) {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--hm-control-border); border-radius: var(--hm-radius);
  background: var(--hm-white); color: var(--hm-ink); font: 400 1.0625rem / 1.4 var(--hm-font-body);
}
.wpcf7 textarea { min-height: 168px; resize: vertical; }
.wpcf7 :is(input, textarea)[aria-invalid="true"] { border-color: var(--hm-error); }
.wpcf7 .wpcf7-submit {
  min-height: 48px; padding: 10px 26px; border: 1px solid var(--hm-forest); border-radius: var(--hm-radius);
  background: var(--hm-forest); color: var(--hm-white); font: 600 1rem / 1.2 var(--hm-font-body); cursor: pointer;
}
.wpcf7 .wpcf7-submit:hover { background: var(--hm-deep); border-color: var(--hm-deep); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 12px; }
.wpcf7-not-valid-tip { margin-top: 4px; color: var(--hm-error); font-size: var(--hm-text-small); font-weight: 400; }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: 12px 14px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); background: var(--hm-white); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: var(--hm-error); }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--hm-forest); }
.contact-addr { margin: 0 0 12px; font-size: 1.25rem; }
.contact-map .btn { text-decoration: none; }

/* Live: two YouTube embeds behind a poster; nothing from YouTube loads until "Load video" */
.live-sec { padding: 0 var(--pane-pad) var(--sec); }
.live-sec + .live-sec { padding-top: var(--sec); border-top: 1px solid var(--hm-line); }
.live-sec .h2 { margin-bottom: 16px; }
.yt { position: relative; display: grid; place-items: center; max-width: 960px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--hm-radius); background: var(--hm-deep); }
.yt > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.45; }
.yt-load { position: relative; z-index: 1; }
.yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-alt { margin-top: 8px; }
.yt-alt a { display: inline-flex; align-items: center; min-height: 44px; }
/* the same poster for YouTube embeds in content (Saturday School, posts; decision 53): the video's own thumbnail */
.yt--thumb > img { opacity: 0.7; }
.entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper:has(> .yt)::before { content: none; display: none; } /* core's 16:9 padding: .yt has its own ratio */
.wp-block-embed .yt { max-width: none; }

/* single announcement: the text and the flyer side by side from 1100px, text first on phones */
.h1-post { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.12; max-width: 24ch; }
.post-body { display: grid; gap: 32px; padding: 0 var(--pane-pad) var(--sec); }
.post-body .entry-content { padding: 0; }
.post-flyer-full { align-self: start; margin: 0; padding: 12px; background: var(--hm-sage); border-radius: var(--hm-radius); }
.post-flyer-full a { display: block; }
.post-flyer-full img { display: block; width: 100%; height: auto; margin-inline: auto; }
.post-foot { display: grid; gap: 24px; padding: 0 var(--pane-pad) var(--sec); }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.post-tags a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hm-line); border-radius: var(--hm-radius);
  background: var(--hm-white); color: var(--hm-forest); font-weight: 600; text-decoration: none;
}
.post-tags a:hover { border-color: var(--hm-forest); }
.post-nav { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--hm-line); }
.post-nav-link { display: grid; gap: 2px; min-height: 44px; padding: 6px 0; color: var(--hm-ink); text-decoration: none; }
.pn-dir { font-size: var(--hm-text-small); font-weight: 600; color: var(--hm-brass-ink); }
.pn-title { font-weight: 600; color: var(--hm-forest); }
.post-nav-link:hover .pn-title { text-decoration: underline; }

/* announcement lists outside home: the News page (309) and the posts page / archives */
.news-list--page, .news-list--archive { margin: 0 var(--pane-pad); }
.news-list--archive { padding-bottom: 8px; }
.entry > .news-more { margin: 24px var(--pane-pad) 0; padding-bottom: var(--sec); }

/* long-form (Funerals, M5b): the text in a generous measure; "On this page" collapsed above it on phones, sticky
   beside it from 1100px; question headings are anchors; print without the shell, the list or the link styling */
.entry--long .entry-head .call-row { margin-top: 4px; }
.long { display: grid; gap: 8px; padding: 0 var(--pane-pad) var(--sec); }
.long .entry-content { padding: 0; font-size: 1.1875rem; line-height: 1.7; }
.long .entry-content > :where(p, ul, ol, h2) { max-width: 68ch; }
.long-lead p { margin: 0; max-width: 40ch; font: 400 1.375rem / 1.5 var(--hm-font-heading); color: var(--hm-ink); }
.long-foot { display: grid; gap: 24px; justify-items: start; padding: 0 var(--pane-pad) var(--sec); }
.long-foot .call-row { justify-self: stretch; max-width: 520px; }
.long-back {
  position: fixed; right: 16px; bottom: 16px; z-index: 5; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px;
  border: 1px solid var(--hm-forest); border-radius: var(--hm-radius); background: var(--hm-white); color: var(--hm-forest);
  font-weight: 600; text-decoration: none; box-shadow: 0 2px 10px rgb(20 60 43 / 0.16);
}
.long-back[hidden] { display: none; }
.long-back:hover { color: var(--hm-forest); }
@media (min-width: 1100px) { /* beside the rail, never over its buttons (critique run 2) */
  .long-back { right: calc(var(--rail-w) + 16px); }
  .rail-collapsed .long-back { right: calc(var(--rail-strip-w) + 16px); }
}
.long .entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.long-back .ui { rotate: 180deg; }
.long .entry-content h2 {
  margin: 2.2em 0 0.6em; padding-top: 0.9em; border-top: 1px solid var(--hm-line);
  font: 400 clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem) / 1.25 var(--hm-font-heading); letter-spacing: -0.01em;
  scroll-margin-top: calc(var(--bar-h) + 16px);
}
.long-toc { margin-bottom: 16px; }
.long-toc-box { border: 1px solid var(--hm-line); border-radius: var(--hm-radius); background: var(--hm-white); }
.long-toc-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 16px;
  font-weight: 600; color: var(--hm-ink); cursor: pointer; list-style: none;
}
.long-toc-sum::-webkit-details-marker { display: none; }
.long-toc-n { margin-left: auto; font-weight: 400; font-size: var(--hm-text-small); color: var(--hm-muted); } /* "14 questions" (decision 52) */
/* the first hours after a death: the one question set in a sage panel (decision 52) */
.long-care { margin-top: 2.2em; padding: 24px; border-radius: var(--hm-radius); background: var(--hm-sage); max-width: calc(68ch + 48px); }
.long-care > :where(p, ul, ol, h2) { max-width: 68ch; }
.long .entry-content .long-care > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.long-care > :last-child { margin-bottom: 0; }
@media (max-width: 699px) { .long-care { padding: 20px 16px; } }
.long-toc-sum .ui { color: var(--hm-forest); transition: rotate var(--hm-dur-fast) var(--hm-ease-out); }
.long-toc-box[open] .long-toc-sum .ui { rotate: 180deg; }
.long-toc ol { list-style: none; margin: 0; padding: 0 16px 12px; }
.long-toc :focus-visible { outline-offset: -3px; }
.long-toc li { border-top: 1px solid var(--hm-line); }
.long-toc a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--hm-forest); line-height: 1.35; text-decoration: none; }
.long-toc a:hover { color: var(--hm-deep); text-decoration: underline; }
.long-toc a.is-here { color: var(--hm-ink); font-weight: 600; }
/* two columns only where the pane leaves the text a full measure beside the rail (>= 1280px; at 1100-1279 the list
   left the text ~35ch, critique run 1): below that the list stays collapsed above the text, as on phones */
@media (min-width: 1280px) {
  .long-back { display: none !important; }
  .long.has-toc { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); column-gap: 48px; align-items: start; }
  .long.has-toc .long-text { grid-row: 1; grid-column: 1; }
  .long-toc { grid-row: 1; grid-column: 2; position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; margin: 0; }
  .long-toc-box { border: 0; border-left: 1px solid var(--hair-brass); border-radius: 0; background: none; }
  .long-toc-sum { min-height: 0; padding: 0 0 8px 16px; font-size: var(--hm-text-small); color: var(--hm-brass-ink); cursor: default; pointer-events: none; }
  .long-toc-sum .ui, .long-toc-n { display: none; }
  .long-toc ol { padding: 0 0 0 16px; }
  .long-toc li { border: 0; }
  .long-toc a { min-height: 36px; padding: 5px 0; font-size: 0.9375rem; }
  .long .entry-content h2 { scroll-margin-top: 24px; }
}
@media (min-width: 1280px) and (max-height: 800px) {
  .long-toc a { min-height: 30px; padding: 3px 0; font-size: 0.875rem; } /* all 14 questions fit a 720px laptop window */
}
@media (min-width: 1280px) and (max-height: 700px) {
  .long-toc a { min-height: 26px; padding: 2px 0; font-size: 0.8125rem; line-height: 1.3; } /* 1366x657 (a 1366x768 laptop) */
  .long-toc-sum { padding-bottom: 4px; }
}
@media (min-width: 1100px) { .long .entry-content h2 { scroll-margin-top: 24px; } }
@media print {
  .entry--long .entry-head { padding: 0 0 8pt; }
  .entry--long .h1-page { font-size: 22pt; color: #000; }
  .entry--long .toc, .long-toc, .long-foot, .long-back { display: none !important; }
  .long-lead p { font-size: 13pt; color: #000; }
  .entry--long .call-row { border: 0; }
  .entry--long .call-row a { min-height: 0; padding: 0; color: #000; font-size: 11pt; }
  .entry--long .call-row svg { display: none; }
  .long { display: block; padding: 0; }
  .long .entry-content { font-size: 11pt; line-height: 1.45; color: #000; }
  .long .entry-content > * { max-width: none; }
  .long .entry-content h2 { margin: 14pt 0 4pt; padding-top: 6pt; font-size: 14pt; color: #000; break-after: avoid; border-top-color: #bbb; }
  .long-care { margin: 0; padding: 0; background: none; }
  .long .entry-content p, .long .entry-content li { orphans: 3; widows: 3; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  /* the facade is a band above the text until it can sit beside it, so the h1 and contents row stay on the first screen */
  .hero--services .hero-photo img { aspect-ratio: 21 / 9; max-height: 340px; }
}
@media (min-width: 700px) {
  .band-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
  .svc--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .post-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .post-nav .is-older { grid-column: 2; text-align: right; }
  .person { grid-template-columns: 112px minmax(0, 1fr); }
  .person-photo { width: 112px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .room--photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .room--photo .room-copy { padding: 40px 0 40px var(--pane-pad); }
  .room--flip .room-copy { padding: 40px var(--pane-pad) 40px 0; }
  .room--flip .room-photo { order: 2; }
  .room--photo .room-photo img { aspect-ratio: 4 / 3; }
}
@media (min-width: 1100px) {
  .hero--services .hero-text { padding: 48px var(--pane-pad) 56px; }
  .room--photo { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
  .room--photo .room-copy { padding: var(--sec) var(--pane-pad); }
  .room--flip .room-photo { order: 2; }
  .room--photo .room-photo img { aspect-ratio: 4 / 3; } /* level with the copy, never a tall portrait crop (critique run 1) */
  .room--band { padding-block: var(--sec); }
  .belong { grid-template-columns: 1fr 1fr; }
  .belong-block + .belong-block { border-top: 0; border-left: 1px solid var(--hm-line); }
  .post-body.has-flyer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; column-gap: 48px; }
  .post-body.has-flyer .post-flyer-full { position: sticky; top: 24px; }
}
@media (min-width: 1280px) {
  .hero--services { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: min(calc(100vh - 77px), 760px); }
  .hero--services .hero-photo { order: 2; }
  .hero--services .hero-photo img { height: 100%; aspect-ratio: auto; }
  .hero--services .hero-text { align-self: end; padding: 56px 40px 64px var(--pane-pad); }
}

/* ============================================================ 12 Desktop shell (≥ 1100px) */
@media (min-width: 1100px) {
  :root { --pane-pad: clamp(32px, 4vw, 64px); --sec: 64px; }
  html { scroll-padding-top: 24px; }
  .h1-page { font-size: 4rem; }
  .h2 { font-size: 2.5rem; line-height: 1.15; }

  /* the rail is the right-hand column (precedence to the right); the pane reads left to right beside it */
  .frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
  }
  .pane, .footer { grid-column: 1; }
  .footer { padding-top: 64px; }
  .entry-head { padding: 48px var(--pane-pad) 32px; }
  .bar { display: none; }

  .masthead {
    grid-column: 1; grid-row: 1;
    background: var(--hm-ivory); color: var(--hm-ink);
    min-height: 76px; padding: 0 var(--pane-pad);
    border-bottom: 1px solid var(--hm-line);
    gap: 20px;
  }
  .masthead :focus-visible { outline-color: var(--hm-forest); }
  .head-donate, .masthead .menu-btn { display: none; }
  .brand { margin-right: 0; }
  .topnav { display: block; flex: 1; min-width: 0; }
  .topnav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
  .topnav-list > li { position: relative; }
  .topnav-list > .nav-donate { margin-left: auto; }
  .topnav .nav-row { display: flex; align-items: center; }
  .topnav .nav-top {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
    color: var(--hm-forest); font-weight: 600; font-size: 1rem; letter-spacing: 0.01em; white-space: nowrap;
  }
  .topnav .has-sub .nav-top { padding-right: 0; }
  .topnav .nav-top:hover, .topnav .nav-top:focus-visible { color: var(--hm-deep); background-size: 100% 1px; }
  .topnav .nav-top[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hm-brass-ink); text-decoration-thickness: 2px; text-underline-offset: 8px; }
  .topnav .sub-toggle { width: 44px; }
  .topnav .sub-toggle:hover { background: var(--hm-sage); }
  .topnav .nav-donate .nav-top {
    padding: 0 16px 0 18px; border-radius: var(--hm-radius) 0 0 var(--hm-radius);
    background: var(--hm-forest); color: var(--hm-white); background-image: none;
  }
  .topnav .nav-donate .sub-toggle {
    border-radius: 0 var(--hm-radius) var(--hm-radius) 0;
    background: var(--hm-forest); color: var(--hm-white); box-shadow: inset 1px 0 0 rgb(255 255 255 / 0.28);
  }
  .topnav .nav-donate .nav-top:hover, .topnav .nav-donate .sub-toggle:hover { background: var(--hm-deep); color: var(--hm-white); }
  .topnav .nav-donate .nav-top[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hm-ivory); text-underline-offset: 5px; }
  .topnav .sub {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 240px; padding: 8px; list-style: none;
    background: var(--hm-white); border: 1px solid var(--hm-forest); border-radius: var(--hm-radius);
  }
  .topnav .nav-donate .sub { left: auto; right: 0; }
  .topnav .sub a {
    display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px;
    color: var(--hm-ink); text-decoration: none;
  }
  .topnav .sub a:hover { background: var(--hm-sage); color: var(--hm-deep); }
  .topnav .sub .nav-account { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hm-line); }
  .topnav .sub a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--hm-brass-ink); }

  /* The rail never scrolls inside itself; it sheds content by window height (below). Its buttons are
     .rail-actions, a sibling after <main> in the source, pinned into the rail's foot here. */
  .rail, .is-compact .rail {
    grid-column: 2; grid-row: 1 / span 3;
    position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh;
    display: flex; flex-direction: column;
    padding: 0 28px var(--actions-h);
    border-top: 0; border-left: 1px solid var(--hm-brass);
    overflow: hidden;
  }
  .rail-head { padding: 22px 0 14px; }
  .rail-body { display: flex; flex-direction: column; flex: 1; min-height: 0; justify-content: space-between; padding-bottom: 16px; }
  .is-unavailable .rail-body { justify-content: center; }
  .rail-foot { display: none; }
  .rail-actions {
    grid-column: 2; grid-row: 1 / span 3;
    position: sticky; bottom: 0; align-self: end; z-index: 2;
    display: flex; gap: 10px; height: var(--actions-h); padding: 14px 28px 20px;
    background: var(--hm-deep); border-top: 1px solid var(--hair-dark); border-left: 1px solid var(--hm-brass);
  }
  .rail-actions .btn { flex: 1 1 auto; padding-inline: 14px; white-space: nowrap; }
  /* row padding and the next block grow with window height (clamped); leftover height is shared between blocks */
  .rail .today-table tbody th, .rail .today-table td { padding-block: clamp(2px, (100vh - 700px) / 20, 16px); }
  .rail .next { padding-block: clamp(10px, (100vh - 640px) / 12, 34px); }

  /* collapsible rail (design-decisions 10): a 128px strip with the next prayer, its iqamah and the countdown */
  .rail-toggle {
    display: grid; place-items: center; flex: none; width: 48px; min-height: 48px; padding: 0;
    border: 1px solid rgb(247 244 236 / 0.7); border-radius: var(--hm-radius);
    background: transparent; color: var(--hm-ivory); cursor: pointer;
    transition: background-color var(--ui-dur) var(--ease), color var(--ui-dur) var(--ease);
  }
  .rail-toggle:hover { background: var(--hm-ivory); color: var(--hm-deep); }
  .rail-toggle .ui { transition: rotate var(--ui-dur) var(--ease); }
  .rail-collapsed .rail-toggle .ui { rotate: 180deg; }
  .rail-collapsed .frame { grid-template-columns: minmax(0, 1fr) var(--rail-strip-w); }
  .rail-collapsed .rail { padding-inline: 12px; }
  .rail-collapsed .rail-head, .rail-collapsed .rail .today-wrap, .rail-collapsed .rail .notice,
  .rail-collapsed .rail .jumuah, .rail-collapsed .rail .rail-note { display: none; }
  .rail-collapsed .rail-body { justify-content: flex-start; padding-top: 20px; }
  .rail-collapsed .rail .next { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px; padding-block: 16px; text-align: center; }
  .rail-collapsed .rail .next-what, .rail-collapsed .rail .next-at { justify-items: center; text-align: center; }
  .rail-collapsed .rail .next-name { font-size: 1.5rem; white-space: normal; }
  .rail-collapsed .rail .next-ar { text-align: center; }
  .rail-collapsed .rail .next-time { font-size: 1.75rem; }
  .rail-collapsed .rail .next-time .ap { margin-left: 2px; }
  .rail-collapsed .rail .next-in { min-width: 0; white-space: normal; text-align: center; }
  .rail-collapsed .rail-fallback .fb-text, .rail-collapsed .rail-fallback .fb-links { display: none; }
  .rail-collapsed .rail-fallback { margin: 0; padding-top: 0; border: 0; }
  .rail-collapsed .rail-fallback .fb-title { font-size: 1.0625rem; text-align: center; }
  .rail-collapsed .rail-actions { padding-inline: 12px; justify-content: center; }
  .rail-collapsed .rail-actions .btn { display: none; }
  .rail-collapsed .rail-toggle { width: 100%; }

  /* logged-in editors: keep the sticky rail under the admin bar */
  .admin-bar .rail { top: 32px; height: calc(100dvh - 32px); }

  /* never loses a prayer (design-decisions 12): the height tiers above assume default text size. When enlarged
     text or text spacing still overflows the rail, theme.js sheds the secondary blocks (.is-shed), and only then
     lets the rail scroll inside (.is-scroll). The prayer rows are never dropped for overflow. */
  .rail.is-shed .is-sunrise, .rail.is-shed .notice, .rail.is-shed .rail-note, .rail.is-shed .hijri-en { display: none; }
  .rail.is-scroll {
    overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--hm-brass) transparent;
  }
  .rail.is-scroll .rail-body { justify-content: flex-start; flex: none; }
}

/* masthead by window width (the rail takes 372–420px). Logo first at every width:
   ≥ 1560 full logo → nav → Donate · 1366–1559 small logo, tighter 15px nav · 1100–1365 logo, Donate, Menu (drawer) */
@media (min-width: 1366px) and (max-width: 1559px) {
  .masthead { gap: 12px; }
  .masthead .brand img { width: 212px; height: 44px; }
  .topnav .nav-top { padding-inline: 6px; font-size: 0.9375rem; }
  .topnav .has-sub .nav-top { padding-right: 0; }
  .topnav .nav-donate .nav-top { padding: 0 12px 0 14px; }
}
@media (min-width: 1100px) and (max-width: 1365px) {
  .topnav { display: none; }
  .brand { margin-right: auto; }
  .masthead .head-donate { display: inline-flex; background: var(--hm-forest); color: var(--hm-white); }
  .masthead .head-donate:hover { background: var(--hm-deep); color: var(--hm-white); }
  .masthead .menu-btn { display: inline-grid; color: var(--hm-forest); }
  .masthead .menu-btn:hover { background: var(--hm-sage); }
}

/* desktop rail: the name column takes half, so "Maghrib المغرب" stays on one line at default text size
   down to a 372px rail (M3 critique; the times still fit their 25% at every rail width) */
@media (min-width: 1100px) {
  .rail .today-table .c-name { width: 50%; }
  .rail .today-table .c-time { width: 25%; }
}

/* desktop rail by window height (design-decisions 3): never scrolls inside, never leaves a hole
   > 760 the whole day (tighter at ≤ 940) · 561–760 five rows, without Sunrise/notice/disclaimer · ≤ 560 next + Jumuah + buttons */
@media (min-width: 1100px) and (max-height: 940px) {
  :root { --actions-h: 72px; }
  .rail-actions { padding-block: 10px 14px; }
  .rail-head { padding: 14px 0 10px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .rail-hijri { margin-top: 0; column-gap: 10px; }
  .rail-hijri [lang="ar"] { font-size: 1.125rem; line-height: 1.5; }
  .rail .next-time { font-size: 2.875rem; }
  .rail .next-ar { margin-top: 0; }
  .rail .today-table thead th { padding: 6px 0 4px; }
  .rail .notice { margin-top: 6px; padding: 6px 10px; }
  .rail .jumuah { margin-top: 6px; }
  .rail .rail-note { margin-top: 6px; font-size: 0.875rem; }
}
@media (min-width: 1100px) and (max-height: 760px) {
  .rail .is-sunrise, .rail .notice, .rail .rail-note:not(.rail-note--stale) { display: none; }
  .rail .today-table tbody th, .rail .today-table td { padding-block: clamp(1px, (100vh - 560px) / 12, 12px); }
  .rail .pn-ar { line-height: 1.3; }
  .rail .next-name { font-size: 1.75rem; }
  .rail .next-time { font-size: 2.5rem; }
}
@media (min-width: 1100px) and (max-height: 560px) {
  .rail .today-wrap { display: none; }
  .rail-body { justify-content: center; gap: 20px; }
  .rail .jumuah { margin-top: 0; }
  .rail .next-name { font-size: 2rem; }
  .rail .next-time { font-size: 3.25rem; }
}

/* logged-in editors on phones/tablets: the bars sit under the admin bar where it is fixed */
@media (min-width: 601px) and (max-width: 782px) { .admin-bar .bar { top: 46px; } }
@media (min-width: 783px) and (max-width: 1099px) { .admin-bar .bar { top: 32px; } }

/* ============================================================ 13 Reduced motion, print */
@media (prefers-reduced-motion: reduce) {
  :root { --hm-dur-fast: 0ms; --hm-dur-base: 0ms; --hm-dur-slow: 0ms; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; transition-delay: 0ms !important; animation-duration: 0ms !important; }
  .bar > * { transform: none; }
}
@media print {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } /* sections not yet scrolled into view still print */
  html, body { background: #fff; color: #000; }
  .skip, .masthead, .rail, .rail-actions, .bar, .drawer, .footer, .grecaptcha-badge { display: none !important; }
  body > :not(.frame, svg, script, style) { display: none !important; } /* plugin iframes and badges appended after the page */
  .frame { display: block; }
}