@charset "UTF-8";
/* ==========================================================================
   الرهبانيات — religious orders
   One verified congregation and one true story, so this page is built around
   narrative typography rather than cards. Tokens only; no letter-spacing on
   Arabic anywhere.
   ========================================================================== */

/* ---------- page hero ---------- */
.phero {
  position: relative;
  padding: calc(136px + var(--s7)) var(--s5) var(--s7);
  background: var(--hero-sky);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.phero > * { position: relative; }
.phero-glow {
  position: absolute; inset-block-start: -60%; inset-inline-start: 50%;
  transform: translateX(50%); width: min(720px, 118vw); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(201,151,26,.16), transparent 66%);
  pointer-events: none;
}
:root[data-theme="dark"] .phero-glow {
  background: radial-gradient(circle, rgba(254,205,7,.12), transparent 68%);
}
.phero h1 {
  font-size: clamp(32px, 6vw, 60px); line-height: 1.45;
  margin-block: var(--s3) var(--s3); max-width: 20ch;
}
.phero-x { font-size: 17.5px; line-height: 1.8; color: var(--ink-2); max-width: 58ch; }

/* ---------- breadcrumb ---------- */
.crumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2);
  font-size: 13.5px; color: var(--muted);
}
.crumb a { color: var(--muted); transition: color .25s var(--ease); }
.crumb a:hover { color: var(--gold-ink); }
:root[data-theme="dark"] .crumb a:hover { color: var(--gold); }
.crumb-sep { opacity: .5; }
.crumb [aria-current] { color: var(--ink-2); }

/* ==========================================================================
   the narrative — 3 August 2014 and the return
   ========================================================================== */
.narrative-sec { padding-block: clamp(var(--s8), 11vw, var(--s10)); }
.wrap-narr { width: 100%; max-width: 860px; margin-inline: auto; padding-inline: var(--s5); }

.narr-lead {
  font-family: var(--ar-display);
  font-size: clamp(21px, 2.7vw, 27px);
  line-height: 1.85; color: var(--ink); margin-bottom: var(--s6);
}

/* opening drop word */
.narr-drop {
  float: right; margin-inline-start: 14px; margin-block: 6px 0;
  font-family: var(--ar-display); font-size: 3.1em; line-height: .92;
  color: var(--gold-ink);
}
:root[data-theme="dark"] .narr-drop { color: var(--gold); }

/* the spine */
.narrative { position: relative; padding-inline-start: var(--s6); }
.narr-spine {
  position: absolute; inset-block: 8px 8px; inset-inline-start: 0;
  width: 2px; background: var(--line-2); border-radius: 2px; overflow: hidden;
}
.narr-spine-fill {
  position: absolute; inset-inline: 0; inset-block-start: 0; height: 100%;
  background: linear-gradient(to bottom, var(--gold), var(--gold-ink));
  transform-origin: top center;
}
/* progressive enhancement: fills as the section scrolls past, where supported */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .narr-spine-fill {
      transform: scaleY(0);
      animation: spine-fill linear both;
      animation-timeline: view();
      animation-range: cover 12% cover 78%;
    }
    @keyframes spine-fill { to { transform: scaleY(1); } }
  }
}

.narr-node { position: relative; padding-bottom: var(--s7); }
.narr-node:last-child { padding-bottom: 0; }
.narr-node::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--s6) * -1);
  top: 12px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--gold);
  transform: translateX(4.5px);
}

.narr-date {
  display: block; font-family: var(--ar-display); font-size: 21px;
  color: var(--gold-ink); line-height: 1.4; margin-bottom: var(--s2);
  font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .narr-date { color: var(--gold); }

.narr-text { font-size: 16.5px; line-height: 1.9; color: var(--ink-2); max-width: 58ch; }
.narr-text + .narr-text { margin-top: var(--s3); }

.narr-quote {
  margin-block: var(--s5); padding-inline-start: var(--s4);
  border-inline-start: 3px solid var(--gold);
  font-family: var(--ar-display); font-size: clamp(19px, 2.3vw, 24px);
  line-height: 1.8; color: var(--ink);
}

/* ==========================================================================
   note box — the "they are not a diocesan institute" clarification
   ========================================================================== */
.note-sec { padding-bottom: clamp(var(--s7), 8vw, var(--s8)); }
.note-box {
  display: flex; gap: var(--s4); align-items: flex-start;
  padding: var(--s5); border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--navy);
}
:root[data-theme="dark"] .note-box { border-inline-start-color: var(--gold); }
.note-ico { flex: none; width: 26px; height: 34px; fill: var(--navy); }
:root[data-theme="dark"] .note-ico { fill: var(--gold); }
.note-box h3 { font-size: 19px; margin-bottom: var(--s2); }
.note-box p { font-size: 15px; line-height: 1.8; color: var(--ink-2); max-width: 62ch; }

/* ==========================================================================
   empty state — other orders, not yet documented
   ========================================================================== */
.prep {
  display: flex; gap: var(--s5); align-items: flex-start;
  padding: clamp(var(--s5), 5vw, var(--s7));
  border: 1px dashed var(--line-2); border-radius: 16px;
  background: var(--surface);
}
.prep-ico { flex: none; width: 34px; height: 45px; fill: var(--line-2); }
.prep-body { flex: 1; }
.prep-tag {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--gold-ink); padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--gold); margin-bottom: var(--s3);
}
:root[data-theme="dark"] .prep-tag { color: var(--gold); }
.prep-body h3 { font-size: 22px; margin-bottom: var(--s2); }
.prep-body p { font-size: 15px; line-height: 1.8; color: var(--ink-2); max-width: 60ch; }

/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1040px) {
  .phero { padding-top: calc(84px + var(--s6)); }
}
@media (max-width: 620px) {
  .phero, .wrap-narr { padding-inline: var(--s4); }
  .narrative { padding-inline-start: var(--s5); }
  .narr-node::before { inset-inline-start: calc(var(--s5) * -1); }
  .narr-drop { font-size: 2.6em; }
  .prep, .note-box { flex-direction: column; gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .narr-spine-fill { animation: none; transform: none; }
}