/* ==========================================================================
   Prophetic Footsteps — seerah inner pages (pages.css)
   Journey · Stage template · Chapter template · People · Sources · About · 404

   Loads AFTER pf.css on these pages only. It owns sr- classes and nothing
   else: it never restyles pf-, htm-, wtn-, cta- or footer- classes, and it
   only reads --pf-* tokens (never redefines them).

   Contents
     1  Shared: inner hero, arch vignettes, placeholders, small helpers
     2  Journey: stage navigator, winding path, stage rows, path end
     3  Stage template: route strip, chapter cards, map, stage pager
     4  Chapter template: layout, TOC, at-a-glance, content blocks, pager
     5  People: filter chips, groups, emblem cards
     6  Sources: method row, principles, shelves, source cards
     7  About: panorama, halves, promise, growth route
     8  404
     9  Responsive + reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Shared
   ========================================================================== */

/* --- Inner-page hero: a compact night band with art on the right ------- */
.sr-hero .pf-hero-inner{ grid-template-columns:minmax(0, 1.18fr) minmax(0, .82fr); }
.sr-hero .pf-h1{ max-width:17ch; margin-bottom:.32em; }
.sr-hero .pf-lead{ max-width:52ch; }
.sr-hero .pf-eyebrow{ margin-bottom:14px; }
.sr-hero-art{ width:100%; max-width:430px; justify-self:end; }
.sr-hero-art > svg{ display:block; width:100%; height:auto; overflow:visible; }
.sr-hero-ar{
  display:block; margin:-.2em 0 .7em; font-family:var(--pf-font-arabic);
  font-size:clamp(1.3rem, 2.2vw, 1.6rem); line-height:1.5; color:var(--pf-c-accent);
  unicode-bidi:isolate;
}
.sr-hero .pf-hero-meta{ align-items:center; }

/* Night that warms to an ember horizon (stage + chapter heroes). */
.pf-night.sr-hero--dawn{
  background-image:
    radial-gradient(60% 55% at 74% 112%, rgba(229,138,63,.42) 0%, rgba(229,138,63,0) 70%),
    radial-gradient(80% 70% at 78% 0%, rgba(74,79,134,.55) 0%, rgba(74,79,134,0) 60%),
    linear-gradient(180deg, var(--pf-night-deep) 0%, var(--pf-night) 52%, #3A3462 100%);
}
/* Night with an oasis-green glow low on the horizon (people). */
.pf-night.sr-hero--oasis{
  background-image:
    radial-gradient(55% 60% at 80% 110%, rgba(42,112,80,.45) 0%, rgba(42,112,80,0) 70%),
    radial-gradient(80% 70% at 78% 0%, rgba(74,79,134,.55) 0%, rgba(74,79,134,0) 60%),
    linear-gradient(180deg, var(--pf-night-deep) 0%, var(--pf-night) 55%, #22305A 100%);
}

/* Section helpers */
.sr-band-light{ background:var(--pf-sand-light); }
.sr-band-deep{ background:var(--pf-sand-deep); }
.sr-rule{ border:0; height:1px; background:var(--pf-line); margin:0; }
.sr-mt0{ margin-top:0; }

/* Little inline icons (stroke icons, 1em) */
.sr-ico{ width:1.05em; height:1.05em; flex:none; vertical-align:-.16em; }

/* --- Arch vignette: the house window illustration, small -------------- */
.sr-arch{ display:block; width:100%; height:auto; overflow:visible; }

/* --- Placeholder slots: everything the owner will replace ------------- */
.sr-slot{
  display:inline-flex; align-items:center; gap:6px; vertical-align:baseline;
  font-family:var(--pf-font-head); font-weight:700; font-style:normal;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; line-height:1.2;
  color:var(--pf-terracotta); background:rgba(168,79,51,.07);
  border:1.5px dashed rgba(168,79,51,.45); border-radius:6px; padding:3px 8px;
  margin-right:6px; white-space:nowrap;
}
.pf-night .sr-slot, .pf-dusk .sr-slot{ color:var(--pf-gold-glow); background:rgba(255,211,110,.08); border-color:rgba(255,211,110,.45); }
.sr-ph{ color:var(--pf-ink-soft); }
.sr-ph em{ font-style:normal; color:var(--pf-ink-body); }

/* "Template" ribbon used on template blocks and source-card samples */
.sr-template-tag{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--pf-font-head); font-weight:700; font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  color:var(--pf-ink); background:var(--pf-card);
  border:1.5px dashed var(--pf-ink); border-radius:999px; padding:5px 10px 5px 8px;
}
.sr-template-tag::before{
  content:""; width:8px; height:8px; flex:none; border-radius:2px; transform:rotate(45deg);
  background:var(--pf-gold);
}

/* Big pager cards (prev / next) used on stage + chapter pages */
.sr-pager{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px); }
.sr-pager .pf-card{ padding:24px 26px 22px; gap:8px; }
.sr-pager-dir{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-c-accent);
}
.sr-pager-next{ text-align:right; align-items:flex-end; }
.sr-pager-next .pf-card-meta{ justify-content:flex-end; }
.sr-pager .pf-card-title{ font-size:clamp(1.12rem, 1.6vw, 1.32rem); }
.sr-pager-num{ font-family:var(--pf-font-serif); font-weight:600; color:var(--pf-accent, var(--pf-c-accent)); margin-right:.35em; }
.sr-pager .pf-card-meta{ padding-top:6px; }
.sr-pager span.pf-card{ opacity:.88; }


/* ==========================================================================
   2. Journey
   ========================================================================== */
.sr-journey{ padding-top:clamp(40px, 5vw, 72px); }
.sr-journey-intro{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 40px; margin-bottom:clamp(20px, 3vw, 36px); }
.sr-journey-intro .pf-title{ margin:0; }
.sr-legend{ display:flex; flex-wrap:wrap; gap:10px 18px; margin:0; padding:0; list-style:none; font-size:.84rem; color:var(--pf-ink-soft); }
.sr-legend li{ display:inline-flex; align-items:center; gap:8px; }
.sr-legend-print{ width:22px; height:12px; flex:none; }

.sr-jgrid{
  display:grid; grid-template-columns:236px minmax(0,1fr);
  gap:clamp(28px, 3.4vw, 56px); align-items:start;
}

/* --- Sticky stage navigator (desktop) --------------------------------- */
.sr-stagenav{
  position:sticky; top:24px; align-self:start;
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius-lg);
  box-shadow:var(--pf-shadow); padding:20px 16px 16px 18px;
}
.sr-stagenav-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pf-gold-deep); margin:0 0 12px;
}
.sr-stagenav-head span{ letter-spacing:.04em; text-transform:none; font-weight:600; color:var(--pf-ink-soft); font-family:var(--pf-font-body); font-size:.76rem; }
.sr-stagenav ol{ position:relative; list-style:none; margin:0; padding:0; }
.sr-stagenav ol::before{
  content:""; position:absolute; left:12px; top:16px; bottom:16px; width:4px;
  background:radial-gradient(circle, var(--pf-line-strong) 1.4px, transparent 1.8px) 50% 0 / 4px 8px repeat-y;
}
.sr-stagenav-progress{
  position:absolute; left:13px; top:16px; width:2px; height:var(--sr-progress, 0px);
  background:var(--pf-gold); border-radius:2px; transition:height .5s var(--pf-ease);
}
.sr-stagenav a{
  position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:12px; row-gap:1px;
  align-items:center; padding:6px 6px 6px 0; border-radius:12px; text-decoration:none;
}
.sr-stagenav-dot{
  grid-row:span 2; position:relative; z-index:1; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; background:var(--pf-card); border:2px solid var(--pf-line-strong);
  font-family:var(--pf-font-serif); font-weight:600; font-size:.82rem; line-height:1; color:var(--pf-ink-soft);
  transition:background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.sr-stagenav-name{ font-family:var(--pf-font-head); font-weight:700; font-size:.8rem; line-height:1.25; color:var(--pf-ink); }
.sr-stagenav-years{ font-size:.72rem; line-height:1.3; color:var(--pf-ink-soft); font-variant-numeric:lining-nums; }
.sr-stagenav a:hover .sr-stagenav-name{ color:var(--pf-gold-deep); }
.sr-stagenav a:hover .sr-stagenav-dot{ border-color:var(--pf-gold); }
.sr-stagenav a.is-passed .sr-stagenav-dot{ background:var(--pf-gold); border-color:var(--pf-gold); color:var(--pf-night); }
.sr-stagenav a.is-active .sr-stagenav-dot{
  background:var(--pf-night); border-color:var(--pf-gold); color:var(--pf-gold-glow);
  box-shadow:0 0 0 4px rgba(245,184,65,.28), 0 0 18px rgba(255,211,110,.5);
}
.sr-stagenav a.is-active{ background:rgba(245,184,65,.12); }
.sr-stagenav-foot{
  display:flex; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px;
  border-top:1px dashed var(--pf-line-strong); font-size:.78rem;
}
.sr-stagenav-foot a{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink); text-decoration:none; }
.sr-stagenav-foot a:hover{ color:var(--pf-gold-deep); }

/* Jump chips: shown instead of the sticky navigator under 1200px */
.sr-jump{ display:none; }
.sr-jump ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.sr-jump a{ text-decoration:none; }
.sr-jump .pf-chip{ font-weight:600; color:var(--pf-ink); }
.sr-jump .pf-chip:hover{ border-color:var(--pf-gold); border-style:solid; }

/* --- The winding path -------------------------------------------------- */
.sr-path{ position:relative; }
/* No-JS fallback: a straight dotted road down the middle. pages.js draws
   the winding footprint trail and adds .is-drawn. */
.sr-path::before{
  content:""; position:absolute; top:24px; bottom:24px; left:50%; width:6px; margin-left:-3px;
  background:radial-gradient(circle, var(--pf-dune-deep) 1.7px, transparent 2.2px) 50% 0 / 6px 12px repeat-y;
  opacity:.65;
}
.sr-path.is-drawn::before{ display:none; }
.sr-path-svg{
  position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible;
  pointer-events:none; z-index:0;
}
.sr-path-road{ fill:none; stroke:var(--pf-dune); stroke-width:22; stroke-linecap:round; opacity:.32; }
.sr-path-line{ fill:none; stroke:var(--pf-line-strong); stroke-width:2.6; stroke-linecap:round; stroke-dasharray:.1 11; }
.sr-print{ fill:var(--pf-dune-deep); opacity:.32; transition:fill .6s ease, opacity .6s ease; }
.sr-print.is-walked{ fill:#D9962A; opacity:.95; }

/* Start + end markers on the path */
.sr-path-start{
  position:relative; z-index:1; display:flex; justify-content:center; padding:4px 0 8px;
}
.sr-path-start-pill{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-ink); background:var(--pf-card);
  border:1.5px solid var(--pf-line-strong); border-radius:999px; padding:9px 16px 9px 10px;
  box-shadow:var(--pf-shadow);
}
.sr-path-start-pill i{
  width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--pf-night); color:var(--pf-gold-glow); font-style:normal;
}
.sr-path-start-pill i svg{ width:12px; height:12px; }

/* --- A stage row: card · marker · art (alternating) -------------------- */
.sr-stage{
  position:relative; z-index:1; scroll-margin-top:24px;
  display:grid; grid-template-columns:minmax(0,1fr) 148px minmax(0,1fr);
  grid-template-areas:"card mark art"; align-items:center;
  padding-block:clamp(26px, 3.4vw, 46px);
}
.sr-path > .sr-stage:nth-of-type(even){ grid-template-areas:"art mark card"; }
.sr-stage-card{ grid-area:card; }
.sr-stage-markwrap{ grid-area:mark; display:grid; place-items:center; }
.sr-stage-art{ grid-area:art; }

/* Marker: a seal on the road — accent star in a cream disc, dashed ring */
.sr-stage-mark{
  position:relative; width:92px; height:92px; border-radius:50%;
  display:grid; place-items:center; background:var(--pf-sand);
  box-shadow:0 0 0 7px var(--pf-sand);
  transition:box-shadow .5s ease;
}
.sr-stage-mark::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px dashed var(--pf-accent, var(--pf-gold-deep)); opacity:.75;
}
.sr-stage-mark::after{
  content:""; position:absolute; inset:-14px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,211,110,.55) 0%, rgba(255,211,110,0) 68%);
  opacity:0; transition:opacity .6s ease;
}
.sr-stage-mark .pf-star8{ --pf-s:70px; font-size:1.55rem; }
.sr-stage.is-current .sr-stage-mark::after{ opacity:1; }
.sr-stage.is-current .sr-stage-mark{ box-shadow:0 0 0 7px var(--pf-sand), 0 0 0 9px rgba(245,184,65,.55); }

/* Card */
.sr-stage-card{ padding:clamp(24px, 2.6vw, 32px) clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 26px); gap:12px; }
.sr-stage-card::before{
  /* a short accent tab on the top edge */
  content:""; position:absolute; left:28px; top:-1px; width:56px; height:5px;
  border-radius:0 0 5px 5px; background:var(--pf-accent, var(--pf-gold));
}
.sr-stage-kicker{
  display:flex; align-items:center; gap:10px; margin:0;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pf-accent, var(--pf-gold-deep));
}
.sr-stage-kicker span{ color:var(--pf-ink-soft); letter-spacing:.12em; }
.sr-stage-title{
  font-family:var(--pf-font-head); font-weight:700; font-size:clamp(1.4rem, 2.1vw, 1.8rem);
  line-height:1.15; letter-spacing:-0.015em; color:var(--pf-ink); margin:0; text-wrap:balance;
}
.sr-stage-title a{ color:inherit; text-decoration:none; background:linear-gradient(var(--pf-gold), var(--pf-gold)) 0 100% / 100% 2px no-repeat; padding-bottom:2px; transition:color .15s ease; }
.sr-stage-title a:hover{ color:var(--pf-gold-deep); }
.sr-stage-dates{ display:flex; flex-wrap:wrap; gap:8px; }
.sr-stage-desc{ margin:0; font-size:1rem; line-height:1.6; color:var(--pf-ink-body); text-wrap:pretty; }

/* Chapter list inside a stage card */
.sr-chlist{ list-style:none; margin:4px 0 0; padding:0; border-top:1.5px dashed var(--pf-line-strong); }
.sr-chlist li{
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; column-gap:10px;
  padding:10px 0; border-bottom:1px dashed var(--pf-line);
}
.sr-chlist li:last-child{ border-bottom:0; padding-bottom:2px; }
.sr-ch-num{
  font-family:var(--pf-font-serif); font-weight:600; font-size:.92rem; line-height:1;
  color:var(--pf-accent, var(--pf-gold-deep)); font-variant-numeric:lining-nums tabular-nums;
}
.sr-ch-title{ font-family:var(--pf-font-body); font-weight:600; font-size:.95rem; line-height:1.35; color:var(--pf-ink); min-width:0; }
.sr-ch-title a{
  color:inherit; text-decoration:underline; text-decoration-color:var(--pf-gold);
  text-decoration-thickness:2px; text-underline-offset:3px;
}
.sr-ch-title a:hover{ color:var(--pf-gold-deep); }
.sr-ch-date{ display:block; margin-top:2px; font-size:.76rem; font-weight:500; color:var(--pf-ink-soft); font-variant-numeric:lining-nums; }
.sr-chlist .pf-soon{ font-size:.58rem; padding:4px 8px 4px 7px; gap:5px; letter-spacing:.08em; }
.sr-chlist .pf-soon::before{ width:7px; height:9px; }
.sr-stage-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
  margin-top:auto; padding-top:8px;
}
.sr-stage-foot .pf-small{ margin:0; }

/* Art column */
.sr-stage-art{ position:relative; margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; isolation:isolate; }
.sr-stage-art .sr-arch{ width:min(232px, 72%); }
.sr-stage-numeral{
  position:absolute; z-index:-1; left:50%; top:46%; transform:translate(-50%, -50%);
  font-family:var(--pf-font-serif); font-weight:600; font-size:clamp(8rem, 13vw, 12.5rem);
  line-height:1; letter-spacing:-0.06em; color:var(--pf-accent, var(--pf-gold-deep)); opacity:.08;
  pointer-events:none; user-select:none; font-variant-numeric:lining-nums;
}
.sr-stage-place{
  display:inline-flex; align-items:center; gap:8px; margin:0;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-ink-soft);
}
.sr-stage-place svg{ width:14px; height:14px; color:var(--pf-accent, var(--pf-gold-deep)); }

/* End of the path: the story continues with The Caravan */
.sr-path-end{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; padding:clamp(24px, 3vw, 40px) 0 0;
}
.sr-end-mark{
  width:84px; height:84px; border-radius:50%; display:grid; place-items:center;
  background:var(--pf-night); box-shadow:0 0 0 7px var(--pf-sand), 0 0 0 9px rgba(245,184,65,.5), 0 18px 40px -16px rgba(16,22,47,.7);
  margin-bottom:22px;
}
.sr-end-mark svg{ width:46px; height:46px; }
.sr-path-end .pf-h2{ max-width:20ch; margin-inline:auto; }
.sr-path-end .pf-lead{ margin-inline:auto; }
.sr-path-end .pf-actions{ justify-content:center; margin-top:18px; }


/* ==========================================================================
   3. Stage template
   ========================================================================== */
.sr-routebar{ padding-block:clamp(36px, 4.5vw, 56px); }
.sr-routebar-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:26px; }
.sr-routebar-head .pf-eyebrow{ margin:0; }
.sr-routebar .pf-stop-label a{ text-decoration:none; }
.sr-routebar .pf-stop-label{ font-size:.84rem; }
.sr-routebar .pf-stop-meta{ font-size:.74rem; }

.sr-chgrid{ display:grid; gap:clamp(14px, 1.8vw, 22px); grid-template-columns:repeat(4, minmax(0,1fr)); counter-reset:none; }
.sr-chcard{ padding:22px 22px 20px; gap:10px; }
.sr-chcard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sr-chcard-num{
  width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--pf-font-serif); font-weight:600; font-size:1.25rem; line-height:1; letter-spacing:-0.02em;
  color:var(--pf-accent, var(--pf-gold-deep)); background:var(--pf-sand-light);
  border:1.5px dashed var(--pf-accent, var(--pf-gold-deep));
  font-variant-numeric:lining-nums;
}
.sr-chcard .pf-card-title{ font-size:1.08rem; }
.sr-chcard .pf-card-text{ font-size:.9rem; }
.sr-chcard .pf-card-meta{ padding-top:8px; }
a.sr-chcard{ border-color:var(--pf-line-strong); }
a.sr-chcard .sr-chcard-num{ background:var(--pf-accent, var(--pf-gold-deep)); color:#FFF7E2; border-style:solid; }
.sr-chcard-next{
  /* the 8th tile: the road on to the next stage */
  justify-content:space-between; background:var(--pf-night); border-color:transparent; color:var(--pf-night-text);
  overflow:hidden; isolation:isolate;
}
.sr-chcard-next .pf-card-title{ color:var(--pf-star); }
.sr-chcard-next .pf-card-text{ color:var(--pf-night-soft); }
.sr-chcard-next .pf-card-go{ color:var(--pf-gold-glow); }
.sr-chcard-next .pf-card-kicker{ color:var(--pf-gold-glow); }
.sr-chcard-next .sr-chcard-art{ position:absolute; inset:auto 0 0 0; height:70px; z-index:-1; opacity:.9; }
.sr-chcard-next .sr-chcard-art svg{ width:100%; height:100%; display:block; }

/* "Where the stage happened" */
.sr-where{ align-items:center; }
.sr-where-places{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none; }
.sr-map{ margin:0; }
.sr-map .pf-parchment{ padding:clamp(14px, 2vw, 22px); }
.sr-map svg{ display:block; width:100%; height:auto; }
.sr-map figcaption{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 14px;
  margin-top:12px; font-size:.84rem; color:var(--pf-ink-soft);
}


/* ==========================================================================
   4. Chapter template
   ========================================================================== */
.sr-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:6px 0 0; padding:0; list-style:none;
  font-size:.9rem; color:var(--pf-c-text);
}
.sr-meta li{ display:inline-flex; align-items:center; gap:8px; }
.sr-meta svg{ width:17px; height:17px; color:var(--pf-c-accent); flex:none; }
.sr-meta b{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-c-heading); }

.sr-read{ padding-top:clamp(36px, 5vw, 64px); }
.sr-read-grid{
  display:grid; grid-template-columns:232px minmax(0, 1fr); gap:clamp(32px, 5vw, 72px);
  align-items:start;
}
.sr-read-main{ min-width:0; max-width:740px; }

/* Table of contents */
.sr-toc{ position:sticky; top:24px; }
.sr-toc details{ border:0; }
.sr-toc summary{ list-style:none; cursor:default; }
.sr-toc summary::-webkit-details-marker{ display:none; }
.sr-toc-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pf-gold-deep); margin:0 0 14px;
}
.sr-toc-head svg{ display:none; }
.sr-toc ol{ position:relative; list-style:none; margin:0; padding:0 0 0 18px; }
.sr-toc ol::before{
  content:""; position:absolute; left:3px; top:6px; bottom:6px; width:4px;
  background:radial-gradient(circle, var(--pf-line-strong) 1.3px, transparent 1.7px) 50% 0 / 4px 7px repeat-y;
}
.sr-toc-bar{
  position:absolute; left:4px; top:6px; width:2px; border-radius:2px; background:var(--pf-gold);
  height:var(--sr-read, 0%); max-height:calc(100% - 12px); transition:height .2s linear;
}
.sr-toc li{ position:relative; }
.sr-toc a{
  display:block; padding:7px 0 7px 4px; font-size:.88rem; line-height:1.35; font-weight:500;
  color:var(--pf-ink-soft); text-decoration:none; transition:color .15s ease;
}
.sr-toc a::before{
  content:""; position:absolute; left:-18px; top:13px; width:10px; height:10px; border-radius:50%;
  background:var(--pf-sand); border:2px solid var(--pf-line-strong); transition:all .25s ease;
}
.sr-toc a:hover{ color:var(--pf-ink); }
.sr-toc a.is-passed::before{ background:var(--pf-gold); border-color:var(--pf-gold); }
.sr-toc a.is-active{ color:var(--pf-ink); font-weight:700; }
.sr-toc a.is-active::before{ background:var(--pf-night); border-color:var(--pf-gold); box-shadow:0 0 0 3px rgba(245,184,65,.3); }
.sr-toc-foot{ margin-top:18px; padding-top:14px; border-top:1px dashed var(--pf-line-strong); display:flex; flex-direction:column; gap:10px; }

/* Template notice */
.sr-note{
  display:flex; gap:14px; align-items:flex-start; margin:0 0 28px;
  padding:16px 18px; border-radius:var(--pf-radius); border:1.5px dashed var(--pf-line-strong);
  background:rgba(255,253,247,.6); font-size:.9rem; line-height:1.55; color:var(--pf-ink-soft);
}
.sr-note svg{ width:22px; height:22px; flex:none; color:var(--pf-terracotta); margin-top:1px; }
.sr-note b{ color:var(--pf-ink); font-family:var(--pf-font-head); }
.sr-note p{ margin:0; }

/* At a glance */
.sr-glance{
  position:relative; margin:0 0 clamp(32px, 4vw, 44px); padding:24px clamp(20px, 3vw, 30px) 22px;
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius-lg);
  box-shadow:var(--pf-shadow); overflow:hidden; isolation:isolate;
}
.sr-glance::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px; background:var(--pf-accent, var(--pf-gold));
}
.sr-glance-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.sr-glance-head h2{ font-size:1.12rem; margin:0; display:flex; align-items:center; gap:10px; }
.sr-glance-head h2 svg{ width:22px; height:22px; color:var(--pf-accent, var(--pf-gold-deep)); }
.sr-glance dl{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px 20px; margin:0; }
.sr-glance dl > div{ min-width:0; padding:12px 14px; border-radius:12px; background:var(--pf-sand-light); border:1px solid var(--pf-line); }
.sr-glance dt{
  font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-ink-soft); margin:0 0 4px;
}
.sr-glance dd{ margin:0; font-family:var(--pf-font-head); font-weight:700; font-size:.98rem; line-height:1.3; color:var(--pf-ink); }
.sr-glance dd .sr-slot{ font-size:.6rem; margin:2px 0 0; }
.sr-glance .sr-glance-wide{ grid-column:1 / -1; }
.sr-glance .sr-glance-wide dd{ font-family:var(--pf-font-body); font-weight:500; font-size:.95rem; color:var(--pf-ink-soft); }

/* Article column */
.sr-article.pf-prose{ max-width:none; }
.sr-article > h2{ scroll-margin-top:24px; position:relative; }
.sr-article > h2:first-child{ margin-top:0; }
.sr-article h2 .sr-h-num{
  display:block; font-family:var(--pf-font-head); font-weight:700; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pf-gold-deep); margin-bottom:8px;
}
.sr-article p{ font-size:1.0625rem; }
.sr-block-label{
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.68rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pf-gold-deep); margin:0 0 16px;
}
.sr-block-label svg{ width:16px; height:16px; }

/* Quran ayah block */
.sr-ayah{
  position:relative; margin:2em 0; padding:30px clamp(20px, 4vw, 44px) 26px; text-align:center;
  background:
    radial-gradient(90% 80% at 50% 0%, rgba(245,184,65,.12) 0%, rgba(245,184,65,0) 70%),
    #FFFBF1;
  border:1px solid var(--pf-line-strong); border-radius:var(--pf-radius-lg);
  box-shadow:inset 0 0 0 6px #FFFBF1, inset 0 0 0 7.5px rgba(140,93,18,.22), var(--pf-shadow);
}
.sr-ayah-corner{ position:absolute; width:18px; height:18px; color:var(--pf-gold); }
.sr-ayah-corner:nth-of-type(1){ top:14px; left:14px; }
.sr-ayah-corner:nth-of-type(2){ top:14px; right:14px; }
.sr-ayah-corner:nth-of-type(3){ bottom:14px; left:14px; }
.sr-ayah-corner:nth-of-type(4){ bottom:14px; right:14px; }
.sr-ayah-ar{
  margin:0 auto 14px; font-family:var(--pf-font-arabic); font-size:clamp(1.6rem, 3vw, 2.1rem);
  line-height:2; color:var(--pf-ink); text-align:center;
}
.sr-ayah-ar .sr-slot{ font-size:.72rem; }
.sr-ayah-tr{ margin:0 auto; max-width:52ch; font-family:var(--pf-font-serif); font-style:italic; font-size:1.12rem; line-height:1.6; color:var(--pf-ink-body); }
.sr-ayah-ref{
  display:inline-flex; align-items:center; gap:10px; margin:18px 0 0;
  font-family:var(--pf-font-head); font-weight:700; font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--pf-gold-deep);
}
.sr-ayah-ref::before, .sr-ayah-ref::after{ content:""; width:22px; height:1.5px; background:currentColor; opacity:.5; }
.sr-slot-line{ display:block; height:10px; margin:10px auto 0; border-radius:6px; background:repeating-linear-gradient(90deg, var(--pf-line) 0 14px, transparent 14px 20px); max-width:80%; }

/* Hadith block */
.sr-hadith{
  position:relative; margin:2em 0; padding:24px clamp(20px, 3.4vw, 32px) 22px clamp(24px, 3.6vw, 36px);
  background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius-lg);
  box-shadow:var(--pf-shadow);
}
.sr-hadith::before{
  content:""; position:absolute; left:0; top:22px; bottom:22px; width:4px; border-radius:0 4px 4px 0;
  background:var(--pf-oasis);
}
.sr-hadith .sr-block-label{ justify-content:flex-start; color:var(--pf-oasis); }
.sr-hadith-text{ margin:0; font-size:1.06rem; line-height:1.7; color:var(--pf-ink-body); }
.sr-hadith-src{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:16px 0 0; padding-top:14px;
  border-top:1px dashed var(--pf-line-strong); font-size:.84rem; color:var(--pf-ink-soft);
}
.sr-hadith-src b{ font-family:var(--pf-font-head); color:var(--pf-ink); }

/* Pull quote spacing inside the article */
.sr-article .pf-quote{ margin:2.2em 0; }

/* "A lesson for us" — the Little Amanah offset-shadow card */
.sr-lesson{
  position:relative; margin:2.4em 0; padding:26px clamp(20px, 3.4vw, 32px) 24px;
  background:#FFF4D9; border:2px solid var(--pf-ink); border-radius:var(--pf-radius-lg);
  box-shadow:6px 7px 0 var(--pf-gold);
}
.sr-lesson-head{ display:flex; align-items:center; gap:14px; margin:0 0 12px; }
.sr-lesson-head .pf-icon-disc{ --pf-s:52px; --pf-disc:#FFFDF7; }
.sr-lesson h2{ margin:0 !important; font-size:clamp(1.2rem, 2vw, 1.4rem); }
.sr-lesson p{ margin:0; }
.sr-lesson ul{ margin:12px 0 0; }

/* Watch: 16:9 lecture embed placeholder */
.sr-watch{ margin:1.6em 0 2em; }
.sr-watch-frame{
  position:relative; aspect-ratio:16 / 9; border-radius:var(--pf-radius-lg); overflow:hidden;
  display:grid; place-items:center; isolation:isolate; color:var(--pf-night-text);
  background:
    radial-gradient(70% 70% at 50% 120%, rgba(229,138,63,.35) 0%, rgba(229,138,63,0) 70%),
    linear-gradient(180deg, var(--pf-night-deep), var(--pf-night) 60%, #2B2F5E);
  box-shadow:0 24px 50px -26px rgba(16,22,47,.8);
}
.sr-watch-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.sr-watch-frame > svg.sr-watch-dunes{ position:absolute; inset:auto 0 0 0; width:100%; height:34%; z-index:-1; }
.sr-watch-play{
  width:clamp(64px, 9vw, 84px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:var(--gold, #FFB900); color:var(--charcoal-blue, #233D4D);
  box-shadow:0 0 0 10px rgba(255,185,0,.16), 0 14px 32px -10px rgba(255,185,0,.6);
}
.sr-watch-play svg{ width:38%; height:38%; margin-left:8%; }
.sr-watch-badge{
  position:absolute; left:16px; top:16px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pf-star); background:rgba(16,22,47,.55); border:1px solid rgba(255,244,210,.25);
  padding:7px 11px; border-radius:999px; backdrop-filter:blur(4px);
}
.sr-watch-badge i{ width:7px; height:7px; border-radius:50%; background:#E5484D; box-shadow:0 0 0 3px rgba(229,72,77,.25); }
.sr-watch-meta{
  position:absolute; left:18px; right:18px; bottom:14px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px;
  font-size:.8rem; color:var(--pf-night-soft);
}
.sr-watch figcaption{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:12px; font-size:.9rem; color:var(--pf-ink-soft); }

/* Map figure inside the article */
.sr-figure{ margin:1.6em 0 2em; }
.sr-figure .pf-parchment{ padding:clamp(12px, 2vw, 20px); }
.sr-figure svg{ display:block; width:100%; height:auto; }
.sr-figure figcaption{ margin-top:12px; font-size:.86rem; color:var(--pf-ink-soft); display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }

/* Sources list */
.sr-srclist{ list-style:none; margin:1.2em 0 0; padding:0; display:grid; gap:12px; }
.sr-srclist li{ margin:0; }
.sr-src{
  display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:14px;
  padding:14px 16px; background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius);
}
.sr-src-ico{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
  background:var(--sr-src-bg, #FCEFD2); color:var(--pf-ink); border:1.5px solid var(--pf-ink);
}
.sr-src-ico svg{ width:22px; height:22px; }
.sr-src--lecture{ --sr-src-bg:#E1E6F4; }
.sr-src--video{ --sr-src-bg:#F7DCD3; }
.sr-src-type{
  display:block; font-family:var(--pf-font-head); font-weight:700; font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-ink-soft); margin-bottom:3px;
}
.sr-src-title{ display:block; font-family:var(--pf-font-head); font-weight:700; font-size:.98rem; line-height:1.3; color:var(--pf-ink); }
.sr-src-sub{ display:block; font-size:.84rem; color:var(--pf-ink-soft); margin-top:2px; }
.sr-src-where{ font-size:.78rem; color:var(--pf-ink-soft); text-align:right; white-space:nowrap; }

/* Keep walking CTA */
.sr-cta{ padding-block:clamp(64px, 8vw, 104px) clamp(110px, 12vw, 160px); text-align:center; overflow:hidden; }
.sr-cta .pf-container{ position:relative; z-index:1; }
.sr-cta .pf-h2{ margin-inline:auto; }
.sr-cta .pf-lead{ margin-inline:auto; }
.sr-cta .pf-actions{ justify-content:center; }
.sr-cta .pf-trail{ margin:0 auto 22px; color:var(--pf-gold-glow); opacity:.55; }


/* ==========================================================================
   5. People
   ========================================================================== */
.sr-filterbar{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  padding:18px 0; margin:0; list-style:none;
}
.sr-filter{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--pf-font-head); font-weight:700; font-size:.88rem; line-height:1.2;
  color:var(--pf-ink); text-decoration:none; background:var(--pf-card);
  border:1.5px solid var(--pf-line-strong); border-radius:999px; padding:9px 16px;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sr-filter b{ font-family:var(--pf-font-serif); font-weight:600; color:var(--pf-gold-deep); font-size:.95rem; }
.sr-filter:hover{ border-color:var(--pf-gold); }
.sr-filter[aria-pressed="true"]{ background:var(--pf-night); border-color:var(--pf-night); color:var(--pf-star); }
.sr-filter[aria-pressed="true"] b{ color:var(--pf-gold-glow); }
.sr-filter-wrap{ border-bottom:1px solid var(--pf-line); background:var(--pf-sand-light); }

.sr-group{ scroll-margin-top:16px; }
.sr-group[hidden]{ display:none; }
.sr-group + .sr-group{ border-top:1px solid var(--pf-line); }
.sr-group-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px 32px; margin-bottom:clamp(24px, 3vw, 36px); }
.sr-group-title{ display:flex; align-items:center; gap:20px; }
.sr-group-title .pf-icon-disc{ --pf-s:76px; }
.sr-group-title .pf-title{ margin:0; }
.sr-group-title .pf-h2{ margin-bottom:.15em; }
.sr-group-title .pf-lead{ font-size:1rem; margin:0; }
.sr-people{ --pf-min:270px; }
.sr-people .pf-person{ align-items:center; }
.sr-people .pf-person-body{ gap:3px; }
.sr-people .pf-card-title{ font-size:1.02rem; }
.sr-people .pf-person-ar{ font-size:1.12rem; margin-top:1px; }
.sr-people .pf-soon{ font-size:.58rem; padding:4px 9px 4px 8px; margin-top:6px; }
.sr-people .pf-soon::before{ width:7px; height:9px; }
.sr-people .pf-person:hover{ border-color:var(--pf-line-strong); }
.sr-noportrait{ max-width:860px; margin-inline:auto; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(18px, 3vw, 32px); align-items:center; }
.sr-noportrait .pf-h3{ margin-bottom:.35em; }
.sr-noportrait p{ margin:0; }
.sr-emblems{ display:flex; gap:8px; }
.sr-emblems .pf-star8{ --pf-s:46px; font-size:1.05rem; }


/* ==========================================================================
   6. Sources
   ========================================================================== */
.sr-method{ position:relative; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 30px); margin:0; padding:0; list-style:none; }
.sr-method::before{
  /* the dotted road that links the four steps */
  content:""; position:absolute; top:39px; left:12.5%; right:12.5%; height:6px; z-index:0;
  background:radial-gradient(circle, var(--pf-gold-deep) 1.7px, transparent 2.2px) 0 50% / 12px 6px repeat-x; opacity:.55;
}
.sr-method li{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.sr-method .pf-icon-disc{ --pf-s:80px; }
.sr-method-step{
  font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pf-gold-deep); margin-top:6px;
}
.sr-method h3{ margin:0; font-size:1.12rem; }
.sr-method p{ margin:0; font-size:.93rem; line-height:1.55; color:var(--pf-ink-soft); max-width:26ch; }

.sr-principles{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px, 4vw, 48px); }
.sr-principle{ display:flex; gap:16px; align-items:flex-start; }
.sr-principle .pf-icon-disc{ --pf-s:56px; }
.sr-principle h3{ margin:4px 0 6px; font-size:1.08rem; }
.sr-principle p{ margin:0; font-size:.95rem; line-height:1.6; }

.sr-libnav{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.sr-libnav a{ text-decoration:none; }
.sr-libnav .pf-chip{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink); }
.sr-libnav .pf-chip svg{ width:16px; height:16px; color:var(--pf-gold-deep); }
.sr-libnav .pf-chip:hover{ border-color:var(--pf-gold); border-style:solid; }

.sr-shelf{ scroll-margin-top:16px; }
.sr-shelf + .sr-shelf{ margin-top:clamp(48px, 6vw, 72px); }
.sr-shelf-head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; margin-bottom:22px; }
.sr-shelf-title{ display:flex; align-items:center; gap:16px; }
.sr-shelf-title .pf-icon-disc{ --pf-s:56px; }
.sr-shelf-title h2{ margin:0; font-size:clamp(1.4rem, 2.4vw, 1.8rem); }
.sr-shelf-title p{ margin:2px 0 0; font-size:.92rem; color:var(--pf-ink-soft); }
.sr-shelf-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(16px, 2vw, 24px); align-items:stretch; }
.sr-shelf .pf-empty{ justify-content:center; }
.sr-shelf .pf-empty .pf-icon-disc{ --pf-s:64px; }

/* Source card template */
.sr-scard{ padding:22px; gap:14px; }
.sr-scard-row{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:start; }
.sr-scard-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.sr-scard .pf-card-title{ font-size:1.12rem; }
.sr-scard dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; margin:0; font-size:.86rem; }
.sr-scard dt{ font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pf-ink-soft); padding-top:3px; }
.sr-scard dd{ margin:0; color:var(--pf-ink-body); min-width:0; }
.sr-scard dd .sr-slot{ font-size:.58rem; }
.sr-cover{ width:92px; flex:none; }
.sr-cover svg{ display:block; width:100%; height:auto; }
.sr-thumb{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(180deg, var(--pf-night-deep), var(--pf-night) 65%, #31346A); }
.sr-thumb .sr-watch-play{ width:54px; box-shadow:0 0 0 7px rgba(255,185,0,.16); }
.sr-thumb-len{ position:absolute; right:10px; bottom:10px; font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; color:var(--pf-star); background:rgba(16,22,47,.7); padding:4px 7px; border-radius:6px; }
.sr-wave{ width:92px; height:92px; border-radius:16px; display:grid; place-items:center; background:#E1E6F4; border:1.5px solid var(--pf-ink); box-shadow:3px 4px 0 var(--pf-ink); }
.sr-wave svg{ width:62%; height:62%; }

.sr-suggest{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:center; }
.sr-suggest .pf-h3{ margin:0 0 .3em; }
.sr-suggest p{ margin:0; }


/* ==========================================================================
   7. About
   ========================================================================== */
.sr-about-hero{ padding-bottom:0; }
.sr-about-hero .pf-hero-inner{ padding-bottom:clamp(8px, 2vw, 24px); }
.sr-about-hero .pf-lead{ max-width:56ch; }
.sr-panorama{ position:relative; z-index:1; width:100%; margin-top:clamp(8px, 2vw, 24px); line-height:0; }
.sr-panorama svg{ display:block; width:100%; height:auto; min-height:180px; }
.pf-night.sr-hero--about{
  background-image:
    radial-gradient(50% 60% at 96% 92%, rgba(229,138,63,.42) 0%, rgba(229,138,63,0) 70%),
    radial-gradient(40% 50% at 100% 70%, rgba(201,96,106,.32) 0%, rgba(201,96,106,0) 70%),
    radial-gradient(80% 70% at 30% 0%, rgba(74,79,134,.5) 0%, rgba(74,79,134,0) 60%),
    linear-gradient(180deg, var(--pf-night-deep) 0%, var(--pf-night) 60%, #2B2D5C 100%);
}

.sr-family{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.sr-family a, .sr-family .sr-family-here{
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:16px;
  padding:14px 18px 14px 14px; background:var(--pf-card); border:1px solid var(--pf-line);
  border-radius:var(--pf-radius); text-decoration:none; color:var(--pf-ink-body);
  transition:transform .2s var(--pf-ease), border-color .2s ease, box-shadow .2s ease;
}
.sr-family a:hover{ transform:translateY(-2px); border-color:var(--pf-gold); box-shadow:var(--pf-shadow); }
.sr-family-ico{ width:52px; height:52px; border-radius:50%; overflow:hidden; display:block; }
.sr-family-ico svg, .sr-family-ico img{ display:block; width:100%; height:100%; }
.sr-family b{ display:block; font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink); font-size:1rem; line-height:1.25; }
.sr-family small{ display:block; font-size:.84rem; color:var(--pf-ink-soft); line-height:1.4; }
.sr-family-go{ font-family:var(--pf-font-head); font-weight:700; font-size:.8rem; color:var(--pf-ink-soft); white-space:nowrap; }
.sr-family-here{ border:1.5px solid var(--pf-gold); background:#FFF7E0; }

.sr-halves{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(18px, 3vw, 36px); }
.sr-half{ border-radius:28px; padding:clamp(26px, 3.4vw, 40px); overflow:hidden; display:flex; flex-direction:column; gap:14px; }
.sr-half .pf-lockup{ margin:0; }
.sr-half .pf-actions{ margin-top:auto; padding-top:10px; }
.sr-half-art{ margin:0 calc(-1 * clamp(26px, 3.4vw, 40px)) 4px; height:120px; position:relative; }
.sr-half-art svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sr-half--seerah{ background:var(--pf-card); border:1px solid var(--pf-line); box-shadow:var(--pf-shadow); }
.sr-half .pf-h3{ margin:0; }
.sr-half p{ margin:0; }
.sr-halves-join{
  position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%, -50%);
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center; text-align:center;
  background:var(--pf-gold); color:var(--pf-night); box-shadow:0 0 0 7px var(--pf-sand), 0 14px 26px -12px rgba(0,0,0,.4);
  font-family:var(--pf-font-serif); font-weight:600; font-size:1.02rem; line-height:1;
}
.sr-halves-join small{ display:block; font-family:var(--pf-font-head); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; margin-top:3px; }

.sr-promise{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px); }
.sr-promise .pf-card{ align-items:flex-start; padding:24px 22px 22px; }
.sr-promise .pf-icon-disc{ --pf-s:60px; margin-bottom:6px; }
.sr-promise .pf-card-title{ font-size:1.12rem; }

.sr-grow .pf-route{ margin-top:8px; }
.sr-grow .pf-stop-label{ font-size:.9rem; }


/* ==========================================================================
   8. 404
   ========================================================================== */
.sr-lost{ min-height:min(82vh, 820px); display:flex; align-items:center; padding:clamp(56px, 8vw, 96px) 0 clamp(150px, 16vw, 210px); }
.sr-lost .pf-container{ position:relative; z-index:1; text-align:center; }
.sr-lost .pf-display{ max-width:14ch; margin-inline:auto; }
.sr-lost .pf-lead{ margin-inline:auto; }
.sr-lost .pf-actions{ justify-content:center; }
.sr-lost-num{
  display:block; font-family:var(--pf-font-serif); font-weight:600; font-size:clamp(4.4rem, 12vw, 8rem);
  line-height:.9; letter-spacing:-0.05em; color:var(--pf-gold-glow); margin:0 0 18px;
  text-shadow:0 0 40px rgba(255,211,110,.35);
}
.sr-lost-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; margin:30px 0 0; padding:0; list-style:none; font-size:.92rem; }
.sr-lost-links a{ color:var(--pf-star); text-decoration:underline; text-decoration-color:var(--pf-gold); text-underline-offset:4px; text-decoration-thickness:1.5px; }
.sr-lost-links a:hover{ color:var(--pf-gold-glow); }
.sr-lost-trail{ position:absolute; left:0; right:0; bottom:clamp(40px, 6vw, 80px); z-index:0; pointer-events:none; }
.sr-lost-trail svg{ display:block; width:100%; height:auto; }
.sr-lost-moon{ position:absolute; z-index:0; right:clamp(16px, 9vw, 150px); top:clamp(24px, 6vw, 80px); width:clamp(70px, 9vw, 120px); pointer-events:none; }
.sr-wander{ animation:sr-wander 2.6s var(--pf-ease) both; animation-delay:calc(var(--sr-i, 0) * 120ms + 300ms); }
@keyframes sr-wander{ from{ opacity:0; } to{ opacity:var(--sr-o, 1); } }


/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media (max-width:1199px){
  .sr-jgrid{ grid-template-columns:minmax(0,1fr); }
  .sr-stagenav{ display:none; }
  .sr-jump{ display:block; margin-bottom:clamp(8px, 2vw, 20px); }
  .sr-chgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .sr-promise{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:1060px){
  .sr-read-grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .sr-read-main{ margin-inline:auto; }
  /* TOC collapses into a disclosure above the article */
  .sr-toc{ position:static; max-width:740px; width:100%; margin:0 auto 28px; }
  .sr-toc details{ background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-radius); padding:14px 18px; }
  .sr-toc summary{ cursor:pointer; }
  .sr-toc-head{ margin:0; }
  .sr-toc-head svg{ display:block; width:16px; height:16px; transition:transform .2s ease; }
  .sr-toc details[open] .sr-toc-head svg{ transform:rotate(180deg); }
  .sr-toc details[open] ol{ margin-top:14px; }
  .sr-toc-foot{ display:none; }
}

@media (max-width:900px){
  .sr-hero-art{ max-width:340px; justify-self:center; }
  .sr-hero .pf-hero-inner{ grid-template-columns:minmax(0,1fr); }
  .sr-method{ grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:36px; }
  .sr-method::before{ display:none; }
  .sr-glance dl{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

@media (max-width:960px){
  /* Journey: one column, the path runs down the left edge */
  .sr-stage, .sr-path > .sr-stage:nth-of-type(even){
    grid-template-columns:56px minmax(0,1fr); grid-template-areas:"mark card";
    column-gap:14px; align-items:start; padding-block:14px;
  }
  .sr-stage-art{ display:none; }
  .sr-stage-markwrap{ place-items:start center; padding-top:18px; }
  .sr-stage-mark{ width:56px; height:56px; box-shadow:0 0 0 5px var(--pf-sand); }
  .sr-stage.is-current .sr-stage-mark{ box-shadow:0 0 0 5px var(--pf-sand), 0 0 0 7px rgba(245,184,65,.55); }
  .sr-stage-mark .pf-star8{ --pf-s:42px; font-size:1rem; }
  .sr-path::before{ left:28px; }
  .sr-path-start{ justify-content:flex-start; }
  .sr-path-start-pill{ margin-left:3px; }
  .sr-path-end{ display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:14px; text-align:left; align-items:start; }
  .sr-end-mark{ width:56px; height:56px; margin:0; box-shadow:0 0 0 5px var(--pf-sand), 0 0 0 7px rgba(245,184,65,.5); }
  .sr-end-mark svg{ width:32px; height:32px; }
  .sr-path-end-body{ padding-top:6px; }
  .sr-path-end .pf-h2, .sr-path-end .pf-lead{ margin-inline:0; }
  .sr-path-end .pf-eyebrow--center{ justify-content:flex-start; }
  .sr-path-end .pf-eyebrow--center::after{ display:none; }
  .sr-path-end .pf-actions{ justify-content:flex-start; }
}

@media (max-width:860px){
  .sr-halves{ grid-template-columns:minmax(0,1fr); }
  .sr-halves-join{ position:relative; left:auto; top:auto; transform:none; margin:-36px auto; }
  .sr-noportrait{ grid-template-columns:minmax(0,1fr); text-align:center; }
  .sr-emblems{ justify-content:center; }
  .sr-principles{ grid-template-columns:minmax(0,1fr); }
  .sr-shelf-grid{ grid-template-columns:minmax(0,1fr); }
  .sr-suggest{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:640px){
  .sr-pager{ grid-template-columns:minmax(0,1fr); }
  .sr-pager-next{ text-align:left; align-items:flex-start; }
  .sr-pager-next .pf-card-meta{ justify-content:flex-start; }
  .sr-chgrid{ grid-template-columns:minmax(0,1fr); }
  .sr-promise{ grid-template-columns:minmax(0,1fr); }
  .sr-glance dl{ grid-template-columns:minmax(0,1fr); }
  .sr-src{ grid-template-columns:42px minmax(0,1fr); }
  .sr-src-ico{ width:42px; height:42px; }
  .sr-src-where{ grid-column:2; text-align:left; white-space:normal; }
  .sr-group-title{ gap:14px; align-items:flex-start; }
  .sr-group-title .pf-icon-disc{ --pf-s:56px; }
  .sr-scard-row{ grid-template-columns:minmax(0,1fr); }
  .sr-cover{ width:84px; }
}

@media (max-width:560px){
  /* chapter rows: hourglass icon only (the words stay for screen readers) */
  .sr-chlist li{ column-gap:8px; grid-template-columns:24px minmax(0,1fr) auto; }
  .sr-chlist .pf-soon{ font-size:0; letter-spacing:0; gap:0; padding:5px 6px; }
  .sr-chlist .pf-soon::before{ width:8px; height:10px; }
  .sr-stage-card::before{ left:22px; }
  .sr-method{ grid-template-columns:minmax(0,1fr); }
  .sr-filter{ font-size:.82rem; padding:8px 13px; }
  .sr-lesson{ box-shadow:4px 5px 0 var(--pf-gold); }
  .sr-ayah-corner{ display:none; }
}

/* Reduced motion: pf.css already stops every animation inside .pf-main;
   this keeps the 404 footprints fully visible too. */
@media (prefers-reduced-motion: reduce){
  .sr-wander{ animation:none !important; opacity:var(--sr-o, 1); }
  .sr-print{ transition:none; }
}


/* ==========================================================================
   10. Additions (round 2)
   ========================================================================== */
/* Hidden SVG sprite (symbols + gradients used by inline art on the page).
   Not display:none: gradients inside a display:none SVG do not paint. */
.sr-sprite{ position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }

/* Journey: wider centre lane for the winding road (desktop only: under
   961px the stage rows switch to "mark card" and must keep that grid) */
@media (min-width:961px){
  .sr-stage{ grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr); }
}
.sr-stagenav-list{ position:relative; }
.sr-stagenav-progress{ z-index:1; }
.sr-stagenav-dot{ z-index:2; }
.sr-legend .pf-soon{ font-size:.58rem; padding:4px 8px 4px 7px; }
.sr-legend-link{
  font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink);
  text-decoration:underline; text-decoration-color:var(--pf-gold); text-decoration-thickness:2px; text-underline-offset:3px;
}
.sr-path-svg .sr-prints{ pointer-events:none; }
.sr-hero .pf-hero-art.sr-hero-art{ max-width:420px; }
.sr-hero-ar{ text-align:left; }
.sr-stagenav-foot a{ display:inline-flex; align-items:center; gap:4px; padding:0; border-radius:6px; }
.sr-path-road{ stroke-width:16; opacity:.3; }
.sr-print{ fill:var(--pf-dune-deep); opacity:.5; }
.sr-print.is-walked{ fill:#C98A1E; opacity:1; }
.sr-stage-numeral{
  left:2%; top:-2%; transform:none; font-size:clamp(5rem, 8vw, 7.4rem); opacity:.12;
}

/* Stage hero: numbered seal beside the eyebrow */
.sr-stagehead{ display:flex; align-items:center; gap:18px; margin-bottom:16px; }
.sr-stagehead .pf-eyebrow{ margin:0; }
.sr-stagehead-star{ --pf-s:50px; font-size:1.3rem; }
.pf-night .sr-stagehead-star{ outline-color:rgba(255,211,110,.55); }
.sr-hero .pf-hero-art.sr-hero-art--sm{ max-width:290px; }
.sr-hero--chapter .pf-h1{ max-width:19ch; }
.sr-pager-soon{ border-style:dashed; border-color:var(--pf-line-strong); box-shadow:none; background:rgba(255,253,247,.6); }

/* Chapter: TOC track + article details */
.sr-toc-track{ position:relative; }
.sr-toc-bar{ z-index:1; }
.sr-article [id]{ scroll-margin-top:24px; }
.sr-article .sr-hadith-text{ margin:0; }
.sr-article .sr-ayah-tr{ margin:0 auto; }
.sr-slot-line--short{ max-width:52%; margin-top:8px; margin-bottom:18px; }
.sr-article h2 > .sr-slot, .sr-article h3 > .sr-slot{ vertical-align:middle; margin:0 0 0 8px; font-size:.58rem; }
.sr-article ul.sr-ph{ color:var(--pf-ink-soft); }
.sr-pullquote p{ margin:0; }
.sr-reviewed{ font-size:.86rem; color:var(--pf-ink-soft); padding-top:16px; border-top:1px dashed var(--pf-line-strong); margin-top:1.8em !important; line-height:2; }
.sr-reviewed a{ color:var(--pf-ink); font-weight:600; text-decoration-color:var(--pf-gold); text-underline-offset:3px; }
.sr-src > span:nth-child(2){ min-width:0; }

/* Night call-to-action band with dunes above and below */
.sr-cta{ position:relative; isolation:isolate; padding-top:clamp(120px, 12vw, 176px); }
.sr-cta-dunes{ position:absolute; top:-1px; left:0; right:0; z-index:0; }

/* People */
.sr-group-aside{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }

/* Sources */
.sr-shelf-title h3{ margin:0; font-size:clamp(1.3rem, 2.2vw, 1.6rem); }
.sr-scard h4.pf-card-title{ font-size:1.1rem; }
.sr-suggest .pf-eyebrow{ margin-bottom:10px; }

/* About */
.sr-half-art{ margin-top:calc(-1 * clamp(26px, 3.4vw, 40px)); }
.sr-half.pf-dusk{ box-shadow:0 26px 50px -30px rgba(16,22,47,.7); }

/* 404: the trail svg carries its own dunes */
.sr-lost{ padding-bottom:clamp(180px, 19vw, 270px); }
.sr-lost-trail{ bottom:0; }
.sr-lost-trail svg{ width:100%; height:clamp(140px, 16vw, 230px); }

@media (max-width:900px){
  .sr-hero .pf-hero-art.sr-hero-art{ max-width:320px; }
}
@media (max-width:560px){
  .sr-hero .pf-hero-art.sr-hero-art{ max-width:250px; }
  .sr-hero .pf-hero-art.sr-hero-art--sm{ max-width:200px; }
  .sr-stagehead-star{ --pf-s:42px; font-size:1.1rem; }
}

/* ==========================================================================
   11. Polish pass (site review)
   ========================================================================== */
/* Single-column heroes (About) use the full centred column, not the
   1.18fr copy track meant for heroes with art on the right. */
.sr-hero .pf-hero-inner--single{ grid-template-columns:minmax(0,1fr); }
.sr-about-hero .pf-h1{ max-width:22ch; }
/* pull the panorama up into the empty sky under the lead on wide screens */
.sr-about-hero .sr-panorama{ margin-top:calc(-1 * clamp(0px, 7vw - 30px, 84px)); }

/* People: give the "Coming soon" chip room inside four-up cards */
.sr-people .pf-person{ gap:14px; padding:18px 16px 18px 18px; }
.sr-people .pf-star8{ --pf-s:52px; margin:4px; font-size:1.15rem; }
.sr-people .pf-soon{ max-width:100%; }

@media (max-width:640px){
  /* About panorama: show the whole scene (Kaaba to caravan) on phones */
  .sr-panorama svg{ min-height:0; }
  .sr-pano-labels{ display:none; }
}

@media (max-width:560px){
  /* Journey end: seal above the copy so the buttons get the full width */
  .sr-path-end{ grid-template-columns:minmax(0,1fr); row-gap:16px; }
  .sr-path-end .pf-actions .pf-btn{ max-width:100%; }
}