/* ==========================================================================
   Content: long-form flow, topic blocks, home page
   ========================================================================== */

.page-body { container-type: inline-size; container-name: body; }

/* Vertical rhythm */
.page-body > * + *,
.section > * + *,
.flow > * + * { margin-top: 1.2rem; }

.section + .section,
.page-body > .section + *,
.page-body > * + .section { margin-top: clamp(3rem, 5vw, 4.75rem); }

.section > h2 { position: relative; scroll-margin-top: calc(var(--topbar-h) + 1.25rem); }
.section > h2 + * { margin-top: 1rem; }
.section > h3 { margin-top: 2rem; }

/* Heading anchors */
.anchor {
  position: absolute;
  left: -1.1em;
  padding-right: .3em;
  color: var(--border-strong);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity var(--dur) var(--ease);
}
h2:hover .anchor, .anchor:focus { opacity: 1; }
.anchor:hover { color: var(--accent); }

/* Comfortable reading measure for running text */
.page-body > p, .page-body > ul, .page-body > ol,
.section > p, .section > ul, .section > ol,
.prose > p, .prose > ul, .prose > ol,
.lede { max-width: var(--measure); }

.lede { font-size: var(--fs-lg); color: var(--text-2); line-height: 1.65; }

.page-body ul, .page-body ol { padding-left: 1.3rem; }
.page-body li + li { margin-top: .45rem; }
.page-body ul li::marker { color: var(--accent); }
.page-body ol li::marker { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }

/* Generic responsive splits */
.split { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: minmax(0, 1fr); }
@container body (min-width: 760px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--wide-left { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@container body (min-width: 700px) {
  .split--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split > * > * + * { margin-top: 1rem; }

/* Prose with a margin column: text left, notes/figures right on wide screens */
.prose-aside { display: grid; gap: 1.25rem 2.5rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
.prose-aside > .prose > * + * { margin-top: 1.1rem; }
.prose-aside > aside > * + * { margin-top: 1rem; }
@container body (min-width: 900px) {
  .prose-aside { grid-template-columns: minmax(0, 1.55fr) minmax(250px, 1fr); }
  .prose-aside > aside { position: sticky; top: calc(var(--topbar-h) + 1.5rem); }
}

/* ---------- Topic block: scripture beside analysis ---------- */
.topic {
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--border);
}
.page-body > .topic:first-child, .section > .topic:first-of-type { border-top: 0; padding-top: 0; }
.topic + .topic { margin-top: clamp(2.5rem, 4.5vw, 4rem); }
.topic__head { max-width: 60rem; }
.topic__head h2, .topic__head h3.h2 { margin-top: .75rem; }
.topic__head .lede { margin-top: .7rem; }
.topic__body { margin-top: 1.5rem; display: grid; gap: 1.25rem clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
.topic__scripture { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.topic__analysis { min-width: 0; }
.topic__analysis > * + * { margin-top: 1rem; }
.topic__analysis > h3 {
  margin-top: 1.6rem;
  font-family: var(--font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.topic__analysis > h3::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.topic__analysis > h3:first-child { margin-top: 0; }
.topic__analysis ul, .topic__analysis ol { padding-left: 1.2rem; }

@container body (min-width: 860px) {
  .topic__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }
  .topic__scripture { position: sticky; top: calc(var(--topbar-h) + 1.25rem); }
}

/* Key idea bar under topics */
.verdict {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.verdict__label { flex: none; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.verdict p { font-size: .96rem; line-height: 1.6; }

/* Science facts list: term → value */
.facts { display: grid; gap: .1rem; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 11rem) 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--border); }
.facts dt { color: var(--muted); font-size: .9rem; }
.facts dd { margin: 0; font-size: .95rem; }
@media (max-width: 520px) { .facts > div { grid-template-columns: 1fr; gap: .1rem; } }

/* Inline references */
.ref { font-size: .85em; color: var(--muted); }
.ref a { color: inherit; }
sup.cite a { text-decoration: none; color: var(--accent); font-weight: 650; font-size: .8em; padding: 0 .1em; }

/* Legend of statuses */
.legend { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.legend > div { padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.legend p { margin-top: .6rem; color: var(--text-2); font-size: .93rem; line-height: 1.55; }

/* ==========================================================================
   Home page
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 90% at 70% 40%, #0e0e10 0%, var(--space-bg) 62%);
  color: var(--space-text);
  min-height: clamp(520px, 74vh, 800px);
  display: grid;
  align-items: center;
  box-shadow: var(--shadow);
  border: 1px solid color-mix(in srgb, #fff 6%, transparent);
}
.hero__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero__canvas canvas { width: 100%; height: 100%; cursor: grab; }
.hero__canvas canvas:active { cursor: grabbing; }
.hero__content {
  padding: clamp(1.75rem, 5vw, 4.5rem);
  max-width: 50rem;
  pointer-events: none;
}
.hero__content > * { pointer-events: auto; }
.hero__eyebrow { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #bdbdbd; font-weight: 650; }
.hero h1 {
  margin-top: 1rem;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #fff;
  max-width: 14ch;
}
.hero__verse { margin-top: 1.75rem; max-width: 40rem; }
.hero__verse [lang="ar"] { display: block; font-family: var(--font-quran); font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.1rem); line-height: 2.1; color: #fff; }
.hero__verse p { font-family: var(--font-serif); font-size: clamp(1.05rem, 1rem + .35vw, 1.28rem); line-height: 1.6; color: #cfcfcf; margin-top: .4rem; }
.hero__verse cite { display: block; margin-top: .6rem; font-style: normal; font-size: .85rem; color: #9b9b9b; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hero .button { background: #ffffff; color: #000; border-color: #ffffff; }
.hero .button:hover { color: #111; }
.hero .button--ghost { background: rgba(255,255,255,.04); color: #f4f2ec; border-color: rgba(255,255,255,.28); }
.hero .button--ghost:hover { color: #fff; border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.hero__hint { position: absolute; right: 1.25rem; bottom: 1rem; font-size: .75rem; color: #8a8a8a; pointer-events: none; }
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 45%, rgba(0,0,0,0) 75%);
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero { min-height: 600px; align-items: end; }
  .hero::after { background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,.1) 100%); }
  .hero__hint { display: none; }
}

.home-section { margin-top: clamp(3.5rem, 7vw, 6rem); }
.home-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.home-section__head h2 { max-width: 24ch; }
.home-section__head p { max-width: 52ch; color: var(--text-2); }

.intro-grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container body (min-width: 980px) { .intro-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.intro-grid .prose > * + * { margin-top: 1.1rem; }
.intro-grid .prose p:not(.eyebrow) { font-size: var(--fs-lg); line-height: 1.7; color: var(--text-2); }
@media (max-width: 720px) { .intro-grid .prose p:not(.eyebrow) { font-size: var(--fs-base); } }
.intro-grid .prose h2 + p { color: var(--text); }

.principles { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.principle { background: var(--surface); padding: 1.5rem 1.4rem; }
.principle__n { font-family: var(--font-display); font-size: 2rem; color: var(--accent); line-height: 1; }
.principle h3 { margin-top: .8rem; font-size: 1.12rem; }
.principle p { margin-top: .45rem; color: var(--text-2); font-size: .94rem; line-height: 1.6; }

.feature-verse {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.feature-verse::before, .feature-verse::after {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  border: 1px solid var(--border);
  opacity: .8;
}
.feature-verse::before { left: -170px; top: -170px; }
.feature-verse::after { right: -170px; bottom: -170px; }
.feature-verse [lang="ar"] { font-family: var(--font-quran); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 2.2; display: block; }
.feature-verse p { font-family: var(--font-serif); font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.6; max-width: 46rem; margin: .8rem auto 0; color: var(--text-2); }
.feature-verse cite { display: block; margin-top: 1rem; font-style: normal; font-size: .88rem; color: var(--muted); }
.feature-verse cite a { color: inherit; }

/* Reveal on scroll (added by app.js; content is visible without JS) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Inline TOC for medium screens */
.toc-inline {
  margin: 0 0 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.toc-inline summary { padding: .8rem 1.1rem; cursor: pointer; font-weight: 600; font-size: .95rem; }
.toc-inline ol { margin: 0; padding: 0 1.1rem 1rem 2.4rem; columns: 2 16rem; column-gap: 2rem; }
.toc-inline li { break-inside: avoid; font-size: .92rem; padding: .15rem 0; }
.toc-inline a { color: var(--text-2); text-decoration: none; }
.toc-inline a:hover { color: var(--text); text-decoration: underline; }

/* Timelines are lists, but must not get the running-text list indent */
.page-body .timeline { padding-left: 0; }
.page-body .timeline li + li { margin-top: 0; }

/* Long unbroken words (transliterated titles, URLs) may wrap on very narrow phones */
.page-body p, .page-body li, .page-body dd, .page-body figcaption { overflow-wrap: break-word; }

/* Verdict boxes: the label moves above the text when there is no room beside it */
.verdict { flex-wrap: wrap; }
.verdict p { flex: 1 1 16rem; min-width: 0; }