/* ============================================================
   Home: the scroll story (glass cards over the 3D stage), the stage tail
   (facts + ways in, still on the stage), footer. The .story-card glass block is the reference for glass
   over the city: change it with care.
   ============================================================ */

/* intro copy (inside the first story card, or alone when there is no story city) */
.hero-title {
  font-size: clamp(34px, 4.6vw, 58px); font-weight: 800; line-height: 1.12;
  color: var(--ink-hi); letter-spacing: -0.02em; text-wrap: balance;
}
html[lang="ar"] .hero-title { line-height: 1.32; letter-spacing: 0; }
.hero-sub { color: var(--ink); margin-top: 18px; max-width: 44ch; font-size: 16px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* city cards grid (views/cities.js) */
.city-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--gap); }

/* ============================================================
   Home = the story, read on scroll (views/overview.js + views/story.js)
   One sticky full-screen 3D stage; chapter cards scroll over it.
   ============================================================ */
.story-screen { max-width: none; padding: 0; }
.story { position: relative; }
.story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; z-index: 0; overflow: hidden; }
.story-stage .map-tab { height: 100%; gap: 0; }
.story-stage .map-foot { display: none; }
.story-stage .map-stage { height: 100%; border-radius: 0; box-shadow: none; pointer-events: none; }
.map-stage.is-story .map-side,
.map-stage.is-story .map-headline { display: none !important; }

.story-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; padding-inline: clamp(16px, 4vw, 56px); }
.story-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
/* the cards over the city are glass: the city shows through, blurred and a little lifted,
   so the words read without a slab hiding the picture. A lit top edge and a soft sheen give
   the pane its thickness; the tint is just enough to hold the text over any light */
.story-card {
  --sg-tint-a: rgba(255, 255, 255, 0.5); --sg-tint-b: rgba(255, 255, 255, 0.4);   /* nearly even: dark water under the foot of the pane must not swallow the small print */
  --sg-edge: rgba(255, 255, 255, 0.62); --sg-rim: rgba(255, 255, 255, 0.9);
  --sg-filter: blur(22px) saturate(1.5) brightness(1.12);
  --sg-shadow: 0 24px 60px rgba(22, 29, 54, 0.22), 0 2px 6px rgba(22, 29, 54, 0.08);
  position: relative; isolation: isolate;
  pointer-events: auto; width: min(460px, 100%);
  padding: 22px 26px 22px; border-radius: 22px;
  background: linear-gradient(150deg, var(--sg-tint-a), var(--sg-tint-b));
  border: 1px solid var(--sg-edge);
  -webkit-backdrop-filter: var(--sg-filter); backdrop-filter: var(--sg-filter);
  box-shadow: var(--sg-shadow), inset 0 1px 0 var(--sg-rim);
  color: var(--ink);
  opacity: 0.4; transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.18,.82,.22,1);
}
.story-card::before {   /* the sheen across the top of the pane */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%);
}
:root[data-theme="dark"] .story-card {
  --sg-tint-a: rgba(26, 31, 52, 0.52); --sg-tint-b: rgba(14, 17, 31, 0.36);
  --sg-edge: rgba(255, 255, 255, 0.14); --sg-rim: rgba(255, 255, 255, 0.14);
  --sg-filter: blur(22px) saturate(1.5) brightness(0.9);
  --sg-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 2px 8px rgba(0, 0, 0, 0.2);
}
.story-card .sc-stat .ss, .story-card .sc-count { font-weight: 700; }
:root:not([data-theme="dark"]) .story-card .sc-stat .ss { color: var(--ink); }
:root[data-theme="dark"] .story-card::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 40%); }
/* no backdrop blur (older engines): the same pane, a touch more opaque so the text still reads */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .story-card { --sg-tint-a: rgba(255, 255, 255, 0.86); --sg-tint-b: rgba(255, 255, 255, 0.78); }
  :root[data-theme="dark"] .story-card { --sg-tint-a: rgba(26, 31, 52, 0.9); --sg-tint-b: rgba(14, 17, 31, 0.84); }
}
.story-step.is-active .story-card { opacity: 1; transform: none; }
.story-card.is-intro { width: min(600px, 100%); padding: 30px 32px; }
.story-card.is-intro .hero-title { font-size: clamp(30px, 3.6vw, 46px); }
.story-card.is-intro .hero-actions { margin-top: 22px; }
.sc-count { font-size: 12px; font-weight: 700; color: var(--accent); }
.sc-title { margin-top: 8px; font-size: clamp(23px, 2.3vw, 31px); font-weight: 800; color: var(--ink-hi); line-height: 1.3; letter-spacing: -0.01em; }
html[lang="ar"] .sc-title { line-height: 1.5; letter-spacing: 0; }
.sc-body { margin-top: 10px; font-size: 15.5px; line-height: 1.85; color: var(--ink); }
.sc-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.ch-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }

/* chapter rail: where you are in the story (inline end of the stage) */
.story-rail {
  position: absolute; z-index: 3; inset-inline-end: 22px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; pointer-events: auto;
}
.rail-dot { width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: height var(--fast), background var(--fast); }
.rail-dot.on { height: 24px; background: var(--accent); }

/* the stage → page bridge: the story runs on for half a screen past its last chapter, and that
   run-out fades the city into --stage-bg, the night the stage tail is set on. The sticky stage
   lets go only when the fade is complete, so there is no edge anywhere */
.story::after {
  content: ""; position: relative; z-index: 1; display: block; pointer-events: none;
  height: 55vh; height: 55svh;
  background: linear-gradient(to bottom,
    transparent,
    color-mix(in srgb, var(--stage-bg) 20%, transparent) 28%,
    color-mix(in srgb, var(--stage-bg) 58%, transparent) 56%,
    color-mix(in srgb, var(--stage-bg) 88%, transparent) 80%,
    var(--stage-bg));
}

@media (max-width: 900px) {
  .story-step { align-items: flex-end; padding-bottom: 20px; }
  .story-step.is-intro { align-items: center; }
  .story-card { width: 100%; padding: 16px 18px; }
  .story-card .ch-chips { display: none; }
  .sc-title { font-size: 22px; }
  .sc-body { font-size: 14.5px; line-height: 1.75; }
  .story-rail { display: none; }
}

/* no story city: the intro copy alone, on the page */
.story-after { width: 100%; max-width: var(--content-w); margin-inline: auto; padding: 72px clamp(18px, 4vw, 44px) var(--s-7); }

/* ---------------- the stage tail ----------------
   Still on the stage (same in both themes): the numbers the story stood on, in display
   numerals on hairlines, then every way in as glass over the city's own ground. */
.stage-tail {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--stage-bg); color: var(--stage-ink-dim);
  padding: var(--s-6) 0 var(--s-9);
}
.stage-tail.is-bare { padding-top: var(--s-8); }

/* the ground: the basemap the 3D city stands on, held in the stage's ink (its own light and
   shade, the stage's hue), under a night that is solid where the bridge hands over */
.st-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.st-ground-img {
  position: absolute; left: 50%; top: 64%;
  width: max(240%, 2600px);
  background-size: cover;
  background-image: linear-gradient(#4b5699, #4b5699), var(--ground);
  background-blend-mode: color, normal;
  transform: translate(calc(var(--fx) * -100%), calc(var(--fy) * -100%));
  opacity: 0; transition: opacity 1600ms var(--ease-out);
}
.st-ground.is-ready .st-ground-img { opacity: 1; }
.st-ground::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 66%, color-mix(in srgb, var(--stage-bg) 46%, transparent), color-mix(in srgb, var(--stage-bg) 78%, transparent)),
    linear-gradient(to bottom, var(--stage-bg) 0, var(--stage-bg) 14%, transparent 46%, transparent 78%, var(--stage-bg) 100%);
}

.st-inner { position: relative; max-width: var(--content-w); margin-inline: auto; padding-inline: clamp(18px, 4vw, 44px); }
.st-head { max-width: 64ch; }
.stage-tail .eyebrow { color: var(--stage-accent); }
.stage-tail .eyebrow .sep { color: var(--stage-ink-faint); }
.st-title {
  font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 800;
  color: var(--stage-ink); text-shadow: var(--stage-text-shadow); text-wrap: balance;
}
html[lang="en"] .st-title { letter-spacing: -0.015em; }
.st-sub { margin-top: var(--s-2); max-width: 60ch; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--stage-ink-dim); text-wrap: pretty; }

/* the fact rail, in the stage's display numerals */
.stage-tail .fact-rail { margin: var(--s-6) 0 var(--s-7); padding-top: var(--s-5); border-top-color: var(--stage-line); }
.stage-tail .fr-item { border-inline-start-color: var(--stage-line); }
.stage-tail .fr-val {
  font-size: clamp(44px, 4.6vw, 68px); font-weight: 600; line-height: 1;
  color: var(--stage-ink); text-shadow: var(--stage-num-glow);
}
.stage-tail .fr-label { margin-top: 12px; font-size: var(--fs-small); color: var(--stage-ink-dim); }

/* ways in: the guided presentation (a tall card at the start) beside six glass cards */
.st-grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}
.stage-tail.is-bare .st-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* no ground to see through (no story city): the cards go solid — glass is only for imagery */
.stage-tail.is-bare .tail-card { background: var(--stage-bg-2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.tail-card {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px;
  padding: 18px 20px; border-radius: var(--radius-xl);
  background: var(--stage-glass);
  border: 1px solid var(--stage-line);
  -webkit-backdrop-filter: var(--stage-glass-filter); backdrop-filter: var(--stage-glass-filter);
  box-shadow: var(--stage-rim), 0 18px 44px rgba(0, 0, 0, 0.28);
  color: var(--stage-ink-dim); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease-std), background var(--t-fast) var(--ease-std), transform var(--t-fast) var(--ease-std);
}
a.tail-card:hover {
  border-color: var(--stage-line-strong); transform: translateY(-2px);
  background: linear-gradient(150deg, rgba(42, 49, 82, 0.62), rgba(20, 24, 43, 0.46));
}
a.tail-card:focus-visible { outline: 2px solid var(--stage-accent); outline-offset: 3px; }
.tl-ico {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-content: center;
  background: rgba(196, 204, 255, 0.1); color: var(--stage-accent);
  box-shadow: inset 0 0 0 1px rgba(196, 204, 255, 0.16);
}
.tl-ico .ico { width: 21px; height: 21px; }
.tl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-name { font-size: 16px; font-weight: 800; line-height: 1.45; color: var(--stage-ink); }
.tl-line { font-size: var(--fs-small); line-height: 1.6; color: var(--stage-ink-dim); }
.tl-go { width: 18px; height: 18px; color: var(--stage-ink-faint); transition: color var(--t-fast) var(--ease-std), translate var(--t-fast) var(--ease-std); }
a.tail-card:hover .tl-go { color: var(--stage-accent); translate: 3px 0; }
html[dir="rtl"] a.tail-card:hover .tl-go { translate: -3px 0; }

.tail-card.is-tour {
  grid-row: span 3;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 26px 28px 28px;
  border-color: rgba(196, 204, 255, 0.24);
  background: radial-gradient(120% 70% at 100% 0%, rgba(196, 204, 255, 0.16), transparent 62%), var(--stage-glass);
}
html[dir="ltr"] .tail-card.is-tour { background: radial-gradient(120% 70% at 0% 0%, rgba(196, 204, 255, 0.16), transparent 62%), var(--stage-glass); }
.tl-eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; color: var(--stage-accent); }
html[lang="en"] .tl-eyebrow { letter-spacing: 0.12em; text-transform: uppercase; }
.tl-title { margin-top: 6px; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 800; color: var(--stage-ink); }
.tl-desc { margin-top: 6px; max-width: 42ch; font-size: var(--fs-small); line-height: 1.75; color: var(--stage-ink-dim); }
.tl-chapters { list-style: none; margin: 18px 0 24px; padding: 0; width: 100%; }
.tl-chapters li {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); align-items: baseline; column-gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--stage-line);
  font-size: 13.5px; font-weight: 600; color: var(--stage-ink);
}
.tl-chapters li:last-child { border-bottom: 1px solid var(--stage-line); }
.tl-chapters .num { font-size: 12px; font-weight: 600; color: var(--stage-ink-faint); }
.tl-chapters li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tail-card.is-tour .btn { margin-top: auto; }

@media (max-width: 1100px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tail-card.is-tour { grid-row: auto; grid-column: 1 / -1; }
  .tl-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); }
  .tl-chapters li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--stage-line); }
}
@media (max-width: 640px) {
  .stage-tail { padding: var(--s-4) 0 var(--s-8); }
  .stage-tail .fact-rail { margin: var(--s-5) 0 var(--s-6); }
  .stage-tail .fr-val { font-size: 44px; }
  .st-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .tail-card { padding: 16px; }
  .tail-card.is-tour { padding: 22px 20px; }
  .tl-chapters { grid-template-columns: minmax(0, 1fr); }
  .tl-chapters li:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .tail-card.is-tour .btn { width: 100%; }
}

/* ---------------- footer ----------------
   On the chrome; its columns sit on the stage tail's grid. */
.site-footer { background: var(--chrome); border-top: 1px solid var(--chrome-line); }
.footer-inner {
  max-width: var(--content-w); margin-inline: auto;
  padding: var(--s-7) clamp(18px, 4vw, 44px) var(--s-6);
  display: grid; gap: var(--s-6) var(--s-4);
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
}
.footer-brand { display: flex; align-items: flex-start; gap: 12px; padding-inline-end: var(--s-6); }
.footer-brand .brand-sub { margin-top: 6px; max-width: 34ch; line-height: 1.7; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.footer-col h4 { margin-bottom: 10px; font-size: var(--fs-micro); font-weight: 700; color: var(--ink-faint); }
html[lang="en"] .footer-col h4 { letter-spacing: 0.08em; text-transform: uppercase; }
.footer-col a { padding: 4px 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.6; color: var(--ink-dim); transition: color var(--t-fast) var(--ease-std); }
.footer-col a:hover, .creator-link:hover { color: var(--accent); }
/* external links: the arrow is part of the link, beside its first line, never alone */
.footer-col a.ext { display: grid; grid-template-columns: minmax(0, auto) auto; align-items: start; column-gap: 6px; }
.ext-ico { width: 13px; height: 13px; margin-top: 0.38em; opacity: 0.75; }
.footer-base {
  max-width: var(--content-w); margin-inline: auto;
  padding: 16px clamp(18px, 4vw, 44px) 22px;
  border-top: 1px solid var(--chrome-line);
  display: flex; justify-content: space-between; align-items: center; gap: 8px 24px; flex-wrap: wrap;
  font-size: var(--fs-micro); color: var(--ink-faint);
}
.creator-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-dim); font-weight: 600; transition: color var(--t-fast) var(--ease-std); }
.creator-link .ext-ico { margin-top: 0; }
@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .footer-inner { gap: var(--s-5) var(--s-4); padding-top: var(--s-6); }
  .footer-brand { padding-inline-end: 0; }
}