/* ==========================================================================
   Prophetic Footsteps — shared design system (pf.css)
   seerah.howtomuslim.org  ·  history.howtomuslim.org (The Caravan · Rihla)

   ONE file, byte-identical in both sites:
     seerah/assets/css/pf.css   and   history/assets/css/pf.css
   Edit one, copy it over the other. Never fork them.

   Load order on every page (see _reference/partials/*-head.html):
     1. /assets/css/site-chrome.css   the How to Muslim header + footer
     2. /assets/css/pf.css            this file
     3. the page's own <style> block  sr- / cv- / rh- classes only

   House rules for this file
   - It owns ONLY classes prefixed pf- and variables prefixed --pf-.
   - It never touches the chrome's htm-/wtn-/cta-/footer- classes and never
     redefines the chrome's tokens (--gold, --charcoal-blue, --off-white…).
     The chrome uses --gold for the logo fill and footer headings.
   - Light theme only, like the sibling sites. No dark-mode block on purpose.
   - Every animation stops under prefers-reduced-motion (section 16).
   - Content is fully visible without JavaScript: .pf-reveal only hides
     things once pf.js has put .pf-js on <html> (section 14).

   The idea: SAND. The desert the Prophet ﷺ walked (footsteps), the trade
   routes the ummah travelled (caravan), the sand in an hourglass (time).
   Sand-and-parchment pages, indigo night bands with stars, lantern gold,
   ember dusk, oasis green for Madinah, and a jewel colour per history era.

   Contents
     0  Base           5  Section titles     10 Cards           15 Focus
     1  Tokens         6  Buttons & links    11 Trails & routes 16 Reduced motion
     2  Surfaces       7  Chips & badges     12 Atmosphere      17 Print
     3  Typography     8  Breadcrumbs        13 Hero
     4  Layout         9  Lockup             14 Motion
   ========================================================================== */


/* ==========================================================================
   0. Base
   ========================================================================== */

/* site-chrome.css is authored against a border-box page (as on the guide
   site). Without this its padded max-width containers render too wide. */
*,*::before,*::after{ box-sizing:border-box; }

/* The chrome sets body{background:var(--off-white)}. This file loads after
   it, so sand wins — keep them in that order. */
body{
  margin:0;
  background:var(--pf-sand);
  color:var(--pf-ink-body);
  font-family:var(--pf-font-body);
  line-height:1.6;
}

/* U+FDFA (ﷺ) renders at wildly different sizes depending on the font that
   ends up drawing it — some make a small mark, others a multi-line seal
   that breaks out of its card. Hard-clip it so containment never depends
   on the renderer. max-height in em keeps the clip proportional.
   (Copied verbatim from Ayah Unpacked.) Always: <span class="sw">ﷺ</span> */
.sw{
  display:inline-block; font-family:'Noto Naskh Arabic','Amiri',serif;
  font-size:0.74em; line-height:1; max-height:1.15em;
  overflow:hidden; vertical-align:baseline;
}

.pf-visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Skip link — sits before the header in the header partial. Invisible
   until a keyboard user tabs onto it. */
.pf-skip{
  position:absolute; left:16px; top:-60px; z-index:1100;
  background:var(--pf-night); color:var(--pf-star);
  font:700 .9rem/1 var(--pf-font-head); text-decoration:none;
  padding:12px 18px; border-radius:0 0 12px 12px;
  transition:top .15s ease;
}
.pf-skip:focus{ top:0; outline:3px solid var(--pf-gold-glow); outline-offset:2px; }

/* Smoothing lives on <main> only, so the shared header and footer render
   exactly as they do on the sibling sites. */
.pf-main{ display:block; font-size:1.0625rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.pf-main img, .pf-main svg{ max-width:100%; }
.pf-main ::selection{ background:rgba(245,184,65,.42); }


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root{
  /* --- Sand & parchment: the page itself ------------------------------ */
  --pf-sand:        #F6EBD6;   /* default page background */
  --pf-sand-light:  #FBF4E6;   /* lighter alternate band */
  --pf-sand-deep:   #EEDDBE;   /* deeper alternate band */
  --pf-dune:        #E2C595;   /* dune mid-tone, illustration fills */
  --pf-dune-deep:   #C99A5E;   /* dune shadow, illustration fills */
  --pf-dune-dusk:   #B9977A;   /* mid dune at dusk/night (.pf-dunes middle layer) */
  --pf-dune-night:  #2C3566;   /* far dune at night (.pf-dunes back layer) */
  --pf-parchment:   #FCF6EA;   /* manuscript panels */
  --pf-card:        #FFFDF7;   /* card surface on sand */

  /* --- Ink ------------------------------------------------------------ */
  --pf-ink:         #262B44;   /* headings: night-ink, a cousin of --charcoal-blue */
  --pf-ink-body:    #3B3428;   /* running text: warm ink (10.4:1 on sand) */
  --pf-ink-soft:    #6A5E4D;   /* secondary text (5.3:1 on sand, 4.7:1 on sand-deep) */
  --pf-line:        #E7D6B6;   /* hairlines, card borders */
  --pf-line-strong: #D2B98B;   /* chip borders, dashed rules */

  /* --- Night sky -------------------------------------------------------- */
  --pf-night:       #1C2445;   /* indigo night: hero bands */
  --pf-night-deep:  #10162F;   /* top of the sky */
  --pf-night-mid:   #2A3563;   /* lower sky, far dunes at night */
  --pf-twilight:    #4A4F86;   /* the blue-violet just above the horizon */
  --pf-star:        #FFF4D2;   /* headings + stars on night */
  --pf-night-text:  #C8CEE4;   /* running text on night (9.7:1) */
  --pf-night-soft:  #9AA3C7;   /* secondary text on night (6.1:1) */

  /* --- Dusk & ember (sunset; history leans on these) -------------------- */
  --pf-ember:       #E58A3F;   /* lantern flame, sunset band (fills only) */
  --pf-dusk:        #D9774A;   /* sunset fills */
  --pf-dusk-rose:   #C9606A;   /* last light, sunset gradient */
  --pf-terracotta:  #A84F33;   /* mud brick; safe as text on sand (4.8:1) */

  /* --- Gold (lantern light, footprints) --------------------------------- */
  --pf-gold:        #F5B841;   /* fills, swashes, footprints, icon disc */
  --pf-gold-glow:   #FFD36E;   /* gold text + glows on night (10.7:1) */
  --pf-gold-deep:   #8C5D12;   /* gold as TEXT on sand (4.8:1) */
  /* Primary buttons use the chrome's own --gold / --charcoal-blue so they
     match Ayah Unpacked and Little Amanah exactly. */

  /* --- Oasis (Madinah, palms) ------------------------------------------ */
  --pf-oasis:       #2A7050;   /* palm / dome green; text-safe on sand */
  --pf-oasis-deep:  #1D5139;
  --pf-oasis-soft:  #D5E3CC;

  /* --- Jewel accents, one per history era (all ≥4.9:1 with white text) -
     Silk Road stones and tiles. Use through the .pf-era-N helpers below,
     which set --pf-accent for any component inside them. */
  --pf-era-1:  #1D7356;  /* emerald      · The Rightly Guided Caliphs    */
  --pf-era-2:  #0F7480;  /* turquoise    · The Umayyads (Damascus mosaics) */
  --pf-era-3:  #2D4A97;  /* lapis        · The Abbasids & the Golden Age */
  --pf-era-4:  #A3303F;  /* pomegranate  · Al-Andalus (Granada)          */
  --pf-era-5:  #A9482A;  /* carnelian    · The Crusades & Salahuddin     */
  --pf-era-6:  #6E4290;  /* amethyst     · The Mongols & the Mamluks     */
  --pf-era-7:  #94620F;  /* Mali gold    · West Africa                   */
  --pf-era-8:  #9A3A72;  /* tulip rose   · The Ottomans                  */
  --pf-era-9:  #1E5D91;  /* cobalt       · The Safavids & the Mughals    */
  --pf-era-10: #3F7D3A;  /* jade         · South-East Asia & China       */
  --pf-era-11: #47408F;  /* indigo       · Colonialism & Renewal         */
  --pf-era-12: #6B6A1F;  /* brass        · The Modern Ummah              */

  /* --- Type ------------------------------------------------------------ */
  --pf-font-head:   "Montserrat Alternates", Manrope, sans-serif;  /* brand voice */
  --pf-font-body:   Manrope, system-ui, sans-serif;
  --pf-font-serif:  Fraunces, "Iowan Old Style", Georgia, serif;   /* wordmark, numerals, quotes — sparingly */
  --pf-font-arabic: Amiri, "Noto Naskh Arabic", serif;

  --pf-fs-xs:      .78rem;
  --pf-fs-sm:      .9rem;
  --pf-fs-base:    1.0625rem;
  --pf-fs-lg:      clamp(1.06rem, 1.3vw, 1.2rem);
  --pf-fs-h4:      1.08rem;
  --pf-fs-h3:      clamp(1.2rem, 1.6vw, 1.38rem);
  --pf-fs-h2:      clamp(1.8rem, 3.5vw, 2.65rem);
  --pf-fs-h1:      clamp(2.25rem, 5vw, 3.6rem);
  --pf-fs-display: clamp(2.55rem, 6.4vw, 4.6rem);

  /* --- Space, shape, depth --------------------------------------------- */
  --pf-max:        1180px;
  --pf-gutter:     clamp(16px, 4vw, 24px);
  --pf-section:    clamp(56px, 8vw, 104px);
  --pf-radius-sm:  10px;
  --pf-radius:     16px;
  --pf-radius-lg:  22px;
  --pf-shadow:      0 1px 0 rgba(255,255,255,.7) inset, 0 12px 30px -16px rgba(92,62,24,.30);
  --pf-shadow-lift: 0 1px 0 rgba(255,255,255,.7) inset, 0 24px 44px -18px rgba(92,62,24,.40);
  --pf-ease:       cubic-bezier(.2,.7,.2,1);

  /* --- Surface context (section 2 swaps these on night bands) ---------- */
  --pf-c-bg:          var(--pf-sand);
  --pf-c-heading:     var(--pf-ink);
  --pf-c-text:        var(--pf-ink-body);
  --pf-c-soft:        var(--pf-ink-soft);
  --pf-c-line:        var(--pf-line);
  --pf-c-line-strong: var(--pf-line-strong);
  --pf-c-accent:      var(--pf-gold-deep);    /* eyebrows, numerals, small gold text */
  --pf-c-card:        var(--pf-card);
  --pf-c-chip:        var(--pf-card);
  --pf-c-pattern:     var(--pf-dune-deep);
  --pf-c-shadow:      var(--pf-shadow);
  --pf-c-shadow-lift: var(--pf-shadow-lift);
  --pf-c-focus:       var(--pf-night);
}

/* Era / accent helpers: put one on a card (or any wrapper) and every
   accent-aware component inside picks it up via --pf-accent.
   --pf-accent-ink is the text colour that sits ON the accent. */
.pf-era-1 { --pf-accent:var(--pf-era-1);  }  .pf-era-2 { --pf-accent:var(--pf-era-2);  }
.pf-era-3 { --pf-accent:var(--pf-era-3);  }  .pf-era-4 { --pf-accent:var(--pf-era-4);  }
.pf-era-5 { --pf-accent:var(--pf-era-5);  }  .pf-era-6 { --pf-accent:var(--pf-era-6);  }
.pf-era-7 { --pf-accent:var(--pf-era-7);  }  .pf-era-8 { --pf-accent:var(--pf-era-8);  }
.pf-era-9 { --pf-accent:var(--pf-era-9);  }  .pf-era-10{ --pf-accent:var(--pf-era-10); }
.pf-era-11{ --pf-accent:var(--pf-era-11); }  .pf-era-12{ --pf-accent:var(--pf-era-12); }

/* Named accents for the seerah side (people groups, chapters…). */
.pf-accent-night { --pf-accent:var(--pf-night); }
.pf-accent-oasis { --pf-accent:var(--pf-oasis); }
.pf-accent-terracotta{ --pf-accent:var(--pf-terracotta); }
.pf-accent-rose  { --pf-accent:#9C4452; }
.pf-accent-lapis { --pf-accent:var(--pf-era-3); }
.pf-accent-gold  { --pf-accent:var(--pf-gold); --pf-accent-ink:var(--pf-night); }

/* Seerah chapter accents: the arc of a day, from desert noon to Madinah.
   1 Before the Prophethood · 2 The Revelation · 3 The Call in Makkah ·
   4 Sorrow & the Night Journey · 5 The Hijrah · 6 Building Madinah ·
   7 Treaty & Victory · 8 The Final Years */
.pf-ch-1{ --pf-accent:var(--pf-terracotta); }
.pf-ch-2{ --pf-accent:var(--pf-era-3); }
.pf-ch-3{ --pf-accent:#A9482A; }
.pf-ch-4{ --pf-accent:var(--pf-twilight); }
.pf-ch-5{ --pf-accent:#9C4452; }
.pf-ch-6{ --pf-accent:var(--pf-oasis); }
.pf-ch-7{ --pf-accent:var(--pf-era-7); }
.pf-ch-8{ --pf-accent:var(--pf-night); }


/* ==========================================================================
   2. Surfaces
   Components read the --pf-c-* context variables, so the same markup
   works on sand and on night. Wrap a band in .pf-night (or .pf-dusk) and
   its headings, text, chips, cards, buttons and focus rings all flip.
   .pf-sand resets a nested element (e.g. a light card on a night band).
   ========================================================================== */
.pf-sand{
  --pf-c-bg:var(--pf-sand); --pf-c-heading:var(--pf-ink); --pf-c-text:var(--pf-ink-body);
  --pf-c-soft:var(--pf-ink-soft); --pf-c-line:var(--pf-line); --pf-c-line-strong:var(--pf-line-strong);
  --pf-c-accent:var(--pf-gold-deep); --pf-c-card:var(--pf-card); --pf-c-chip:var(--pf-card);
  --pf-c-pattern:var(--pf-dune-deep); --pf-c-shadow:var(--pf-shadow);
  --pf-c-shadow-lift:var(--pf-shadow-lift); --pf-c-focus:var(--pf-night);
  color:var(--pf-c-text);
}

.pf-night, .pf-dusk, .pf-on-dark{
  --pf-c-bg:var(--pf-night);
  --pf-c-heading:var(--pf-star);
  --pf-c-text:var(--pf-night-text);
  --pf-c-soft:var(--pf-night-soft);
  --pf-c-line:rgba(255,244,210,.14);
  --pf-c-line-strong:rgba(255,244,210,.30);
  --pf-c-accent:var(--pf-gold-glow);
  --pf-c-card:rgba(255,255,255,.045);
  --pf-c-chip:rgba(255,255,255,.06);
  --pf-c-pattern:var(--pf-star);
  --pf-c-shadow:0 18px 40px -22px rgba(0,0,0,.65);
  --pf-c-shadow-lift:0 26px 50px -20px rgba(0,0,0,.75);
  --pf-c-focus:var(--pf-gold-glow);
  color:var(--pf-c-text);
}

/* Indigo night with a moon-glow up high and a faint ember on the horizon. */
.pf-night{
  position:relative; isolation:isolate;
  background-color:var(--pf-night);
  background-image:
    radial-gradient(80% 70% at 78% 0%, rgba(74,79,134,.55) 0%, rgba(74,79,134,0) 60%),
    radial-gradient(70% 60% at 8% 100%, rgba(217,119,74,.16) 0%, rgba(217,119,74,0) 60%),
    linear-gradient(180deg, var(--pf-night-deep) 0%, var(--pf-night) 55%, #232D58 100%);
}

/* History: sunset → night. The sky darkens upward, the last light sits
   on the horizon where the caravan walks. */
.pf-dusk{
  position:relative; isolation:isolate;
  background-color:#1A1D40;
  background-image:
    radial-gradient(60% 45% at 50% 108%, rgba(255,211,110,.55) 0%, rgba(255,211,110,0) 70%),
    linear-gradient(180deg, #12163A 0%, #262A5C 34%, #5A3A6E 60%, #A94F5E 80%, #E07A4C 93%, #F2A64E 100%);
}

/* Warm daylight sand with a soft sun-wash, for light heroes and bands. */
.pf-glow{
  position:relative; isolation:isolate;
  background-color:var(--pf-sand);
  background-image:
    radial-gradient(55% 70% at 88% 8%, rgba(245,184,65,.30) 0%, rgba(245,184,65,0) 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(201,96,106,.10) 0%, rgba(201,96,106,0) 70%);
}

.pf-bg-light{ background-color:var(--pf-sand-light); }
.pf-bg-deep { background-color:var(--pf-sand-deep); }
.pf-bg-parchment{ background-color:var(--pf-parchment); }


/* ==========================================================================
   3. Typography
   Montserrat Alternates = headings & UI (the How to Muslim voice).
   Manrope = reading text. Fraunces = wordmark, big numerals, pull-quotes
   only. Amiri / Noto Naskh Arabic = Arabic, always lang="ar" dir="rtl".
   ========================================================================== */

/* Sensible defaults for bare headings inside <main>. :where() keeps the
   specificity at zero so any class beats them. */
.pf-main :where(h1,h2,h3,h4,h5){
  font-family:var(--pf-font-head); font-weight:700;
  color:var(--pf-c-heading); line-height:1.15; letter-spacing:-0.01em;
  margin:0 0 .5em; text-wrap:balance;
}
.pf-main :where(p){ margin:0 0 1em; text-wrap:pretty; }
.pf-main :where(a:not([class])){
  color:var(--pf-c-heading); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--pf-gold);
  text-decoration-thickness:2px; text-underline-offset:3px;
  transition:color .15s ease, text-decoration-color .15s ease;
}
.pf-main :where(a:not([class])):hover{ color:var(--pf-c-accent); text-decoration-color:currentColor; }

.pf-display, .pf-h1, .pf-h2, .pf-h3, .pf-h4{
  font-family:var(--pf-font-head); font-weight:700; color:var(--pf-c-heading);
  margin:0 0 .45em; text-wrap:balance;
}
.pf-display{ font-size:var(--pf-fs-display); line-height:1.03; letter-spacing:-0.025em; }
.pf-h1     { font-size:var(--pf-fs-h1);      line-height:1.06; letter-spacing:-0.02em; }
.pf-h2     { font-size:var(--pf-fs-h2);      line-height:1.12; letter-spacing:-0.015em; }
.pf-h3     { font-size:var(--pf-fs-h3);      line-height:1.25; letter-spacing:-0.005em; }
.pf-h4     { font-size:var(--pf-fs-h4);      line-height:1.3; }

.pf-lead{
  font-size:var(--pf-fs-lg); line-height:1.65; color:var(--pf-c-soft);
  max-width:58ch; margin:0 0 1em; text-wrap:pretty;
}
.pf-small{ font-size:var(--pf-fs-sm); color:var(--pf-c-soft); }
.pf-muted{ color:var(--pf-c-soft); }

/* Eyebrow label: spaced small caps led by a little dotted route.
   .pf-eyebrow--center adds the route on both sides. */
.pf-eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--pf-font-head); font-weight:700;
  font-size:.76rem; line-height:1.3; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pf-c-accent); margin:0 0 16px;
}
.pf-eyebrow::before, .pf-eyebrow--center::after{
  content:""; flex:none; width:30px; height:4px;
  background:radial-gradient(circle, currentColor 1.5px, transparent 1.9px) 0 50% / 7.5px 4px repeat-x;
}
.pf-eyebrow--center{ justify-content:center; }
.pf-eyebrow--plain::before{ display:none; }

/* Gold brush swash behind the lower part of a phrase (the Little Amanah
   highlighter, made sandier). Wrap the words: <span class="pf-swash">…</span>.
   box-decoration-break gives every wrapped line its own stroke. */
.pf-swash{
  padding:0 .06em .04em;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'><path d='M5 17C70 9 170 6 262 8 322 9 368 10 395 8 399 12 397 17 391 19 322 21 238 21 152 22 92 23 42 25 9 26 2 25 1 19 5 17Z' fill='%23F7C95E'/></svg>") 0 100% / 100% .36em no-repeat;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.pf-swash--ember{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'><path d='M5 17C70 9 170 6 262 8 322 9 368 10 395 8 399 12 397 17 391 19 322 21 238 21 152 22 92 23 42 25 9 26 2 25 1 19 5 17Z' fill='%23E58A3F' fill-opacity='.8'/></svg>");
}

/* Thin hand-drawn gold underline under a whole section heading. */
.pf-underline{
  display:inline-block; padding-bottom:.34em;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'><path d='M3 9 C70 3 150 3 230 6 S290 10 297 7' fill='none' stroke='%23F5B841' stroke-width='3.4' stroke-linecap='round'/></svg>") 50% 100% / 100% .3em no-repeat;
}

/* Display serif, used sparingly. */
.pf-serif{ font-family:var(--pf-font-serif); font-weight:500; letter-spacing:-0.01em; }
.pf-serif-italic{ font-family:var(--pf-font-serif); font-style:italic; font-weight:400; }

/* Big numerals: chapter numbers, stats, years. */
.pf-numeral{
  font-family:var(--pf-font-serif); font-weight:600; font-style:normal;
  font-size:clamp(2.6rem, 5vw, 3.6rem); line-height:.9; letter-spacing:-0.03em;
  font-variant-numeric:lining-nums proportional-nums;
  color:var(--pf-c-accent);
}

/* Stat: a big serif number over a short label. */
.pf-stats{ display:flex; flex-wrap:wrap; gap:14px 40px; margin:0; padding:0; list-style:none; }
.pf-stat{ display:flex; flex-direction:column; gap:6px; }
.pf-stat-num{
  font-family:var(--pf-font-serif); font-weight:600; font-size:clamp(2rem, 3.6vw, 2.6rem);
  line-height:1; letter-spacing:-0.02em; color:var(--pf-c-heading);
}
.pf-stat-num em{ font-style:italic; font-weight:400; color:var(--pf-c-accent); }
.pf-stat-label{ font-size:var(--pf-fs-sm); color:var(--pf-c-soft); line-height:1.35; max-width:18ch; }

/* Pull quote. Never put Quran or hadith text here unless it is quoted
   exactly from a named, verified source. */
.pf-quote{
  position:relative; margin:0; padding:6px 0 6px 30px;
  font-family:var(--pf-font-serif); font-style:italic; font-weight:400;
  font-size:clamp(1.3rem, 2.4vw, 1.75rem); line-height:1.4; color:var(--pf-c-heading);
  border-left:3px solid var(--pf-gold);
}
.pf-quote cite, .pf-quote footer{
  display:block; margin-top:14px;
  font-family:var(--pf-font-head); font-style:normal; font-weight:700;
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pf-c-accent);
}

/* Arabic: correct only, never paraphrased. In an LTR column keep it
   aligned with its heading; unicode-bidi:isolate protects the English. */
.pf-arabic{
  font-family:var(--pf-font-arabic); font-weight:400; font-size:1.5em; line-height:1.9;
  color:var(--pf-c-accent); unicode-bidi:isolate; text-align:left;
}
.pf-arabic--inline{ font-size:1.15em; line-height:1; }

/* Long-form reading column, for when the real content arrives. */
.pf-prose{ max-width:68ch; font-size:1.0625rem; line-height:1.75; color:var(--pf-c-text); }
.pf-prose > * + *{ margin-top:1.1em; }
.pf-prose p{ margin:0; }
.pf-prose h2{ font-size:clamp(1.45rem, 2.4vw, 1.8rem); margin:2em 0 .2em; }
.pf-prose h3{ font-size:1.22rem; margin:1.7em 0 .1em; }
.pf-prose ul, .pf-prose ol{ padding-left:1.3em; margin:0; }
.pf-prose li{ margin:.35em 0; }
.pf-prose li::marker{ color:var(--pf-gold-deep); }
.pf-night .pf-prose li::marker{ color:var(--pf-gold-glow); }
.pf-prose blockquote{ margin:1.6em 0; }


/* ==========================================================================
   4. Layout
   ========================================================================== */
.pf-container{
  width:100%;
  max-width:calc(var(--pf-max) + 2 * var(--pf-gutter));
  margin-inline:auto; padding-inline:var(--pf-gutter);
}
.pf-container--narrow{ --pf-max:780px; }
.pf-container--mid   { --pf-max:980px; }
.pf-container--wide  { --pf-max:1320px; }

.pf-section{ padding-block:var(--pf-section); position:relative; }
.pf-section--tight{ padding-block:clamp(36px, 5vw, 64px); }
.pf-section--flush-top{ padding-top:0; }

/* Auto grid: cards at least --pf-min wide (default 280px). */
.pf-grid{
  display:grid; gap:clamp(16px, 2vw, 24px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, var(--pf-min, 280px)), 1fr));
}
.pf-grid--2{ grid-template-columns:repeat(2, minmax(0,1fr)); }
.pf-grid--3{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.pf-grid--4{ grid-template-columns:repeat(4, minmax(0,1fr)); }
@media (max-width:1024px){ .pf-grid--4{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:900px) { .pf-grid--3{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .pf-grid--2, .pf-grid--3, .pf-grid--4{ grid-template-columns:1fr; } }

.pf-split{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 5vw, 72px); align-items:center;
}
@media (max-width:860px){ .pf-split{ grid-template-columns:1fr; } }

.pf-stack > * + *{ margin-top:var(--pf-stack, 1rem); }
.pf-cluster{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--pf-gap, 10px); }
.pf-center{ text-align:center; margin-inline:auto; }


/* ==========================================================================
   5. Section titles
   <header class="pf-title pf-title--center">
     <p class="pf-eyebrow pf-eyebrow--center">The journey</p>
     <h2 class="pf-h2"><span class="pf-underline">Eight chapters, one life</span></h2>
     <p class="pf-lead">One line that says what this section is.</p>
   </header>
   ========================================================================== */
.pf-title{ margin:0 0 clamp(28px, 4vw, 48px); max-width:760px; }
.pf-title > :last-child{ margin-bottom:0; }
.pf-title .pf-h2, .pf-title .pf-h1{ margin-bottom:.35em; }
.pf-title--center{ text-align:center; margin-inline:auto; }
.pf-title--center .pf-lead{ margin-inline:auto; }
/* Title on the left, a link or button on the right (wraps on mobile). */
.pf-title-row{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap:16px 32px; margin:0 0 clamp(24px, 3.5vw, 40px);
}
.pf-title-row .pf-title{ margin:0; }


/* ==========================================================================
   6. Buttons & links
   ========================================================================== */
.pf-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; margin-top:28px; }

.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--pf-font-head); font-weight:700; font-size:1rem; line-height:1.2;
  padding:14px 26px; border-radius:999px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--pf-ease), filter .15s ease, background-color .15s ease,
             color .15s ease, border-color .15s ease, box-shadow .2s ease;
}
.pf-btn:hover{ transform:translateY(-2px); }
.pf-btn:active{ transform:translateY(0); }
.pf-btn-arrow{ display:inline-block; transition:transform .18s var(--pf-ease); }
.pf-btn:hover .pf-btn-arrow{ transform:translateX(4px); }
/* the little dot from the Ayah Unpacked hero button */
.pf-btn-dot{ width:9px; height:9px; border-radius:50%; background:var(--pf-terracotta); flex:none; }
.pf-btn svg{ width:18px; height:18px; flex:none; }

/* Primary = the sibling sites' gold pill: chrome --gold with --charcoal-blue text. */
.pf-btn--primary{ background:var(--gold, #FFB900); color:var(--charcoal-blue, #233D4D); }
.pf-btn--primary:hover{ filter:brightness(1.06); box-shadow:0 12px 26px -12px rgba(255,185,0,.75); }
.pf-night .pf-btn--primary, .pf-dusk .pf-btn--primary{ box-shadow:0 10px 34px -10px rgba(255,185,0,.55); }

/* Outline follows the surface: ink on sand, starlight on night. */
.pf-btn--outline{ background:transparent; color:var(--pf-c-heading); border-color:currentColor; }
.pf-btn--outline:hover{ background:rgba(245,184,65,.16); border-color:var(--pf-gold); }

/* Explicit on-dark variants, for when the parent isn't .pf-night. */
.pf-btn--on-dark{ background:transparent; color:var(--pf-star); border-color:rgba(255,244,210,.55); }
.pf-btn--on-dark:hover{ background:rgba(255,244,210,.10); border-color:var(--pf-gold-glow); color:#fff; }
.pf-btn--light{ background:var(--pf-star); color:var(--pf-night); }
.pf-btn--light:hover{ background:#fff; }

/* Solid night button on sand. */
.pf-btn--night{ background:var(--pf-night); color:var(--pf-star); }
.pf-btn--night:hover{ background:#141B37; box-shadow:0 12px 26px -12px rgba(16,22,47,.6); }

.pf-btn--sm{ padding:9px 17px; font-size:.88rem; gap:8px; }
.pf-btn--lg{ padding:17px 32px; font-size:1.06rem; }
.pf-btn--block{ display:flex; width:100%; }
.pf-btn[aria-disabled="true"], .pf-btn:disabled{
  opacity:.5; cursor:not-allowed; transform:none; filter:none; box-shadow:none;
}

/* Text link with a gold rule and a moving arrow. */
.pf-link{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.92rem;
  color:var(--pf-c-heading); text-decoration:none;
  border-bottom:2px solid var(--pf-gold); padding-bottom:2px; align-self:flex-start;
  transition:color .15s ease, border-color .15s ease;
}
.pf-link:hover{ color:var(--pf-c-accent); border-color:currentColor; }
.pf-link .pf-btn-arrow{ transition:transform .18s var(--pf-ease); }
.pf-link:hover .pf-btn-arrow{ transform:translateX(4px); }


/* ==========================================================================
   7. Chips & badges
   ========================================================================== */

/* Date chip: CE half (a small sun) + AH half (a small crescent) — solar
   and lunar calendars side by side. Either half can stand alone.
   <span class="pf-date"><span class="pf-date-ce">622 CE</span><span class="pf-date-ah">1 AH</span></span> */
.pf-date{
  display:inline-flex; align-items:stretch; vertical-align:middle;
  border:1.5px solid var(--pf-c-line-strong); border-radius:999px; overflow:hidden;
  background:var(--pf-c-chip); color:var(--pf-c-heading);
  font-family:var(--pf-font-head); font-weight:700; font-size:.76rem; line-height:1;
  letter-spacing:.03em; white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums;
}
.pf-date > span{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px 6px 10px; }
.pf-date-ce::before{
  content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--pf-gold); box-shadow:0 0 0 2px rgba(245,184,65,.28);
}
.pf-date-ah{
  color:var(--pf-c-accent);
  background:rgba(245,184,65,.16);
}
.pf-date > span + span{ border-left:1.5px dashed var(--pf-c-line-strong); }
.pf-date-ah::before{
  content:""; width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:inset 2.6px -1.4px 0 0 currentColor; transform:rotate(-24deg);
}
.pf-date--lg{ font-size:.86rem; }
.pf-date--lg > span{ padding:8px 14px 8px 12px; }

/* "Coming soon": dashed, with a small hourglass that turns over now and then. */
.pf-soon{
  display:inline-flex; align-items:center; gap:7px; vertical-align:middle;
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; line-height:1;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:6px 11px 6px 9px; border-radius:999px;
  color:var(--pf-gold-deep); background:rgba(245,184,65,.16);
  border:1.5px dashed rgba(140,93,18,.42);
}
.pf-soon::before{
  content:""; width:9px; height:11px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M1 0h10v1.6H9.9c-.2 2.4-1.6 3.8-2.9 5.4 1.3 1.6 2.7 3 2.9 5.4H11V14H1v-1.6h1.1c.2-2.4 1.6-3.8 2.9-5.4C3.7 5.4 2.3 4 2.1 1.6H1z'/></svg>") center / contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'><path d='M1 0h10v1.6H9.9c-.2 2.4-1.6 3.8-2.9 5.4 1.3 1.6 2.7 3 2.9 5.4H11V14H1v-1.6h1.1c.2-2.4 1.6-3.8 2.9-5.4C3.7 5.4 2.3 4 2.1 1.6H1z'/></svg>") center / contain no-repeat;
  animation:pf-hourglass 6s var(--pf-ease) infinite;
}
.pf-night .pf-soon, .pf-dusk .pf-soon, .pf-on-dark .pf-soon, .pf-soon--on-dark{
  color:var(--pf-gold-glow); background:rgba(255,211,110,.10); border-color:rgba(255,211,110,.42);
}
/* A plain (non-animated) variant for dense lists. */
.pf-soon--still::before{ animation:none; }

/* Generic pill chip, Little Amanah style: "<b>8</b> chapters". */
.pf-chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--pf-font-body); font-size:.86rem; font-weight:500; line-height:1.2;
  color:var(--pf-c-text); padding:7px 14px; border-radius:999px;
  border:1.5px dashed var(--pf-c-line-strong); background:var(--pf-c-chip);
}
.pf-chip b, .pf-chip strong{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-c-accent); }

/* Solid tag in the current accent (era colour, chapter colour…). */
.pf-tag{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; line-height:1;
  letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  padding:6px 11px; border-radius:999px;
  background:var(--pf-accent, var(--pf-night)); color:var(--pf-accent-ink, #FFFDF7);
}

/* Small count, e.g. "7 stops". */
.pf-count{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--pf-font-head); font-weight:600; font-size:.8rem; color:var(--pf-c-soft);
}
.pf-count::before{
  content:""; width:16px; height:4px; flex:none;
  background:radial-gradient(circle, currentColor 1.4px, transparent 1.8px) 0 50% / 5.5px 4px repeat-x;
}

/* Passport-style stamp (Rihla, achievements). Rotate it with --pf-tilt. */
.pf-stamp{
  display:inline-grid; place-items:center; text-align:center;
  width:var(--pf-stamp, 92px); aspect-ratio:1; border-radius:50%;
  border:2px dashed var(--pf-accent, var(--pf-terracotta));
  box-shadow:inset 0 0 0 5px var(--pf-c-bg, var(--pf-sand)), inset 0 0 0 6.5px var(--pf-accent, var(--pf-terracotta));
  color:var(--pf-accent, var(--pf-terracotta));
  font-family:var(--pf-font-head); font-weight:700; font-size:.56rem; line-height:1.25;
  letter-spacing:.06em; text-transform:uppercase; padding:13px; overflow:hidden; overflow-wrap:anywhere;
  transform:rotate(var(--pf-tilt, -8deg));
}
.pf-stamp b{ display:block; font-family:var(--pf-font-serif); font-size:1.4rem; letter-spacing:0; line-height:1; margin-bottom:2px; }


/* ==========================================================================
   8. Breadcrumbs
   <nav class="pf-crumbs" aria-label="Breadcrumb"><ol>
     <li><a href="https://www.howtomuslim.org/">How to Muslim</a></li>
     <li><a href="/">Prophetic Footsteps</a></li>
     <li aria-current="page">The Seerah Journey</li>
   </ol></nav>
   ========================================================================== */
.pf-crumbs{ margin:0 0 22px; }
.pf-crumbs ol{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  gap:4px 0; font-family:var(--pf-font-body); font-weight:500; font-size:.84rem; line-height:1.4;
  color:var(--pf-c-soft);
}
.pf-crumbs li{ display:inline-flex; align-items:center; }
.pf-crumbs li + li::before{
  content:""; width:5px; height:5px; margin:0 10px; border-radius:1px; flex:none;
  background:var(--pf-gold); transform:rotate(45deg);
}
.pf-crumbs a{
  color:var(--pf-c-heading); text-decoration:underline; text-decoration-color:var(--pf-gold);
  text-decoration-thickness:1.5px; text-underline-offset:3px;
}
.pf-crumbs a:hover{ color:var(--pf-c-accent); }
.pf-crumbs [aria-current]{ color:var(--pf-c-soft); }


/* ==========================================================================
   9. Lockup — the sub-brand wordmark
   Prophetic Footsteps:  pre "Prophetic" (serif italic) + name "Footsteps"
   The Caravan:          kicker "Prophetic Footsteps" + pre "The" + name "Caravan"
   Rihla:                kicker "The Caravan" + name "Rihla" + Arabic رحلة
   ========================================================================== */
.pf-lockup{
  display:inline-flex; align-items:center; gap:14px;
  color:var(--pf-c-heading); text-decoration:none; margin:0 0 18px;
}
.pf-lockup-mark{ width:52px; height:52px; flex:none; border-radius:50%; display:block;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.pf-lockup-mark svg, .pf-lockup-mark img{ width:100%; height:100%; display:block; }
.pf-lockup-text{ display:flex; flex-direction:column; gap:3px; }
.pf-lockup-kicker{
  font-family:var(--pf-font-head); font-weight:700; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pf-c-accent); line-height:1.2;
}
.pf-lockup-words{ display:flex; align-items:baseline; flex-wrap:wrap; gap:0 .28em; line-height:1; }
.pf-lockup-pre{
  font-family:var(--pf-font-serif); font-style:italic; font-weight:400;
  font-size:1.38rem; color:var(--pf-c-accent); letter-spacing:-0.01em;
}
.pf-lockup-name{
  font-family:var(--pf-font-head); font-weight:700; font-size:1.9rem; letter-spacing:-0.02em;
  color:var(--pf-c-heading);
}
.pf-lockup-ar{
  font-family:var(--pf-font-arabic); font-size:1.45rem; color:var(--pf-c-accent);
  unicode-bidi:isolate; margin-left:.15em;
}
.pf-lockup-sub{
  display:flex; align-items:center; gap:10px; margin:-6px 0 18px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.74rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-c-accent);
}
.pf-lockup-sub::before{ content:""; width:22px; height:2px; background:currentColor; border-radius:2px; }

.pf-lockup--lg .pf-lockup-mark{ width:68px; height:68px; }
.pf-lockup--lg .pf-lockup-pre{ font-size:1.9rem; }
.pf-lockup--lg .pf-lockup-name{ font-size:2.7rem; }
.pf-lockup--sm{ gap:10px; }
.pf-lockup--sm .pf-lockup-mark{ width:38px; height:38px; }
.pf-lockup--sm .pf-lockup-pre{ font-size:1.05rem; }
.pf-lockup--sm .pf-lockup-name{ font-size:1.3rem; }
@media (max-width:480px){
  .pf-lockup--lg .pf-lockup-mark{ width:54px; height:54px; }
  .pf-lockup--lg .pf-lockup-pre{ font-size:1.45rem; }
  .pf-lockup--lg .pf-lockup-name{ font-size:2.05rem; }
}


/* ==========================================================================
   10. Cards
   ========================================================================== */
.pf-card{
  position:relative; display:flex; flex-direction:column; gap:12px; min-width:0;
  background:var(--pf-c-card); border:1px solid var(--pf-c-line);
  border-radius:var(--pf-radius-lg); padding:26px 24px 22px;
  box-shadow:var(--pf-c-shadow); color:var(--pf-c-text); text-decoration:none;
  transition:transform .22s var(--pf-ease), box-shadow .22s ease, border-color .2s ease;
}
a.pf-card:hover, .pf-card--link:hover{
  transform:translateY(-4px); box-shadow:var(--pf-c-shadow-lift); border-color:var(--pf-gold);
}
.pf-card-title{
  font-family:var(--pf-font-head); font-weight:700; font-size:1.2rem; line-height:1.25;
  color:var(--pf-c-heading); margin:0; letter-spacing:-0.005em; text-wrap:balance;
}
.pf-card-text{ font-size:.95rem; line-height:1.55; color:var(--pf-c-soft); margin:0; }
.pf-card-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 12px; margin-top:auto; padding-top:10px;
}
.pf-card-kicker{
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-accent, var(--pf-c-accent));
}
.pf-night .pf-card-kicker, .pf-dusk .pf-card-kicker{ color:var(--pf-c-accent); }
/* "Open" cue in the corner of a link card. */
.pf-card-go{
  font-family:var(--pf-font-head); font-weight:700; font-size:.85rem; color:var(--pf-c-heading);
  display:inline-flex; align-items:center; gap:6px;
}
.pf-card-go span{ display:inline-block; transition:transform .18s var(--pf-ease); }
a.pf-card:hover .pf-card-go span{ transform:translateX(4px); }

/* Optional illustrated band across the top of any card. Put a small inline
   SVG scene inside (preserveAspectRatio="xMidYMax slice"). */
.pf-card-art{
  position:relative; margin:-26px -24px 4px; height:136px; overflow:hidden;
  border-radius:calc(var(--pf-radius-lg) - 1px) calc(var(--pf-radius-lg) - 1px) 0 0;
  background:linear-gradient(180deg, var(--pf-night-deep), var(--pf-night) 60%, var(--pf-twilight));
}
.pf-card-art svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pf-card-art--dawn{ background:linear-gradient(180deg, #F9E3BC 0%, #F6C88A 55%, #EFA46C 100%); }
.pf-card-art--sand{ background:linear-gradient(180deg, #FBF0DC 0%, #F3DDB4 100%); }
.pf-card-art--dusk{ background:linear-gradient(180deg, #262A5C 0%, #6B3E6E 50%, #D9774A 100%); }
.pf-card-art--oasis{ background:linear-gradient(180deg, #DCEBD8 0%, #BFD9BF 100%); }

/* --- Chapter card (seerah) -------------------------------------------
   <a class="pf-card pf-chapter pf-ch-1" href="…">
     <div class="pf-chapter-head"><span class="pf-chapter-num">01</span><span class="pf-date">…</span></div>
     <h3 class="pf-card-title">Before the Prophethood</h3>
     <p class="pf-card-text">One line.</p>
     <div class="pf-card-meta"><span class="pf-soon">Coming soon</span><span class="pf-count">7 stops</span></div>
   </a> */
.pf-chapter{ padding-top:24px; overflow:hidden; }
.pf-chapter-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pf-chapter-num{
  font-family:var(--pf-font-serif); font-weight:600; font-size:2.9rem; line-height:.82;
  letter-spacing:-0.04em; color:var(--pf-accent, var(--pf-c-accent));
  font-variant-numeric:lining-nums;
}
.pf-night .pf-chapter-num, .pf-dusk .pf-chapter-num{ color:var(--pf-c-accent); }
.pf-chapter .pf-card-art + .pf-chapter-head{ margin-top:-38px; position:relative; }
.pf-chapter .pf-card-art + .pf-chapter-head .pf-chapter-num{
  /* numeral sits in a disc that overlaps the art band */
  display:inline-grid; place-items:center; width:62px; height:62px; border-radius:50%;
  font-size:1.9rem; line-height:1; letter-spacing:-0.03em;
  background:var(--pf-card); color:var(--pf-accent, var(--pf-gold-deep));
  box-shadow:0 0 0 4px var(--pf-card), 0 8px 18px -8px rgba(0,0,0,.35);
}

/* --- Station card (history eras = caravan stations) --------------------
   <a class="pf-card pf-station pf-era-1" href="…">
     <div class="pf-station-head"><span class="pf-star8"><span>1</span></span><span class="pf-date">…</span></div>
     <h3 class="pf-card-title">The Rightly Guided Caliphs</h3> … </a> */
.pf-station{ overflow:hidden; padding-top:30px; }
.pf-station::before{
  /* jewel band across the top, patterned with the 8-point star */
  content:""; position:absolute; inset:0 0 auto 0; height:8px;
  background:var(--pf-accent, var(--pf-gold));
}
.pf-station::after{
  content:""; position:absolute; top:8px; right:0; width:170px; height:140px; pointer-events:none;
  background:var(--pf-accent, var(--pf-gold)); opacity:.13;
  -webkit-mask:var(--pf-pattern-star) 0 0 / 40px 40px repeat, radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 72%);
  -webkit-mask-composite:source-in;
          mask:var(--pf-pattern-star) 0 0 / 40px 40px repeat, radial-gradient(120% 100% at 100% 0%, #000 0%, transparent 72%);
          mask-composite:intersect;
}
.pf-station-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.pf-station-years{
  font-family:var(--pf-font-serif); font-weight:500; font-size:1.05rem; color:var(--pf-c-heading);
  font-variant-numeric:lining-nums; letter-spacing:-0.005em;
}

/* --- 8-point star medallion (station pins, person emblems) -------------
   Two squares, one turned 45°: the Rub el Hizb shape. Colour from --pf-accent.
   <span class="pf-star8"><span>3</span></span>   size with --pf-s (default 56px) */
.pf-star8{
  --pf-s:56px;
  position:relative; display:inline-grid; place-items:center; flex:none;
  width:var(--pf-s); height:var(--pf-s);
  color:var(--pf-accent-ink, #FFF7E2);
  font-family:var(--pf-font-serif); font-weight:600; font-size:calc(var(--pf-s) * .4); line-height:1;
  font-variant-numeric:lining-nums;
}
.pf-star8::before, .pf-star8::after{
  content:""; position:absolute; inset:14.65%; border-radius:calc(var(--pf-s) * .06);
  background:var(--pf-accent, var(--pf-night));
}
.pf-star8::after{ transform:rotate(45deg); }
.pf-star8 > *{ position:relative; z-index:1; }
.pf-star8--ring{ outline:1.5px dashed var(--pf-accent, var(--pf-gold-deep)); outline-offset:5px; border-radius:50%; }
.pf-star8--sm{ --pf-s:40px; }
.pf-star8--lg{ --pf-s:84px; }

/* --- Person emblem card (no portraits, ever) ---------------------------
   <article class="pf-card pf-person pf-accent-oasis">
     <span class="pf-star8 pf-star8--ring" aria-hidden="true"><span>K</span></span>
     <div class="pf-person-body"><h3 class="pf-card-title">Khadijah bint Khuwaylid</h3>
       <p class="pf-person-role">Mother of the Believers</p></div>
   </article> */
.pf-person{ flex-direction:row; align-items:center; gap:18px; padding:20px 20px 20px 22px; }
.pf-person .pf-star8{ --pf-s:60px; margin:6px; }
.pf-person-body{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1; }
.pf-person .pf-card-title{ font-size:1.06rem; }
.pf-person-role{ margin:0; font-size:.86rem; color:var(--pf-c-soft); line-height:1.4; }
.pf-person-ar{ font-family:var(--pf-font-arabic); font-size:1.05rem; color:var(--pf-c-accent); line-height:1.4; align-self:flex-start; unicode-bidi:isolate; }
.pf-person .pf-soon{ align-self:flex-start; margin-top:6px; }

/* --- Icon disc: a flat outlined icon on a cream disc with an offset shadow
   (the Little Amanah stage-icon treatment). */
.pf-icon-disc{
  --pf-s:72px;
  display:inline-grid; place-items:center; flex:none;
  width:var(--pf-s); height:var(--pf-s); border-radius:50%;
  background:var(--pf-disc, #FCEFD2); color:var(--pf-ink);
  border:2px solid var(--pf-ink); box-shadow:3px 4px 0 var(--pf-ink);
}
.pf-icon-disc svg{ width:58%; height:58%; }
.pf-icon-disc--sm{ --pf-s:52px; }

/* Empty state — "this chapter is being written". */
.pf-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(32px, 5vw, 56px) clamp(20px, 4vw, 40px);
  border:2px dashed var(--pf-c-line-strong); border-radius:var(--pf-radius-lg);
  background:var(--pf-c-chip); color:var(--pf-c-soft);
}
.pf-empty .pf-h3{ margin:4px 0 0; }
.pf-empty p{ margin:0; max-width:46ch; }


/* ==========================================================================
   11. Trails, routes & dividers
   ========================================================================== */
:root{
  /* Prints walking left → right: a left foot above, a right foot below. */
  --pf-prints-h:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='72' height='30' viewBox='0 0 72 30'><g transform='rotate(-7 14 9)'><path d='M12.6 4.4C17.8 2.6 26.6 3.4 27.4 8.6 28.2 13.8 19.4 15.2 13.4 14 10 13.2 9.4 5.6 12.6 4.4Z'/><ellipse cx='5.4' cy='9.3' rx='4.3' ry='3.7'/></g><g transform='rotate(7 50 21)'><path d='M48.6 16.4C53.8 14.6 62.6 15.4 63.4 20.6 64.2 25.8 55.4 27.2 49.4 26 46 25.2 45.4 17.6 48.6 16.4Z'/><ellipse cx='41.4' cy='21.3' rx='4.3' ry='3.7'/></g></svg>");
  /* Prints walking bottom → top, for vertical trails. */
  --pf-prints-v:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='72' viewBox='0 0 30 72'><g transform='rotate(7 9 58)'><path d='M4.4 59.4C2.6 54.2 3.4 45.4 8.6 44.6 13.8 43.8 15.2 52.6 14 58.6 13.2 62 5.6 62.6 4.4 59.4Z'/><ellipse cx='9.3' cy='66.6' rx='3.7' ry='4.3'/></g><g transform='rotate(-7 21 22)'><path d='M16.4 23.4C14.6 18.2 15.4 9.4 20.6 8.6 25.8 7.8 27.2 16.6 26 22.6 25.2 26 17.6 26.6 16.4 23.4Z'/><ellipse cx='21.3' cy='30.6' rx='3.7' ry='4.3'/></g></svg>");
  /* 8-point star lattice (khatam) for pattern textures. */
  --pf-pattern-star:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'><g fill='none' stroke='%23000' stroke-width='1.3'><path d='M18 18h20v20H18z'/><path d='M28 13.86 42.14 28 28 42.14 13.86 28z'/><path d='M28 0v13.86M28 42.14V56M0 28h13.86M42.14 28H56'/><path d='M0 7 7 0M49 0l7 7M56 49l-7 7M7 56 0 49'/></g></svg>");
  /* Sand grain: fractal noise, warm. */
  --pf-grain:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .30  0 0 0 0 .16  0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Footprint trail divider. Colour = currentColor; fades at both ends.
   <div class="pf-trail" aria-hidden="true"></div> */
.pf-trail{
  display:block; height:30px; width:100%; max-width:var(--pf-trail-w, 540px);
  margin:clamp(28px, 4vw, 48px) auto; color:var(--pf-c-accent); background:currentColor; opacity:.7;
  -webkit-mask:var(--pf-prints-h) 0 0 / 72px 30px repeat-x, linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite:source-in;
          mask:var(--pf-prints-h) 0 0 / 72px 30px repeat-x, linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-composite:intersect;
}
.pf-trail--full{ --pf-trail-w:none; }
.pf-trail--left{ margin-left:0; }
.pf-trail--v{
  width:30px; height:var(--pf-trail-h, 180px); max-width:none; margin:0 auto;
  -webkit-mask:var(--pf-prints-v) 0 100% / 30px 72px repeat-y, linear-gradient(0deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-composite:source-in;
          mask:var(--pf-prints-v) 0 100% / 30px 72px repeat-y, linear-gradient(0deg, transparent, #000 15%, #000 85%, transparent);
          mask-composite:intersect;
}

/* Dotted route line — a plain rule. .pf-dotline--v for vertical. */
.pf-dotline{
  display:block; height:6px; border:0; margin:28px 0; color:var(--pf-c-accent);
  background:radial-gradient(circle, currentColor 1.7px, transparent 2.2px) 0 50% / 11px 6px repeat-x;
  opacity:.75;
}
.pf-dotline--v{
  width:6px; height:100%; min-height:60px; margin:0;
  background:radial-gradient(circle, currentColor 1.7px, transparent 2.2px) 50% 0 / 6px 11px repeat-y;
}

/* Route: stations joined by a dotted line. Horizontal on wide screens,
   vertical under 720px (or always, with .pf-route--v).
   <ol class="pf-route">
     <li class="pf-stop is-done"><span class="pf-stop-dot"></span><span class="pf-stop-label">Makkah</span><span class="pf-stop-meta">c. 570 CE</span></li>
     <li class="pf-stop is-current">…</li>
     <li class="pf-stop is-locked">…</li>
   </ol>
   The dot can hold a tiny icon or number. Wrap the label in <a> to link it. */
.pf-route{
  --pf-dot:34px;
  list-style:none; margin:0; padding:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:10px;
}
.pf-stop{
  position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
  min-width:0;
}
.pf-stop:not(:last-child)::after{
  /* the dotted leg to the next stop */
  content:""; position:absolute; z-index:0;
  top:calc(var(--pf-dot) / 2 - 3px); left:calc(50% + var(--pf-dot) / 2 + 6px);
  width:calc(100% - var(--pf-dot) - 2px); height:6px;
  background:radial-gradient(circle, var(--pf-gold-deep) 1.7px, transparent 2.2px) 0 50% / 11px 6px repeat-x;
  opacity:.65;
}
.pf-night .pf-stop:not(:last-child)::after, .pf-dusk .pf-stop:not(:last-child)::after{
  background-image:radial-gradient(circle, var(--pf-gold-glow) 1.7px, transparent 2.2px);
}
.pf-stop-dot{
  position:relative; z-index:1; display:grid; place-items:center; flex:none;
  width:var(--pf-dot); height:var(--pf-dot); border-radius:50%;
  background:var(--pf-c-card); border:2.5px solid var(--pf-c-line-strong);
  font-family:var(--pf-font-serif); font-weight:600; font-size:.95rem; color:var(--pf-c-heading);
}
.pf-stop-dot::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--pf-c-line-strong); }
.pf-stop-dot:not(:empty)::before{ display:none; }
.pf-stop-label{
  font-family:var(--pf-font-head); font-weight:700; font-size:.92rem; line-height:1.25; color:var(--pf-c-heading);
}
.pf-stop-label a{ color:inherit; text-decoration:none; }
.pf-stop-label a:hover{ color:var(--pf-c-accent); }
.pf-stop-meta{ font-size:.78rem; color:var(--pf-c-soft); line-height:1.3; }

.pf-stop.is-done .pf-stop-dot{ background:var(--pf-gold); border-color:var(--pf-gold); color:var(--pf-night); }
.pf-stop.is-done .pf-stop-dot::before{ background:var(--pf-night); }
.pf-stop.is-current .pf-stop-dot{
  background:var(--pf-night); border-color:var(--pf-gold); color:var(--pf-gold-glow);
  box-shadow:0 0 0 6px rgba(245,184,65,.25), 0 0 26px rgba(255,211,110,.55);
}
.pf-stop.is-current .pf-stop-dot::before{ background:var(--pf-gold-glow); }
.pf-stop.is-locked .pf-stop-dot{ border-style:dashed; background:transparent; }
.pf-stop.is-locked .pf-stop-label{ color:var(--pf-c-soft); }

@media (max-width:720px){
  .pf-route--auto{ grid-auto-flow:row; grid-auto-columns:auto; gap:22px; }
  .pf-route--auto .pf-stop{ display:grid; grid-template-columns:var(--pf-dot) 1fr; column-gap:16px; row-gap:2px; text-align:left; align-items:center; }
  .pf-route--auto .pf-stop-dot{ grid-row:span 2; }
  .pf-route--auto .pf-stop:not(:last-child)::after{
    top:calc(var(--pf-dot) + 4px); left:calc(var(--pf-dot) / 2 - 3px);
    width:6px; height:calc(100% - var(--pf-dot) + 14px);
    background-size:6px 11px; background-repeat:repeat-y; background-position:50% 0;
  }
}
.pf-route--v{ grid-auto-flow:row; grid-auto-columns:auto; gap:22px; }
.pf-route--v .pf-stop{ display:grid; grid-template-columns:var(--pf-dot) 1fr; column-gap:16px; row-gap:2px; text-align:left; align-items:center; }
.pf-route--v .pf-stop-dot{ grid-row:span 2; }
.pf-route--v .pf-stop:not(:last-child)::after{
  top:calc(var(--pf-dot) + 4px); left:calc(var(--pf-dot) / 2 - 3px);
  width:6px; height:calc(100% - var(--pf-dot) + 14px);
  background-size:6px 11px; background-repeat:repeat-y; background-position:50% 0;
}

/* Dune edge: layered silhouettes that melt one band into the next.
   The FRONT dune takes the colour of the band BELOW (set with color:,
   or a --to-* modifier). Behind it: a warm dusk-sand dune and an indigo
   far dune, so out of a night band they read as dunes receding into the
   dark. .pf-dunes--mono uses one colour at three opacities instead (for
   sand-to-sand edges).
   <div class="pf-dunes" aria-hidden="true">
     <svg viewBox="0 0 1440 120" preserveAspectRatio="none" focusable="false">
       <path class="pf-dune-back"  d="M0 58C160 22 330 30 480 52 640 76 760 34 930 30 1100 26 1240 60 1440 40V120H0Z"/>
       <path class="pf-dune-mid"   d="M0 82C200 52 380 60 560 78 740 96 900 62 1080 60 1240 58 1340 76 1440 70V120H0Z"/>
       <path class="pf-dune-front" d="M0 104C240 84 480 88 720 100 960 112 1200 92 1440 96V120H0Z"/>
     </svg>
   </div>
   Put it as the LAST child of a .pf-night / .pf-dusk / .pf-hero band
   with .pf-dunes--bottom, or between two bands as a normal block. */
.pf-dunes{
  display:block; width:100%; height:clamp(54px, 8vw, 120px); line-height:0;
  color:var(--pf-dunes-to, var(--pf-sand)); pointer-events:none;
}
.pf-dunes svg{ display:block; width:100%; height:100%; }
.pf-dunes path{ fill:currentColor; }
.pf-dunes .pf-dune-back { fill:var(--pf-dunes-back, var(--pf-dune-night)); }
.pf-dunes .pf-dune-mid  { fill:var(--pf-dunes-mid, var(--pf-dune-dusk)); }
.pf-dunes .pf-dune-front{ fill:currentColor; }
.pf-dunes--mono .pf-dune-back{ fill:currentColor; opacity:.25; }
.pf-dunes--mono .pf-dune-mid { fill:currentColor; opacity:.55; }
.pf-dunes--bottom{ position:absolute; left:0; right:0; bottom:-1px; z-index:0; }
.pf-dunes--top{ transform:scaleY(-1); }
.pf-dunes--flip svg{ transform:scaleX(-1); }
.pf-dunes--to-light{ --pf-dunes-to:var(--pf-sand-light); }
.pf-dunes--to-deep { --pf-dunes-to:var(--pf-sand-deep); }
.pf-dunes--to-night{ --pf-dunes-to:var(--pf-night); }


/* ==========================================================================
   12. Atmosphere: stars, pattern, grain, parchment
   Textures sit BEHIND content: the host gets isolation:isolate and the
   texture layer z-index:-1, so text never needs its own z-index.
   ========================================================================== */

/* Star field (pure CSS). Drop this as the first child of a night band:
   <div class="pf-starfield" aria-hidden="true"></div>
   Three tiled layers at co-prime sizes so the repeat never shows; the
   brightest layer twinkles. Fades out toward the horizon. */
.pf-starfield{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background-image:
    radial-gradient(1.1px 1.1px at 12px 18px,  #FFF4D2 99%, transparent),
    radial-gradient(1px 1px   at 64px 92px,    #FFF4D2 99%, transparent),
    radial-gradient(1.3px 1.3px at 131px 41px, #FFF4D2 99%, transparent),
    radial-gradient(.9px .9px at 178px 151px,  #FFF4D2 99%, transparent),
    radial-gradient(1px 1px   at 33px 180px,   #FFF4D2 99%, transparent),
    radial-gradient(1.2px 1.2px at 203px 64px, #FFF4D2 99%, transparent),
    radial-gradient(.8px .8px at 96px 211px,   #FFF4D2 99%, transparent),
    radial-gradient(1px 1px   at 151px 118px,  #FFF4D2 99%, transparent);
  background-size:230px 230px;
  opacity:.75;
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
          mask-image:linear-gradient(180deg, #000 0%, #000 45%, transparent 92%);
}
.pf-starfield::before, .pf-starfield::after{ content:""; position:absolute; inset:0; }
.pf-starfield::before{
  background-image:
    radial-gradient(1.5px 1.5px at 40px 60px,   #FFF4D2 99%, transparent),
    radial-gradient(1.2px 1.2px at 250px 30px,  #FFF4D2 99%, transparent),
    radial-gradient(1.6px 1.6px at 170px 250px, #FFF4D2 99%, transparent),
    radial-gradient(1.1px 1.1px at 300px 190px, #FFF4D2 99%, transparent),
    radial-gradient(1.3px 1.3px at 90px 320px,  #FFF4D2 99%, transparent);
  background-size:347px 347px; opacity:.85;
}
.pf-starfield::after{
  /* the bright ones, with a soft halo; this layer twinkles */
  background-image:
    radial-gradient(2.2px 2.2px at 120px 80px,  #FFFDF3 60%, rgba(255,226,150,.35) 100%, transparent),
    radial-gradient(2px 2px at 420px 210px,     #FFFDF3 60%, rgba(255,226,150,.35) 100%, transparent),
    radial-gradient(2.4px 2.4px at 300px 40px,  #FFFDF3 60%, rgba(255,226,150,.35) 100%, transparent),
    radial-gradient(1.8px 1.8px at 40px 300px,  #FFFDF3 60%, rgba(255,226,150,.35) 100%, transparent);
  background-size:523px 523px;
  animation:pf-twinkle 5.5s ease-in-out infinite;
}

/* 8-point star lattice texture in the surface's pattern colour. */
.pf-pattern{ position:relative; isolation:isolate; }
.pf-pattern::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--pf-pattern-color, var(--pf-c-pattern)); opacity:var(--pf-pattern-opacity, .09);
  -webkit-mask:var(--pf-pattern-star) 0 0 / var(--pf-pattern-size, 56px) repeat;
          mask:var(--pf-pattern-star) 0 0 / var(--pf-pattern-size, 56px) repeat;
}
.pf-night.pf-pattern::before, .pf-dusk.pf-pattern::before{ --pf-pattern-opacity:.04; }
/* Fade the pattern out toward the bottom (or use --fade-top). */
.pf-pattern--fade::before{
  -webkit-mask:var(--pf-pattern-star) 0 0 / var(--pf-pattern-size, 56px) repeat, linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-composite:source-in;
          mask:var(--pf-pattern-star) 0 0 / var(--pf-pattern-size, 56px) repeat, linear-gradient(180deg, #000, transparent 85%);
          mask-composite:intersect;
}

/* Sand grain over any surface. */
.pf-grain{ position:relative; isolation:isolate; }
.pf-grain::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  background:var(--pf-grain) 0 0 / 180px 180px repeat; opacity:.22; mix-blend-mode:multiply;
}
.pf-night.pf-grain::after, .pf-dusk.pf-grain::after{ opacity:.18; mix-blend-mode:soft-light; }

/* Parchment panel: a manuscript leaf with a ruled inner frame and grain.
   .pf-parchment--torn gives it ragged top and bottom edges. */
.pf-parchment{
  position:relative; isolation:isolate;
  --pf-c-card:#FFFBF1;
  background:
    radial-gradient(120% 90% at 50% 40%, #FDF8EC 0%, #FAF0DC 60%, #F1E1C2 100%);
  color:var(--pf-ink-body);
  border-radius:8px; padding:clamp(28px, 4.5vw, 52px);
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset, 0 26px 50px -30px rgba(92,62,24,.55);
}
.pf-parchment::before{
  content:""; position:absolute; inset:10px; z-index:-1; pointer-events:none; border-radius:4px;
  border:1.5px solid rgba(140,93,18,.28);
  box-shadow:inset 0 0 0 3px rgba(252,246,234,.6), inset 0 0 0 4.5px rgba(140,93,18,.14);
}
.pf-parchment::after{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none; border-radius:inherit;
  background:var(--pf-grain) 0 0 / 180px 180px repeat; opacity:.28; mix-blend-mode:multiply;
}
.pf-parchment--torn{
  --pf-torn-top:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M0 16V7l9 3 11-6 10 5 13-7 9 6 14-3 8 5 15-8 11 7 12-4 10 6 16-7 9 4 13-5 12 7 10-6 15 4 9-6 14 8 11-5 13 3 10-7 14 6 12-3 9 5 15-6 11 7 12-5 13 4 10-7 16 6 9-3 12 5 14-6 6 3V16z'/></svg>");
  --pf-torn-bottom:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 16' preserveAspectRatio='none'><path d='M0 0v9l12-4 9 6 14-5 11 7 10-6 13 4 15-7 9 5 12-3 14 6 10-5 13 7 11-6 9 3 16-5 10 6 12-4 13 7 9-5 15 4 11-7 12 6 10-3 14 5 13-6 9 7 15-5 11 3 12-6 10 5 14-4 13 6 9-5 10 3V0z'/></svg>");
  border-radius:0; padding-block:clamp(40px, 5vw, 64px);
  -webkit-mask:var(--pf-torn-top) 0 0 / 100% 16px no-repeat, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 30px) no-repeat, var(--pf-torn-bottom) 0 100% / 100% 16px no-repeat;
          mask:var(--pf-torn-top) 0 0 / 100% 16px no-repeat, linear-gradient(#000, #000) 0 15px / 100% calc(100% - 30px) no-repeat, var(--pf-torn-bottom) 0 100% / 100% 16px no-repeat;
}
.pf-parchment--torn::before{ inset:22px 12px; }


/* ==========================================================================
   13. Hero
   <section class="pf-hero pf-night">
     <div class="pf-starfield" aria-hidden="true"></div>
     <div class="pf-container pf-hero-inner">
       <div class="pf-hero-copy"> crumbs · lockup · h1.pf-display · p.pf-lead · .pf-actions </div>
       <div class="pf-hero-art" aria-hidden="true"> inline SVG scene </div>
     </div>
     <div class="pf-dunes pf-dunes--bottom" aria-hidden="true">…</div>
   </section>
   Variants: .pf-night (seerah), .pf-dusk (history), .pf-glow (light sand).
   ========================================================================== */
.pf-hero{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(40px, 6vw, 80px) 0 clamp(96px, 12vw, 168px);
}
.pf-hero--short{ padding-bottom:clamp(80px, 9vw, 128px); }
.pf-hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0, 1.08fr) minmax(0, .92fr);
  gap:clamp(24px, 4vw, 64px); align-items:center;
}
.pf-hero-inner--single{ grid-template-columns:minmax(0, 1fr); max-width:calc(820px + 2 * var(--pf-gutter)); }
.pf-hero .pf-display, .pf-hero .pf-h1{ max-width:15ch; }
.pf-hero .pf-lead{ font-size:clamp(1.05rem, 1.45vw, 1.22rem); }
.pf-hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.pf-hero-art{ position:relative; min-width:0; }
.pf-hero-art > svg{ display:block; width:100%; height:auto; overflow:visible; }
@media (max-width:900px){
  .pf-hero-inner{ grid-template-columns:minmax(0, 1fr); }
  .pf-hero-art{ max-width:460px; width:100%; margin-inline:auto; order:2; }
}
@media (max-width:520px){
  .pf-hero-art{ max-width:400px; }
}


/* ==========================================================================
   14. Motion
   Everything is visible by default. pf.js adds .pf-js to <html>; only then
   do .pf-reveal elements wait (opacity 0) until they scroll into view and
   get .pf-in. Items already on screen at load are shown at once.
   Stagger with style="--pf-d:2" (×90ms), or put .pf-stagger on the parent
   and pf.js numbers the children for you.
   Reveal animates `translate`/`opacity` (not `transform`/`transition`), so
   it never fights a card's own hover lift.
   ========================================================================== */
.pf-js .pf-reveal:not(.pf-in){ opacity:0; }
.pf-js .pf-reveal.pf-in:not(.pf-in--now){
  animation:pf-reveal .85s var(--pf-ease) both;
  animation-delay:calc(var(--pf-d, 0) * 90ms);
}
.pf-reveal--fade.pf-in{ animation-name:pf-fade !important; }

/* CSS-only entrance on page load (no JS needed), for hero content. */
.pf-rise{ animation:pf-reveal 1s var(--pf-ease) both; animation-delay:calc(var(--pf-d, 0) * 110ms + 80ms); }

/* For SVG parts: twinkling stars, a floating moon, a breathing lantern. */
.pf-twinkle{ animation:pf-twinkle var(--pf-tw, 4.2s) ease-in-out infinite; animation-delay:var(--pf-tw-d, 0s); }
.pf-float  { animation:pf-float 7s ease-in-out infinite; }
.pf-glowpulse{ animation:pf-glowpulse 4.5s ease-in-out infinite; }
/* Draw a dashed/dotted path in: set stroke-dasharray on the path itself
   and add class pf-draw; it draws when it (or a parent) gets .pf-in. */
.pf-draw{ stroke-dashoffset:0; }
.pf-js .pf-reveal:not(.pf-in) .pf-draw{ stroke-dashoffset:var(--pf-len, 600); }
.pf-js .pf-reveal.pf-in .pf-draw{ transition:stroke-dashoffset 2.2s var(--pf-ease) .2s; }

@keyframes pf-reveal{ from{ opacity:0; translate:0 22px; } to{ opacity:1; translate:0 0; } }
@keyframes pf-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pf-twinkle{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes pf-float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -8px; } }
@keyframes pf-glowpulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes pf-hourglass{ 0%,82%{ rotate:0deg; } 92%,100%{ rotate:180deg; } }


/* ==========================================================================
   15. Focus
   Scoped to our own content and pf- elements so the chrome keeps the
   exact focus behaviour it has on the sibling sites.
   ========================================================================== */
.pf-main :focus-visible,
.pf-main [class*="pf-"]:focus-visible{
  outline:3px solid var(--pf-c-focus); outline-offset:3px; border-radius:6px;
}
.pf-main .pf-btn:focus-visible, .pf-main .pf-card:focus-visible{ border-radius:inherit; }
.pf-main .pf-btn:focus-visible{ outline-offset:4px; border-radius:999px; }
.pf-main a.pf-card:focus-visible{ outline-offset:4px; border-radius:var(--pf-radius-lg); }


/* ==========================================================================
   16. Reduced motion
   Every pf- animation and every animation inside <main> stops, and
   reveals show immediately. Page CSS (sr-/cv-/rh-) inside .pf-main is
   covered too; SMIL <animate> inside SVG is NOT — use CSS animations.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .pf-main *, .pf-main *::before, .pf-main *::after,
  [class*="pf-"], [class*="pf-"]::before, [class*="pf-"]::after{
    animation:none !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
  .pf-js .pf-reveal, .pf-js .pf-reveal:not(.pf-in){ opacity:1 !important; translate:none !important; }
  .pf-js .pf-reveal .pf-draw{ stroke-dashoffset:0 !important; }
  .pf-btn:hover, a.pf-card:hover, .pf-card--link:hover{ transform:none; }
}


/* ==========================================================================
   17. Print
   ========================================================================== */
@media print{
  .pf-js .pf-reveal{ opacity:1 !important; translate:none !important; animation:none !important; }
  .pf-starfield, .pf-dunes, .pf-hero-art, .pf-skip{ display:none !important; }
  .pf-night, .pf-dusk{ background:none !important; color:#000; }
}