/* ==========================================================================
   04 OBSERVATORY: design system
   Idea: the channel's own art. A night sky over a mountain ridge; the reader
   stands at the foot of the range and looks up. Myth below, cosmos above.

   Type      Cinzel 500 (wordmark + h1 only, echoes the gold logo caps)
             Figtree 300/400/600 (everything that is read or operated)
             Amiri (Arabic scripture; its Latin cut sets translations,
             pull-quotes and print, so scripture always reads in a serif)
   Scale     ~1.25 ratio, fluid via clamp(); body 1.0625rem / 1.75
   Measure   prose capped at 66ch; Arabic at 30em
   Grid      --wrap 76rem container, 12 fluid columns where needed,
             article = contents rail | 66ch text | sidenote margin
   Color     night (default) and dawn tokens; ONE accent: pale starlight gold
   Radius    one system: --r (2px) for every box; --round only for circular glyphs
   Motion    slow opacity/transform reveals (IntersectionObserver), twinkle;
             all of it off under prefers-reduced-motion
   ========================================================================== */

/* ---------- Tokens: night (default) ---------- */
:root {
  color-scheme: dark;
  --bg: #070b14;
  --bg-2: #0c1322;
  --sky-top: #02040a;
  --sky-mid: #0a1430;
  --sky-low: #22355a;
  --glow: rgb(150 175 220 / .28);
  --ridge-far-a: #1b2843;
  --ridge-far-b: #0d1627;
  --ridge-near-a: #0b1120;
  --ink: #e7eaf0;
  --ink-2: #b0b9c9;
  --ink-prose: #d4d9e2;
  --ink-3: #8590a4;
  --line: rgb(231 234 240 / .11);
  --line-2: rgb(231 234 240 / .24);
  --accent: #e6d3a1;
  --accent-hi: #f6ecd0;
  --accent-ink: #0a0d14;
  --accent-soft: rgb(230 211 161 / .12);
  --gold-text: linear-gradient(180deg, #f8efd6 10%, #d8bd7e 95%);
  --error: #f2aba2;
  --thumb-filter: saturate(.78) brightness(.9);
  --stars: 1;

  --f-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-serif: "Amiri", "Iowan Old Style", Georgia, serif;
  --f-ar: "Amiri", "Geeza Pro", "Traditional Arabic", serif;

  --t-xs: .78rem;
  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --t-lg: clamp(1.35rem, 1.2rem + .7vw, 1.65rem);
  --t-xl: clamp(1.75rem, 1.35rem + 1.7vw, 2.6rem);
  --t-2xl: clamp(2.25rem, 1.5rem + 3.2vw, 4.25rem);
  --t-hero: clamp(2.9rem, 1.6rem + 6.4vw, 7.25rem);

  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: clamp(4.5rem, 3rem + 4.5vw, 7.5rem);

  --wrap: 76rem;
  --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
  --r: 2px;
  --round: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Tokens: dawn ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #eef1f5;
    --bg-2: #e3e8ee;
    --sky-top: #a9b8cb;
    --sky-mid: #cdd6e1;
    --sky-low: #eee7df;
    --glow: rgb(255 236 214 / .65);
    --ridge-far-a: #9eafc3;
    --ridge-far-b: #b7c4d3;
    --ridge-near-a: #cfd8e2;
    --ink: #111726;
    --ink-2: #374154;
    --ink-prose: #1c2333;
    --ink-3: #566174;
    --line: rgb(17 23 38 / .12);
    --line-2: rgb(17 23 38 / .26);
    --accent: #7a5913;
    --accent-hi: #5e430c;
    --accent-ink: #fbf8f1;
    --accent-soft: rgb(122 89 19 / .09);
    --gold-text: linear-gradient(180deg, #5a400b 10%, #8c6a20 95%);
    --error: #a3302a;
    --thumb-filter: none;
    --stars: 0;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef1f5;
  --bg-2: #e3e8ee;
  --sky-top: #a9b8cb;
  --sky-mid: #cdd6e1;
  --sky-low: #eee7df;
  --glow: rgb(255 236 214 / .65);
  --ridge-far-a: #9eafc3;
  --ridge-far-b: #b7c4d3;
  --ridge-near-a: #cfd8e2;
  --ink: #111726;
  --ink-2: #374154;
  --ink-prose: #1c2333;
  --ink-3: #566174;
  --line: rgb(17 23 38 / .12);
  --line-2: rgb(17 23 38 / .26);
  --accent: #7a5913;
  --accent-hi: #5e430c;
  --accent-ink: #fbf8f1;
  --accent-soft: rgb(122 89 19 / .09);
  --gold-text: linear-gradient(180deg, #5a400b 10%, #8c6a20 95%);
  --error: #a3302a;
  --thumb-filter: none;
  --stars: 0;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-padding-top: 2rem; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 400 var(--t-base)/1.75 var(--f-body);
  color: var(--ink);
  font-kerning: normal;
  font-variant-numeric: proportional-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r); }
h1, h2, h3 { margin: 0; font-weight: 300; line-height: 1.15; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
p, blockquote, li { hanging-punctuation: first allow-end last; }
ul, ol { margin: 0; padding: 0; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }
[lang="ar"] { font-family: var(--f-ar); line-height: 2.1; font-weight: 400; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 50; padding: .75rem 1rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 1rem; color: var(--accent-ink); }

/* ---------- Starfield: two fixed layers behind everything, the second one breathes ---------- */
body::before, body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--stars);
  -webkit-mask-image: linear-gradient(#000 0 35%, transparent 92%);
  mask-image: linear-gradient(#000 0 35%, transparent 92%);
}
body::before {
  background-image:
    radial-gradient(1px 1px at 23px 41px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 97px, #dfe6ff 50%, transparent 51%),
    radial-gradient(1px 1px at 61px 173px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 187px 19px, #cfd8ff 50%, transparent 51%),
    radial-gradient(1px 1px at 97px 331px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 283px 251px, #e8ecff 50%, transparent 51%),
    radial-gradient(1px 1px at 311px 113px, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 41px 67px, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 157px 139px, #e1e7ff 50%, transparent 51%),
    radial-gradient(.8px .8px at 89px 13px, #fff 50%, transparent 51%),
    radial-gradient(.8px .8px at 211px 197px, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 359px 29px, #fff8e6 50%, transparent 51%);
  background-size: 211px 197px, 263px 239px, 347px 331px, 389px 293px, 443px 409px, 509px 467px, 571px 523px,
    97px 89px, 173px 151px, 131px 113px, 241px 227px, 433px 389px;
}
body::after {
  background-image:
    radial-gradient(1.4px 1.4px at 73px 89px, #fff6dc 50%, transparent 52%),
    radial-gradient(1.6px 1.6px at 401px 211px, #fff 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 233px 487px, #e9eeff 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 613px 61px, #fff 50%, transparent 52%);
  background-size: 487px 433px, 619px 557px, 701px 613px, 887px 719px;
  animation: twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: calc(var(--stars) * .35); } to { opacity: var(--stars); } }

/* ---------- Sky + ridge: painted below the stars, mountains painted above them ---------- */
.sky { position: relative; isolation: auto; }
.sky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(70% 45% at 50% 92%, var(--glow), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 86%, var(--sky-low) 100%);
}
.ridge { position: absolute; inset-inline: 0; bottom: -1px; pointer-events: none; }
.ridge--dist {
  height: clamp(8rem, 30vh, 19rem);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ridge-far-a) 55%, var(--sky-low)), transparent 85%);
  opacity: .7;
  clip-path: polygon(0 70%, 5% 62%, 9% 66%, 14% 54%, 18% 58%, 24% 46%, 29% 55%, 33% 50%, 38% 60%, 44% 42%, 50% 50%, 56% 40%, 60% 47%, 65% 38%, 70% 52%, 76% 44%, 81% 56%, 86% 48%, 91% 58%, 96% 50%, 100% 60%, 100% 100%, 0 100%);
}
.ridge--far {
  height: clamp(7rem, 24vh, 16rem);
  background: linear-gradient(180deg, var(--ridge-far-a), var(--ridge-far-b) 70%);
  clip-path: polygon(0 58%, 2% 55%, 4% 50%, 6% 53%, 8% 56%, 11% 44%, 13% 38%, 15% 42%, 17% 46%, 19% 39%, 21% 34%, 23% 40%, 25% 47%, 28% 43%, 30% 41%, 33% 49%, 35% 55%, 37% 42%, 39% 30%, 41% 24%, 43% 18%, 44.5% 14%, 46% 8%, 47.5% 13%, 49% 22%, 51% 27%, 53% 31%, 55% 26%, 57% 27%, 59% 36%, 61% 44%, 64% 39%, 66% 36%, 68% 43%, 71% 49%, 73% 38%, 76% 26%, 78% 31%, 80% 35%, 82% 29%, 84% 30%, 87% 40%, 89% 47%, 92% 42%, 94% 40%, 97% 47%, 100% 52%, 100% 100%, 0 100%);
}
.ridge--near {
  height: clamp(4.5rem, 14vh, 9.5rem);
  background: linear-gradient(180deg, var(--ridge-near-a), var(--bg) 80%);
  clip-path: polygon(0 40%, 6% 52%, 12% 44%, 19% 62%, 26% 50%, 33% 66%, 40% 58%, 47% 72%, 55% 60%, 62% 70%, 69% 48%, 75% 56%, 82% 38%, 88% 52%, 94% 46%, 100% 58%, 100% 100%, 0 100%);
}

/* ---------- Header + quick exit ---------- */
.site-head { position: absolute; inset-inline: 0; top: 0; z-index: 20; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--s-3); padding-block: var(--s-2); }
.wordmark { font: 500 1.0625rem/1 var(--f-display); letter-spacing: .1em; text-decoration: none; color: var(--accent); padding-block: .9rem; }
.wordmark:hover { color: var(--accent-hi); }
.site-nav { order: 3; inline-size: 100%; }
.site-nav ul { display: flex; gap: var(--s-3); list-style: none; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); letter-spacing: .04em; color: var(--ink-2); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--accent); }
.theme-toggle { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; background: none; border: 1px solid var(--line); border-radius: var(--round); cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { border-color: var(--line-2); }
.theme-toggle span { inline-size: 14px; block-size: 14px; border-radius: var(--round); border: 1px solid var(--ink-2); background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); }
@media (min-width: 46rem) {
  .head-row { flex-wrap: nowrap; }
  .site-nav { order: 0; inline-size: auto; margin-inline-start: auto; }
  .site-nav ul { gap: var(--s-4); }
}
.quick-exit {
  position: fixed; inset-inline-end: .75rem; bottom: .75rem; z-index: 40;
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--ink-2); background: color-mix(in srgb, var(--bg) 82%, transparent);
  border: 1px solid var(--line-2); border-radius: var(--r);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.quick-exit:hover { color: var(--ink); border-color: var(--accent); }

/* ---------- Buttons + labels ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 48px; padding: .8rem 1.5rem; font-size: .9375rem; font-weight: 600; letter-spacing: .02em; text-decoration: none; border: 1px solid transparent; border-radius: var(--r); cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; }
.btn--gold { background: var(--accent); color: var(--accent-ink); }
.btn--gold:hover { background: var(--accent-hi); color: var(--accent-ink); }
.btn--line { border-color: var(--line-2); color: var(--ink); background: none; }
.btn--line:hover { border-color: var(--accent); color: var(--ink); }
.label { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.meta { font-size: var(--t-sm); color: var(--ink-3); letter-spacing: .01em; }
.more { display: inline-flex; align-items: center; gap: .5em; min-height: 44px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--accent); }
.more::after { content: "\2192"; transition: transform .4s var(--ease); }
.more:hover::after { transform: translateX(4px); }
.ext::after { content: "\2197"; margin-inline-start: .3em; font-size: .85em; }

/* ---------- Hero ---------- */
.hero { min-height: clamp(38rem, 100dvh, 64rem); display: grid; place-items: center; text-align: center; padding: 9rem var(--gutter) clamp(9rem, 26vh, 17rem); }
.hero h1 {
  font: 500 var(--t-hero)/1.02 var(--f-display);
  letter-spacing: .03em;
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-block: .06em;
}
.hero-sub { margin: var(--s-3) auto 0; max-width: 30ch; font-size: var(--t-md); font-weight: 300; color: var(--ink-2); line-height: 1.6; }
.hero-cta { margin-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.hero-inner > * { animation: rise 1.8s var(--ease) both; }
.hero-inner > :nth-child(2) { animation-delay: .35s; }
.hero-inner > :nth-child(3) { animation-delay: .7s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding-block: var(--s-6); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.h2 { font-size: var(--t-xl); letter-spacing: -.01em; }
.lede { font-size: var(--t-md); color: var(--ink-2); max-width: 52ch; line-height: 1.65; }

/* Featured: media 8 / text 4, text sits low like a caption */
.feature { display: grid; gap: var(--s-4); align-items: end; }
.feature-text { display: grid; gap: var(--s-2); justify-items: start; }
.feature-text h2 { font-size: var(--t-xl); }
.feature-text h2 a { text-decoration: none; }
.feature-text p:not(.meta):not(.label) { color: var(--ink-2); }
@media (min-width: 60rem) {
  .feature { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--s-5); }
}

/* ---------- YouTube facade ---------- */
.yt { display: block; text-decoration: none; color: var(--ink); background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.yt-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.yt-media img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: var(--thumb-filter); transition: filter .8s var(--ease), transform 1.2s var(--ease); }
.yt:hover .yt-media img, .yt:focus-visible .yt-media img { filter: none; transform: scale(1.015); }
.yt-play { position: absolute; inset: 0; margin: auto; inline-size: 4.75rem; block-size: 4.75rem; display: grid; place-items: center; border-radius: var(--round); background: rgb(5 8 15 / .55); border: 1px solid rgb(255 255 255 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .5s var(--ease), background-color .5s; }
.yt-play::before { content: ""; inline-size: 1.15rem; block-size: 1.3rem; margin-inline-start: .25rem; background: #f6ecd0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.yt:hover .yt-play { transform: scale(1.06); background: rgb(5 8 15 / .72); }
.yt-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding: .85rem 1.1rem; font-size: var(--t-sm); border-top: 1px solid var(--line); }
.yt-bar span:last-child { color: var(--ink-3); }
.yt-frame { aspect-ratio: 16 / 9; background: #000; border-radius: var(--r); overflow: hidden; }
.yt-frame iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* ---------- Pillars: three stars rising to the right ---------- */
.pillars-quote { max-width: 34ch; font-size: var(--t-xl); font-weight: 300; line-height: 1.35; color: var(--ink); }
.pillars-quote + .meta { margin-top: var(--s-2); }
.pillars { list-style: none; display: grid; gap: var(--s-5); margin-top: var(--s-5); padding-inline-start: 1.75rem; border-inline-start: 1px solid var(--line); }
.pillar { position: relative; display: grid; align-content: start; justify-items: start; gap: .6rem; max-width: 34ch; }
.pillar::before {
  content: ""; position: absolute; inset-inline-start: calc(-1.75rem - 7px); top: .35rem;
  inline-size: 13px; block-size: 13px; background: var(--accent);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 6px var(--accent));
}
.pillar h3 { font-size: var(--t-lg); font-weight: 400; }
.pillar p { color: var(--ink-2); }
@media (min-width: 60rem) {
  .pillars { align-items: start; grid-template-columns: 5fr 4fr 4fr; gap: var(--s-5); padding: 0; border: 0; margin-top: var(--s-6); }
  .pillar { padding-top: 2.25rem; border-top: 1px solid var(--line); }
  .pillar::before { inset-inline-start: 0; top: -7px; }
  .pillar:nth-child(1) { margin-top: 9rem; }
  .pillar:nth-child(2) { margin-top: 4.5rem; }
}

/* ---------- Video rail: a horizontal strip that bleeds off the right edge ---------- */
.rail {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 21rem);
  gap: var(--s-3); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2); scroll-padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2);
  padding-bottom: var(--s-2); scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.rail > li { scroll-snap-align: start; }
.vid { display: grid; gap: .55rem; text-decoration: none; }
.vid img { aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%; border-radius: var(--r); filter: var(--thumb-filter); transition: filter .8s var(--ease); }
.vid:hover img, .vid:focus-visible img { filter: none; }
.vid-series { font-size: var(--t-xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vid-title { margin-top: .35rem; }
.vid-title { font-weight: 500; line-height: 1.4; text-wrap: pretty; }
.vid:hover .vid-title { color: var(--accent); }

/* ---------- Stories: centered heading, then one large and four small ---------- */
.stories-head { text-align: center; display: grid; justify-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.stories-head .h2 { font-size: var(--t-2xl); }
.quote-serif { font: italic 400 var(--t-lg)/1.5 var(--f-serif); color: var(--ink-2); max-width: 40ch; }
.mosaic { list-style: none; display: grid; gap: var(--s-4) var(--s-3); }
.mosaic .vid-title { font-size: var(--t-base); }
.mosaic > li:first-child .vid-title { font-size: var(--t-lg); font-weight: 400; line-height: 1.3; }
@media (max-width: 39.99rem) {
  .mosaic { gap: var(--s-3); }
  .mosaic > li:not(:first-child) .vid { grid-template-columns: 8.5rem 1fr; gap: .35rem 1rem; align-content: start; }
  .mosaic > li:not(:first-child) .vid > * { grid-column: 2; margin: 0; }
  .mosaic > li:not(:first-child) .vid img { grid-column: 1; grid-row: 1 / span 2; }
  .mosaic > li:first-child { margin-bottom: var(--s-2); }
}
@media (min-width: 40rem) { .mosaic { grid-template-columns: 1fr 1fr; } .mosaic > li:first-child { grid-column: 1 / -1; } }
@media (min-width: 64rem) {
  .mosaic { grid-template-columns: 2fr 1fr 1fr; }
  .mosaic > li:first-child { grid-column: 1; grid-row: span 2; }
  .mosaic > li:first-child .vid { block-size: 100%; grid-template-rows: minmax(0, 1fr) auto auto; }
  .mosaic > li:first-child img { block-size: 100%; aspect-ratio: auto; min-block-size: 0; }
}

/* ---------- Scripture: Arabic as the visual hero ---------- */
.verse { margin: 0; text-align: center; display: grid; justify-items: center; gap: var(--s-3); }
.verse [lang="ar"] { text-wrap: balance; font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.45rem); line-height: 2.15; max-width: 30em; color: var(--ink); }
.verse .tr { font: 400 var(--t-md)/1.65 var(--f-serif); color: var(--ink-2); max-width: 54ch; }
.verse figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; font-size: var(--t-sm); color: var(--ink-3); }
.verse figcaption a { color: var(--accent); }
.verse--home { padding-block: var(--s-4) var(--s-5); }
.verse--home::before { content: ""; inline-size: 1px; block-size: var(--s-5); background: linear-gradient(transparent, var(--accent)); }

/* Ledger of sources (home teaser + library) */
.ledger { list-style: none; border-top: 1px solid var(--line); }
.ledger > li { border-bottom: 1px solid var(--line); }
.ledger-row { display: grid; gap: .35rem 1.5rem; padding-block: 1.35rem; text-decoration: none; }
.ledger-type { font-size: var(--t-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.ledger-ref { font-weight: 500; }
.ledger-note { color: var(--ink-2); font-size: .9375rem; }
a.ledger-row:hover .ledger-ref { color: var(--accent); }
@media (min-width: 52rem) { .ledger-row { grid-template-columns: 8rem minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; } a.ledger-row::after { content: "\2192"; color: var(--ink-3); } }

/* ---------- Support + newsletter ---------- */
.support { display: grid; gap: var(--s-5); padding-block: var(--s-5); border-block: 1px solid var(--line); }
.support-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
@media (min-width: 60rem) { .support { grid-template-columns: 6fr 5fr; gap: var(--s-6); align-items: center; } }

/* ---------- Forms ---------- */
.field { display: grid; gap: .4rem; }
.field + .field { margin-top: var(--s-3); }
.field label { font-size: var(--t-sm); font-weight: 600; letter-spacing: .02em; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field input, .field textarea { inline-size: 100%; min-height: 48px; padding: .75rem 1rem; background: color-mix(in srgb, var(--bg-2) 70%, transparent); border: 1px solid var(--line-2); border-radius: var(--r); transition: border-color .3s; }
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field [aria-invalid="true"] { border-color: var(--error); }
.help { font-size: var(--t-sm); color: var(--ink-3); }
.err { font-size: var(--t-sm); color: var(--error); font-weight: 500; }
.err:empty { display: none; }
.form-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: end; }
.form-row .field { flex: 1 1 14rem; }
.form-status { margin-top: var(--s-2); font-size: var(--t-sm); color: var(--accent); min-height: 1.5em; }

/* ---------- Footer: the ridge returns, the page ends at the mountains ---------- */
.site-foot { position: relative; margin-top: var(--s-6); padding-top: clamp(6rem, 12vw, 10rem); background: linear-gradient(180deg, transparent, var(--bg-2) 30%); }
.site-foot .ridge--far { bottom: auto; top: 0; height: clamp(4rem, 9vw, 7rem); opacity: .55; }
.foot-grid { display: grid; gap: var(--s-4); padding-bottom: var(--s-5); }
.foot-close { font: italic 400 var(--t-2xl)/1.1 var(--f-serif); color: var(--ink); }
.foot-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--s-3); }
.foot-nav a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink-2); text-decoration: none; font-size: var(--t-sm); }
.foot-nav a:hover { color: var(--accent); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding-block: var(--s-3) 5rem; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-3); }
.foot-base a { color: var(--ink-2); }
@media (min-width: 60rem) { .foot-grid { grid-template-columns: 1fr auto; align-items: end; } }

/* ---------- Page heads (article, sources): a shorter sky ---------- */
.page-head { padding: 10rem var(--gutter) clamp(7rem, 16vw, 12rem); text-align: center; }
.page-head .ridge--far { height: clamp(4.5rem, 12vw, 9rem); }
.page-head .ridge--near { height: clamp(3rem, 7vw, 5.5rem); }
.page-head h1 { font: 500 var(--t-2xl)/1.12 var(--f-display); letter-spacing: .02em; max-width: 20ch; margin-inline: auto; background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-block: .05em; }
.page-head .dek { margin: var(--s-3) auto 0; max-width: 46ch; font-size: var(--t-md); font-weight: 300; color: var(--ink-2); line-height: 1.6; }
.byline { margin-top: var(--s-3); display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; }
@media (min-width: 40rem) { .byline > * + *::before { content: "\00B7"; margin-inline-end: 1.25rem; color: var(--ink-3); } }
.byline > * { display: inline-flex; }

/* ---------- Article ---------- */
.watch { width: min(100% - 2 * var(--gutter), 60rem); margin: 0 auto; }
.watch figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .9rem; }
.article-grid { width: min(100% - 2 * var(--gutter), var(--wrap)); margin: var(--s-6) auto 0; display: grid; gap: var(--s-4); }
.toc { font-size: var(--t-sm); }
.toc h2 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .75rem; }
.toc ol { list-style: none; border-inline-start: 1px solid var(--line); }
.toc a { display: block; padding: .5rem 0 .5rem 1rem; margin-inline-start: -1px; border-inline-start: 1px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.4; transition: color .3s, border-color .3s; }
.toc a:hover, .toc a[aria-current="true"] { color: var(--ink); border-color: var(--accent); }
.prose { max-width: 66ch; min-width: 0; }
.prose > p { color: var(--ink-prose); }
.prose > p + p { margin-top: 1.1em; }
.prose > .lead { font-size: var(--t-md); color: var(--ink); line-height: 1.7; }
.prose h2 { font-size: var(--t-xl); margin: var(--s-5) 0 var(--s-3); scroll-margin-top: 2rem; }
.prose h2::before { content: ""; display: block; inline-size: 2rem; block-size: 1px; background: var(--accent); margin-bottom: var(--s-3); }
.prose .verse { margin-block: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--line); }
.abstract { padding: var(--s-3) var(--s-3) var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r); background: color-mix(in srgb, var(--bg-2) 85%, transparent); margin-bottom: var(--s-4); }
.abstract h2 { font-size: var(--t-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem; }
.abstract h2::before { display: none; }
.abstract p { color: var(--ink-2); }
.pull { margin: var(--s-5) 0; padding: 0; border: 0; font: italic 400 clamp(1.45rem, 1.2rem + 1vw, 1.95rem)/1.4 var(--f-serif); color: var(--ink); text-indent: -.42em; }
@supports (hanging-punctuation: first) { .pull { text-indent: 0; } }
.hadith { margin: var(--s-5) 0; padding: var(--s-1) 0 var(--s-1) var(--s-3); border-inline-start: 1px solid var(--accent); display: grid; gap: .75rem; }
.hadith-head { display: flex; flex-wrap: wrap; gap: .2rem 1rem; font-size: var(--t-sm); }
.hadith-head b { font-weight: 600; }
.grade { color: var(--accent); }
.hadith blockquote { margin: 0; font: 400 var(--t-md)/1.65 var(--f-serif); color: var(--ink); }
.hadith a { font-size: var(--t-sm); color: var(--accent); }
.fn-ref { font-size: .7em; line-height: 0; vertical-align: super; font-weight: 600; }
.fn-ref a { text-decoration: none; color: var(--accent); padding: 0 .15em; }
.sn { display: none; }
.end-section { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.end-section h2 { margin-top: 0; }
.refs { list-style: none; display: grid; gap: .9rem; font-size: .9375rem; color: var(--ink-2); }
.refs li { padding-inline-start: 1.25rem; text-indent: -1.25rem; }
.notes { padding-inline-start: 1.6rem; display: grid; gap: .75rem; font-size: .9375rem; color: var(--ink-2); }
.notes li::marker { color: var(--accent); font-weight: 600; font-size: .85em; }
.notes li:target { color: var(--ink); }
.back { text-decoration: none; color: var(--accent); margin-inline-start: .35rem; }
.cite { margin-top: var(--s-5); padding: var(--s-3); border: 1px solid var(--line-2); border-radius: var(--r); display: grid; gap: var(--s-2); }
.prose .cite h2 { font-size: var(--t-xs); margin: 0; }
.prose .cite h2::before { display: none; }
.cite p.cite-text { font: 400 var(--t-base)/1.6 var(--f-serif); color: var(--ink); overflow-wrap: anywhere; }
.cite-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2); }
.share { margin-top: var(--s-4); display: flex; flex-wrap: wrap; align-items: center; gap: .25rem var(--s-3); font-size: var(--t-sm); }
.share a, .share button { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); }
.share a:hover, .share button:hover { color: var(--accent); }
.related { list-style: none; display: grid; gap: var(--s-3); }
.related .vid { grid-template-columns: 9rem 1fr; gap: .35rem 1rem; align-items: start; align-content: start; }
.related .vid > * { grid-column: 2; margin: 0; }
.related .vid img { grid-column: 1; grid-row: 1 / span 2; }
.related .vid-title { font-size: .9375rem; }
@media (min-width: 40rem) { .related { grid-template-columns: 1fr 1fr; } }
.pager { display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.pager a { display: grid; gap: .25rem; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; }
.pager a:hover { border-color: var(--accent); }
.pager a:last-child { text-align: end; }
@media (min-width: 40rem) { .pager { grid-template-columns: 1fr 1fr; } }

@media (min-width: 70rem) {
  .article-grid { grid-template-columns: 12rem minmax(0, 66ch) minmax(0, 1fr); gap: var(--s-5); }
  .toc { position: sticky; top: 2rem; align-self: start; }
}
/* Sidenotes: the margin carries the notes on wide screens; the numbered list stays canonical */
@media (min-width: 84rem) {
  .sn { display: block; float: right; clear: right; inline-size: 15rem; margin-inline-end: -18.5rem; margin-block: .3rem 1rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-3); text-indent: 0; }
  .sn b { color: var(--accent); font-weight: 600; margin-inline-end: .35rem; }
}

/* ---------- Sources library ---------- */
.lib { width: min(100% - 2 * var(--gutter), 64rem); margin: var(--s-5) auto 0; }
.lib-tools { display: none; gap: var(--s-3); margin-bottom: var(--s-4); }
.js .lib-tools { display: grid; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 44px; padding: 0 1.1rem; font-size: var(--t-sm); font-weight: 500; background: none; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: var(--r); cursor: pointer; transition: color .3s, border-color .3s, background-color .3s; }
.chip:hover { color: var(--ink); border-color: var(--ink-3); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lib-count { font-size: var(--t-sm); color: var(--ink-3); }
.src { padding-block: var(--s-3); border-bottom: 1px solid var(--line); display: grid; gap: .6rem 2rem; scroll-margin-top: 2rem; }
.src:target { background: linear-gradient(90deg, var(--accent-soft), transparent 70%); }
.src [lang="ar"] { text-wrap: balance; font-size: 1.4rem; line-height: 2; color: var(--ink); }
.src h3 { font-size: var(--t-md); font-weight: 500; line-height: 1.35; }
.src-note { color: var(--ink-2); font-size: .9375rem; max-width: 62ch; }
.src-actions { display: flex; flex-wrap: wrap; gap: 0 var(--s-3); font-size: var(--t-sm); }
.src-actions a, .src-actions button { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; font-weight: 500; }
.copy { display: none !important; }
.js .copy { display: inline-flex !important; }
@media (min-width: 52rem) { .src { grid-template-columns: 9rem minmax(0, 1fr); } .src > :not(.ledger-type) { grid-column: 2; } .src > .ledger-type { grid-row: 1 / span 4; padding-top: .3rem; } }
.empty { padding: var(--s-5) 0; text-align: center; display: grid; justify-items: center; gap: var(--s-2); }
.empty[hidden] { display: none; }
.empty p { font: italic 400 var(--t-lg)/1.4 var(--f-serif); color: var(--ink-2); }
.submit { display: grid; gap: var(--s-4); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (min-width: 60rem) { .submit { grid-template-columns: 4fr 6fr; gap: var(--s-5); } }

/* ---------- Reveal: only when JS is present, only when motion is welcome ---------- */
@media (prefers-reduced-motion: no-preference) {
  .io [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
  .io [data-reveal].in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Print: a clean paper ---------- */
@media print {
  @page { margin: 2cm; }
  :root { --ink: #000; --ink-2: #222; --ink-3: #444; --accent: #000; --line: #bbb; --line-2: #888; --bg: #fff; --bg-2: #fff; --stars: 0; }
  html, body { background: #fff; color: #000; }
  body { font: 11pt/1.5 var(--f-serif); }
  body::before, body::after, .sky::before, .ridge, .site-head, .quick-exit, .skip, .toc, .share, .yt, .yt-frame, .related, .pager, .site-foot, .cite button, .lib-tools, .submit, .newsletter { display: none !important; }
  .page-head { padding: 0 0 1cm; text-align: start; }
  .page-head h1 { background: none; color: #000; font-size: 22pt; max-width: none; margin: 0; }
  .byline { justify-content: flex-start; }
  .watch::after { content: "Video: https://www.youtube.com/watch?v=CG5uS4SI634&t=374"; font-size: 9pt; }
  .article-grid { display: block; width: auto; margin: 0; }
  .prose { max-width: none; }
  .prose h2 { font: 600 14pt/1.3 var(--f-serif); break-after: avoid; }
  .verse, .hadith, .pull, .abstract, .cite, .src { break-inside: avoid; }
  .abstract { background: none; }
  .sn { display: none !important; }
  a { color: #000; text-decoration: none; }
  .prose a[href^="http"]::after, .refs a[href^="http"]::after, .src-actions a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; word-break: break-all; }
}