/* ==========================================================================
   The Caravan — homepage only (home.css)
   history.howtomuslim.org/   ·   loads after pf.css   ·   owns cv- classes
   Never styles htm-/wtn-/cta-/footer- and never redefines chrome tokens.

   1  Hero panorama (sky, sun, layered dunes, the caravan, blowing sand)
   2  The route + the hourglass ("Every grain, a generation")
   3  Rihla passport
   4  Where the footsteps began (night band)
   5  Milestones strip
   6  Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Hero panorama
   Every landscape layer is a 1440x560 SVG drawn with xMidYMax slice in
   the same box, so they always line up; home.js nudges each one at its
   own depth for a little parallax. --cv-land-eff is the height the art
   really renders at (it grows with the width on very wide screens), so
   the copy always clears the caravan.
   ========================================================================== */
.cv-hero{
  --cv-land-h:clamp(380px, 38.9vw, 640px);
  --cv-land-eff:max(var(--cv-land-h), 38.9vw);
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(28px, 4.2vw, 58px) 0 calc(var(--cv-land-eff) * .575);
}
.cv-hero.pf-dusk{
  background-color:#141842;
  background-image:
    radial-gradient(60% 50% at 84% 0%, rgba(74,79,134,.42) 0%, rgba(74,79,134,0) 62%),
    linear-gradient(180deg, #0B0F2E 0%, #141945 32%, #20235A 62%, #2E285E 100%);
}
.cv-hero .pf-starfield{
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 70%);
          mask-image:linear-gradient(180deg, #000 0%, #000 34%, transparent 70%);
}
.cv-moon{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(64px, 8vw, 118px); right:clamp(18px, 9vw, 170px);
  width:clamp(52px, 6vw, 96px); height:auto; overflow:visible;
}
.cv-land{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  height:var(--cv-land-h); pointer-events:none;
}
.cv-layer{
  position:absolute; left:0; bottom:-1px; display:block;
  width:100%; height:calc(100% + 1px); overflow:hidden;
  will-change:transform;
}
.cv-sand{
  position:absolute; left:0; right:0; bottom:0; z-index:1; pointer-events:none;
  display:block; width:100%; height:calc(var(--cv-land-h) * .92);
}
.cv-hero-copy{ position:relative; z-index:2; }
.cv-hero .pf-crumbs{ margin-bottom:24px; }
.cv-hero .pf-lockup{ margin-bottom:22px; }
.cv-hero-title{
  font-size:clamp(2.4rem, 5.5vw, 4.45rem); max-width:15.5ch; margin-bottom:.36em;
  text-shadow:0 2px 26px rgba(10,14,46,.35);
}
.cv-hero-title .pf-swash{ color:var(--pf-star); }
.cv-hero-lead{ max-width:46ch; color:var(--pf-night-text); }
.cv-hero .pf-actions{ margin-top:26px; }
.cv-hero .pf-hero-meta{ margin-top:22px; }
.cv-hero .pf-btn svg{ width:19px; height:19px; }

/* --- the caravan (inside the ridge layer) -------------------------------- */
.cv-caravan, .cv-cover, .cv-prints{ animation-duration:64s; animation-timing-function:linear; animation-iteration-count:infinite; animation-delay:-21s; }
.cv-caravan{ animation-name:cv-drift; }
.cv-cover  { animation-name:cv-drift-cover; }
.cv-prints { animation-name:cv-prints; }
@keyframes cv-drift{
  0%  { transform:translateX(0);     opacity:0; }
  4%  { opacity:1; }
  91% { opacity:1; }
  97% { opacity:0; }
  100%{ transform:translateX(330px); opacity:0; }
}
@keyframes cv-drift-cover{ from{ transform:translateX(0); } to{ transform:translateX(330px); } }
@keyframes cv-prints{ 0%, 91%{ opacity:1; } 97%, 100%{ opacity:0; } }

/* Camels pace (both legs on one side move together), bob twice a stride
   and nod as they walk. --cv-ph staggers each camel. */
.cv-camel .cv-leg{
  transform-box:fill-box; transform-origin:50% 5%;
  animation:cv-step 2.2s ease-in-out infinite; animation-delay:var(--cv-ph, 0s);
}
.cv-camel .cv-leg--far{ animation-delay:calc(var(--cv-ph, 0s) - 1.1s); }
.cv-camel .cv-bodyg{ animation:cv-bob 1.1s ease-in-out infinite; animation-delay:var(--cv-ph, 0s); }
.cv-camel .cv-neck{
  transform-box:fill-box; transform-origin:6% 42%;
  animation:cv-nod 2.2s ease-in-out infinite; animation-delay:var(--cv-ph, 0s);
}
.cv-lantern{ transform-box:fill-box; transform-origin:50% 0%; animation:cv-swing 2.2s ease-in-out infinite; }
.cv-lantern-glow{ transform-box:fill-box; transform-origin:50% 50%; animation:cv-flicker 3.4s ease-in-out infinite; }
@keyframes cv-step{ 0%, 100%{ transform:rotate(-12deg); } 50%{ transform:rotate(12deg); } }
@keyframes cv-bob{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-1.8px); } }
@keyframes cv-nod{ 0%, 100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(3deg); } }
@keyframes cv-swing{ 0%, 100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg); } }
@keyframes cv-flicker{
  0%, 100%{ opacity:.82; transform:scale(1); }
  28%{ opacity:1; transform:scale(1.1); }
  52%{ opacity:.7; transform:scale(.94); }
  76%{ opacity:.95; transform:scale(1.04); }
}
.cv-sun-halo{ transform-box:fill-box; transform-origin:50% 50%; animation:cv-breathe 9s ease-in-out infinite; }
@keyframes cv-breathe{ 0%, 100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.85; transform:scale(1.06); } }

@media (max-width:640px){
  .cv-hero{ padding-top:22px; }
  .cv-hero .pf-crumbs{ margin-bottom:18px; padding-right:64px; }
  .cv-moon{ top:18px; right:16px; width:46px; }
  .cv-hero .pf-actions .pf-btn{ padding:15px 24px; font-size:1rem; }
}


/* ==========================================================================
   2. The route + the hourglass
   Desktop (>=1100): sticky hourglass panel beside a two-sided winding
   route. 760–1099: narrower sticky panel + single-lane route. Below 760:
   the panel becomes a compact card above a vertical route.
   home.js draws the winding path through every [data-cv-pt] and fills it
   in gold as you scroll; without JS a plain dotted spine shows instead.
   ========================================================================== */
.cv-voyage{ position:relative; }
.cv-voyage-head{ margin-bottom:clamp(36px, 5vw, 64px); }
.cv-voyage-grid{
  display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(28px, 4vw, 60px);
}

/* --- hourglass panel ---------------------------------------------------- */
.cv-glass{ min-width:0; }
.cv-glass-arch{
  --cv-arch:22px;
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--cv-arch) var(--cv-arch) 24px 24px;
  border:1.5px solid rgba(255,211,110,.38);
  box-shadow:0 34px 60px -30px rgba(16,22,47,.65), 0 10px 22px -14px rgba(16,22,47,.4);
  padding:18px 20px;
  display:grid; grid-template-columns:96px minmax(0, 1fr); gap:18px; align-items:center;
}
.cv-glass-arch::before{
  content:""; position:absolute; inset:8px; z-index:0; pointer-events:none;
  border:1.5px dotted rgba(255,211,110,.42);
  border-radius:calc(var(--cv-arch) - 8px) calc(var(--cv-arch) - 8px) 17px 17px;
}
.cv-glass-arch::after{
  content:""; position:absolute; z-index:-1; left:-30%; right:-30%; bottom:-34%; height:72%;
  background:radial-gradient(closest-side, rgba(29,115,86,.55), rgba(29,115,86,0));
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pf-accent, #1D7356) 78%, transparent), transparent);
  transition:opacity .4s ease;
}
.cv-hg{ position:relative; z-index:1; display:block; width:100%; max-width:220px; height:auto; margin-inline:auto; overflow:visible; }
.cv-hg-stream{
  stroke:#FBD892; stroke-width:2.6; stroke-linecap:round; stroke-dasharray:1.4 5.1;
  animation:cv-pour .45s linear infinite;
}
.cv-hg-stream.is-off{ opacity:0; }
@keyframes cv-pour{ from{ stroke-dashoffset:13; } to{ stroke-dashoffset:0; } }

.cv-readout{ position:relative; z-index:1; min-width:0; }
.cv-readout-k{
  display:block; font-family:var(--pf-font-head); font-weight:700; font-size:.66rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--pf-gold-glow);
}
.cv-readout-n{ display:block; margin:6px 0 6px; font-family:var(--pf-font-serif); color:var(--pf-star); line-height:1; }
.cv-readout-n b{ font-weight:500; font-size:2.3rem; font-variant-numeric:lining-nums tabular-nums; }
.cv-readout-n i{ font-style:italic; font-size:.98rem; color:var(--pf-night-soft); margin-left:5px; }
.cv-readout-name{
  display:block; font-family:var(--pf-font-head); font-weight:700; font-size:.98rem; line-height:1.3;
  color:var(--pf-star); text-wrap:balance;
}
.cv-readout-years{
  display:inline-block; margin-top:8px; font-family:var(--pf-font-head); font-weight:700;
  font-size:.74rem; letter-spacing:.06em; color:var(--pf-gold-glow);
}
.cv-readout-dots{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.cv-readout-dots i{
  width:7px; height:7px; border-radius:1.5px; transform:rotate(45deg);
  background:rgba(255,244,210,.22); transition:background-color .3s ease, box-shadow .3s ease;
}
.cv-readout-dots i.is-on{ background:var(--pf-gold-glow); }
.cv-readout-dots i.is-now{ box-shadow:0 0 0 2px var(--pf-night), 0 0 0 3.5px var(--pf-gold-glow); }
.cv-readout.is-tick .cv-readout-n b, .cv-readout.is-tick .cv-readout-name{ animation:cv-tick .5s var(--pf-ease); }
@keyframes cv-tick{ from{ opacity:.2; translate:0 6px; } to{ opacity:1; translate:0 0; } }
.cv-glass-note{
  margin:14px 0 0; text-align:center; font-family:var(--pf-font-serif); font-style:italic;
  font-size:.95rem; color:var(--pf-ink-soft);
}

@media (min-width:760px){
  .cv-voyage-grid{ grid-template-columns:230px minmax(0, 1fr); align-items:start; }
  .cv-glass{ position:sticky; top:20px; }
  .cv-glass-arch{
    --cv-arch:115px; display:block; text-align:center;
    padding:46px 20px 24px;
  }
  .cv-hg{ max-width:156px; }
  .cv-readout{ margin-top:10px; }
  .cv-readout-name{ min-height:2.6em; }
  .cv-readout-dots{ justify-content:center; }
}
@media (min-width:1100px){
  .cv-voyage-grid{ grid-template-columns:318px minmax(0, 1fr); }
  .cv-glass-arch{ --cv-arch:159px; padding:58px 28px 28px; }
  .cv-hg{ max-width:206px; }
  .cv-readout-n b{ font-size:2.7rem; }
  .cv-readout-name{ font-size:1.06rem; }
}
@media (max-width:759px){
  .cv-glass-note{ display:none; }
}

/* --- the route ---------------------------------------------------------- */
.cv-route-wrap{
  --cv-pin:56px; --cv-lane:28px; --cv-amp:50px;
  position:relative; min-width:0;
}
/* No-JS fallback spine (replaced by the drawn path) */
.cv-route-wrap::before{
  content:""; position:absolute; top:12px; bottom:12px; left:calc(var(--cv-lane) - 2px); width:4px;
  background:radial-gradient(circle, var(--pf-dune-deep) 1.6px, transparent 2px) 50% 0 / 4px 11px repeat-y;
}
.cv-route-wrap.is-drawn::before{ display:none; }
.cv-route-svg{ position:absolute; left:0; top:0; z-index:0; overflow:visible; pointer-events:none; }
.cv-route-base{ fill:none; stroke:var(--pf-dune-deep); stroke-width:3.2; stroke-linecap:round; stroke-dasharray:.1 11; }
.cv-route-done{
  fill:none; stroke:var(--pf-gold); stroke-width:4; stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(245,184,65,.6));
}

.cv-node{
  position:relative; z-index:1; display:flex; justify-content:flex-start;
  padding-left:calc(var(--cv-lane) - 19px); margin:0 0 26px;
}
.cv-node--end{ margin:30px 0 0; }
.cv-node-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 16px 7px 7px; border-radius:999px;
  background:var(--pf-night); color:var(--pf-star);
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; line-height:1.2;
  letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 14px 26px -16px rgba(16,22,47,.7);
}
.cv-node-dot{
  width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--pf-gold); box-shadow:0 0 0 4px rgba(245,184,65,.22);
}
.cv-node-dot svg{ width:14px; height:14px; color:var(--pf-night); }
.cv-node--end .cv-node-pill{ background:var(--pf-card); color:var(--pf-ink); border:1.5px dashed var(--pf-line-strong); box-shadow:none; }

.cv-route{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
.cv-stop{ position:relative; }
.cv-stop + .cv-stop{ margin-top:18px; }
.cv-stop-pin{ position:absolute; z-index:2; top:16px; left:calc(var(--cv-lane) - var(--cv-pin) / 2); }
.cv-stop-pin .pf-star8{ --pf-s:var(--cv-pin); transition:filter .35s ease, transform .35s var(--pf-ease); }
.cv-stop-pin .pf-star8--ring{ outline-color:var(--pf-line-strong); }
.cv-stop.is-passed .cv-stop-pin .pf-star8--ring{ outline:2px solid var(--pf-gold); }
.cv-stop.is-here .cv-stop-pin .pf-star8{ filter:drop-shadow(0 0 10px rgba(245,184,65,.85)); transform:scale(1.08); }

.cv-stop-card{
  position:relative; display:block; overflow:hidden;
  margin-left:calc(var(--cv-lane) + var(--cv-pin) / 2 + 16px);
  padding:20px 22px 18px; border-radius:var(--pf-radius-lg);
  background:var(--pf-card); border:1.5px solid var(--pf-line);
  box-shadow:var(--pf-shadow); color:var(--pf-ink-body); text-decoration:none;
  transition:transform .25s var(--pf-ease), box-shadow .25s ease, border-color .25s ease;
}
.cv-stop-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--pf-accent);
}
.cv-stop-card::after{
  /* faint jewel wash in the corner */
  content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(245,184,65,.16), transparent);
  background:radial-gradient(closest-side, color-mix(in srgb, var(--pf-accent) 13%, transparent), transparent);
  pointer-events:none;
}
.cv-stop-card:hover{
  transform:translateY(-3px); box-shadow:var(--pf-shadow-lift);
  border-color:var(--pf-line-strong);
}
.cv-stop-top{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.cv-stop-glyph{
  width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center;
  color:var(--pf-accent); background:var(--pf-sand-light);
  background:color-mix(in srgb, var(--pf-accent) 11%, var(--pf-card));
  border:1.5px solid color-mix(in srgb, var(--pf-accent) 22%, transparent);
}
.cv-stop-glyph svg{ width:21px; height:21px; }
.cv-stop-kicker{
  font-family:var(--pf-font-head); font-weight:700; font-size:.68rem; letter-spacing:.17em;
  text-transform:uppercase; color:var(--pf-accent);
}
.cv-stop-title{
  margin:0 0 6px; font-family:var(--pf-font-head); font-weight:700;
  font-size:clamp(1.06rem, 1.3vw, 1.17rem); line-height:1.25; color:var(--pf-ink); text-wrap:balance;
}
.cv-stop-line{ margin:0 0 14px; font-size:.92rem; line-height:1.5; color:var(--pf-ink-soft); }
.cv-stop-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.cv-stop-go{
  position:absolute; right:18px; bottom:16px; width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center; color:var(--pf-ink); background:var(--pf-sand);
  font-family:var(--pf-font-head); font-weight:700; font-size:.95rem;
  transition:background-color .2s ease, color .2s ease, transform .2s var(--pf-ease);
}
.cv-stop-card:hover .cv-stop-go{ background:var(--pf-accent); color:#FFFDF7; transform:translateX(3px); }
.cv-stop-card .cv-stop-meta{ padding-right:40px; }

@media (min-width:1100px){
  .cv-route-wrap{ --cv-amp:50px; }
  .cv-route-wrap::before{ left:calc(50% - 2px); }
  .cv-node{ justify-content:center; padding-left:0; }
  .cv-stop{ width:50%; }
  .cv-stop:nth-child(even){ margin-left:auto; }
  .cv-stop + .cv-stop{ margin-top:-62px; }
  .cv-stop:nth-child(odd) .cv-stop-pin{ left:auto; right:calc(var(--cv-amp) - var(--cv-pin) / 2); }
  .cv-stop:nth-child(odd) .cv-stop-card{ margin-left:0; margin-right:calc(var(--cv-amp) + var(--cv-pin) / 2 + 14px); }
  .cv-stop:nth-child(even) .cv-stop-pin{ left:calc(var(--cv-amp) - var(--cv-pin) / 2); }
  .cv-stop:nth-child(even) .cv-stop-card{ margin-left:calc(var(--cv-amp) + var(--cv-pin) / 2 + 14px); }
}
@media (max-width:759px){
  .cv-route-wrap{ --cv-pin:44px; --cv-lane:22px; }
  .cv-stop-pin{ top:18px; }
  .cv-stop-card{ margin-left:calc(var(--cv-lane) + var(--cv-pin) / 2 + 12px); padding:18px 18px 16px; }
  .cv-stop + .cv-stop{ margin-top:14px; }
}


/* ==========================================================================
   3. Rihla passport
   ========================================================================== */
.cv-rihla{ position:relative; isolation:isolate; overflow:hidden; }
.cv-rihla-route{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.cv-rihla-route path{ fill:none; stroke:var(--pf-dune-deep); stroke-width:3; stroke-linecap:round; stroke-dasharray:.1 12; opacity:.55; }
.cv-passport{
  position:relative; max-width:1100px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  padding:12px; border-radius:30px;
  background:linear-gradient(140deg, #22604A 0%, #17432F 55%, #12372A 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.12) inset,
    0 46px 70px -38px rgba(74,48,14,.6),
    0 12px 26px -16px rgba(74,48,14,.45);
}
.cv-passport::before{
  content:""; position:absolute; inset:5px; border-radius:25px; pointer-events:none;
  border:1.5px dashed rgba(255,211,110,.38);
}
.cv-pp-page{
  --pf-c-bg:var(--pf-parchment);
  position:relative; min-width:0; isolation:isolate; overflow:hidden;
  padding:clamp(26px, 3.6vw, 48px);
  background-color:var(--pf-parchment);
}
.cv-pp-page--l{
  border-radius:20px 5px 5px 20px;
  background-image:repeating-radial-gradient(circle at 0% 100%, rgba(140,93,18,.075) 0 1px, transparent 1px 11px);
  box-shadow:inset -24px 0 28px -22px rgba(92,62,24,.42);
}
.cv-pp-page--r{
  border-radius:5px 20px 20px 5px;
  background-image:repeating-radial-gradient(circle at 100% 100%, rgba(140,93,18,.075) 0 1px, transparent 1px 11px);
  box-shadow:inset 24px 0 28px -22px rgba(92,62,24,.42);
}
.cv-pp-mark{ position:absolute; z-index:-1; right:-46px; bottom:-46px; width:230px; height:230px; color:var(--pf-gold-deep); opacity:.09; }
.cv-pp-page .pf-h2{ max-width:13ch; }
.cv-pp-text{ max-width:40ch; color:var(--pf-ink-body); }
.cv-pp-stamps{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:24px 0 30px; }
.cv-pp-stamps .pf-stamp{ --pf-stamp:98px; background:rgba(252,246,234,.6); }
.cv-pp-k{
  margin:0 0 12px; font-family:var(--pf-font-head); font-weight:700; font-size:.68rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--pf-gold-deep);
}
.cv-pp-next{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cv-pp-next li{
  display:inline-flex; align-items:center; gap:7px; padding:7px 12px 7px 10px; border-radius:999px;
  font-family:var(--pf-font-head); font-weight:600; font-size:.78rem; line-height:1.2; color:var(--pf-ink-soft);
  border:1.5px dashed var(--pf-line-strong); background:rgba(255,253,247,.7);
}
.cv-pp-next li::before{
  content:""; width:10px; height:12px; flex:none; background:currentColor;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'><path d='M2 5V3.6a3 3 0 0 1 6 0V5h.6c.8 0 1.4.6 1.4 1.4v4.2c0 .8-.6 1.4-1.4 1.4H1.4C.6 12 0 11.4 0 10.6V6.4C0 5.6.6 5 1.4 5zm1.5 0h3V3.6a1.5 1.5 0 0 0-3 0z'/></svg>") center / contain no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'><path d='M2 5V3.6a3 3 0 0 1 6 0V5h.6c.8 0 1.4.6 1.4 1.4v4.2c0 .8-.6 1.4-1.4 1.4H1.4C.6 12 0 11.4 0 10.6V6.4C0 5.6.6 5 1.4 5zm1.5 0h3V3.6a1.5 1.5 0 0 0-3 0z'/></svg>") center / contain no-repeat;
}
.cv-pp-head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:24px; padding-bottom:18px; border-bottom:1.5px dashed var(--pf-line-strong);
}
.cv-pp-head .pf-lockup{ margin:0; }
.cv-pp-no{ font-family:var(--pf-font-serif); font-style:italic; font-size:1.05rem; color:var(--pf-gold-deep); }
.cv-pp-title{
  margin:0 0 14px; font-family:var(--pf-font-head); font-weight:700;
  font-size:clamp(1.5rem, 2.5vw, 2.05rem); line-height:1.12; letter-spacing:-.01em; color:var(--pf-ink);
}
.cv-pp-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 30px; }
.cv-pp-route{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
}
.cv-pp-route::before{
  content:""; position:absolute; left:calc(100% / 12); right:calc(100% / 12); top:15px; height:4px;
  background:radial-gradient(circle, var(--pf-dune-deep) 1.6px, transparent 2px) 0 50% / 9px 4px repeat-x;
}
.cv-pp-route li{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
  font-family:var(--pf-font-head); font-weight:600; font-size:.72rem; line-height:1.25; color:var(--pf-ink-soft);
}
.cv-pp-dot{
  position:relative; z-index:1; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--pf-parchment); border:2px dashed var(--pf-line-strong);
  font-family:var(--pf-font-serif); font-weight:600; font-size:.92rem; color:var(--pf-ink-soft);
}
.cv-pp-route li.is-current{ color:var(--pf-ink); }
.cv-pp-route li.is-current .cv-pp-dot{
  background:var(--pf-era-1); border:2px solid var(--pf-era-1); color:#FFFDF7;
  box-shadow:0 0 0 5px rgba(29,115,86,.18), 0 8px 16px -8px rgba(29,115,86,.8);
}
.cv-pp-page .pf-actions{ margin-top:30px; }
.cv-pp-mrz{
  margin:28px 0 0; font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:.7rem; line-height:1.6; letter-spacing:.14em; color:rgba(59,52,40,.4);
  overflow-wrap:anywhere; word-break:break-all;
}
@media (max-width:860px){
  .cv-passport{ grid-template-columns:minmax(0, 1fr); }
  .cv-pp-page--l{ border-radius:20px 20px 5px 5px; box-shadow:inset 0 -24px 28px -22px rgba(92,62,24,.42); }
  .cv-pp-page--r{ border-radius:5px 5px 20px 20px; box-shadow:inset 0 24px 28px -22px rgba(92,62,24,.42); }
}
@media (max-width:540px){
  .cv-passport{ padding:8px; border-radius:24px; }
  .cv-passport::before{ inset:3px; border-radius:21px; }
  .cv-pp-page{ padding:24px 20px; }
  .cv-pp-stamps .pf-stamp{ --pf-stamp:84px; }
  .cv-pp-route{ grid-template-columns:minmax(0, 1fr); gap:10px; }
  .cv-pp-route::before{
    left:15px; right:auto; top:14px; bottom:14px; width:4px; height:auto;
    background:radial-gradient(circle, var(--pf-dune-deep) 1.6px, transparent 2px) 50% 0 / 4px 9px repeat-y;
  }
  .cv-pp-route li{ flex-direction:row; text-align:left; gap:12px; font-size:.82rem; }
}


/* ==========================================================================
   4. Where the footsteps began
   ========================================================================== */
.cv-roots{ padding-bottom:clamp(120px, 13vw, 190px); }
.cv-roots > .pf-dunes--top{ position:relative; z-index:0; }
.cv-roots-grid{
  display:grid; grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:clamp(28px, 5vw, 76px); align-items:center; padding-top:clamp(18px, 3vw, 40px);
}
.cv-roots-art svg{ display:block; width:100%; max-width:440px; height:auto; margin-inline:auto; overflow:visible; }
.cv-roots-copy .pf-lead{ max-width:44ch; }
.cv-roots-copy .pf-lockup{ margin:4px 0 22px; }
.cv-roots .pf-trail{ margin-top:clamp(30px, 4vw, 54px); margin-bottom:0; }
@media (max-width:860px){
  .cv-roots-grid{ grid-template-columns:minmax(0, 1fr); }
  .cv-roots-art svg{ max-width:340px; }
}


/* ==========================================================================
   5. Milestones strip
   ========================================================================== */
.cv-ticks .pf-title-row{ align-items:flex-end; }
.cv-ticks-strip{
  position:relative; border-radius:var(--pf-radius-lg); background:var(--pf-card);
  border:1.5px solid var(--pf-line); box-shadow:var(--pf-shadow);
  padding:clamp(24px, 3vw, 34px) clamp(20px, 3vw, 38px);
}
.cv-ticks-list{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:0 20px;
}
.cv-ticks-list::before{
  content:""; position:absolute; left:6px; right:-12px; top:9px; height:4px;
  background:radial-gradient(circle, var(--pf-line-strong) 1.6px, transparent 2px) 0 50% / 9px 4px repeat-x;
}
.cv-tick{ position:relative; min-width:0; }
.cv-tick-dot{
  display:block; width:14px; height:14px; margin:4px 0 20px 4px; border-radius:2px; transform:rotate(45deg);
  background:var(--pf-accent); box-shadow:0 0 0 3px var(--pf-card), 0 0 0 4.5px var(--pf-accent);
}
.cv-tick-year{
  display:block; font-family:var(--pf-font-serif); font-weight:500; font-size:clamp(1.9rem, 2.8vw, 2.45rem);
  line-height:1; color:var(--pf-ink); font-variant-numeric:lining-nums; letter-spacing:-.01em;
}
.cv-tick-ah{
  display:inline-block; margin:8px 0 8px; font-family:var(--pf-font-head); font-weight:700;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pf-gold-deep);
}
.cv-tick-label{ display:block; font-size:.92rem; line-height:1.45; color:var(--pf-ink-body); max-width:22ch; }
@media (max-width:860px){
  .cv-ticks-list{ grid-template-columns:minmax(0, 1fr); gap:20px; }
  .cv-ticks-list::before{
    left:9px; right:auto; top:8px; bottom:8px; width:4px; height:auto;
    background:radial-gradient(circle, var(--pf-line-strong) 1.6px, transparent 2px) 50% 0 / 4px 9px repeat-y;
  }
  .cv-tick{ padding-left:42px; }
  .cv-tick-dot{ position:absolute; left:4px; top:8px; margin:0; }
  .cv-tick-year{ display:inline-block; margin-right:10px; font-size:1.8rem; }
  .cv-tick-label{ max-width:none; }
}


/* ==========================================================================
   6. Reduced motion
   pf.css already stops every animation inside .pf-main; home.js skips the
   parallax and the blowing sand. These just tidy the resting state.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .cv-layer{ will-change:auto; transform:none !important; }
  .cv-sand{ display:none; }
  .cv-caravan{ opacity:1 !important; }
  .cv-stop-card:hover, .cv-stop-card:hover .cv-stop-go{ transform:none; }
}
@media print{
  .cv-land, .cv-sand, .cv-moon, .cv-glass, .cv-route-svg, .cv-rihla-route{ display:none !important; }
  .cv-hero{ padding-bottom:24px; }
}


/* ==========================================================================
   7. Page details
   ========================================================================== */
.cv-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.cv-stop-glyph svg{ fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.cv-stop-glyph .cv-fill{ fill:currentColor; stroke:none; }
/* back-lit caravan: a warm rim of sunset round every silhouette */
.cv-caravan{ filter:drop-shadow(0 0 5px rgba(255,176,96,.42)); }
.cv-r-lamp{ transform-box:fill-box; transform-origin:50% 0%; animation:cv-sway 6s ease-in-out infinite; }
@keyframes cv-sway{ 0%, 100%{ transform:rotate(-2.5deg); } 50%{ transform:rotate(2.5deg); } }
/* the passport band rises out of the route's sand */
.cv-rihla{ background:linear-gradient(180deg, var(--pf-sand) 0, var(--pf-sand-light) 240px); }
.cv-pp-stamps .pf-stamp > span{ overflow-wrap:normal; word-break:keep-all; }
@media (max-width:540px){
  .cv-pp-stamps{ gap:10px 12px; }
  .cv-pp-stamps .pf-stamp{ font-size:.5rem; letter-spacing:.03em; padding:11px; }
}

/* Passport machine-readable line: one line each, clipped like the real thing. */
.cv-pp-mrz{ white-space:nowrap; overflow:hidden; overflow-wrap:normal; word-break:normal; }
@media (max-width:540px){
  .cv-pp-mrz{ font-size:.62rem; letter-spacing:.08em; }
  /* four stamps sit as a tidy two-by-two instead of three plus an orphan */
  .cv-pp-stamps{ display:grid; grid-template-columns:repeat(2, max-content); justify-content:space-evenly; gap:14px 18px; }
}