/* ==========================================================================
   The Caravan — inner pages (pages.css)
   history.howtomuslim.org : /eras/  /eras/<era>/  /timeline/  /people/
                             /sources/  /about/  /404.html

   Loads AFTER pf.css (see each page's <head>). Owns cv- classes only.
   Never styles htm-/wtn-/cta-/footer- and never redefines chrome tokens.

   Visual language (distinct from the seerah's night + footprints):
   sunset → night skies, camel caravans, pointed caravanserai arches,
   jewel tiles in the twelve era colours, hourglass sand, map parchment.

   Contents
     1  Hero (+ era-accent hero)        7  Era template parts
     2  Shared bits (jewels, notes)     8  Timeline
     3  Section heads                   9  People
     4  Era road (/eras/)              10  Sources
     5  Era cards + glyphs             11  About
     6  Key / legend                   12  404
                                       13  Reduced motion
   ========================================================================== */


/* ==========================================================================
   1. Hero
   ========================================================================== */
.cv-hero{ padding-bottom:clamp(104px, 12vw, 176px); }
.cv-hero .pf-display{ max-width:12ch; }
.cv-hero .pf-lead{ max-width:44ch; color:var(--pf-night-text); }
.cv-hero .pf-eyebrow{ margin-bottom:14px; }
.cv-hero .pf-crumbs{ margin-bottom:26px; }
.cv-hero-art svg{ max-height:540px; margin-inline:auto; filter:drop-shadow(0 30px 40px rgba(10,8,30,.35)); }
.cv-hero-ar{
  display:block; font-family:var(--pf-font-arabic); font-weight:400;
  font-size:clamp(1.45rem, 2.3vw, 1.9rem); line-height:1.5; color:var(--pf-gold-glow);
  margin:-.15em 0 .55em; unicode-bidi:isolate; text-align:left;
}
.cv-hero-ar small{ font-family:var(--pf-font-body); font-size:.85rem; color:var(--pf-night-soft); margin-left:.6em; }

/* Hero tinted with the current era's jewel (put .pf-era-N on the section).
   The night stays deep at the top and the jewel rises from the horizon.
   Falls back to plain indigo where color-mix() is not supported. */
.pf-hero.cv-hero--era{
  background-color:var(--pf-night);
  background-image:
    radial-gradient(55% 45% at 50% 112%, rgba(255,211,110,.50) 0%, rgba(255,211,110,0) 70%),
    radial-gradient(60% 55% at 88% 0%, color-mix(in srgb, var(--pf-accent) 45%, transparent) 0%, transparent 65%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--pf-accent) 18%, #070B1C) 0%,
      color-mix(in srgb, var(--pf-accent) 42%, #0A1024) 48%,
      color-mix(in srgb, var(--pf-accent) 78%, #0A1024) 80%,
      var(--pf-accent) 100%);
  --pf-dunes-back:color-mix(in srgb, var(--pf-accent) 55%, #0A1024);
  --pf-dunes-mid:#C9A26A;
}

/* Short hero for utility pages (sources, about). */
.cv-hero--short{ padding-bottom:clamp(96px, 10vw, 150px); }


/* ==========================================================================
   2. Shared bits
   ========================================================================== */

/* Jewel strip: the twelve era colours as a tiled frieze. A Silk Road
   counterpart to the seerah's footprint trail. <div class="cv-jewels" aria-hidden="true"></div> */
.cv-jewels{
  display:block; height:14px; width:100%; max-width:var(--cv-jewels-w, 336px);
  margin:0 auto; opacity:.9;
  background:linear-gradient(90deg,
    var(--pf-era-1) 0 28px,   var(--pf-era-2) 28px 56px,   var(--pf-era-3) 56px 84px,
    var(--pf-era-4) 84px 112px, var(--pf-era-5) 112px 140px, var(--pf-era-6) 140px 168px,
    var(--pf-era-7) 168px 196px, var(--pf-era-8) 196px 224px, var(--pf-era-9) 224px 252px,
    var(--pf-era-10) 252px 280px, var(--pf-era-11) 280px 308px, var(--pf-era-12) 308px 336px) 0 0 / 336px 100% repeat-x;
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'><path d='M14 1 20 7 14 13 8 7Z'/><circle cx='1' cy='7' r='1.4'/><circle cx='27' cy='7' r='1.4'/></svg>") 0 50% / 28px 14px repeat-x;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 14'><path d='M14 1 20 7 14 13 8 7Z'/><circle cx='1' cy='7' r='1.4'/><circle cx='27' cy='7' r='1.4'/></svg>") 0 50% / 28px 14px repeat-x;
}
.cv-jewels--wide{ --cv-jewels-w:672px; }
.cv-jewels--left{ margin-left:0; }

/* Small print note with a hand-drawn info mark. */
.cv-note{
  display:flex; gap:12px; align-items:flex-start; margin:0;
  font-size:var(--pf-fs-sm); line-height:1.55; color:var(--pf-c-soft); max-width:62ch;
}
.cv-note::before{
  content:"i"; flex:none; display:grid; place-items:center; width:22px; height:22px; margin-top:1px;
  border-radius:50%; border:1.5px solid currentColor; font:700 .74rem/1 var(--pf-font-serif); font-style:italic;
}
.cv-center{ text-align:center; margin-inline:auto; }
.cv-center.cv-note{ justify-content:center; }

/* Utility: hide on narrow / wide. */
@media (max-width:760px){ .cv-wide-only{ display:none !important; } }
@media (min-width:761px){ .cv-narrow-only{ display:none !important; } }

/* A rounded dusk panel used for in-page call-to-action bands. */
.cv-panel{
  position:relative; overflow:hidden; border-radius:28px;
  padding:clamp(32px, 5vw, 64px) clamp(22px, 5vw, 64px) clamp(150px, 16vw, 200px);
  box-shadow:0 30px 60px -34px rgba(26,20,56,.65);
}
.cv-panel-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px 48px; align-items:center; }
.cv-panel .pf-h2{ margin-bottom:.3em; }
.cv-panel .pf-lead{ margin-bottom:0; }
.cv-panel-stamps{ display:flex; gap:14px; align-items:center; }
.cv-panel-stamps .pf-stamp{ --pf-c-bg:#2A2558; }
.cv-panel-caravan{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; display:block; z-index:0; pointer-events:none; }
@media (max-width:760px){
  .cv-panel-grid{ grid-template-columns:minmax(0,1fr); }
  .cv-panel-stamps{ justify-content:flex-start; }
}

/* Prev / next pager between eras. */
.cv-pager{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, 2vw, 24px); }
.cv-pager-item{ padding:24px 26px; gap:8px; min-height:150px; }
.cv-pager-item--next{ text-align:right; align-items:flex-end; }
.cv-pager-dir{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-c-accent);
}
.cv-pager-item .pf-card-title{ font-size:1.25rem; }
.cv-pager-item .pf-card-text{ font-size:.9rem; }
.cv-pager-item.is-locked{ background:transparent; border:2px dashed var(--pf-c-line-strong); box-shadow:none; }
.cv-pager-item .pf-soon{ margin-top:4px; }
@media (max-width:640px){
  .cv-pager{ grid-template-columns:1fr; }
  .cv-pager-item--next{ text-align:left; align-items:flex-start; }
}


/* ==========================================================================
   3. Section heads
   ========================================================================== */
.cv-head-split{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:20px 56px;
  align-items:end; margin-bottom:clamp(28px, 4vw, 48px);
}
.cv-head-split .pf-title{ margin:0; }
.cv-head-split .pf-lead{ margin:0; }
@media (max-width:860px){ .cv-head-split{ grid-template-columns:1fr; } }


/* ==========================================================================
   4. The era road (/eras/)
   Twelve stations on a sand road. Cards alternate sides on wide screens
   and overlap vertically, so the road reads as one winding journey.
   ========================================================================== */
.cv-road{
  --cv-pin:104px; --cv-overlap:104px;
  list-style:none; margin:0; padding:0; position:relative;
}
/* the road itself: a soft sand band with a dotted gold centre line */
.cv-road::before, .cv-road::after{
  content:""; position:absolute; top:28px; bottom:28px; left:50%; pointer-events:none;
}
.cv-road::before{
  width:30px; margin-left:-15px; border-radius:15px;
  background:linear-gradient(90deg, rgba(201,154,94,0) 0%, rgba(201,154,94,.28) 22%, rgba(226,197,149,.55) 50%, rgba(201,154,94,.28) 78%, rgba(201,154,94,0) 100%);
}
.cv-road::after{
  width:6px; margin-left:-3px; opacity:.75;
  background:radial-gradient(circle, var(--pf-gold-deep) 1.7px, transparent 2.2px) 50% 0 / 6px 12px repeat-y;
}
.cv-road-stop{
  position:relative; display:grid; align-items:start;
  grid-template-columns:minmax(0,1fr) var(--cv-pin) minmax(0,1fr);
}
.cv-road-stop + .cv-road-stop{ margin-top:calc(var(--cv-overlap) * -1); }
.cv-road-stop > .cv-era{ grid-column:1; grid-row:1; }
.cv-road-stop:nth-child(even of .cv-road-stop) > .cv-era{ grid-column:3; }
.cv-road-pin{
  grid-column:2; grid-row:1; justify-self:center; position:relative; z-index:1; margin-top:38px;
  display:grid; place-items:center;
}
.cv-road-pin .pf-star8{ --pf-s:58px; filter:drop-shadow(0 8px 12px rgba(60,30,10,.25)); }
.cv-road-pin .pf-star8 span{ font-size:1.3rem; }
/* the dotted spur from the pin to its card */
.cv-road-pin::before{
  content:""; position:absolute; top:50%; height:6px; margin-top:-3px; width:calc(var(--cv-pin) / 2 - 6px);
  right:calc(50% + 26px);
  background:radial-gradient(circle, var(--pf-accent) 1.8px, transparent 2.3px) 0 50% / 9px 6px repeat-x;
}
.cv-road-stop:nth-child(even of .cv-road-stop) .cv-road-pin::before{ right:auto; left:calc(50% + 26px); }

/* Start / end milestones that sit on the road itself. */
.cv-road-end{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:0 0 clamp(40px, 6vw, 72px);
}
.cv-road-end--last{ padding:clamp(48px, 6vw, 80px) 0 0; }
.cv-road-end-mark{
  display:grid; place-items:center; width:74px; height:74px; border-radius:50%;
  background:var(--pf-night); color:var(--pf-gold-glow);
  box-shadow:0 0 0 6px var(--pf-sand), 0 0 0 7.5px var(--pf-line-strong), 0 16px 30px -14px rgba(16,22,47,.6);
}
.cv-road-end-mark svg{ width:44px; height:44px; }
.cv-road-end .pf-h4{ margin:4px 0 0; }
.cv-road-end p{ margin:0; max-width:40ch; color:var(--pf-ink-soft); font-size:.95rem; }

@media (max-width:900px){
  .cv-road{ --cv-pin:64px; }
  .cv-road::before{ left:32px; }
  .cv-road::after{ left:32px; }
  .cv-road-stop{ grid-template-columns:var(--cv-pin) minmax(0,1fr); }
  .cv-road-stop + .cv-road-stop{ margin-top:22px; }
  .cv-road-stop > .cv-era,
  .cv-road-stop:nth-child(even of .cv-road-stop) > .cv-era{ grid-column:2; }
  .cv-road-pin{ grid-column:1; margin-top:30px; }
  .cv-road-pin .pf-star8{ --pf-s:46px; }
  .cv-road-pin .pf-star8 span{ font-size:1.05rem; }
  .cv-road-pin::before,
  .cv-road-stop:nth-child(even of .cv-road-stop) .cv-road-pin::before{ left:calc(50% + 20px); right:auto; width:14px; }
  .cv-road-end{ align-items:flex-start; text-align:left; padding-left:0; }
  .cv-road-end{ display:grid; grid-template-columns:var(--cv-pin) minmax(0,1fr); column-gap:0; row-gap:4px; align-items:center; }
  .cv-road-end-mark{ width:56px; height:56px; justify-self:center; grid-row:span 3; }
  .cv-road-end-mark svg{ width:32px; height:32px; }
  .cv-road-end > :not(.cv-road-end-mark){ grid-column:2; }
}


/* ==========================================================================
   5. Era cards + glyphs
   ========================================================================== */
.cv-era{ min-height:272px; padding:32px 28px 24px; gap:12px; overflow:hidden; }
a.cv-era:hover .cv-glyph{ transform:rotate(-6deg) scale(1.04); }
.cv-era-top{ display:flex; align-items:center; gap:16px; margin-bottom:4px; }
.cv-era-top-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cv-era .pf-card-kicker{ font-size:.66rem; }
.cv-era .pf-station-years{ font-size:1.32rem; font-weight:600; line-height:1.1; }
.cv-era .pf-card-title{ font-size:clamp(1.25rem, 1.8vw, 1.45rem); }
.cv-era .pf-card-text{ font-size:.97rem; max-width:40ch; }
/* faint big numeral in the corner, like a station marker painted on a wall */
.cv-era-mark{
  position:absolute; right:14px; bottom:-18px; z-index:0; pointer-events:none;
  font-family:var(--pf-font-serif); font-weight:600; font-size:7.5rem; line-height:1; letter-spacing:-0.05em;
  color:var(--pf-accent); opacity:.075; font-variant-numeric:lining-nums;
}
.cv-era > *:not(.cv-era-mark){ position:relative; z-index:1; }
.cv-era .pf-card-meta{ padding-top:14px; }
.cv-era.is-open{ border-color:color-mix(in srgb, var(--pf-accent) 45%, var(--pf-line)); }
.cv-era-open{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.86rem; color:var(--pf-accent);
}
.cv-era-open span{ display:inline-block; transition:transform .18s var(--pf-ease); }
a.cv-era:hover .cv-era-open span{ transform:translateX(4px); }

/* Glyph disc: a white line icon on the era jewel, with a dashed gold ring. */
.cv-glyph{
  --cv-g:60px;
  position:relative; flex:none; display:grid; place-items:center;
  width:var(--cv-g); height:var(--cv-g); border-radius:50%;
  background:var(--pf-accent, var(--pf-night)); color:#FFF7E2;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), 0 8px 18px -10px rgba(40,20,10,.55);
  transition:transform .3s var(--pf-ease);
}
.cv-glyph::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--pf-accent) 60%, var(--pf-gold));
  opacity:.7;
}
.cv-glyph svg{ width:58%; height:58%; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.cv-glyph .cv-fill{ fill:currentColor; stroke:none; }
.cv-glyph--sm{ --cv-g:40px; }
.cv-glyph--sm::after{ inset:-4px; }
.cv-glyph--lg{ --cv-g:84px; }


/* ==========================================================================
   6. Key / legend
   ========================================================================== */
.cv-key{ padding:clamp(26px, 4vw, 44px); }
.cv-key-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 24px; margin-bottom:22px; }
.cv-key-head .pf-h3{ margin:0; }
.cv-key-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px 22px;
}
.cv-key-list li{ display:grid; grid-template-columns:20px minmax(0,1fr); column-gap:10px; align-items:start; }
.cv-key-list a{ color:inherit; text-decoration:none; display:contents; }
.cv-key-swatch{
  width:13px; height:13px; margin:4px 0 0 3px; transform:rotate(45deg); border-radius:2px;
  background:var(--pf-accent); box-shadow:0 0 0 2px var(--pf-parchment), 0 0 0 3px color-mix(in srgb, var(--pf-accent) 50%, transparent);
}
.cv-key-name{ font-family:var(--pf-font-head); font-weight:700; font-size:.86rem; line-height:1.3; color:var(--pf-ink); }
.cv-key-region{ grid-column:2; font-size:.78rem; line-height:1.35; color:var(--pf-ink-soft); }
.cv-key-list a:hover .cv-key-name{ color:var(--pf-accent); text-decoration:underline; text-decoration-color:var(--pf-gold); }
.cv-key-symbols{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin:24px 0 0; padding:18px 0 0;
  border-top:1.5px dashed var(--pf-line-strong); list-style:none;
  font-size:.82rem; color:var(--pf-ink-soft);
}
.cv-key-symbols li{ display:inline-flex; align-items:center; gap:9px; }
.cv-key-symbols .pf-star8{ --pf-s:22px; --pf-accent:var(--pf-era-3); }
.cv-key-symbols .pf-star8 span{ font-size:.6rem; }
.cv-key-dash{ width:26px; height:6px; background:radial-gradient(circle, var(--pf-gold-deep) 1.7px, transparent 2.2px) 0 50% / 9px 6px repeat-x; }
@media (max-width:1024px){ .cv-key-list{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px) { .cv-key-list{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px) { .cv-key-list{ grid-template-columns:minmax(0,1fr); } }


/* ==========================================================================
   7. Era template parts (/eras/<era>/)
   ========================================================================== */

/* --- The four caliphs: tall emblem cards under a pointed niche -------- */
.cv-rulers{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(14px, 2vw, 22px); }
@media (max-width:1024px){ .cv-rulers{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:540px) { .cv-rulers{ grid-template-columns:minmax(0,1fr); } }
.cv-ruler{ align-items:center; text-align:center; padding:30px 22px 24px; gap:10px; overflow:hidden; }
.cv-ruler::before{
  /* a pointed caravanserai niche behind the emblem */
  content:""; position:absolute; top:16px; left:50%; width:132px; height:150px; margin-left:-66px; z-index:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--pf-accent) 16%, transparent), color-mix(in srgb, var(--pf-accent) 4%, transparent));
  -webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 150'><path d='M0 150V70C0 38 34 20 66 0 98 20 132 38 132 70V150Z'/></svg>") 0 0 / 100% 100% no-repeat;
          mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 150'><path d='M0 150V70C0 38 34 20 66 0 98 20 132 38 132 70V150Z'/></svg>") 0 0 / 100% 100% no-repeat;
}
.cv-ruler > *{ position:relative; z-index:1; }
.cv-ruler .pf-star8{ --pf-s:78px; margin:22px 0 14px; }
.cv-ruler .pf-star8 span{ font-size:2rem; }
.cv-ruler-ord{
  font-family:var(--pf-font-head); font-weight:700; font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pf-accent);
}
.cv-ruler .pf-card-title{ font-size:1.12rem; }
.cv-ruler .pf-person-ar{ align-self:center; font-size:1.25rem; margin-top:-4px; }
.cv-ruler .pf-card-meta{ justify-content:center; flex-direction:column; gap:10px; }

/* --- Reign bar: who led when, to scale (632–661) ----------------------- */
.cv-reign{
  --cv-from:632; --cv-to:661;
  list-style:none; margin:0 0 clamp(28px, 4vw, 44px); padding:0;
  display:flex; gap:3px; border-radius:14px; overflow:hidden;
  box-shadow:0 12px 26px -18px rgba(29,81,57,.7);
}
.cv-reign li{
  flex:calc(var(--to) - var(--from)) 1 0; min-width:0; position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:2px;
  padding:12px 12px 11px; min-height:64px;
  background:var(--pf-accent); color:#FFF7E2;
}
.cv-reign li:nth-child(even){ background:color-mix(in srgb, var(--pf-accent) 78%, #0A1024); }
.cv-reign b{ font-family:var(--pf-font-head); font-weight:700; font-size:.84rem; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv-reign span{ font-family:var(--pf-font-serif); font-size:.86rem; opacity:.85; white-space:nowrap; font-variant-numeric:lining-nums; }
@media (max-width:760px){
  .cv-reign{ flex-direction:column; gap:12px; box-shadow:none; border-radius:0; overflow:visible; }
  .cv-reign li, .cv-reign li:nth-child(even){
    flex:none; background:none; color:var(--pf-ink); padding:0 0 16px; min-height:0;
    display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:12px;
  }
  .cv-reign b{ white-space:normal; }
  .cv-reign span{ color:var(--pf-ink-soft); opacity:1; }
  .cv-reign li::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:8px; border-radius:4px;
    background:var(--pf-sand-deep);
  }
  .cv-reign li::after{
    content:""; position:absolute; bottom:0; height:8px; border-radius:4px; background:var(--pf-accent);
    left:calc((var(--from) - var(--cv-from)) / (var(--cv-to) - var(--cv-from)) * 100%);
    width:max(8px, calc((var(--to) - var(--from)) / (var(--cv-to) - var(--cv-from)) * 100%));
  }
}

/* --- Key moments route sits on a parchment strip ---------------------- */
.cv-moments{ padding:clamp(28px, 4vw, 44px) clamp(18px, 3vw, 36px); }
.cv-moments .pf-route{ --pf-dot:38px; }
.cv-moments .pf-stop-dot{ font-size:1rem; background:var(--pf-card); border-color:var(--pf-accent); color:var(--pf-accent); }
.cv-moments .pf-stop-label{ font-size:.9rem; max-width:20ch; }
.cv-moments .pf-stop-meta{ font-family:var(--pf-font-serif); font-size:.9rem; color:var(--pf-ink-soft); }
.cv-moments .pf-stop:not(:last-child)::after{
  background-image:radial-gradient(circle, var(--pf-accent) 1.7px, transparent 2.2px);
}

/* --- At a glance: fact tiles (some still empty slots) ------------------ */
.cv-facts{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; margin:0;
  border:1px solid var(--pf-line); border-radius:var(--pf-radius-lg); overflow:hidden;
  background:var(--pf-card); box-shadow:var(--pf-shadow);
}
.cv-fact{
  position:relative; display:flex; flex-direction:column; gap:8px; margin:0;
  padding:24px 26px 24px; border-right:1px solid var(--pf-line); border-bottom:1px solid var(--pf-line);
}
.cv-fact:nth-child(3n){ border-right:0; }
.cv-fact:nth-last-child(-n+3){ border-bottom:0; }
.cv-fact dt{
  display:flex; align-items:center; gap:10px;
  font-family:var(--pf-font-head); font-weight:700; font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pf-accent, var(--pf-gold-deep));
}
.cv-fact dt svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.cv-fact dd{
  margin:0; font-family:var(--pf-font-serif); font-weight:500; font-size:clamp(1.3rem, 2vw, 1.6rem);
  line-height:1.2; color:var(--pf-ink); letter-spacing:-0.01em; font-variant-numeric:lining-nums;
}
.cv-fact dd small{ display:block; margin-top:4px; font-family:var(--pf-font-body); font-size:.84rem; line-height:1.4; color:var(--pf-ink-soft); letter-spacing:0; }
.cv-fact--empty dd{ color:var(--pf-ink-soft); font-style:italic; font-weight:400; }
.cv-fact--empty{ background:repeating-linear-gradient(135deg, transparent 0 10px, rgba(210,185,139,.12) 10px 11px); }
@media (max-width:860px){
  .cv-facts{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cv-fact:nth-child(3n){ border-right:1px solid var(--pf-line); }
  .cv-fact:nth-child(2n){ border-right:0; }
  .cv-fact:nth-last-child(-n+3){ border-bottom:1px solid var(--pf-line); }
  .cv-fact:nth-last-child(-n+2){ border-bottom:0; }
}
@media (max-width:480px){
  .cv-facts{ grid-template-columns:minmax(0,1fr); }
  .cv-fact, .cv-fact:nth-child(3n){ border-right:0; }
  .cv-fact:nth-last-child(-n+2){ border-bottom:1px solid var(--pf-line); }
  .cv-fact:last-child{ border-bottom:0; }
}

/* --- Map placeholder ---------------------------------------------------- */
.cv-map{ margin:0; padding:clamp(14px, 2vw, 22px); }
.cv-map svg{ display:block; width:100%; height:auto; border-radius:4px; }
.cv-map figcaption{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px;
  padding:16px 8px 4px; font-size:.86rem; color:var(--pf-ink-soft);
}
.cv-map-lands{ display:flex; flex-wrap:wrap; gap:6px 8px; list-style:none; margin:0; padding:0; }
.cv-map-lands li{
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.06em;
  padding:5px 10px; border-radius:999px; border:1.5px solid var(--pf-line-strong); color:var(--pf-ink);
  background:rgba(255,253,247,.7);
}

/* --- Chapter list: a table of contents with dotted leaders -------------- */
.cv-toc{ list-style:none; margin:0; padding:0; counter-reset:cv-toc; }
.cv-toc li{
  display:grid; grid-template-columns:64px minmax(0,auto) minmax(24px,1fr) auto; align-items:center; gap:0 16px;
  padding:16px 4px; border-bottom:1px solid var(--pf-line);
}
.cv-toc li:first-child{ border-top:1px solid var(--pf-line); }
.cv-toc-num{
  font-family:var(--pf-font-serif); font-weight:600; font-size:2rem; line-height:1;
  color:var(--pf-accent, var(--pf-gold-deep)); letter-spacing:-0.03em; font-variant-numeric:lining-nums;
}
.cv-toc-title{ font-family:var(--pf-font-head); font-weight:700; font-size:1.06rem; line-height:1.3; color:var(--pf-ink); }
.cv-toc-title small{ display:block; font-family:var(--pf-font-body); font-weight:500; font-size:.82rem; color:var(--pf-ink-soft); margin-top:3px; }
.cv-toc-leader{ height:6px; opacity:.6; background:radial-gradient(circle, var(--pf-line-strong) 1.5px, transparent 2px) 0 50% / 9px 6px repeat-x; }
@media (max-width:640px){
  .cv-toc li{ grid-template-columns:46px minmax(0,1fr); row-gap:8px; }
  .cv-toc-num{ font-size:1.6rem; grid-row:span 2; align-self:start; }
  .cv-toc-leader{ display:none; }
  .cv-toc li .pf-soon{ justify-self:start; }
}

/* --- Sources placeholder (parchment with empty ruled lines) ------------- */
.cv-sources-box .pf-h3{ margin-bottom:.4em; }
.cv-lines{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:12px; }
.cv-lines li{
  display:flex; align-items:center; gap:12px; height:22px;
  font-size:.84rem; color:var(--pf-ink-soft);
}
.cv-lines li::before{ content:""; width:8px; height:8px; flex:none; transform:rotate(45deg); border:1.5px solid var(--pf-gold-deep); border-radius:1px; }
.cv-lines li::after{ content:""; flex:1; height:0; border-bottom:1.5px dashed rgba(140,93,18,.3); }
.cv-lines li span{ white-space:nowrap; }


/* ==========================================================================
   8. Timeline (/timeline/)
   One scale: --cv-px pixels per year, from --cv-start to --cv-end.
   Positions are pure CSS (calc on inline --y / --from / --to), so the
   layout works without JS; pages.js only adds buttons, drag, filters and
   the overview strip. Under 760px it becomes a vertical list.
   ========================================================================== */
.cv-tl{
  --cv-px:4px; --cv-start:600; --cv-end:2040;
  --cv-axis:332px; --cv-row:98px; --cv-lane:30px;
  position:relative;
}
.cv-tl-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px;
  margin-bottom:18px;
}
.cv-tl-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.cv-tl-chip{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--pf-font-head); font-weight:700; font-size:.78rem; line-height:1;
  padding:8px 13px 8px 10px; border-radius:999px;
  border:1.5px solid var(--pf-line-strong); background:var(--pf-card); color:var(--pf-ink);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s var(--pf-ease);
}
.cv-tl-chip::before{
  content:""; width:9px; height:9px; transform:rotate(45deg); border-radius:1.5px; flex:none;
  background:var(--pf-accent, linear-gradient(135deg, var(--pf-era-1), var(--pf-era-3), var(--pf-era-8)));
}
.cv-tl-chip:hover{ border-color:var(--pf-accent, var(--pf-gold)); transform:translateY(-1px); }
.cv-tl-chip[aria-pressed="true"]{ background:var(--pf-accent, var(--pf-night)); border-color:var(--pf-accent, var(--pf-night)); color:#FFF7E2; }
.cv-tl-chip[aria-pressed="true"]::before{ background:#FFF7E2; }
.cv-tl-nav{ display:flex; gap:8px; align-items:center; }
.cv-tl-btn{
  display:inline-grid; place-items:center; width:46px; height:46px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--pf-ink); background:var(--pf-card); color:var(--pf-ink);
  box-shadow:2px 3px 0 var(--pf-ink);
  transition:transform .15s var(--pf-ease), box-shadow .15s ease, opacity .15s ease;
}
.cv-tl-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.cv-tl-btn:hover:not(:disabled){ transform:translate(-1px,-1px); box-shadow:3px 4px 0 var(--pf-ink); }
.cv-tl-btn:active:not(:disabled){ transform:translate(1px,1px); box-shadow:1px 1px 0 var(--pf-ink); }
.cv-tl-btn:disabled{ opacity:.35; cursor:default; }
.cv-tl-btn--text{ width:auto; padding:0 16px; border-radius:999px; font-family:var(--pf-font-head); font-weight:700; font-size:.8rem; }

/* Overview strip (JS only): all eras compressed, with a window showing
   which part of the track is in view. Click to jump. */
.cv-tl-mini{
  position:relative; height:44px; margin:0 0 14px; border-radius:12px; cursor:pointer;
  background:var(--pf-sand-light); border:1px solid var(--pf-line);
  overflow:hidden;
}
.cv-tl-mini-band{
  position:absolute; height:5px; border-radius:3px; background:var(--pf-accent);
  left:calc((var(--from) - var(--cv-start)) / (var(--cv-end) - var(--cv-start)) * 100%);
  width:calc((var(--to) - var(--from)) / (var(--cv-end) - var(--cv-start)) * 100%);
  top:calc(8px + (var(--lane) - 1) * 6.5px);
}
.cv-tl-mini-tick{
  position:absolute; bottom:0; width:2px; height:7px; background:var(--pf-gold-deep); opacity:.6;
  left:calc((var(--y) - var(--cv-start)) / (var(--cv-end) - var(--cv-start)) * 100%);
}
.cv-tl-mini-win{
  position:absolute; top:2px; bottom:2px; left:0; width:20%; border-radius:9px;
  border:2px solid var(--pf-ink); background:rgba(245,184,65,.16);
  box-shadow:0 0 0 999px rgba(246,235,214,.35);
  transition:left .12s linear;
}

/* The scrolling window onto the track. */
.cv-tl-scroller{
  position:relative; overflow-x:auto; overflow-y:hidden;
  border-radius:var(--pf-radius-lg); border:1px solid var(--pf-line);
  background:
    linear-gradient(180deg, rgba(255,253,247,.9), rgba(251,244,230,.9)),
    var(--pf-card);
  box-shadow:var(--pf-shadow);
  scrollbar-width:thin; scrollbar-color:var(--pf-dune-deep) transparent;
  overscroll-behavior-x:contain;
}
.cv-tl-scroller.is-dragging{ cursor:grabbing; user-select:none; }
.cv-tl-scroller.can-drag{ cursor:grab; }
.cv-tl-scroller:focus-visible{ outline:3px solid var(--pf-night); outline-offset:3px; }
.cv-tl-track{
  position:relative; height:calc(var(--cv-axis) + 64px + 5 * var(--cv-lane) + 26px);
  width:calc((var(--cv-end) - var(--cv-start)) * var(--cv-px));
  margin:0 40px;
}
/* century wash: alternate centuries get a faint band, like map gores */
.cv-tl-track::before{
  content:""; position:absolute; inset:0 0 0 0; pointer-events:none;
  background:linear-gradient(90deg, rgba(226,197,149,.16) 0 50%, transparent 50% 100%) 0 0 / calc(200 * var(--cv-px)) 100% repeat-x;
}

/* Milestones: absolutely placed above the axis, staggered into rows. */
.cv-tl-events{ list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top:0; height:var(--cv-axis); }
.cv-tl-event{
  position:absolute; bottom:0; width:170px;
  left:calc((var(--y) - var(--cv-start)) * var(--cv-px));
  padding:0 0 calc(22px + (var(--row, 1) - 1) * var(--cv-row)) 14px;
  transition:opacity .25s ease;
}
.cv-tl-event::before{
  /* stem from the label down to the axis */
  content:""; position:absolute; left:0; bottom:0; top:4px; width:2px; border-radius:1px;
  background:linear-gradient(180deg, var(--pf-accent, var(--pf-gold-deep)) 0 56px, color-mix(in srgb, var(--pf-accent, var(--pf-gold-deep)) 35%, transparent) 56px);
}
.cv-tl-event::after{
  /* the stop on the axis */
  content:""; position:absolute; left:-6px; bottom:-7px; width:14px; height:14px; border-radius:50%;
  background:var(--pf-card); border:3px solid var(--pf-accent, var(--pf-gold-deep));
  box-shadow:0 0 0 3px var(--pf-card);
}
.cv-tl-event time{
  display:block; font-family:var(--pf-font-serif); font-weight:600; font-size:1.42rem; line-height:1.05;
  color:var(--pf-ink); letter-spacing:-0.02em; font-variant-numeric:lining-nums;
}
.cv-tl-event time small{ font-size:.62em; font-weight:500; color:var(--pf-ink-soft); letter-spacing:0; }
.cv-tl-event span{ display:block; margin-top:4px; font-size:.84rem; line-height:1.35; color:var(--pf-ink-body); text-wrap:balance; }
.cv-tl-event .cv-tl-era-tag{
  display:inline-block; margin-top:6px; font-family:var(--pf-font-head); font-weight:700; font-size:.6rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--pf-accent, var(--pf-gold-deep));
}

/* The axis: a dotted caravan route with century ticks. */
.cv-tl-axis{
  position:absolute; left:0; right:0; top:calc(var(--cv-axis) - 3px); height:6px;
  background:radial-gradient(circle, var(--pf-gold-deep) 1.8px, transparent 2.3px) 0 50% / 10px 6px repeat-x;
  opacity:.8;
}
.cv-tl-axis::after{
  /* minor ticks every 25 years */
  content:""; position:absolute; left:0; right:0; top:8px; height:6px;
  background:linear-gradient(90deg, var(--pf-line-strong) 1px, transparent 1px) 0 0 / calc(25 * var(--cv-px)) 100% repeat-x;
}
.cv-tl-ruler{ list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top:var(--cv-axis); height:40px; }
.cv-tl-ruler li{
  position:absolute; top:6px; left:calc((var(--y) - var(--cv-start)) * var(--cv-px));
  transform:translateX(-50%); padding-top:14px;
  font-family:var(--pf-font-serif); font-weight:600; font-size:.95rem; color:var(--pf-ink-soft);
  font-variant-numeric:lining-nums; white-space:nowrap;
}
.cv-tl-ruler li::before{ content:""; position:absolute; top:0; left:50%; width:2px; height:11px; margin-left:-1px; background:var(--pf-ink-soft); border-radius:1px; }
.cv-tl-ruler li small{ font-size:.7em; font-weight:500; margin-left:2px; }
.cv-tl-today{
  position:absolute; top:0; bottom:0; width:0; z-index:2;
  left:calc((var(--y) - var(--cv-start)) * var(--cv-px));
  border-left:2px dashed var(--pf-terracotta);
}
.cv-tl-today span{
  position:absolute; top:8px; left:8px; white-space:nowrap;
  font-family:var(--pf-font-head); font-weight:700; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--pf-terracotta); padding:5px 9px; border-radius:999px;
}

/* Era bands: lanes under the axis. */
.cv-tl-eras-title{ display:none; }
.cv-tl-eras{ list-style:none; margin:0; padding:0; position:absolute; left:0; right:0; top:calc(var(--cv-axis) + 56px); }
.cv-tl-band{
  position:absolute; height:calc(var(--cv-lane) - 6px);
  top:calc((var(--lane) - 1) * var(--cv-lane));
  left:calc((var(--from) - var(--cv-start)) * var(--cv-px));
  width:calc((var(--to) - var(--from)) * var(--cv-px));
  transition:opacity .25s ease, filter .25s ease;
}
.cv-tl-band a, .cv-tl-band > span{
  display:flex; align-items:center; height:100%; padding:0 10px; border-radius:999px; overflow:hidden;
  background:var(--pf-accent); color:#FFF7E2; text-decoration:none;
  font-family:var(--pf-font-head); font-weight:700; font-size:.72rem; letter-spacing:.02em; white-space:nowrap;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.14);
  transition:filter .15s ease, box-shadow .15s ease;
}
.cv-tl-band a:hover{ filter:brightness(1.12); box-shadow:inset 0 -3px 0 rgba(0,0,0,.14), 0 6px 14px -6px var(--pf-accent); }
.cv-tl-band a:focus-visible{ outline:3px solid var(--pf-night); outline-offset:2px; border-radius:999px; }
.cv-tl-band-name{ overflow:hidden; text-overflow:ellipsis; }
.cv-tl-band-years{ margin-left:8px; font-family:var(--pf-font-serif); font-weight:500; opacity:.85; font-variant-numeric:lining-nums; }
.cv-tl-band--open a{ border-radius:999px 0 0 999px; }
.cv-tl-band--open a::after{ content:"→"; margin-left:auto; padding-left:8px; opacity:.8; }
.cv-tl-band--fade a{ background:linear-gradient(90deg, color-mix(in srgb, var(--pf-accent) 0%, transparent) 0, var(--pf-accent) 150px); padding-left:56px; }

/* Filtering (set by pages.js) */
.cv-tl.is-filtered .cv-tl-event:not(.is-match){ opacity:.18; }
.cv-tl.is-filtered .cv-tl-band:not(.is-match){ opacity:.22; filter:saturate(.3); }
.cv-tl.is-filtered .cv-tl-event.is-match time{ color:var(--pf-accent, var(--pf-ink)); }

.cv-tl-help{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:16px; }
.cv-tl-help .cv-note{ max-width:none; }
.cv-kbd{
  display:inline-block; min-width:1.7em; padding:1px 6px; border-radius:6px; text-align:center;
  border:1px solid var(--pf-line-strong); border-bottom-width:2.5px; background:var(--pf-card);
  font-family:var(--pf-font-head); font-weight:700; font-size:.76rem; color:var(--pf-ink);
}

/* ----- Narrow: vertical list --------------------------------------------- */
@media (max-width:760px){
  .cv-tl-mini, .cv-tl-nav, .cv-tl-ruler, .cv-tl-axis, .cv-tl-today, .cv-tl-help .cv-note--drag{ display:none !important; }
  .cv-tl-scroller{ overflow:visible; border:0; box-shadow:none; background:none; border-radius:0; }
  .cv-tl-scroller.can-drag{ cursor:auto; }
  .cv-tl-track{ width:auto; height:auto; margin:0; }
  .cv-tl-track::before{ display:none; }
  .cv-tl-events{ position:relative; height:auto; padding:6px 0 6px 34px; }
  .cv-tl-events::before{
    content:""; position:absolute; left:12px; top:8px; bottom:8px; width:6px;
    background:radial-gradient(circle, var(--pf-gold-deep) 1.7px, transparent 2.2px) 50% 0 / 6px 11px repeat-y; opacity:.8;
  }
  .cv-tl-event{
    position:relative; left:auto; bottom:auto; width:auto; padding:0 0 26px 16px;
  }
  .cv-tl-event:last-child{ padding-bottom:4px; }
  .cv-tl-event::before{ top:6px; bottom:auto; height:calc(100% - 28px); min-height:40px; left:0; background:var(--pf-accent, var(--pf-gold-deep)); opacity:.5; }
  .cv-tl-event::after{ left:-29px; top:4px; bottom:auto; }
  .cv-tl-event time{ font-size:1.6rem; }
  .cv-tl-event span{ font-size:.95rem; max-width:32ch; }
  .cv-tl-eras-title{
    display:block; margin:32px 0 14px; font-family:var(--pf-font-head); font-weight:700; font-size:1.2rem; color:var(--pf-ink);
  }
  .cv-tl-eras{ position:static; display:grid; gap:12px; }
  .cv-tl-band{ position:relative; top:auto; left:auto; width:auto; height:auto; padding-bottom:14px; }
  .cv-tl-band a, .cv-tl-band > span{
    background:none; color:var(--pf-ink); padding:0; height:auto; border-radius:0; box-shadow:none;
    font-size:.88rem; white-space:normal; overflow:visible; justify-content:space-between; gap:12px;
  }
  .cv-tl-band--open a::after{ content:none; }
  .cv-tl-band--fade a{ background:none; padding-left:0; }
  .cv-tl-band-name{ overflow:visible; }
  .cv-tl-band-years{ color:var(--pf-ink-soft); opacity:1; white-space:nowrap; }
  .cv-tl-band::before{
    content:""; position:absolute; left:0; right:0; bottom:0; height:7px; border-radius:4px; background:var(--pf-sand-deep);
  }
  .cv-tl-band::after{
    content:""; position:absolute; bottom:0; height:7px; border-radius:4px; background:var(--pf-accent);
    left:calc((var(--from) - var(--cv-start)) / (var(--cv-end) - var(--cv-start)) * 100%);
    width:max(6px, calc((var(--to) - var(--from)) / (var(--cv-end) - var(--cv-start)) * 100%));
  }
  .cv-tl-band--fade::after{ background:linear-gradient(90deg, transparent, var(--pf-accent) 40px); }
}


/* ==========================================================================
   9. People (/people/)
   ========================================================================== */
.cv-ppl-nav{
  position:sticky; top:0; z-index:20;
  background:rgba(246,235,214,.92); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid var(--pf-line);
}
.cv-ppl-nav ul{
  list-style:none; margin:0; padding:12px 0; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
          mask:linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}
.cv-ppl-nav ul::-webkit-scrollbar{ display:none; }
.cv-ppl-nav a{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:var(--pf-font-head); font-weight:700; font-size:.82rem; color:var(--pf-ink); text-decoration:none;
  padding:8px 14px 8px 10px; border-radius:999px; border:1.5px solid var(--pf-line-strong); background:var(--pf-card);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cv-ppl-nav a::before{ content:""; width:9px; height:9px; transform:rotate(45deg); border-radius:1.5px; background:var(--pf-accent); }
.cv-ppl-nav a b{ font-family:var(--pf-font-serif); font-weight:600; color:var(--pf-ink-soft); }
.cv-ppl-nav a:hover{ border-color:var(--pf-accent); }
.cv-ppl-nav a[aria-current="true"]{ background:var(--pf-accent); border-color:var(--pf-accent); color:#FFF7E2; }
.cv-ppl-nav a[aria-current="true"]::before{ background:#FFF7E2; }
.cv-ppl-nav a[aria-current="true"] b{ color:#FFF7E2; }

.cv-ppl{ scroll-margin-top:64px; }
.cv-ppl-grid{
  display:grid; grid-template-columns:minmax(0, 330px) minmax(0, 1fr); gap:clamp(28px, 5vw, 72px); align-items:start;
}
.cv-ppl-aside{ position:sticky; top:96px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cv-ppl-aside .pf-h2{ margin:10px 0 .2em; }
.cv-ppl-aside .pf-lead{ font-size:1.02rem; margin:0 0 6px; }
.cv-ppl-num{
  font-family:var(--pf-font-serif); font-weight:600; font-style:italic; font-size:1rem; color:var(--pf-accent);
}
.cv-ppl-cards{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(14px, 1.8vw, 20px); }
.cv-ppl-cards .pf-person{ align-items:flex-start; padding:22px 20px 20px 18px; }
.cv-ppl-cards .pf-person .pf-star8{ margin-top:8px; }
.cv-ppl-cards .pf-person .pf-star8 span{ font-size:1.5rem; }
.cv-ppl-cards .pf-person-role{ font-size:.88rem; }
.cv-person-foot{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.cv-person-foot .pf-soon{ margin-top:0; }
.cv-person-when{
  font-family:var(--pf-font-serif); font-weight:500; font-size:.88rem; color:var(--pf-ink);
  font-variant-numeric:lining-nums; padding-right:10px; border-right:1.5px solid var(--pf-line-strong);
}
@media (max-width:1100px){ .cv-ppl-cards{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:860px){
  .cv-ppl-grid{ grid-template-columns:minmax(0,1fr); }
  .cv-ppl-aside{ position:static; }
  .cv-ppl-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:620px){ .cv-ppl-cards{ grid-template-columns:minmax(0,1fr); } }

.cv-noportrait{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:20px 28px; align-items:center;
}
.cv-noportrait-emblems{ display:flex; gap:8px; }
.cv-noportrait-emblems .pf-star8{ --pf-s:46px; }
@media (max-width:620px){ .cv-noportrait{ grid-template-columns:minmax(0,1fr); } }


/* ==========================================================================
   10. Sources (/sources/)
   ========================================================================== */
.cv-shelves{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(16px, 2.4vw, 28px); }
@media (max-width:760px){ .cv-shelves{ grid-template-columns:minmax(0,1fr); } }
.cv-shelf{ padding:26px 26px 24px; gap:14px; }
.cv-shelf-art{
  position:relative; height:116px; margin:-4px -4px 4px; border-radius:14px; overflow:hidden;
  background:linear-gradient(180deg, #2A2558 0%, #3C2D63 100%);
}
.cv-shelf-art svg{ position:absolute; inset:0; width:100%; height:100%; }
.cv-shelf-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.cv-shelf .pf-card-title{ font-size:1.18rem; }
.cv-principles{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 36px; }
.cv-principles li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; align-items:start; }
.cv-principles .pf-icon-disc{ grid-row:span 2; }
.cv-principles b{ font-family:var(--pf-font-head); font-weight:700; color:var(--pf-ink); font-size:1.02rem; line-height:1.3; padding-top:6px; }
.cv-principles span{ font-size:.94rem; color:var(--pf-ink-soft); line-height:1.55; }
@media (max-width:760px){ .cv-principles{ grid-template-columns:minmax(0,1fr); } }
.cv-links{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(14px, 2vw, 22px); }
@media (max-width:860px){ .cv-links{ grid-template-columns:minmax(0,1fr); } }
.cv-link-card{ padding:22px 22px 20px; gap:8px; }
.cv-link-card .pf-card-title{ font-size:1.08rem; }
.cv-link-card .pf-card-kicker{ color:var(--pf-gold-deep); }


/* ==========================================================================
   11. About (/about/)
   ========================================================================== */
.cv-family{
  list-style:none; margin:0; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 32px);
}
.cv-family::before{
  /* the dotted road joining the three */
  content:""; position:absolute; top:62px; left:16%; right:16%; height:6px; z-index:0;
  background:radial-gradient(circle, var(--pf-gold-deep) 1.8px, transparent 2.3px) 0 50% / 11px 6px repeat-x; opacity:.7;
}
.cv-family > li{ position:relative; z-index:1; display:flex; }
.cv-family .pf-card{ align-items:center; text-align:center; padding:30px 24px 26px; width:100%; }
.cv-family-mark{
  display:block; width:96px; height:96px; border-radius:50%; margin-bottom:6px;
  box-shadow:0 0 0 6px var(--pf-sand-light), 0 0 0 7.5px var(--pf-line-strong), 0 18px 30px -16px rgba(16,22,47,.55);
}
.cv-family-mark img{ display:block; width:100%; height:100%; }
.cv-family .pf-card-kicker{ color:var(--pf-gold-deep); }
.cv-family .pf-card-title{ font-size:1.32rem; }
.cv-family-verb{ font-family:var(--pf-font-serif); font-style:italic; font-size:1.1rem; color:var(--pf-terracotta); margin:0; }
.cv-family li.is-here .pf-card{ border:2px solid var(--pf-gold); box-shadow:var(--pf-shadow-lift); }
.cv-here{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--pf-font-head); font-weight:700; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase;
  background:var(--pf-gold); color:var(--pf-night); padding:6px 11px; border-radius:999px; white-space:nowrap;
}
@media (max-width:860px){
  .cv-family{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .cv-family::before{ top:40px; bottom:40px; left:50%; right:auto; width:6px; height:auto; margin-left:-3px;
    background:radial-gradient(circle, var(--pf-gold-deep) 1.8px, transparent 2.3px) 50% 0 / 6px 11px repeat-y; }
}

.cv-motifs{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(16px, 2.5vw, 28px); }
@media (max-width:860px){ .cv-motifs{ grid-template-columns:minmax(0,1fr); } }
.cv-motif{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.cv-motif .pf-icon-disc{ margin-bottom:8px; }
.cv-motif h3{ margin:0; font-size:1.18rem; }
.cv-motif p{ margin:0; color:var(--pf-c-soft); font-size:.97rem; }

.cv-rules{ list-style:none; margin:0; padding:0; counter-reset:cv-rule; display:grid; gap:16px; }
.cv-rules li{ display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-items:start; counter-increment:cv-rule; }
.cv-rules li::before{
  content:counter(cv-rule); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font-family:var(--pf-font-serif); font-weight:600; font-size:1rem; color:var(--pf-gold-deep);
  border:1.5px dashed rgba(140,93,18,.5); background:rgba(245,184,65,.12);
}
.cv-rules b{ display:block; font-family:var(--pf-font-head); color:var(--pf-ink); font-size:1rem; margin:5px 0 2px; }
.cv-rules span{ color:var(--pf-ink-soft); font-size:.95rem; line-height:1.55; }


/* ==========================================================================
   12. 404
   ========================================================================== */
.cv-lost{ text-align:center; padding:clamp(48px, 7vw, 96px) 0 0; overflow:hidden; }
.cv-lost .pf-hero-inner--single{ justify-items:center; margin-inline:auto; }
.cv-lost .pf-display{ max-width:14ch; margin-inline:auto; }
.cv-lost .pf-lead{ margin-inline:auto; }
.cv-lost .pf-actions{ justify-content:center; }
.cv-lost-code{
  display:inline-flex; align-items:center; gap:12px; margin:0 0 18px;
  font-family:var(--pf-font-serif); font-style:italic; font-size:1.05rem; color:var(--pf-gold-glow);
}
.cv-lost-code::before, .cv-lost-code::after{
  content:""; width:30px; height:4px; background:radial-gradient(circle, currentColor 1.5px, transparent 1.9px) 0 50% / 7.5px 4px repeat-x;
}
.cv-lost-scene{ display:block; width:100%; height:auto; margin-top:clamp(20px, 4vw, 48px); }
.cv-lost-hint{ margin-top:16px; font-size:.9rem; color:var(--pf-night-soft); }
.cv-lost-hint a{ color:var(--pf-star); }


/* ==========================================================================
   13. Motion details (all stopped by pf.css under reduced motion, which
   covers every animation inside .pf-main)
   ========================================================================== */
.cv-sand-fall{ stroke-dasharray:2 7; animation:cv-sand 1.1s linear infinite; }
@keyframes cv-sand{ to{ stroke-dashoffset:-18; } }
.cv-sway{ transform-box:fill-box; transform-origin:50% 0; animation:cv-sway 5s ease-in-out infinite; }
@keyframes cv-sway{ 0%,100%{ rotate:-3deg; } 50%{ rotate:3deg; } }
.cv-walk{ animation:cv-walk 2.4s ease-in-out infinite; }
@keyframes cv-walk{ 0%,100%{ translate:0 0; } 50%{ translate:0 -1.2px; } }
.cv-drift{ animation:cv-drift 40s linear infinite; }
@keyframes cv-drift{ from{ translate:0 0; } to{ translate:-60px 0; } }
.cv-fadeprint{ animation:cv-fadeprint 6s ease-in-out infinite; }
@keyframes cv-fadeprint{ 0%,100%{ opacity:var(--cv-o, .6); } 50%{ opacity:calc(var(--cv-o, .6) * .45); } }
@media (prefers-reduced-motion: reduce){
  .cv-sand-fall, .cv-sway, .cv-walk, .cv-drift, .cv-fadeprint{ animation:none !important; }
  .cv-tl-mini-win{ transition:none; }
}


/* ==========================================================================
   14. Additions
   ========================================================================== */
/* Hidden sprite holding the era glyph <symbol>s (eras page). */
.cv-sprite{ position:absolute; width:0; height:0; overflow:hidden; }
/* JS-only timeline controls stay hidden until pages.js reveals them. */
.cv-tl [hidden]{ display:none !important; }
/* The caravan strip at the foot of a .cv-panel keeps a steady height and
   crops from the sides (preserveAspectRatio="xMidYMax slice"). */
.cv-panel-caravan{ height:clamp(120px, 15vw, 190px); }

/* About hero: single column, the caravan crossing the horizon behind the dunes. */
.cv-hero--about{ padding-bottom:clamp(200px, 22vw, 300px); }
.cv-about-caravan{
  position:absolute; left:0; right:0; bottom:clamp(30px, 4.5vw, 64px); z-index:0;
  display:block; width:100%; height:clamp(110px, 14vw, 200px); pointer-events:none;
}
/* Era band names ride along while their band is in view (sticky inside the
   horizontal scroller; overflow:clip does not create a scroll container). */
@media (min-width:761px){
  .cv-tl-band a, .cv-tl-band > span{ overflow:clip; }
  .cv-tl-band-name{ position:sticky; left:14px; flex:none; max-width:100%; }
}


/* ==========================================================================
   15. Polish pass
   ========================================================================== */
/* About hero: the single column starts on the same left edge as every other
   hero (pf-hero-inner--single would otherwise centre an 820px column). */
.cv-hero--about .pf-hero-inner--single{ max-width:calc(var(--pf-max) + 2 * var(--pf-gutter)); }
.cv-hero--about .pf-hero-copy{ max-width:780px; }
/* Sources: an empty shelf slot describes what will go there, in the serif. */
.cv-lines li{ min-width:0; }
.cv-lines li span{
  font-family:var(--pf-font-serif); font-style:italic; font-size:.95rem; color:var(--pf-ink-soft);
  overflow:hidden; text-overflow:ellipsis;
}
/* Eras road, phone layout: the start/end marks (56px + ring) are wider than
   the 64px pin column, so give their text a little air. */
@media (max-width:900px){ .cv-road-end{ column-gap:18px; } }
/* Era sketch map: on phones it keeps a readable size and scrolls sideways
   inside the parchment (pages.js centres it on Madinah). */
.cv-map-scroll{ border-radius:4px; }
@media (max-width:640px){
  .cv-map-scroll{ overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .cv-map-scroll svg{ width:660px; max-width:none; }
}
/* About hero: a crescent keeps the open sky company on wide screens. */
.cv-about-moon{
  position:absolute; z-index:0; pointer-events:none;
  top:clamp(96px, 10vw, 150px); right:clamp(40px, 12vw, 220px); width:clamp(80px, 8vw, 120px); height:auto;
}
@media (max-width:860px){ .cv-about-moon{ display:none; } }