/* Presbyterian Church of Minyarah — minyarah.church
   ==================================================================
   The palette is sampled from the church's own logo, not chosen: the cross
   measures #802E34 and the artwork carries no second colour. So the site is
   crimson, warm paper and graphite, with one quiet brass note for ornament.

   The design problem here is that the church has no photographs. A church site
   usually carries itself on pictures; this one has to carry itself on
   typography, on space, and on its own emblem used architecturally — large,
   faint and structural rather than decorative. Everything below follows from
   that: a tall quiet hero, generous serif display sizes, hairline rules, and
   the cross as an ornament between sections.

   Direction: logical properties throughout (inline-start/end, margin-inline),
   so the Arabic side is this stylesheet flipped by dir="rtl", not a second set
   of rules. */

/* ------------------------------------------------------------------ tokens */
:root {
  --brand: #802e34;
  --brand-deep: #5c1f24;
  --brand-dark: #41161a;
  --brand-ink: #fffaf7;
  --brand-soft: #f7edeb;
  --brand-wash: #fcf6f4;
  --brand-line: #e7d3d0;

  --brass: #a8763c;
  --brass-soft: #f0e4d2;

  --bg: #fcfaf8;
  --panel: #ffffff;
  --panel-2: #f6f1ed;
  --ink: #1a1516;
  --ink-2: #574a4b;
  --ink-3: #8c7d7d;
  --line: #e8dfdb;
  --line-soft: #f1eae6;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  --shadow-xs: 0 1px 2px rgba(26, 21, 22, .04);
  --shadow: 0 1px 2px rgba(26, 21, 22, .04), 0 10px 30px -18px rgba(26, 21, 22, .3);
  --shadow-lift: 0 2px 6px rgba(26, 21, 22, .06), 0 26px 50px -28px rgba(26, 21, 22, .4);

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --serif-ar: 'Amiri', 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --sans-ar: 'IBM Plex Sans Arabic', system-ui, sans-serif;

  --wrap: 1180px;
  --gap: clamp(1rem, 2.5vw, 2rem);
  --sec-y: clamp(3rem, 7vw, 6rem);
}

/* The dark palette is kept but NOT in use: every page sets data-theme="light"
   so the church looks the same to everyone whatever their phone is set to.
   Drop that attribute in src/site/layout.js to let the site follow the phone —
   the emblem already has a dark-mode file waiting in src/lib/mark.js. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #d2727a;
    --brand-deep: #e08b92;
    --brand-dark: #d2727a;
    --brand-ink: #15100f;
    --brand-soft: #241618;
    --brand-wash: #1b1314;
    --brand-line: #3a2225;
    --brass: #d4a96a;
    --brass-soft: #2a2119;
    --bg: #141011;
    --panel: #1c1718;
    --panel-2: #231d1e;
    --ink: #f3ece9;
    --ink-2: #c5b7b5;
    --ink-3: #8f8180;
    --line: #2e2627;
    --line-soft: #241e1f;
  }
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

/* An author `display` rule silently beats the `hidden` attribute, which is how
   the mobile menu ended up permanently open on every phone. Stated once here
   so no later rule can bring it back. */
[hidden] { display: none !important; }
picture { display: contents; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.lang-ar { font-family: var(--sans-ar); line-height: 1.95; }
main { flex: 1 0 auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
  color: var(--ink);
  text-wrap: balance;
}
body.lang-ar h1, body.lang-ar h2, body.lang-ar h3 {
  font-family: var(--serif-ar); font-weight: 700; letter-spacing: 0; line-height: 1.45;
}

h1 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.7rem); }
h3 { font-size: 1.26rem; }

p { margin: 0 0 1em; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap.narrow { width: min(100% - 2.5rem, 44rem); }
.center { text-align: center; }
.muted { color: var(--ink-3); }
.empty { color: var(--ink-3); font-style: italic; }

.skip { position: absolute; inset-inline-start: -999px; top: 0; z-index: 100; background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem; }
.skip:focus { inset-inline-start: 0; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

/* ------------------------------------------------------------------ ornament */
/* A small tau between sections. Drawn in CSS from the emblem's own geometry
   rather than shipped as an image, so it never loads late or blurs. */
.ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-block: clamp(1.5rem, 4vw, 2.5rem); }
.ornament::before, .ornament::after { content: ''; height: 1px; width: min(28%, 11rem); background: linear-gradient(90deg, transparent, var(--brand-line)); }
.ornament::after { background: linear-gradient(90deg, var(--brand-line), transparent); }
.ornament span { position: relative; width: 16px; height: 18px; flex: none; }
.ornament span::before { content: ''; position: absolute; inset-inline: 0; top: 4px; height: 3px; background: var(--brand); opacity: .55; }
.ornament span::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); top: 4px; width: 3px; height: 14px; background: var(--brand); opacity: .55; }

/* ------------------------------------------------------------------ lockup */
.lockup { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: inherit; }
.lockup__mark { width: auto; height: 2.7rem; }
.lockup__text { display: flex; flex-direction: column; min-width: 0; }
.lockup__name { font-family: var(--serif); font-size: 1.08rem; line-height: 1.2; color: var(--ink); text-wrap: balance; }
body.lang-ar .lockup__name { font-family: var(--serif-ar); font-weight: 700; font-size: 1.18rem; }
.lockup__sub { font-size: .76rem; color: var(--ink-3); line-height: 1.3; margin-top: .2rem; }
.lockup.sm .lockup__mark { height: 2.25rem; }
.lockup.sm .lockup__name { font-size: .97rem; }
.lockup.md .lockup__mark { height: 3.6rem; }
.lockup.md .lockup__name { font-size: 1.25rem; }

/* ------------------------------------------------------------------ header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.head-row { display: flex; align-items: center; gap: 1rem; min-height: 4.5rem; }
.nav { display: none; margin-inline-start: auto; gap: .1rem; flex-wrap: wrap; }
.nav a {
  position: relative; color: var(--ink-2); text-decoration: none;
  font-size: .9rem; padding: .5rem .7rem; border-radius: var(--radius-sm);
  transition: color .15s ease;
}
.nav a::after {
  content: ''; position: absolute; inset-inline: .7rem; bottom: .25rem; height: 1.5px;
  background: var(--brand); transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.nav a:hover { color: var(--brand); }
.nav a:hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav a[aria-current] { color: var(--brand); }

.head-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.nav + .head-tools { margin-inline-start: .75rem; }

.langsw {
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
  padding: .34rem .85rem; font-size: .84rem; text-decoration: none; color: var(--ink-2);
  white-space: nowrap; transition: border-color .15s ease, color .15s ease;
}
.langsw:hover { border-color: var(--brand); color: var(--brand); }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  /* The browser's own stylesheet sets `align-items: center` on <button>, which
     beats the flex default of `stretch`. The three bars carry no width of their
     own, so they collapsed to nothing and the button rendered empty — a blank
     box that still opened the menu if you happened to tap it. Both the
     alignment and an explicit width, so neither alone has to hold. */
  align-items: stretch;
  width: 2.7rem; height: 2.5rem; padding: 0 .6rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer;
}
.burger span { display: block; width: 100%; height: 2px; border-radius: 1px; background: var(--ink); transition: transform .2s, opacity .2s; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.mnav { display: grid; border-top: 1px solid var(--line-soft); background: var(--panel); padding: .5rem 1.25rem 1.1rem; }
.mnav a { padding: .8rem .2rem; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); font-size: 1.05rem; font-family: var(--serif); }
body.lang-ar .mnav a { font-family: var(--serif-ar); }
.mnav a:last-child { border-bottom: 0; }
.mnav a[aria-current] { color: var(--brand); }
.mnav__lang { color: var(--brand) !important; }

@media (min-width: 64rem) {
  .nav { display: flex; }
  .burger { display: none; }
  .mnav { display: none !important; }
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.6rem; border-radius: 999px;
  font: inherit; font-size: .94rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease, color .16s ease;
}
.btn.sm { padding: .5rem 1.1rem; font-size: .84rem; }
.btn.full { width: 100%; }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow); }
.btn.primary:hover { background: var(--brand-deep); color: var(--brand-ink); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn.ghost:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.btn.onbrand { background: transparent; border-color: color-mix(in srgb, var(--brand-ink) 45%, transparent); color: var(--brand-ink); }
.btn.onbrand:hover { background: var(--brand-ink); color: var(--brand); border-color: var(--brand-ink); }

.linky { background: none; border: 0; padding: 0; font: inherit; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.linky.danger { color: #b3261e; }

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--brand-wash) 0%, var(--bg) 78%);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3rem, 6vw, 4.5rem);
  text-align: center;
}
/* This was the emblem again, set enormous and faint behind the hero. On a real
   screen it did not read as architecture: the cross's solid crossbar landed as
   a pale horizontal smear, struck through the headline at one height and
   clipped by the band below at another. A shape that large is either legible or
   it is a smudge, and there is no size at which it was neither.
   What the hero actually needed was depth, not an image — so: a soft wash that
   lifts the centre and lets the type carry the page. */
.hero::before {
  content: ''; position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(60% 70% at 50% 34%, color-mix(in srgb, var(--brand) 7%, transparent), transparent 70%);
}
.hero.has-img { background: var(--brand-dark); }
.hero.has-img::before { display: none; }
.hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: saturate(.7); }
.hero.has-img h1, .hero.has-img .hero__sub, .hero.has-img .hero__est { color: #fff; }
.hero.has-img .hero__mark { filter: brightness(0) invert(1); }
.hero__inner { position: relative; }
.hero__mark { height: clamp(4.5rem, 10vw, 6.5rem); width: auto; margin-inline: auto; margin-bottom: 1.5rem; }
.hero__est {
  font-size: .76rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 1rem; font-weight: 600;
}
body.lang-ar .hero__est { letter-spacing: .08em; font-size: .9rem; }
.hero h1 { margin-bottom: .3em; }
.hero__sub { color: var(--ink-2); font-size: clamp(1.02rem, .9rem + .6vw, 1.3rem); max-width: 42rem; margin-inline: auto; }
.hero__cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2.25rem; }

/* ------------------------------------------------------------------ facts */
.facts { border-block: 1px solid var(--line); background: var(--panel); }
.facts__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.fact-item { padding: clamp(1.5rem, 4vw, 2.5rem) 1rem; text-align: center; border-inline-start: 1px solid var(--line-soft); }
.fact-item:first-child { border-inline-start: 0; }
.fact-item b {
  display: block; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1; color: var(--brand);
  font-variant-numeric: lining-nums;
}
body.lang-ar .fact-item b { font-family: var(--serif-ar); font-weight: 700; }
.fact-item span { display: block; margin-top: .6rem; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
body.lang-ar .fact-item span { letter-spacing: 0; text-transform: none; font-size: .92rem; }
@media (max-width: 36rem) {
  .facts__row { grid-template-columns: 1fr; }
  .fact-item { border-inline-start: 0; border-top: 1px solid var(--line-soft); padding-block: 1.4rem; }
  .fact-item:first-child { border-top: 0; }
}

/* ------------------------------------------------------------------ verse */
.verse { background: var(--brand); color: var(--brand-ink); padding-block: clamp(2.5rem, 6vw, 4.5rem); text-align: center; position: relative; overflow: hidden; }
.verse blockquote { margin: 0; font-family: var(--serif); font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem); line-height: 1.45; max-width: 44rem; margin-inline: auto; color: var(--brand-ink); }
body.lang-ar .verse blockquote { font-family: var(--serif-ar); line-height: 1.75; }
.verse cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
body.lang-ar .verse cite { letter-spacing: 0; text-transform: none; font-size: .95rem; }

/* ------------------------------------------------------------------ sections */
.sec { padding-block: var(--sec-y); }
.sec-welcome { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.sec-times, .sec-gallery, .sec-past { background: var(--panel-2); }
.sec-ministries { background: var(--brand-wash); }

.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: .74rem; color: var(--brand); margin: 0 0 .7rem; font-weight: 600; }
body.lang-ar .eyebrow { letter-spacing: .05em; font-size: .88rem; }
.sec-title { margin: 0; }
.sec-intro { margin: .8rem 0 0; color: var(--ink-2); max-width: 44rem; font-size: 1.05rem; }

/* ------------------------------------------------------------------ welcome */
.welcome-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 54rem) { .welcome-grid { grid-template-columns: 1fr; } }

.pullquote {
  position: relative; padding: clamp(1.75rem, 4vw, 2.5rem);
  background: var(--panel); border: 1px solid var(--brand-line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pullquote::before {
  content: '';
  position: absolute; inset-block-start: 0; inset-inline-start: clamp(1.75rem, 4vw, 2.5rem);
  width: 2.5rem; height: 3px; background: var(--brand); transform: translateY(-1.5px);
}
.pullquote p { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .8vw, 1.5rem); line-height: 1.45; color: var(--ink); margin: 0; }
body.lang-ar .pullquote p { font-family: var(--serif-ar); line-height: 1.8; }
.pullquote cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
body.lang-ar .pullquote cite { letter-spacing: 0; text-transform: none; font-size: .92rem; }

/* ------------------------------------------------------------------ prose */
.prose { color: var(--ink-2); }
.prose.lead { font-size: 1.1rem; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 1.9em; color: var(--ink); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.prose h3 { margin-top: 1.6em; color: var(--ink); }
.prose ul { padding-inline-start: 1.3rem; }
.prose li { margin-bottom: .4em; }
.prose strong { color: var(--ink); }
.prose blockquote {
  margin: 1.6em 0; padding-inline-start: 1.25rem;
  border-inline-start: 3px solid var(--brand); color: var(--ink);
  font-family: var(--serif); font-size: 1.2rem; line-height: 1.5;
}
body.lang-ar .prose blockquote { font-family: var(--serif-ar); line-height: 1.8; }

.callout { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-top: 1.75rem; }
.backlink { margin-top: 2.75rem; }
.ownpage { margin-top: 1.75rem; }
.meta { color: var(--ink-3); font-size: .88rem; letter-spacing: .06em; text-transform: uppercase; }
body.lang-ar .meta { letter-spacing: 0; text-transform: none; }

/* ------------------------------------------------------------------ times */
.times { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.time {
  display: grid; align-items: baseline; gap: .2rem 1.25rem;
  grid-template-columns: 10rem 7rem 1fr;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.15rem 1.4rem; transition: border-color .16s ease, transform .16s ease;
}
.time:hover { border-color: var(--brand-line); }
.time__day { font-family: var(--serif); font-size: 1.1rem; color: var(--brand); }
body.lang-ar .time__day { font-family: var(--serif-ar); font-weight: 700; }
.time__at { font-variant-numeric: tabular-nums lining-nums; color: var(--ink); font-weight: 600; font-size: 1.02rem; }
.time__what { color: var(--ink); }
.time__note { grid-column: 3 / -1; color: var(--ink-3); font-size: .88rem; }
.times.big .time { padding: 1.35rem 1.6rem; font-size: 1.05rem; }
@media (max-width: 42rem) {
  .time { grid-template-columns: 1fr auto; padding: 1rem 1.15rem; }
  .time__what, .time__note { grid-column: 1 / -1; }
}

.schedule { margin-top: 2.75rem; }
.schedule h2 { font-size: 1.4rem; margin-bottom: 1rem; }

/* ------------------------------------------------------------------ cards */
.grid { display: grid; gap: var(--gap); }
.cards-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr)); }

.card {
  display: flex; flex-direction: column; overflow: hidden; position: relative;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: inherit; box-shadow: var(--shadow-xs);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--brand-line); }
.card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.card__body { padding: 1.25rem 1.4rem 1.5rem; }
.card h3 { margin: .2rem 0 .45rem; }
.card p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.card time { font-size: .76rem; color: var(--ink-3); letter-spacing: .14em; text-transform: uppercase; }
body.lang-ar .card time { letter-spacing: 0; text-transform: none; font-size: .88rem; }

.ministry { padding: 1.6rem 1.5rem 1.7rem; }
.ministry .card__img { margin: -1.6rem -1.5rem 1.2rem; width: calc(100% + 3rem); }
.ministry__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand); margin-bottom: 1rem;
  border: 1px solid var(--brand-line);
  transition: background .2s ease, color .2s ease;
}
.ministry__icon .ic { width: 1.5rem; height: 1.5rem; }
a.ministry:hover .ministry__icon { background: var(--brand); color: var(--brand-ink); }

/* The first ministry runs the full width: it is the Centre everything else
   hangs off, and a row of identical cards hides that. */
.ministry-feature { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; padding: clamp(1.75rem, 4vw, 2.5rem); background: var(--panel); }
.ministry-feature .ministry__icon { margin: 0; width: 4rem; height: 4rem; }
.ministry-feature .ministry__icon .ic { width: 1.9rem; height: 1.9rem; }
.ministry-feature h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); margin-top: 0; }
.ministry-feature p { font-size: 1.02rem; }
@media (max-width: 40rem) { .ministry-feature { grid-template-columns: 1fr; } }

.event { flex-direction: row; align-items: stretch; }
.event__date { flex: none; width: 5.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; background: var(--brand); color: var(--brand-ink); }
.event__day { font-family: var(--serif); font-size: 2rem; line-height: 1; }
.event__mon { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
body.lang-ar .event__mon { text-transform: none; letter-spacing: 0; }
.event__meta { font-size: .88rem; color: var(--ink-3); }

.person { text-align: center; }
.person__photo { width: 100%; aspect-ratio: 1; object-fit: cover; }
.person__photo--none { display: flex; align-items: center; justify-content: center; background: var(--brand-wash); color: var(--brand-line); }
.person__photo--none .ic { width: 3.25rem; height: 3.25rem; }
.person__role { color: var(--brand); font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .7rem; }
body.lang-ar .person__role { letter-spacing: 0; text-transform: none; font-size: .95rem; }

/* ------------------------------------------------------------------ gallery */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(14rem, 1fr); gap: .85rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x mandatory; }
.strip .shot { scroll-snap-align: start; }
.shot { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.shot figcaption { padding: .7rem .9rem; font-size: .85rem; color: var(--ink-2); }
.masonry { columns: 3 17rem; column-gap: var(--gap); }
.masonry .shot { break-inside: avoid; margin-bottom: var(--gap); }
.masonry .shot img { aspect-ratio: auto; }

/* ------------------------------------------------------------------ facts/contact blocks */
.strip-3 { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.fact { display: flex; gap: 1rem; align-items: flex-start; }
.fact .ic { color: var(--brand); margin-top: .25rem; width: 1.5rem; height: 1.5rem; }
.fact h3 { margin: 0 0 .3rem; font-family: var(--sans); font-size: .76rem; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); font-weight: 600; }
body.lang-ar .fact h3 { font-family: var(--sans-ar); text-transform: none; letter-spacing: 0; font-size: .92rem; }
.fact p { margin: 0 0 .3rem; }

.factlist { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; margin: 0 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.factlist dt { color: var(--ink-3); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15rem; }
body.lang-ar .factlist dt { letter-spacing: 0; text-transform: none; font-size: .9rem; }
.factlist dd { margin: 0; }

/* ------------------------------------------------------------------ visit band */
.sec-visit { background: var(--brand); color: var(--brand-ink); position: relative; overflow: hidden; }
.sec-visit::before {
  content: ''; position: absolute; inset-block: -20%; inset-inline-end: -4%;
  width: 26rem; aspect-ratio: 763 / 1200;
  background: url('/static/img/emblem-white.png') center/contain no-repeat;
  opacity: .07; pointer-events: none;
}
.sec-visit .eyebrow { color: color-mix(in srgb, var(--brand-ink) 78%, transparent); }
.sec-visit .sec-title, .sec-visit .sec-intro { color: var(--brand-ink); }
.sec-visit .sec-intro { opacity: .9; }
.visit { position: relative; max-width: 44rem; }
.visit .hero__cta { justify-content: flex-start; margin-top: 2rem; }
.visit__mark { display: none; }

/* ------------------------------------------------------------------ page hero */
.phero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--brand-wash), var(--bg));
  padding-block: clamp(2.75rem, 6vw, 5rem);
  border-bottom: 1px solid var(--line-soft);
}
/* No watermark on the page heroes: they are short, so the emblem was cropped
   top and bottom and read as a stray shape rather than as a mark. */
.phero.has-img { background: var(--brand-dark); border-bottom: 0; }
.phero.has-img::before { display: none; }
.phero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .32; }
.phero .wrap { position: relative; }
.phero h1 { margin-bottom: .25em; }
.phero.has-img h1, .phero.has-img .phero__intro { color: #fff; }
.phero__intro { color: var(--ink-2); max-width: 44rem; margin: 0; font-size: 1.08rem; }

/* ------------------------------------------------------------------ forms */
.form { display: grid; gap: 1.1rem; }
.fields { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.fld { display: grid; gap: .4rem; align-content: start; }
.fld-full { grid-column: 1 / -1; }
.fld > span { font-size: .82rem; color: var(--ink-2); font-weight: 600; letter-spacing: .04em; }
.fld small { font-size: .8rem; color: var(--ink-3); }
.req { color: var(--brand); font-style: normal; }

/* Every input except the three that must keep their native appearance.
   Written with :not() rather than as a list of types on purpose: an attribute
   selector matches the ATTRIBUTE, not the default value, so `input[type='text']`
   never matched `<input name="subject">` — and most fields here, including
   nearly every one in the admin, are written without a type. Those were all
   falling back to the browser's own styling while the few that did declare a
   type looked right, which is how it hid in plain sight. */
input:not([type='checkbox']):not([type='radio']):not([type='file']),
select, textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .72rem .9rem; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; line-height: 1.6; }
textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9rem; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 15%, transparent);
}
input[type='file'] { font-size: .9rem; color: var(--ink-2); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.chk { display: flex; align-items: center; gap: .6rem; font-size: .95rem; color: var(--ink-2); }
.chk input { width: 1.1rem; height: 1.1rem; accent-color: var(--brand); flex: none; }
.chk.inline { margin: 0; }

.form-actions { margin: .6rem 0 0; }
.formerr { background: color-mix(in srgb, #b3261e 9%, var(--panel)); border: 1px solid color-mix(in srgb, #b3261e 32%, var(--line)); color: #8c1d18; border-radius: var(--radius-sm); padding: .8rem 1.1rem; margin: 0; }
.done { background: var(--panel); border: 1px solid var(--brand-line); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); }
.done h2 { margin-top: 0; }

.contact-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 56rem) { .contact-grid { grid-template-columns: 1fr; } }
.contact-aside { display: grid; gap: 1.75rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-xs); }
.contact-aside:empty { display: none; }
.mapbox { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; }
.mapbox iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------------ footer */
.site-foot { background: var(--panel); border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 0; margin-top: auto; }
/* auto-fit rather than a fixed three: the contact and social columns hide
   themselves when there is nothing in them, and a fixed count would leave the
   footer with a gap where a column used to be. */
.foot-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(11rem, 1fr)); }
@media (max-width: 62rem) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 36rem) { .foot-grid { grid-template-columns: 1fr; } }
.foot-synod { color: var(--ink-3); font-size: .88rem; margin-top: 1.1rem; max-width: 24rem; line-height: 1.6; }
.foot-col { display: grid; align-content: start; gap: .5rem; }
.foot-col h2 { font-family: var(--sans); font-size: .74rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-3); font-weight: 600; margin: 0 0 .8rem; }
body.lang-ar .foot-col h2 { font-family: var(--sans-ar); text-transform: none; letter-spacing: 0; font-size: .92rem; }
.foot-col a { color: var(--ink-2); text-decoration: none; font-size: .93rem; }
.foot-col a:hover { color: var(--brand); }
.foot-line { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .6rem; font-size: .93rem; color: var(--ink-2); }
.foot-line .ic { color: var(--brand); margin-top: .2rem; }
.foot-social { display: inline-flex; gap: .55rem; align-items: center; color: var(--ink-2); text-decoration: none; }
.foot-social .ic { color: var(--brand); }
.foot-social:hover { color: var(--brand); }

.foot-base { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line-soft); margin-top: clamp(2.25rem, 4vw, 3rem); padding-block: 1.4rem; font-size: .84rem; color: var(--ink-3); }
.foot-base p { margin: 0; }
.foot-admin { color: var(--ink-3); text-decoration: none; }
.foot-admin:hover { color: var(--brand); }

/* ------------------------------------------------------------------ misc */
.preview-bar { background: var(--brand-dark); color: #fff; text-align: center; padding: .5rem 1rem; font-size: .85rem; }
.preview-bar a { color: #fff; margin-inline-start: .5rem; text-decoration: none; font-weight: 700; }

/* Unpublished rows, visible only in preview mode. */
.is-draft { position: relative; outline: 2px dashed var(--brand-line); outline-offset: 4px; }

.sec-404 { padding-block: clamp(4.5rem, 12vw, 9rem); }
.nf-mark { height: 5.5rem; width: auto; margin-inline: auto; margin-bottom: 1.75rem; opacity: .4; }