/* ======================================================================
   طومار المنازل — the route-scroll world.
   Ground: lapis night. Pigments: vermilion (قبل), gold (مع), malachite (بعد).
   Type: Amiri 700 (display / cartouches; only the bold face is loaded, so every
   display weight resolves to it), Scheherazade New (body).
   ====================================================================== */
:root {
  --night: #121f4d; --night-2: #0a1128; --night-3: #1b2e6a;
  --ivory: #efe3c6; --ivory-2: #c9bc9c; --ivory-3: #9a9178;
  --verm: #d4203a; --gold: #d9ad45; --mal: #2a9a6e;
  --kaaba: #0a1128;   /* the Kiswah is black on paper too — never the theme's ink */
  --accent: var(--gold);
  --display: 'Amiri', 'Noto Naskh Arabic', serif;
  --body: 'Scheherazade New', 'Amiri', serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
/* day side of the scroll: lapis ink on paper — user/system selectable */
:root[data-theme="light"] {
  --night: #f1e8d3; --night-2: #e3d8bd; --night-3: #d6c9a8;
  --ivory: #1b2340; --ivory-2: #3c4361; --ivory-3: #5b6180;
  --verm: #b4122c; --gold: #8a6412; --mal: #1c7a52;
  color-scheme: light;
}
:root[data-theme="light"] .stage .layer svg, :root[data-theme="light"] .map { --dark: #1b2340; --line: rgba(27,35,64,.85); }
:root[data-theme="light"] .sky, :root[data-theme="light"] .map .stars { opacity: .25; }
:root[data-theme="light"] .stage .scrim { background: linear-gradient(to top, var(--night) 0%, color-mix(in srgb, var(--night) 70%, transparent) 35%, transparent 70%); }
:root[data-theme="light"] .route-svg .path { filter: none; }
:root[data-theme="light"] .cta { color: #fff; box-shadow: 0 8px 24px -10px rgba(138,100,18,.45); }
:root[data-theme="light"] .map .station.active .ring { fill: var(--gold); }
:root[data-theme="light"] .map .station text { paint-order: stroke; stroke: var(--night); }
/* LTR (English) faces */
:root[lang="en"] { --display: 'Marcellus', 'Amiri', serif; --body: 'Gentium Plus', 'Scheherazade New', serif; }
:root[lang="en"] body { font-size: 1.15rem; line-height: 1.65; }
:root[lang="en"] h1, :root[lang="en"] h2, :root[lang="en"] h3 { font-weight: 400; letter-spacing: .01em; }
:root[lang="en"] .hero h1 { font-size: clamp(2rem, 5.5vw, 4rem); }
:root[lang="en"] .scene h2 { font-size: clamp(1.5rem, 3.6vw, 2.3rem); }
:root[lang="en"] .seal { font-size: .58rem; }
/* Arabic shown inside the English UI (not yet translated) keeps its own script and direction */
:root[lang="en"] .ar-fallback, :root[lang="en"] [lang="ar"] { font-family: 'Scheherazade New', 'Amiri', serif; display: inline-block; direction: rtl; text-align: right; line-height: 1.75; }
:root[lang="en"] .story .ar-fallback, :root[lang="en"] .deeper .ar-fallback { display: block; }
* { box-sizing: border-box; }
html { background: var(--night); }
body { margin: 0; min-height: 100svh; background: var(--night); color: var(--ivory); font-family: var(--body); font-size: 1.25rem; line-height: 1.75; -webkit-font-smoothing: antialiased; }
::selection { background: var(--gold); color: var(--night-2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--night-2); } ::-webkit-scrollbar-thumb { background: var(--night-3); border: 2px solid var(--night-2); border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.3; margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
svg { display: block; }

/* ---------- chrome shared by both surfaces ---------- */
.brand::before { content: ''; position: absolute; inset: -.2rem 0 auto 0; height: 6.5rem; pointer-events: none; z-index: -1;
  background: linear-gradient(to bottom, var(--night) 0%, color-mix(in srgb, var(--night) 88%, transparent) 45%, transparent 100%); }
.brand { position: fixed; top: 0; inset-inline: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; font-family: var(--display); font-size: 1.05rem; color: var(--ivory-2); pointer-events: none; }
.brand .controls { display: inline-flex; align-items: center; gap: .4rem; margin-inline-start: auto; }
.brand .ctl { display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem; padding: 0 .7rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ivory-3) 60%, transparent); background: color-mix(in srgb, var(--night-2) 70%, transparent); color: var(--ivory); text-decoration: none; font-size: .95rem; }
.brand .ctl svg { width: 1.1rem; height: 1.1rem; }
.brand .ctl:hover { border-color: var(--gold); }
.brand .ctl.nasheed.on { border-color: var(--gold); color: var(--gold); }
.brand > * { pointer-events: auto; }
.brand a { text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; }
.brand .mark { color: var(--gold); width: 1.1rem; height: 1.1rem; flex: none; }
.brand .name { white-space: nowrap; }
.brand .back svg, .cta svg, .backcol svg { width: 1.05em; height: 1.05em; }
.backcol { display: inline-flex; align-items: center; gap: .4rem; color: var(--ivory-2); }

/* seals: the pigment stamps that grade a report */
.seal { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 2px solid currentColor; font-family: var(--display); font-size: .68rem; line-height: 1; text-align: center; padding: .15rem; transform: rotate(-9deg); box-shadow: inset 0 0 0 2px var(--night), inset 0 0 0 3px currentColor; flex: none; }
.seal-sahih { color: var(--mal); } .seal-hasan { color: var(--gold); } .seal-weak { color: var(--verm); } .seal-none { color: var(--ivory-3); }

/* ======================================================================
   HOME — the map of routes
   ====================================================================== */
/* Desktop: the map is a tall sticky column and the three panel sections stack beside it.
   Grid areas place them, so the markup can stay in the order a phone reads. */
.home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 26rem);
  grid-template-areas: "map head" "map chooser" "map roads" "map find" "map me" "map peek" "map foot";
  grid-template-rows: auto auto auto auto auto 1fr auto; min-height: 100svh; }
.map-wrap { grid-area: map; }
.side-head { grid-area: head; } .chooser { grid-area: chooser; } .finder { grid-area: find; }
.roads { grid-area: roads; } .me { grid-area: me; } .peek { grid-area: peek; } .home-foot { grid-area: foot; }
.side-head, .chooser, .finder, .roads, .me, .peek, .home-foot { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.5rem;
  padding-inline: 1.5rem; background: linear-gradient(to left, var(--night-2), color-mix(in srgb, var(--night-2) 70%, transparent)); }
.side-head { padding-top: 4.5rem; } .home-foot { padding-bottom: 3rem; gap: 0; }
.chooser, .finder, .roads { padding-block: .5rem; }
.map-wrap { position: sticky; top: 0; height: 100svh; overflow: hidden; background: radial-gradient(120% 80% at 50% 100%, var(--night-3) 0%, var(--night) 55%, var(--night-2) 88%); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map .route { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke: var(--ivory-3); opacity: 0; transition: opacity .6s var(--ease), stroke .6s; }
.map .traveller { fill: var(--ivory); filter: drop-shadow(0 0 6px var(--gold)); offset-rotate: 0deg; animation: travel 28s linear infinite; }
@keyframes travel { from { offset-distance: 100%; } to { offset-distance: 0%; } }
.map .route.lit { stroke: var(--gold); stroke-width: 3.5; stroke-dasharray: none; opacity: 1; filter: drop-shadow(0 0 6px rgba(217,173,69,.5)); }
.map .station { cursor: pointer; }
.map .station .ring { fill: var(--night-2); stroke: var(--gold); stroke-width: 2; transition: filter .3s; }
.map .station:hover .ring, .map .station.active .ring { filter: drop-shadow(0 0 8px var(--gold)); }
.map .station.soon .ring { stroke: var(--ivory-3); }
.map .station.soon text { fill: var(--ivory-2); }
.map .station.soon .em { color: var(--ivory-3); }
.map .station .body { opacity: 0; transform-box: fill-box; transform-origin: center; animation: st-in .5s var(--ease) forwards; animation-delay: calc(.3s + var(--i, 0) * .09s); transition: transform .5s var(--ease), opacity .4s; }
.map .station.active .body { transform: scale(1.15); }
.map .station.active .ring { fill: var(--gold); stroke: var(--ivory); stroke-width: 2.5; animation: pulse 1.6s var(--ease) infinite; }
.map .station.active .em { color: var(--night-2); }
.map .station.active text { fill: var(--gold); font-size: 26px; }
@keyframes pulse { 0%, 100% { filter: drop-shadow(0 0 6px var(--gold)); } 50% { filter: drop-shadow(0 0 16px var(--gold)); } }
body.leaving { animation: leave .42s var(--ease) forwards; }
@keyframes leave { to { opacity: 0; transform: scale(1.02); } }
.map { transition: none; }
.tap-hint { font-family: var(--display); font-size: .95rem; color: var(--ivory-2); margin: .35rem 0 0; }
@keyframes st-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.map .route.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: route-draw 1.3s var(--ease) forwards; }
@keyframes route-draw { to { stroke-dashoffset: 0; } }
.map .stars .tw, .sky .tw { animation: tw 7s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: .15; } 50% { opacity: .85; } }
.map text { direction: ltr; unicode-bidi: plaintext; letter-spacing: 0; }
.map .station text { font-family: var(--display); font-size: 28px; fill: var(--ivory); paint-order: stroke; stroke: var(--night-2); stroke-width: 6px; stroke-linejoin: round; }
.map .station:hover .ring, .map .station:focus-visible .ring, .map .station.active .ring { fill: var(--gold); }
.map .station:focus, .map .station:focus-visible { outline: none; }
.map .station:focus-visible .ring { stroke: var(--ivory); stroke-width: 3; }
.map .station .em { color: var(--gold); }
/* camp (منزل): a ring holding its member count; gold because you can enter it */
.map .camp .ring { stroke-width: 2.5; }
.map .camp .n { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--gold); stroke: none; }
/* a camp is named by the Companions at the ends of its run — two whole names. Centred under
   the ring it has the whole frame to spell them; on the open side it had half, and was cut. */
.map .camp .camp-name { font-size: 24px; }
.map .camp:hover .n, .map .camp:focus-visible .n { fill: var(--night-2); }
/* ---------- the two views: a slow crossfade, not a cut ---------- */
.map .map-view, .map .sky-view { transition: opacity .6s var(--ease), visibility .6s; }
body[data-view="sky"] .map-view, body:not([data-view="sky"]) .sky-view { opacity: 0; visibility: hidden; pointer-events: none; }
/* الفلك الدوّار — the canvas firmament turning beneath the fixed stars */
.map-wrap .firmament { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .6s var(--ease), visibility .6s, filter .8s var(--ease); }
.map-wrap.zenith .firmament { filter: brightness(.5); }
/* the lower third: the chosen one's title card, on the stage where the eyes already are */
.map-wrap .lower { position: absolute; z-index: 3; inset-inline-start: clamp(2rem, 5vw, 4.5rem); bottom: clamp(1.6rem, 4svh, 3rem); max-width: 34rem; display: grid; gap: .45rem; opacity: 0; translate: 0 16px; transition: opacity .55s var(--ease), translate .55s var(--ease); }
.map-wrap .lower.on { opacity: 1; translate: 0 0; }
.map-wrap .lower[hidden] { display: none; }
.map-wrap .lower h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); color: var(--ivory); }
.map-wrap .lower .why { margin: 0; font-size: 1.1rem; line-height: 1.65; color: var(--ivory-2); }
.map-wrap .lower .laqab { color: var(--gold); font-family: var(--display); font-weight: 400; }
.map-wrap .lower .lower-row { margin: .4rem 0 0; display: flex; align-items: center; gap: 1.1rem; }
.map-wrap .lower .backcol { font-family: var(--display); font-size: .95rem; }
.map-wrap .lower .backcol:hover { color: var(--ivory); }
/* the stage scrim that grounds it — like the life page, text sits on the night, not in a box */
@media (min-width: 901px) {
  .map-wrap::before { content: ''; position: absolute; z-index: 2; inset: auto 0 0 0; height: 46%; pointer-events: none; opacity: 0; transition: opacity .55s var(--ease);
    background: linear-gradient(to top, var(--night-2) 0%, color-mix(in srgb, var(--night-2) 65%, transparent) 45%, transparent 100%); }
  .map-wrap.staged::before { opacity: 1; }
}
@media (max-width: 900px) { .map-wrap .lower { display: none; } }
body:not([data-view="sky"]) .firmament { opacity: 0; visibility: hidden; }
body[data-view="sky"] .map .stars { display: none; }   /* the canvas is the dust now */
body[data-view="sky"] .map .sky-view { translate: var(--pax, 0px) var(--pay, 0px); }  /* the named stars lean with the pointer */
/* the paper side: the sky becomes a drawn star chart (صور الكواكب), not night at noon */
:root[data-theme="light"] .firmament { opacity: .5; }
:root[data-theme="light"] .map .moon { fill: none; stroke: var(--ivory-3); stroke-width: 2.5; opacity: .6; }
:root[data-theme="light"] .star .halo { opacity: .15; }
:root[data-theme="light"] .star:hover .halo, :root[data-theme="light"] .star:focus-visible .halo { opacity: .3; }
:root[data-theme="light"] .star.active .halo { opacity: .4; }
:root[data-theme="light"] .star .burst { opacity: .2; }
:root[data-theme="light"] .star.active .body { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 55%, transparent)); }
:root[data-theme="light"] .figure .fig { filter: none; opacity: .6; }
:root[data-theme="light"] .figure .comet { fill: var(--gold); filter: none; }
:root[data-theme="light"] .map-wrap.zenith .firmament { filter: none; opacity: .15; }
:root[data-theme="light"] .map-wrap.zenith .map .moon { opacity: .25; }
.viewtabs { display: grid; grid-auto-flow: column; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ivory-3) 55%, transparent); background: color-mix(in srgb, var(--night-2) 80%, transparent); justify-self: stretch; }
.viewtabs button { padding: .45rem .95rem .5rem; border-radius: 999px; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); transition: background .25s, color .25s; }
.viewtabs button[aria-pressed="true"] { background: var(--gold); color: var(--night-2); }
.viewtabs button:hover[aria-pressed="false"] { color: var(--ivory); }

/* ---------- SKY — every Sahabi an eight-pointed star, every collection a constellation ---------- */
.stars-layer .star { cursor: pointer; }
.star .body { fill: var(--gold); stroke: var(--night-2); stroke-width: 1; transition: fill .3s, transform .35s var(--ease); transform-box: fill-box; transform-origin: center; }
.star .burst { fill: var(--gold); opacity: .35; transition: opacity .35s, transform .5s var(--ease); transform-box: fill-box; transform-origin: center; }
.star .halo { opacity: .5; transition: opacity .35s; transform-box: fill-box; transform-origin: center; animation: breathe 6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.7s); }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.star text { font-family: var(--display); font-size: 21px; fill: var(--ivory-2); paint-order: stroke; stroke: var(--night); stroke-width: 5px; stroke-linejoin: round; transition: fill .3s, font-size .25s; }
.star:hover .burst, .star:focus-visible .burst { opacity: .6; transform: rotate(22.5deg) scale(1.1); }
.star:hover .halo, .star:focus-visible .halo { opacity: .85; }
.star:hover text, .star:focus-visible text { fill: var(--ivory); }
.star:focus { outline: none; }
.star:focus-visible .body { stroke: var(--ivory); stroke-width: 2; }
.star.active .body { fill: var(--ivory); transform: rotate(22.5deg) scale(2); transition: fill .5s, transform .7s var(--ease), filter .7s; filter: drop-shadow(0 0 8px var(--gold)) drop-shadow(0 0 24px var(--gold)); }
.star.active .burst { opacity: .95; transform: scale(1.7); animation: spinb 16s linear infinite; }
@keyframes spinb { from { transform: scale(1.7) rotate(0deg); } to { transform: scale(1.7) rotate(360deg); } }
.star.active .halo { opacity: 1; animation: breathe-big 5s ease-in-out infinite; }
@keyframes breathe-big { 0%, 100% { transform: scale(1.45); } 50% { transform: scale(1.75); } }
.star.active text { fill: var(--gold); font-size: 30px; }
.star.bonded .halo { opacity: .7; }
.star.bonded text { fill: var(--ivory); }
.star.recede { opacity: .22; filter: blur(1.1px); }
.star.recede text { fill: var(--ivory-3); }
/* his strongest ties stay legible — the bond numbers must point at readable names */
.star.recede.bonded { opacity: .8; filter: none; }
.star.recede.bonded text { fill: var(--ivory); }
.star.dim { opacity: .32; }
.star.dim text { fill: var(--ivory-3); }
.star.soon .body { fill: var(--ivory-3); }
.star.soon .burst, .star.soon .halo { opacity: .05; }
/* the comet reaches a star and it catches fire in turn */
.star.lit .body { animation: ignite .7s var(--ease) backwards; animation-delay: var(--igd, 0s); }
.star.lit .halo { animation: ignite-halo .7s var(--ease) backwards, breathe 6s ease-in-out infinite; animation-delay: var(--igd, 0s), calc(var(--i, 0) * -.7s); }
@keyframes ignite { 0% { transform: scale(.55); } 55% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes ignite-halo { 0% { opacity: .08; } 55% { opacity: 1; } 100% { opacity: .5; } }
.star.soon text { fill: var(--ivory-3); }
.stars-layer .star { animation: st-in .7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * .05s); transition: opacity .6s var(--ease), filter .6s var(--ease); }

/* the constellation figure: the collection drawn as one line */
.figure .fig { fill: none; stroke: var(--gold); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .45; filter: drop-shadow(0 0 6px rgba(217,173,69,.35)); transition: opacity .8s var(--ease); }
.map-wrap.zenith .figure .fig { opacity: .14; }
.map .moon { transition: opacity .8s var(--ease); }
.map-wrap.zenith .map .moon { opacity: .3; }
.figure .fig.draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: route-draw 1.8s var(--ease) forwards; }
/* the comet that draws the figure */
.figure .comet { fill: var(--ivory); filter: drop-shadow(0 0 5px var(--gold)) drop-shadow(0 0 14px var(--gold)); animation: comet-run 1.8s var(--ease) forwards; }
@keyframes comet-run { 0% { offset-distance: 0%; opacity: 0; } 6% { opacity: 1; } 86% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
/* the chosen star goes nova */
.bonds .nova { fill: none; stroke: var(--gold); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; animation: nova .9s ease-out both; }
.bonds .nova.n2 { stroke-width: 1.5; animation-delay: .18s; }
@keyframes nova { 0% { transform: scale(.25); opacity: .95; } 100% { transform: scale(3.4); opacity: 0; } }

/* bonds: only the strongest few, only for the chosen Companion */
.bonds .bond { stroke: var(--gold); stroke-width: calc(1 + var(--w, 0) * 2.6); opacity: calc(.3 + var(--w, 0) * .5); stroke-linecap: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: route-draw .7s var(--ease) forwards; }
.bonds .bondn { font-family: var(--display); font-size: 16px; fill: var(--gold); paint-order: stroke; stroke: var(--night); stroke-width: 5px; stroke-linejoin: round; }

.map-up { position: absolute; z-index: 3; top: 4.2rem; inset-inline-start: 1rem; display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem .5rem; border-radius: 999px; border: 1.5px solid var(--gold); background: color-mix(in srgb, var(--night-2) 85%, transparent); color: var(--ivory); font-family: var(--display); font-size: .95rem; transition: background .25s, color .25s; }
.map-up:hover { background: var(--gold); color: var(--night-2); }
.map-up svg { width: 1em; height: 1em; flex: none; }
.map-up span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-up { max-width: min(62%, 18rem); }
.map-up[hidden] { display: none; }
.map .station.active .em { color: var(--night-2); }
.map .city text { font-family: var(--display); font-size: 20px; fill: var(--ivory-2); paint-order: stroke; stroke: var(--night); stroke-width: 5px; stroke-linejoin: round; }
.map .stars circle { fill: var(--ivory); }
.side-head h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--ivory); }
.side-head h1 small { display: block; font-size: .55em; color: var(--gold); font-weight: 400; margin-top: .4rem; }
.side-head .lead { color: var(--ivory-2); margin: 0; font-size: 1.2rem; }
.search { width: 100%; padding: .6rem 1rem .7rem; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--ivory-3) 60%, transparent); background: color-mix(in srgb, var(--night-2) 60%, transparent); color: var(--ivory); font-family: var(--display); font-size: 1rem; }
.search::placeholder { color: var(--ivory-3); }
.search:focus { outline: none; border-color: var(--gold); }
.results-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.results-head h2 b { color: var(--gold); font-weight: 400; font-size: .8em; }
.results-head .clearq { font-family: var(--display); font-size: .95rem; color: var(--gold); padding: .2rem .1rem; }
.results-head .clearq:hover { text-decoration: underline; }
body.searching .collections, body.searching .me { display: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .45rem; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); }
.crumbs button { color: var(--gold); padding: 0; }
.crumbs button:hover { text-decoration: underline; }
.crumbs i { font-style: normal; color: var(--ivory-3); }
.collections { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.roads .collections { max-height: 46svh; overflow-y: auto; scrollbar-width: thin; }
.collections button { width: 100%; display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: .75rem; padding: .7rem .9rem; border-radius: .5rem; text-align: start; transition: background .25s; }
.collections button:hover, .collections button.active { background: var(--night-3); }
.collections .dot { width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid var(--ivory-3); }
.collections .active .dot, .collections button[data-count]:not([data-count="0"]) .dot { border-color: var(--gold); }
.collections .active .dot { background: var(--gold); }
.collections .name { font-family: var(--display); font-size: 1.2rem; }
.collections .count { font-family: var(--display); font-size: .9rem; color: var(--ivory-2); }
.collections .soon .name { color: var(--ivory-3); }
.peek { border-top: 1px solid var(--night-3); padding-top: 1.25rem; display: grid; gap: .5rem; align-content: start; }
.peek[hidden] { display: none; }
.peek h2 { font-size: 1.8rem; }
.peek .why { color: var(--ivory-2); margin: 0; font-size: 1.15rem; }
.peek .laqab { color: var(--gold); font-family: var(--display); font-weight: 600; }
.peek .src .ayah { font-family: var(--body); font-size: 1.15rem; color: var(--ivory); line-height: 1.7; }
.peek .src small, .peek .src .ayah small { display: block; font-family: var(--display); font-size: .85rem; color: var(--ivory-2); margin-top: .15rem; }
.pick-label { font-family: var(--display); font-size: .95rem; color: var(--gold); margin: .75rem 0 0; }
.members { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.members .pick { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; border-radius: .7rem; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--night-3) 60%, transparent); color: var(--ivory); font-family: var(--display); font-size: 1rem; text-align: start; transition: border-color .25s, background .25s; }
.members .pick svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--gold); }
.members .pick:hover { border-color: var(--gold); background: var(--night-3); }
.members .pick.soon { color: var(--ivory-3); border-color: var(--ivory-3); }
.members .pick.soon svg { color: var(--ivory-3); }
.members .pick.camp b { flex: none; min-width: 1.7rem; height: 1.7rem; padding: 0 .35rem; display: inline-grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--gold); font-weight: 600; font-size: .85rem; }
.peek .src { font-size: 1rem; color: var(--ivory-2); display: flex; align-items: flex-start; gap: .7rem; margin: .25rem 0 0; }
.peek .src .seal { margin-top: .1rem; }
.cta { display: inline-flex; align-items: center; gap: .6rem; justify-self: start; margin-top: .25rem; padding: .55rem 1.4rem; border-radius: 999px; background: var(--gold); color: var(--night-2); font-family: var(--display); font-size: 1rem; text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s; box-shadow: 0 8px 24px -10px rgba(217,173,69,.6); }
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(217,173,69,.7); }
.cta.soon { background: var(--night-3); color: var(--ivory-2); box-shadow: none; pointer-events: none; }
.home-foot { font-size: .9rem; color: var(--ivory-3); padding-top: .5rem; }
.home-foot p { margin: 0; }
.home-foot .me-foot:empty { display: none; }
.home-foot .me-foot { margin-top: .9rem; }
.home-foot a { color: var(--ivory-2); }
@media (max-width: 900px) {
  /* THE UNROLLED SCROLL. A phone's pane is about as wide as it is tall, and a road drawn
     inside one is only ~290px long — six stations, however cleverly the box is fitted. So
     the window goes: the road becomes the page and the reader travels it by scrolling,
     which is what a طومار is. Markup order is already the reading order. */
  .home { display: flex; flex-direction: column; background: var(--night-2); }
  .side-head, .chooser, .finder, .roads, .me, .peek, .home-foot { padding-inline: 1.1rem; background: none; gap: .85rem; }
  .side-head { padding-top: 4rem; }   /* the brand bar floats over the top of the page */
  .chooser { padding-block: .6rem .5rem; }
  .roads { padding-bottom: .95rem; }
  .finder { padding-top: 1.5rem; padding-bottom: 0; }
  .me { padding-top: 1.25rem; }
  .home-foot { padding-bottom: 2.5rem; }
  /* the h1 repeats the brand bar a finger's width above it, so only its tagline is painted;
     the platform name stays in the heading for anything reading the page rather than seeing it */
  .side-head h1 .ttl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .side-head h1 { font-size: 1rem; }
  .side-head h1 small { font-size: 1em; margin: 0; }
  .side-head .lead { display: none; }            /* the road already says this; the phone needs the room */

  /* map view: the box is as tall as the road needs, and the page scrolls it */
  body:not([data-view="sky"]) .map-wrap { position: relative; height: auto; overflow: visible;
    /* a night that runs the length of the road and hands back to the panel at both ends —
       a radial ground reads as a giant ellipse once the box is taller than the screen */
    background: linear-gradient(var(--night-2) 0, var(--night) 7%, var(--night) 88%, var(--night-2) 100%); }
  body:not([data-view="sky"]) .map-wrap .map { position: static; width: 100%; height: auto; }
  body:not([data-view="sky"]) .map-wrap .firmament { display: none; }
  /* sky view: still a framed pane — a constellation is two-dimensional and fits one */
  body[data-view="sky"] .map-wrap { position: relative; height: 62svh; background: linear-gradient(transparent 76%, var(--night-2) 97%), radial-gradient(120% 80% at 50% 80%, var(--night-3) 0%, var(--night) 55%, var(--night-2) 88%); }
  /* the firmament hands off to the panel: the same fade, painted above the canvas */
  body[data-view="sky"] .map-wrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 78%, var(--night-2) 98%); }

  /* the collections become a rail of chips: six full-width rows would push the road off
     the first screen, and the first screen has to show both the chooser and the road */
  .roads .collections { display: flex; overflow-x: auto; gap: .45rem; padding-bottom: .2rem;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .roads .collections::-webkit-scrollbar { display: none; }
  .roads .collections li { flex: none; scroll-snap-align: start; }
  .roads .collections button { width: auto; grid-template-columns: auto auto; gap: .45rem; padding: .45rem .95rem .5rem;
    border: 1.5px solid color-mix(in srgb, var(--ivory-3) 55%, transparent); border-radius: 999px; }
  .roads .collections .dot { display: none; }   /* the chip's own fill says which road is lit */
  .roads .collections .name { font-size: 1rem; }
  .roads .collections button.active { background: var(--gold); border-color: var(--gold); color: var(--night-2); }
  .roads .collections button.active .count { color: var(--night-2); }
  .peek { padding-top: 1rem; }
  .peek h2 { font-size: 1.5rem; }
  .map .station text { font-size: 34px; }
  .map .station.active text { font-size: 38px; }
  .map .station .ring { r: 22; }
  /* the unrolled road spaces stations ~70px apart, so the tap circle can be a proper
     one — 56px — and still tile rather than reach into its neighbour */
  .map .station .hit { r: 52; }
  .map .station .em { transform: scale(1.8); }
  .map .camp .ring { r: 28; }
  .map .camp .n { font-size: 24px; }
  .map .camp .camp-name { font-size: 30px; }
  /* the road is taller than the screen, so the climb-a-level pill rides the viewport rather
     than sitting at a point on the map the reader has already scrolled past. It takes the
     corner opposite the road — the one the road and its names leave empty — within thumb reach. */
  .map-up { position: fixed; top: auto; bottom: 1rem; inset-inline-end: .9rem; inset-inline-start: auto; font-size: 1rem; }
  .viewtabs button { font-size: 1.05rem; padding: .55rem 1.1rem .6rem; }
  .star text { font-size: 30px; }
  .star.active text { font-size: 35px; }
  .bonds .bondn { font-size: 23px; }
  .bonds .bond { stroke-width: calc(1.6 + var(--w, 0) * 3); }
  .map .city text { font-size: 24px; }
}

/* ======================================================================
   LIFE — a road of pages: each station is a framed miniature + its text
   ====================================================================== */
.life { position: relative; }
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.chapter-name { position: fixed; inset-inline-start: 1.25rem; top: 4.3rem; z-index: 21; font-family: var(--display); font-size: .95rem; color: var(--accent); pointer-events: none; display: flex; align-items: center; gap: .5rem; }
.chapter-name b { font-weight: 400; color: var(--ivory-2); font-size: .85rem; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; padding: .05rem .55rem; }
.chapter-name b i { font-style: normal; color: var(--ivory-3); margin-inline: .15rem; }
.to-toc { font-size: .82rem; position: fixed; inset-inline-end: 2.4rem; bottom: 1.1rem; white-space: nowrap; max-width: 60vw; z-index: 12; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--night-2) 85%, transparent); backdrop-filter: blur(6px); color: var(--ivory); font-family: var(--display); font-size: .9rem; text-decoration: none; opacity: 0; transform: translateY(.6rem); transition: opacity .3s, transform .3s var(--ease); pointer-events: none; }
.to-toc svg { width: 1rem; height: 1rem; flex: none; }
.to-toc.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll { position: relative; z-index: 1; padding-bottom: 12svh; }
.route-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.route-svg .path { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; opacity: .95; filter: drop-shadow(0 0 6px rgba(217,173,69,.55)); }
.route-svg .path-ghost { fill: none; stroke: var(--ivory-3); stroke-width: 1.5; stroke-dasharray: 3 9; opacity: .5; }
.route-svg .st { fill: var(--night-2); stroke: var(--ivory-3); stroke-width: 2; transition: stroke .4s, fill .4s; }
.route-svg .st.lit { stroke: var(--gold); fill: var(--gold); }
.route-svg .st.rel-weak.lit { stroke: var(--verm); fill: var(--verm); }
.route-svg .st.rel-disputed.lit { stroke: var(--gold); fill: var(--night-2); }

/* the miniature panel */
.panel { margin: 0; position: relative; width: 100%; border-radius: 48% 48% 16px 16px / 36% 36% 16px 16px; padding: 10px; background: color-mix(in srgb, var(--night-3) 55%, var(--night)); box-shadow: 0 30px 70px -36px rgba(0,0,0,.7), inset 0 0 0 2px color-mix(in srgb, var(--gold) 65%, transparent), inset 0 0 0 7px var(--night), inset 0 0 0 8px color-mix(in srgb, var(--gold) 30%, transparent); overflow: hidden; }
.panel svg { display: block; width: 100%; height: auto; border-radius: 44% 44% 10px 10px / 34% 34% 10px 10px; --pig: var(--accent); --pig-2: color-mix(in srgb, var(--accent) 55%, var(--night-2)); --line: rgba(239,227,198,.88); --dark: var(--night-2); --art-1: var(--accent); --art-2: color-mix(in srgb, var(--accent) 35%, var(--night-3)); --art-3: color-mix(in srgb, var(--ivory) 55%, var(--night-3)); --paper: var(--ivory); --ink: var(--night-2); }
/* the ink reveal: outlines draw, then pigment fills */
.panel .ink { transition: stroke-dashoffset 1.6s var(--ease); }
.panel .pig { opacity: 0; transition: opacity .9s var(--ease) 1s; }
.panel .l2 .ink { transition-delay: .3s; } .panel .l3 .ink { transition-delay: .6s; }
.panel .l2 .pig { transition-delay: 1.25s; } .panel .l3 .pig { transition-delay: 1.5s; }
.panel.drawn .ink { stroke-dashoffset: 0 !important; }
.panel.drawn .pig { opacity: 1; }
.panel:not(.drawn) { min-height: 8rem; }
.panel::after { content: ''; position: absolute; inset: 10px; border-radius: inherit; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--night) 35%, transparent), transparent 40%); }

.col { width: min(100%, 36rem); }
.hero, .scene, .chapter-head, .end { padding: 7rem clamp(1.25rem, 6vw, 5rem) 3rem; }
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.hero-text h1 { font-size: clamp(2.2rem, 5.5vw, 4.2rem); line-height: 1.2; color: var(--ivory); text-wrap: balance; }
.cartouche { display: inline-block; position: relative; padding: .18em .55em .26em; border: 2px solid var(--gold); border-radius: 999px; }
.cartouche::before, .cartouche::after { content: ''; position: absolute; top: 50%; width: .42em; height: .42em; margin-top: -.21em; background: var(--night); border: 2px solid var(--gold); transform: rotate(45deg); }
.cartouche::before { inset-inline-start: -.32em; } .cartouche::after { inset-inline-end: -.32em; }
.hero .laqab { font-family: var(--display); font-size: 1.1rem; color: var(--gold); margin: .6rem 0 0; }
.hero .full { color: var(--ivory-2); font-size: 1.05rem; max-width: 34rem; margin: .5rem 0 0; }
.hero .span { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); margin: .5rem 0 0; }
.hero .span b { color: var(--gold); font-weight: 600; }
.hero .hint { margin: 1.2rem 0 0; display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); }
.hero .hint svg { width: 1.1rem; height: 1.1rem; animation: nudge 1.8s var(--ease) infinite; }
.hero .draft { font-family: var(--display); font-size: .85rem; color: var(--ivory-2); margin: .5rem 0 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.chapter { --accent: var(--gold); }
.chapter[data-id="before"] { --accent: var(--verm); }
.chapter[data-id="with"]   { --accent: var(--gold); }
.chapter[data-id="after"]  { --accent: var(--mal); }
.chapter-head { min-height: 62svh; display: grid; align-content: center; justify-items: center; text-align: center; background: radial-gradient(55% 45% at 50% 55%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.chapter-head .line { display: block; width: 4rem; height: 3px; margin: 0 auto 1rem; background: var(--accent); border-radius: 2px; transform: scaleX(0); transition: transform .9s var(--ease) .2s; }
.chapter-head.in .line { transform: scaleX(1); }
.chapter-head h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); color: var(--ivory); }
.chapter-head .count { font-family: var(--display); color: var(--accent); margin: .5rem 0 0; }

.scene { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.scene.no-art { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.quote-mark { font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--accent); opacity: .55; }
.scene .text { display: grid; gap: .6rem; opacity: 0; transform: translateY(1rem); transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s; }
.scene.in .text { opacity: 1; transform: none; }
.scene .pill { font-family: var(--display); font-size: .95rem; color: var(--accent); display: inline-flex; gap: .5rem; align-items: center; }
.scene .pill::before { content: ''; width: 1.6rem; height: 2px; background: var(--accent); border-radius: 2px; }
.scene.no-art .pill { justify-content: center; }
.scene h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); color: var(--ivory); text-wrap: balance; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.scene.no-art h2 { justify-content: center; }
.scene .badge { font-family: var(--display); font-size: .7rem; padding: .25em .8em; border-radius: 999px; border: 1.5px solid; }
.rel-weak .badge { color: var(--verm); border-color: var(--verm); }
.rel-disputed .badge { color: var(--gold); border-color: var(--gold); }
.scene .story { font-size: clamp(1.25rem, 2.3vw, 1.5rem); line-height: 1.8; margin: 0; text-wrap: pretty; }
.kind-saying .story { font-size: clamp(1.45rem, 3vw, 1.95rem); color: var(--ivory); }
.kind-saying .story::before { content: '«'; color: var(--accent); } .kind-saying .story::after { content: '»'; color: var(--accent); }
.more { margin-top: .25rem; }
.more > button { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: .95rem; color: var(--accent); padding: .35rem 0; }
.more > button svg { width: .9rem; height: .9rem; transition: transform .4s var(--ease); }
.more.open > button svg { transform: rotate(180deg); }
.more .fold { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.more.open .fold { grid-template-rows: 1fr; }
.more .fold > div { overflow: hidden; text-align: start; }
.deeper { color: var(--ivory); font-size: 1.1rem; margin: .5rem 0 1rem; }
.isnad { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .9rem; position: relative; }
.isnad::before { content: ''; position: absolute; inset-inline-start: 1.25rem; top: 1.3rem; bottom: 1.3rem; width: 1px; background: linear-gradient(var(--accent), transparent); opacity: .7; }
.isnad li { display: grid; grid-template-columns: 2.8rem 1fr; gap: .8rem; align-items: start; font-size: .98rem; line-height: 1.55; }
.isnad .book { color: var(--ivory); font-family: var(--display); font-size: .9rem; }
.isnad .ref { color: var(--ivory-2); }
.isnad .note { color: var(--ivory-2); display: block; }

.end { min-height: 80svh; display: grid; align-content: center; }
.end h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); color: var(--ivory); }
.lessons { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .6rem; max-width: 34rem; }
.lessons li { display: grid; grid-template-columns: 1.6rem 1fr; gap: .6rem; align-items: start; font-size: 1.15rem; }
.lessons li::before { content: ''; width: .8rem; height: .8rem; margin-top: .55rem; border-radius: 50%; border: 2px solid var(--gold); }
.end h3 { font-family: var(--display); color: var(--gold); font-size: 1rem; font-weight: 400; margin: 1.5rem 0 .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 34rem; }
.chips a { font-family: var(--display); font-size: .95rem; text-decoration: none; padding: .35rem 1rem; border-radius: 999px; border: 1.5px solid var(--gold); color: var(--ivory); transition: background .25s, color .25s; }
.chips a:hover { background: var(--gold); color: var(--night-2); }
.chips a.soon { border-color: var(--ivory-3); color: var(--ivory-3); pointer-events: none; }
.end .cta { margin-top: 1.5rem; }

/* table of stations — a drawer, opened from the pill */
.toc { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: min(90vw, 27rem); display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--night-2) 96%, transparent); backdrop-filter: blur(10px);
  border-inline-end: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); box-shadow: 0 0 60px -10px rgba(0,0,0,.6);
  transform: translateX(-100%); transition: transform .42s var(--ease); visibility: hidden; }
[dir="rtl"] .toc { transform: translateX(100%); }
.toc.open { transform: none; visibility: visible; }
.toc-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .4s; }
.toc-backdrop.open { opacity: 1; pointer-events: auto; }
.toc-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.25rem .6rem; border-bottom: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); }
.toc-head h2 { font-size: 1.3rem; color: var(--ivory); }
.toc-close { font-size: 1.6rem; line-height: 1; color: var(--ivory-2); padding: .1rem .5rem; border-radius: .4rem; }
.toc-close:hover { color: var(--gold); }
.toc-body { overflow-y: auto; overscroll-behavior: contain; padding: .75rem 1rem 2rem; -webkit-overflow-scrolling: touch; }
.toc-ch { margin-top: 1rem; }
.toc-ch h3 { font-family: var(--display); font-size: 1rem; color: var(--c); display: flex; align-items: baseline; gap: .5rem; margin-bottom: .3rem; position: sticky; top: 0; background: color-mix(in srgb, var(--night-2) 94%, transparent); padding: .3rem 0; }
.toc-ch h3 small { color: var(--ivory-3); font-size: .8rem; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc li a { display: grid; grid-template-columns: 3.6rem 1fr auto; align-items: center; gap: .7rem; padding: .5rem .55rem; border-radius: .5rem; text-decoration: none; color: var(--ivory); transition: background .2s; }
.toc li a:hover { background: color-mix(in srgb, var(--night-3) 75%, transparent); }
.toc .n { font-family: var(--display); color: var(--c); font-size: .9rem; white-space: nowrap; }
.toc .n small { color: var(--ivory-3); font-size: .72rem; margin-inline-start: .15rem; }
.toc .ttl { font-family: var(--body); font-size: 1.02rem; line-height: 1.4; }
.toc .dot { width: .5rem; height: .5rem; border-radius: 50%; }
.toc .dot.rel-weak { background: var(--verm); } .toc .dot.rel-disputed { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .toc, .toc-backdrop { transition: none; } }
/* pull-quote */
.quote { margin: .4rem 0 0; padding: .9rem 1.1rem; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--night-3) 45%, transparent); border-radius: .25rem .9rem .9rem .25rem; }
.quote p { margin: 0; font-family: var(--display); font-size: 1.15rem; line-height: 1.7; color: var(--ivory); }
.quote p::before { content: '«'; color: var(--accent); } .quote p::after { content: '»'; color: var(--accent); }
.quote footer { margin-top: .4rem; font-family: var(--display); font-size: .85rem; color: var(--ivory-2); }
.quote footer span { color: var(--ivory-3); }
:root[lang="en"] .quote p::before { content: '“'; } :root[lang="en"] .quote p::after { content: '”'; }
.with-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 0; font-family: var(--display); font-size: .9rem; }
.with-chips span { color: var(--ivory-3); }
.with-chips a { text-decoration: none; color: var(--ivory); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 999px; padding: .1rem .7rem; }
.with-chips a:hover { background: var(--accent); color: var(--night-2); }
/* the rail */
.rail { position: fixed; inset-inline-end: .9rem; top: 50%; transform: translateY(-50%); height: min(60svh, 34rem); width: 1.1rem; z-index: 10; display: flex; flex-direction: column; gap: 4px; }
.rail a { flex: var(--n, 1); display: block; width: 4px; margin-inline: auto; border-radius: 3px; background: var(--c); opacity: .35; transition: opacity .3s, transform .3s var(--ease); position: relative; transform-origin: center; }
.rail a:hover, .rail a.active { opacity: 1; transform: scaleX(1.6); }
.rail a span { position: absolute; inset-inline-end: 1.2rem; top: 0; font-family: var(--display); font-size: .82rem; color: var(--c); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.rail a:hover span, .rail a.active span { opacity: 1; }
.rail .marker { position: absolute; inset-inline-start: 50%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--night-2); border: 2px solid var(--gold); box-shadow: 0 0 0 4px var(--night); top: 0; transition: top .15s linear; }

@media (max-width: 520px) {
  /* the life page's top edge carries wordmark + back link + controls + chapter name;
     the mark alone stands for the platform when they will not all fit */
  .life .brand .name { display: none; }
}
@media (max-width: 800px) {
  /* no scroll-snap: a station is taller than a phone screen, so snapping fights the reader mid-paragraph */
  html { scroll-padding-top: 5.2rem; }
  .hero, .scene { grid-template-columns: 1fr; gap: 1.1rem; align-content: start; padding-block: 6.2rem 2.5rem; padding-inline: 1.2rem 2.1rem; }
  .chapter-head, .end, .toc { padding-inline: 1.2rem 2.1rem; }
  .toc li a { grid-template-columns: 3.6rem 1fr auto; }
  .hero .panel, .scene .panel { width: min(100%, 30rem); margin-inline: auto; }
  .rail { inset-inline-end: .4rem; height: 42svh; }
  .rail a span { display: none; }
  .chapter-head { min-height: 48svh; }
  .quote-mark { font-size: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .map .traveller { display: none; }
  .map .station.active .ring { animation: none; }
  body.leaving { animation: none; }
  .map .station .body { animation: none; opacity: 1; }
  .stars-layer .star { animation: none; }
  .figure .fig.draw { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .bonds .bond { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  .figure .comet, .bonds .nova { display: none; }
  .star .halo, .star.lit .body, .star.lit .halo, .star.active .burst, .star.active .halo { animation: none; }
  .stars-layer .star, .star.active .body, .figure .fig, .map .moon { transition: none; }
  .map .map-view, .map .sky-view, .map-wrap .firmament { transition: none; }
  .map-wrap .lower, .map-wrap::before { transition: none; }
  .map .stars .tw, .sky .tw { animation: none; }
  .scene .text, .toc { opacity: 1; transform: none; transition: none; }
  .chapter-head .line { transform: none; transition: none; }
  .panel .ink, .panel .pig { transition: none; }
  .hero .hint svg { animation: none; }
  .more .fold, .cta, .rail a { transition: none; }
}

/* ---------- home: one tap opens a sheet ---------- */
.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; transform: translateY(105%); transition: transform .45s var(--ease); background: var(--night-2); border-top: 2px solid var(--gold); border-radius: 22px 22px 0 0; padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.7); display: grid; gap: .5rem; }
.sheet.open { transform: none; }
.sheet .grip { width: 2.6rem; height: 4px; border-radius: 2px; background: var(--ivory-3); margin: 0 auto .4rem; }
.sheet h2 { font-size: 1.7rem; color: var(--ivory); }
.sheet .why { color: var(--ivory-2); margin: 0; font-size: 1.1rem; }
.sheet .laqab { color: var(--gold); font-family: var(--display); font-weight: 600; }
.sheet .cta { justify-self: stretch; justify-content: center; font-size: 1.15rem; padding: .8rem 1.4rem; margin-top: .4rem; }
.sheet .close { justify-self: center; color: var(--ivory-2); font-family: var(--display); font-size: .95rem; padding: .4rem 1rem; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .4s; }
.sheet-backdrop.open { opacity: 1; pointer-events: auto; }
@media (min-width: 901px) { .sheet, .sheet-backdrop { display: none; } }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* ================= the personal layer =================
   Where the reader stopped, a station a day, and the مُدارسة that seals a road.
   Nothing here is a card: the reader's own progress is drawn as a short route,
   with the same rings, ghost line and pigment seals the rest of the world uses. */

/* ---------- ختم الطريق: a stamp, not a grade and not a badge.
     It must not borrow a grade's colour, so the rim is plain ivory ink — the scroll's
     own line — carrying three small pigment ticks at the three chapters of a life
     (قبل vermilion، مع gold، بعد malachite). Quiet at a glance, exact on inspection. ---------- */
.seal-khatm { color: var(--ivory); border-color: transparent; box-shadow: none; position: relative; }
.seal-khatm::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  background:
    conic-gradient(from -90deg,
      var(--verm) 0 4.5%, transparent 4.5% 33.33%,
      var(--gold) 33.33% 37.83%, transparent 37.83% 66.66%,
      var(--mal)  66.66% 71.16%, transparent 71.16%),
    var(--ivory);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px));
  mask: radial-gradient(circle closest-side, transparent 0 calc(100% - 2.5px), #000 calc(100% - 2.5px));
}
.seal-khatm.press { animation: stamp .5s var(--ease) both; }
@keyframes stamp {
  0%   { transform: rotate(-34deg) scale(1.9); opacity: 0; }
  60%  { transform: rotate(-6deg) scale(.94); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: 1; }
}

/* ---------- the reader's own route in the home side panel ---------- */
/* the reader's own band sits above the navigation and is ruled off from it, so the
   chooser (tabs → search → collections → peek) stays one uninterrupted run */
.me { display: grid; gap: 1.1rem; border-bottom: 1px solid var(--night-3); padding-block: .25rem 1.25rem; }
.me[hidden] { display: none; }
.me h3 { font-family: var(--display); font-size: .95rem; font-weight: 400; color: var(--gold); letter-spacing: .02em; margin: 0 0 .5rem; }

.me-route { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.me-stop { position: relative; display: grid; gap: .3rem; padding-inline-start: 2.1rem; }
/* the ghost thread between stops — the home route's dashed ivory line, vertical */
.me-stop + .me-stop::before {
  content: ''; position: absolute; inset-inline-start: .78rem; top: -.9rem; height: .9rem;
  border-inline-start: 1.5px dashed var(--ivory-3); opacity: .5;
}
.me-ring { position: absolute; inset-inline-start: 0; top: .05rem; width: 1.6rem; height: 1.6rem; }
.me-ring circle { fill: var(--night-2); stroke: var(--gold); stroke-width: 2.4; }
.me-stop a { display: block; text-decoration: none; color: var(--ivory); font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.45; text-wrap: balance; }
.me-stop a > span { color: var(--ivory-2); font-weight: 400; }
.me-stop a b { color: var(--ivory); font-weight: 600; }
.me-stop a:hover b { color: var(--gold); }
.me-sub { margin: 0; color: var(--ivory-3); font-size: 1rem; line-height: 1.5; }

/* progress: the gold route drawn over its ghost, as on the life scroll */
.prog { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .55rem; margin: .5rem 0 0; max-width: 15rem; font-family: var(--display); font-size: .85rem; color: var(--ivory-2); }
.prog .bar { display: block; min-width: 4rem; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ivory-3) 45%, transparent); position: relative; }
.prog .bar::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; width: calc(var(--k, 0) * 100%);
  background: var(--gold); border-radius: 2px; filter: drop-shadow(0 0 4px rgba(217,173,69,.5));
}
.prog.is-sealed { grid-auto-flow: column; justify-content: start; align-items: center; gap: .6rem; color: var(--ivory); }
.prog .seal { width: 2.2rem; height: 2.2rem; font-size: .58rem; }

.me-seals > div { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }
.me-seals a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ivory-2); font-family: var(--display); font-size: .95rem; }
.me-seals a:hover { color: var(--gold); }
.me-seals .seal { width: 2.3rem; height: 2.3rem; font-size: .55rem; }

/* ---------- تعرَّف على الصحابة: a floating ختم mark, and the dialog it opens.
     Kept out of the reading path so the map and the collections stay the page. ---------- */
.mud-options { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.mud-options button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem;
  padding: .75rem .95rem; border-radius: .5rem; text-align: start; color: var(--ivory);
  font-family: var(--display); font-size: 1.05rem; border: 1.5px solid var(--night-3);
  min-height: 2.9rem; transition: background .25s, border-color .25s, color .25s;
}
.mud-options button:hover:not(:disabled) { background: var(--night-3); border-color: var(--gold); }
.mud-options button:disabled { cursor: default; color: var(--ivory-2); }
/* correctness is never colour alone: the row also carries a drawn mark */
/* the ROW carries correctness (border + tint + drawn mark); the label stays ivory so it
   never drops under 4.5:1 in either theme */
.mud-options button.is-right { border-color: var(--mal); background: color-mix(in srgb, var(--mal) 14%, transparent); }
.mud-options button.is-wrong { border-color: var(--verm); background: color-mix(in srgb, var(--verm) 14%, transparent); }
.mud-options button.is-right > span, .mud-options button.is-wrong > span { color: var(--ivory); }
.is-right .mk { color: var(--mal); } .is-wrong .mk { color: var(--verm); }
.mk { width: 1.25rem; height: 1.25rem; flex: none; }

.me-open { font-family: var(--display); font-size: .95rem; color: var(--gold); text-decoration: none; border-bottom: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent); padding-bottom: .1rem; }
.me-open:hover { border-bottom-color: var(--gold); }

/* ---------- مُدارسة, at the end of the road ---------- */
.mudarasa { margin: 2.25rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--night-3); max-width: 34rem; display: grid; gap: .5rem; }
.mudarasa h3 { font-family: var(--display); font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; color: var(--ivory); margin: 0; }
.mudarasa .mud-sub { margin: 0; color: var(--ivory-2); font-size: 1.1rem; }
.mudarasa .cta { margin-top: .75rem; }
.mud-count { margin: 0; font-family: var(--display); font-size: .85rem; letter-spacing: .06em; color: var(--ivory-3); }
.mud-count i { font-style: normal; opacity: .55; margin: 0 .15rem; }
.mud-ask { margin: .1rem 0 0; font-family: var(--display); font-size: 1.2rem; color: var(--gold); }
.mud-subject { margin: .35rem 0 .9rem; padding-inline-start: .9rem; border-inline-start: 2px solid var(--night-3); font-size: 1.15rem; line-height: 1.75; color: var(--ivory); }
.mud-after:empty { display: none; }
.mud-after { display: grid; justify-items: start; gap: .6rem; margin-top: .9rem; }
.mud-verdict { margin: 0; font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.mud-verdict.ok { color: var(--mal); } .mud-verdict.no { color: var(--verm); }
.mud-score { margin: 0; font-family: var(--display); font-size: 1.3rem; color: var(--ivory); }
.mud-score b { color: var(--gold); font-size: 1.6rem; }
.mudarasa.is-sealed { grid-template-columns: auto 1fr; align-items: center; gap: 1.1rem; }

/* ---------- walked stations read differently, on the road and on the map ---------- */
.route-svg .st.walked:not(.lit) { stroke: var(--gold); opacity: .6; }
.toc a.walked .ttl { color: var(--ivory-2); }
.toc a.walked .n::after { content: ''; display: block; width: .3rem; height: .3rem; border-radius: 50%; background: var(--gold); margin: .2rem auto 0; }
.map .station.walked .ring, .map .star.walked .core { stroke-dasharray: none; }
.map .station.sealed .ring { fill: color-mix(in srgb, var(--gold) 35%, var(--night-2)); }
.map .star.sealed .glow { opacity: .3; }

@media (max-width: 900px) {
  .me-stop a b { font-size: 1.15rem; }
  .mud-options button { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seal-khatm.press { animation: none; }
  .mud-options button, .me-open { transition: none; }
}

/* ---------- «امسح أثري»: a quiet utility line in the dialog, not a shouting red button.
     Destructive, so it asks in place; the confirm keeps an ivory label behind a vermilion
     rim rather than colouring its own text, which would drop under 4.5:1 on the night. */
.me-foot { border-top: 1px solid var(--night-3); padding-top: .9rem; margin-top: .3rem; display: grid; gap: .5rem; }
.me-foot:empty { display: none; border: 0; padding: 0; margin: 0; }
.me-foot .forget { justify-self: start; font-family: var(--display); font-size: .9rem; color: var(--ivory-3); padding: .2rem 0; transition: color .25s; }
.me-foot .forget:hover { color: var(--verm); }
.forget-ask { margin: 0; font-size: 1.02rem; line-height: 1.65; color: var(--ivory-2); }
.forget-row { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.forget-row button { font-family: var(--display); font-size: .95rem; padding: .45rem 1.1rem; border-radius: 999px; transition: background .25s, color .25s, border-color .25s; }
.forget-yes { border: 1.5px solid var(--verm); color: var(--ivory); }
.forget-yes:hover { background: var(--verm); color: var(--night-2); }
.forget-no { border: 1.5px solid transparent; color: var(--ivory-2); }
.forget-no:hover { color: var(--gold); border-color: var(--gold); }
.forget-done { margin: 0; font-family: var(--display); font-size: .95rem; color: var(--ivory-2); }
@media (prefers-reduced-motion: reduce) { .me-foot .forget, .forget-row button { transition: none; } }

/* ======================================================================
   الغزوات — the battle film: one map, watched; the same beats, read beneath it
   ====================================================================== */
/* the home's second door */
.side-link { margin: 0; font-family: var(--display); font-size: 1rem; }
.side-link a { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ivory); border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 999px; padding: .35rem 1rem .4rem; transition: background .25s, color .25s; }
.side-link a svg { width: .9rem; height: .9rem; color: var(--gold); }
.side-link a small { color: var(--ivory-3); font-size: .85em; }
.side-link a:hover { background: var(--gold); color: var(--night-2); }
.side-link a:hover svg, .side-link a:hover small { color: var(--night-2); }

/* ---------- the section ---------- */
.ghazawat { position: relative; z-index: 1; margin-inline: auto; padding: 7rem clamp(1.25rem, 6vw, 3rem) 4rem; display: grid; gap: 1.25rem; }
.ghazawat h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); color: var(--ivory); }
.ghazawat .lead { margin: 0; color: var(--ivory-2); font-size: 1.15rem; max-width: 34rem; }
.roster { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; }
.roster li.soon, .roster li a { display: grid; grid-template-columns: 4rem 1fr auto; align-items: center; gap: .9rem; }
.roster li { border-top: 1px solid var(--night-3); }
.roster li a { padding: .95rem .35rem; text-decoration: none; color: var(--ivory); border-radius: .5rem; transition: background .25s; }
.roster li a:hover { background: color-mix(in srgb, var(--night-3) 70%, transparent); }
.roster li.soon { padding: .95rem .35rem; color: var(--ivory-3); }
.roster .n { font-family: var(--display); font-size: .95rem; color: var(--gold); white-space: nowrap; }
.roster li.soon .n { color: var(--ivory-3); }
.roster .ttl { font-family: var(--display); font-size: 1.25rem; line-height: 1.35; }
.roster .ttl small { display: block; font-family: var(--body); font-size: .95rem; color: var(--ivory-2); font-weight: 400; }
.roster li.soon .ttl small { color: var(--ivory-3); }
.roster .go { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--display); font-size: .9rem; color: var(--night-2); background: var(--gold); border-radius: 999px; padding: .4rem 1rem .45rem; white-space: nowrap; }
.roster .go svg { width: .9rem; height: .9rem; }
.roster .go i { font-style: normal; }
.roster li.soon .go { background: none; color: var(--ivory-3); padding-inline: 0; }
@media (max-width: 520px) { .roster .go i { display: none; } .roster li.soon, .roster li a { grid-template-columns: 3.4rem 1fr auto; gap: .6rem; } }

/* ---------- the film: pages over one map ---------- */
.film-page main { position: relative; z-index: 1; }
.film { position: relative; height: 100svh; overflow: hidden; background: radial-gradient(90% 70% at 50% 60%, color-mix(in srgb, var(--night-3) 45%, transparent), transparent 70%); }
.stage { position: absolute; inset: 0; }
.map-host, .map-host svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-host svg { --line: rgba(239,227,198,.85); --dark: var(--night-2); transition: transform 1.2s var(--ease); }
:root[data-theme="light"] .map-host svg { --line: rgba(27,35,64,.85); --dark: #1b2340; }
/* the reading panel takes the start edge, so the picture is composed into what is left */
/* "slice" covers the frame but crops the map's height; the whole map (dune to Madinah) must stay in view,
   so the drawing is scaled to fit the room the page leaves it on every layout */
.map-host svg { inset: auto; left: 50%; top: 50%; width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax; transform-origin: 50% 50%; }
[dir="rtl"] .map-host svg { transform: translateX(-24%) scale(.72); }
[dir="ltr"] .map-host svg { transform: translateX(24%) scale(.72); }
@media (min-aspect-ratio: 1/1) and (max-height: 700px) { [dir="rtl"] .map-host svg { transform: translateX(-24%) scale(.64); } [dir="ltr"] .map-host svg { transform: translateX(24%) scale(.64); } }
.map-host .layer { transition: opacity 1.2s var(--ease), transform 1.6s var(--ease); }
.map-host .layer:not(.on) { opacity: 0; pointer-events: none; }
.map-host .layer.wide { transform-origin: 440px 520px; }   .map-host .layer.wide:not(.on) { transform: scale(1.7); }
.map-host .layer.valley { transform-origin: 500px 520px; } .map-host .layer.valley:not(.on) { transform: scale(.7); }
.map-host [data-show] { opacity: 0; transition: opacity 1.4s var(--ease); }
.map-host [data-show].on { opacity: 1; }
.map-host .lbl { font-family: var(--display); font-size: 26px; fill: var(--ivory-2); paint-order: stroke; stroke: var(--night); stroke-width: 6px; stroke-linejoin: round; }
.map-host .lbl.small { font-size: 20px; fill: var(--ivory-3); }
/* units: a banner and a cluster of marks, never a figure */
.unit { opacity: 0; transition: opacity .9s var(--ease); }
.unit.on { opacity: 1; }
.unit .dust { fill: var(--ivory-2); opacity: .16; }
.unit .marks path { fill: none; stroke: var(--ivory); stroke-width: 1.8; stroke-linecap: round; }
.unit .pole { fill: none; stroke: var(--ivory); stroke-width: 2; stroke-linecap: round; }
.unit .flag { fill: var(--gold); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.unit-quraysh .flag { fill: var(--verm); }
.unit-quraysh .marks path { stroke: var(--ivory-3); }
.unit-caravan .marks path { stroke: var(--ivory-2); stroke-width: 2.2; }
/* weather and light */
.fx { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }
.fx.on { opacity: 1; }
.fx.night { background: rgba(6,10,28,.5); }
:root[data-theme="light"] .fx.night { background: rgba(27,35,64,.22); }
.fx.dawn { background: linear-gradient(to top, rgba(217,173,69,.3), transparent 60%); }
.fx.rain { background: repeating-linear-gradient(112deg, transparent 0 16px, rgba(239,227,198,.28) 16px 17px); animation: rain .7s linear infinite; }
.fx.wind { background: repeating-linear-gradient(95deg, transparent 0 60px, rgba(201,188,156,.25) 60px 63px, transparent 63px 140px); -webkit-mask: radial-gradient(70% 40% at 50% 58%, #000, transparent); mask: radial-gradient(70% 40% at 50% 58%, #000, transparent); animation: wind .9s linear infinite; }
.fx.dust { background: radial-gradient(38% 22% at 50% 56%, rgba(201,188,156,.32), transparent); }
.fx.light { background: linear-gradient(to bottom, rgba(239,227,198,.55), rgba(239,227,198,.12) 45%, transparent 75%); -webkit-mask: linear-gradient(to right, transparent 22%, #000 44% 56%, transparent 78%); mask: linear-gradient(to right, transparent 22%, #000 44% 56%, transparent 78%); }
@keyframes rain { to { background-position: -40px 60px; } }
@keyframes wind { to { background-position: 280px 0; } }

/* the panel: the page's words, on the start edge, over the night — no card */
.pages { position: absolute; inset-block: 0; inset-inline-start: 0; z-index: 2; overflow-anchor: none; width: min(46%, 36rem); overflow-y: auto; overscroll-behavior: contain; padding: 5.5rem clamp(1.25rem, 3.5vw, 3rem) 2rem; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to var(--pages-fade, left), var(--night) 0%, var(--night) 93%, transparent 100%); }
[dir="rtl"] .pages { --pages-fade: left; } [dir="ltr"] .pages { --pages-fade: right; }
/* the paper side needs a firmer ground and darker ink on the map */
:root[data-theme="light"] .pages { background: linear-gradient(to var(--pages-fade, left), var(--night) 0%, var(--night) 95%, transparent 100%); }
:root[data-theme="light"] .film { background: none; }
:root[data-theme="light"] .map-host .lbl { fill: var(--ivory); }
:root[data-theme="light"] .map-host .lbl.small { fill: var(--ivory-2); }
:root[data-theme="light"] .unit .marks path, :root[data-theme="light"] .unit .pole, :root[data-theme="light"] .unit .spear { stroke: var(--ivory); }
:root[data-theme="light"] .fx.light { background: linear-gradient(to bottom, rgba(217,173,69,.45), rgba(217,173,69,.1) 45%, transparent 75%); }
:root[data-theme="light"] .fx.rain { background: repeating-linear-gradient(112deg, transparent 0 16px, rgba(27,35,64,.22) 16px 17px); }
:root[data-theme="light"] .fx.wind { background: repeating-linear-gradient(95deg, transparent 0 60px, rgba(27,35,64,.16) 60px 63px, transparent 63px 140px); }
:root[data-theme="light"] .fx.dust { background: radial-gradient(38% 22% at 50% 56%, rgba(90,75,40,.22), transparent); }
.pages::-webkit-scrollbar { width: 6px; }
.page { display: grid; gap: .6rem; align-content: start; min-height: 100%; animation: page .6s var(--ease); }
@keyframes page { from { opacity: 0; transform: translateY(.6rem); } }
.page h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.25; color: var(--ivory); text-wrap: balance; }
.page .laqab { font-family: var(--display); font-size: 1rem; color: var(--gold); margin: .3rem 0 0; }
.page .meta { font-family: var(--display); font-size: .85rem; color: var(--ivory-3); margin: 0; }
.page .hint, .page .draft { font-family: var(--display); font-size: .85rem; color: var(--ivory-2); margin: 0; }
.page .phase { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin: 0; font-family: var(--display); font-size: .82rem; color: var(--gold); letter-spacing: .04em; }
.page .phase b { font-weight: 400; color: var(--ivory-3); } .page .phase i { font-style: normal; opacity: .55; margin: 0 .1rem; }
.page .pill { font-family: var(--display); font-size: .9rem; color: var(--gold); display: inline-flex; gap: .5rem; align-items: center; }
.page .pill::before { content: ''; width: 1.6rem; height: 2px; background: var(--gold); border-radius: 2px; }
.page h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--ivory); text-wrap: balance; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.page .badge { font-family: var(--display); font-size: .7rem; padding: .25em .8em; border-radius: 999px; border: 1.5px solid; }
.page.rel-weak .badge { color: var(--verm); border-color: var(--verm); }
.page.rel-disputed .badge { color: var(--gold); border-color: var(--gold); }
.page .story { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.8; margin: 0; text-wrap: pretty; }
.page.kind-saying .story { color: var(--ivory); }
.page .lessons { margin-top: .2rem; }
.page .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: .6rem 0 0; }
.page .backcol { font-family: var(--display); font-size: .95rem; text-decoration: none; }
.page .with-chips { margin: 0; }
/* the turn: previous, the beats as segments, next — pinned under the page */
.turn { margin-top: auto; padding-top: 1.25rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; position: sticky; bottom: 0; background: linear-gradient(to top, var(--night) 60%, transparent); padding-bottom: .25rem; }
.turn .cta { margin: 0; white-space: nowrap; }
.turn .cta svg { width: 1em; height: 1em; }
.segs { display: flex; gap: 3px; height: 4px; }
.seg { position: relative; flex: 1; min-width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ivory-3) 45%, transparent); cursor: pointer; }
.seg::before { content: ''; position: absolute; inset: -12px 0; }
.seg.done { background: var(--gold); }
.seg.active { background: var(--gold); box-shadow: 0 0 6px rgba(217,173,69,.6); }
.tbtn { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); display: inline-grid; place-items: center; color: var(--ivory); background: color-mix(in srgb, var(--night-2) 70%, transparent); transition: border-color .25s, opacity .25s; }
.tbtn svg { width: 1.15rem; height: 1.15rem; }
.tbtn:hover { border-color: var(--gold); }
.tbtn:disabled { opacity: .3; cursor: default; }
.brand .ctl.sfx.on { border-color: var(--gold); color: var(--gold); }
/* the narrator's bar: pause and seek, quiet until the voice is live */
.narr { display: flex; align-items: center; gap: .7rem; margin: 0; }
.narr button { width: 2rem; height: 2rem; flex: none; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--night-2) 70%, transparent); color: var(--gold); display: inline-grid; place-items: center; transition: border-color .25s; }
.narr button:hover { border-color: var(--gold); }
.narr button svg { width: .95rem; height: .95rem; }
.narr .track { position: relative; flex: 1; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ivory-3) 40%, transparent); cursor: pointer; }
.narr .track::before { content: ''; position: absolute; inset: -10px 0; }
.narr .track i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; border-radius: 2px; background: var(--gold); transition: width .2s linear; }
.narr.live .track i { box-shadow: 0 0 6px rgba(217,173,69,.5); }
/* the sentence being told brightens under the voice */
.story .sent { transition: color .45s, text-shadow .45s; }
.story .sent.now { color: var(--ivory); text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 40%, transparent); }
@media (max-width: 800px) {
  /* the phone: the map keeps the upper half and the page is a sheet over the lower half */
  /* the map's full height fits the 46svh above the sheet */
  [dir="rtl"] .map-host svg, [dir="ltr"] .map-host svg { transform: scale(.6) translateY(-50%); }
  .map-host .lbl { font-size: 34px; } .map-host .lbl.small { font-size: 27px; }
  .pages { inset: auto 0 0 0; width: auto; height: 54svh; padding: 1.25rem 1.2rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); background: color-mix(in srgb, var(--night) 94%, transparent); backdrop-filter: blur(8px); }
  .film.opening .pages { height: 58svh; }
  .page h1 { font-size: 1.9rem; }
  .page h2 { font-size: 1.45rem; }
  .page .story { font-size: 1.15rem; line-height: 1.7; }
  .turn { padding-top: .9rem; gap: .6rem; }
  .turn .cta { font-size: .95rem; padding: .5rem 1.1rem; }
}
/* short screens: less head-room, tighter type, the pane still scrolls inside itself */
@media (max-height: 640px) and (min-width: 801px) {
  .pages { padding-top: 4.4rem; padding-bottom: 1rem; }
  .page h1 { font-size: 1.8rem; } .page h2 { font-size: 1.4rem; } .page .story { font-size: 1.1rem; line-height: 1.65; }
  .page .quote p { font-size: 1rem; }
}
@media (max-width: 800px) and (max-height: 700px) {
  .pages, .film.opening .pages { height: 60svh; }
  [dir="rtl"] .map-host svg, [dir="ltr"] .map-host svg { transform: scale(.5) translateY(-65%); }
}
@media (max-width: 800px) and (orientation: landscape) {
  /* a phone on its side: the page takes the start half, the map the other half, like a desktop */
  .pages, .film.opening .pages { inset: 0 auto 0 0; inset-inline-start: 0; width: 52%; height: auto; border-top: 0; padding-top: 4rem; }
  [dir="rtl"] .map-host svg { transform: translateX(-26%) scale(.5); } [dir="ltr"] .map-host svg { transform: translateX(26%) scale(.5); }
  .map-host .lbl { font-size: 30px; } .map-host .lbl.small { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-host svg, .map-host .layer, .map-host [data-show], .unit, .fx, .tbtn, .side-link a, .roster li a { transition: none; }
  .fx.rain, .fx.wind { animation: none; }
  .page { animation: none; }
}
/* the banners: the white لواء, the black راية, and the three of Quraysh */
.unit .liwa .flag { fill: #efe3c6; stroke: #6b5a3a; }
.unit .raya .flag { fill: #0a1128; stroke: #c9bc9c; }
.unit .flag-text { font-family: var(--body); fill: #efe3c6; paint-order: normal; }
.unit-quraysh .flag { fill: #b4122c; stroke: #efe3c6; }
.page .more > button { color: var(--gold); }
/* spears and camels: strokes in the unit's ink */
.unit .spear { fill: none; stroke: var(--ivory-2); stroke-width: 1; }
.unit .tip { fill: var(--ivory); stroke: none; }
.unit-quraysh .spear { stroke: var(--ivory-3); }
.unit .camel { fill: var(--ivory-2); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.unit .load { fill: var(--gold); stroke: var(--line); stroke-width: .8; }

/* ======================================================================
   THE GATE — two doors into one world (home first viewport).
   Two drawn archways on the same night: the Seerah (a horizon whose light
   is being born) and the roads (a route with lit stations). Not cards —
   architecture: pointed niches in a hairline of gold. Scrolling past is
   the third door.
   ====================================================================== */
.gate { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: clamp(1.2rem, 3svh, 2.2rem);
  padding: 5.5rem clamp(1rem, 4vw, 2.5rem) 3rem; position: relative; z-index: 2;
  background: radial-gradient(120% 90% at 50% 112%, var(--night-3) 0%, var(--night) 58%, var(--night-2) 96%); }
.gate-ask { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--ivory); margin: 0; }
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 4vw, 3rem); width: min(100%, 54rem); }
.door { display: grid; justify-items: center; gap: .55rem; text-decoration: none; color: var(--ivory); outline: none; }
.door .arch { display: block; width: 100%; aspect-ratio: 300 / 340; position: relative; overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: 50% 50% .8rem .8rem / 40% 40% .8rem .8rem;
  background: color-mix(in srgb, var(--night-2) 45%, transparent);
  box-shadow: inset 0 0 0 6px var(--night), inset 0 0 0 7px color-mix(in srgb, var(--gold) 30%, transparent);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.door .arch svg { display: block; width: 100%; height: 100%; }
.door:hover .arch, .door:focus-visible .arch { border-color: var(--gold); transform: translateY(-4px);
  box-shadow: inset 0 0 0 6px var(--night), inset 0 0 0 7px color-mix(in srgb, var(--gold) 45%, transparent), 0 18px 44px -22px color-mix(in srgb, var(--gold) 55%, transparent); }
.door:focus-visible .arch { outline: 2px solid var(--gold); outline-offset: 3px; }
.door .d-name { font-family: var(--display); font-weight: 600; font-size: clamp(1.15rem, 2.6vw, 1.55rem); text-align: center; }
.door .d-line { font-size: .98rem; line-height: 1.6; color: var(--ivory-2); text-align: center; max-width: 19rem; text-wrap: balance; }
.door .d-enter { font-family: var(--display); font-size: .95rem; color: var(--ivory); border: 1.5px solid var(--gold);
  border-radius: 999px; padding: .35rem 1.1rem; margin-top: .15rem; transition: background .25s, color .25s; }
.door:hover .d-enter, .door:focus-visible .d-enter { background: var(--gold); color: var(--night-2); }
/* the doors breathe: the seerah's light is being born, the roads' route marches */
.v-glow { animation: gate-breathe 5s ease-in-out infinite; transform-origin: 150px 296px; }
.v-ray { animation: gate-ray 5s ease-in-out infinite; }
.v-ray.r2 { animation-delay: .6s; } .v-ray.r3 { animation-delay: 1.2s; }
.v-star { animation: tw 7s ease-in-out infinite; } .v-star.s2 { animation-delay: 2.4s; }
.door:hover .v-route, .door:focus-visible .v-route { animation: gate-march 1.1s linear infinite; }
@keyframes gate-breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes gate-ray { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes gate-march { to { stroke-dashoffset: -15; } }
@media (max-width: 520px) {
  .gate { padding-top: 4.5rem; }
  .door .d-line { display: none; }
  .door .d-enter { font-size: .85rem; }
}
:root[data-theme="light"] .door .arch { box-shadow: inset 0 0 0 6px var(--night), inset 0 0 0 7px color-mix(in srgb, var(--gold) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .v-glow, .v-ray, .v-star, .door:hover .v-route { animation: none; }
  .door .arch, .door .d-enter { transition: none; }
  .door:hover .arch { transform: none; }
}