/* ==========================================================================
   jaali.css — "Light through the lattice"

   One idea: the page is lit *through* a pierced stone screen. Scroll moves
   the moon, so the projected pattern rakes across the surface and the text
   is only fully legible where the light falls on it.
   ========================================================================== */

:root {
  --ink: #f2e9d8;
  --ink-dim: rgba(242, 233, 216, .34);
  --j-accent: #e0b871;
  --gold-pale: #fff0cd;
  --gold-deep: #a9793a;
  --j-hairline: rgba(224, 184, 113, .28);
  --j-sheen: rgba(255, 236, 190, .6);
  --j-card-edge: rgba(224, 184, 113, .3);
  --j-map-bg: rgba(255, 255, 255, .04);
  --j-map-bar: rgba(255, 255, 255, .03);
  --j-map-filter: invert(.9) hue-rotate(178deg) saturate(.42) brightness(1.06);
  --gp: 0;
}

body {
  background: #06090f;
  color: var(--ink);
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   The sky. Fixed, so it reads as one continuous night behind every chapter.
   -------------------------------------------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 78% -10%, rgba(255, 214, 150, .17) 0%, transparent 55%),
    linear-gradient(176deg, #0a1020 0%, #0b1424 44%, #05080f 100%);
}

/* The moon crosses the whole sky once over the length of the journey. */
.moon {
  position: fixed;
  z-index: -2;
  top: 0;
  left: 0;
  width: 3.4rem;
  height: 3.4rem;
  pointer-events: none;
  /* A shallow arc: highest at the midpoint of the journey. */
  transform: translate3d(
    calc(3vw + var(--gp) * 80vw),
    calc(3.5vh + (0.5 - var(--gp)) * (0.5 - var(--gp)) * 26vh),
    0);
}

.moon::before {
  content: "";
  position: absolute;
  inset: -280%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 244, 220, .30) 0%,
    rgba(255, 223, 168, .10) 38%,
    transparent 70%);
}

.moon svg { width: 100%; height: 100%; overflow: visible; }

/* --------------------------------------------------------------------------
   The screen, and the light that comes through it
   -------------------------------------------------------------------------- */

.lattice {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* The stone itself: strongest at the margins, cleared through the middle so
   it never sits under running text. */
.lattice .stone { opacity: .16; }

/* The projection. The matrix is the whole trick — as --p advances the light
   shears and slides, exactly as a real shadow does when the source moves. */
.lattice .cast {
  mix-blend-mode: screen;
  opacity: calc(.28 + var(--in) * .5);
  transform:
    translate(calc(var(--p) * -14%), calc(var(--p) * -6%))
    skewX(calc(-16deg + var(--p) * 30deg))
    scale(1.5);
  transform-origin: 72% 0%;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  margin: 0;
  letter-spacing: .005em;
}

/* Text the light reads out to you: a bright band travels across the glyphs,
   leaving the rest in shadow. This is the concept, applied to type. */
.lit {
  --edge: 24%;
  --base: rgba(242, 233, 216, .86);
  --at: calc(var(--p) * 120% + 4%);
  background-image: linear-gradient(
    100deg,
    var(--base) 0%,
    var(--base) calc(var(--at) - var(--edge)),
    var(--gold-pale) calc(var(--at) - 4%),
    var(--j-accent) var(--at),
    var(--gold-deep) calc(var(--at) + 8%),
    var(--base) calc(var(--at) + var(--edge)),
    var(--base) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.kicker {
  margin: 0 0 1.5rem;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--j-accent);
}

.bismillah {
  font-family: 'Amiri', serif;
  font-size: clamp(1.5rem, 6.4vw, 2.4rem);
  line-height: 2;
  direction: rtl;
  color: var(--j-accent);
  margin: 0 0 1.75rem;
}

.hero-title {
  font-size: clamp(2.5rem, 12vw, 5rem);
  line-height: 1.02;
}

.hero-title em { font-style: italic; display: block; }

.couple {
  font-size: clamp(2.6rem, 13vw, 5.5rem);
  line-height: 1.04;
}

.couple .amp {
  display: block;
  font-size: .34em;
  font-style: italic;
  letter-spacing: .1em;
  color: var(--ink-dim);
  -webkit-text-fill-color: currentColor;
  background: none;
  margin: .35rem 0;
}

.lead {
  max-width: 30ch;
  margin: 1.5rem auto 0;
  color: rgba(242, 233, 216, .74);
}

.eyebrow {
  font-size: .68rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--j-accent);
  margin: 0 0 1.25rem;
}

/* --------------------------------------------------------------------------
   Date lockup — the numerals are struck by the light too
   -------------------------------------------------------------------------- */

.datemark {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  gap: 0 1rem;
  padding: 1.25rem 1.75rem;
  border: 1px solid var(--j-hairline);
  border-radius: 2px;
}

.datemark span {
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--j-accent);
}

.datemark strong {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.5rem, 17vw, 6rem);
  font-weight: 300;
  line-height: .9;
}

.time {
  margin: 1.5rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.9rem, 8vw, 2.9rem);
  color: var(--j-accent);
}

.venue {
  margin: 0;
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.55;
}

.venue small {
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  letter-spacing: .26em;
  color: rgba(242, 233, 216, .6);
}

.parents {
  margin: 1.5rem 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  line-height: 1.9;
  color: rgba(242, 233, 216, .66);
}

.note {
  margin: 1rem 0 0;
  font-size: .78rem;
  letter-spacing: .04em;
  color: rgba(242, 233, 216, .55);
  font-style: italic;
}

.dua {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.3rem, 5.6vw, 1.85rem);
  line-height: 1.6;
  max-width: 26ch;
  margin: 0 auto;
  color: rgba(242, 233, 216, .84);
}

/* --------------------------------------------------------------------------
   Ornament
   -------------------------------------------------------------------------- */

.rule { color: var(--j-hairline); margin: 2rem auto; max-width: 20rem; }
.rule svg { width: 100%; height: auto; }

.khatam-mark {
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  color: var(--j-accent);
}

.khatam-mark svg { width: 100%; height: 100%; overflow: visible; }

/* --------------------------------------------------------------------------
   Chapter shells
   -------------------------------------------------------------------------- */

.j-safe { text-align: center; }

.stack > * + * { margin-top: 1.5rem; }

.pair {
  display: grid;
  gap: 1.5rem;
  width: 100%;
}

@media (min-width: 48rem) {
  .pair { grid-template-columns: 1fr 1fr; align-items: center; }
}

.pair .j-card-stage { width: 100%; margin-inline: auto; max-width: 17rem; }

.buttons { margin-top: 2rem; }

.j-btn { border-color: var(--j-hairline); color: var(--ink); }
.j-btn:hover { background: rgba(224, 184, 113, .12); border-color: var(--j-accent); }

.j-badge { border-color: var(--j-hairline); }

.j-rail { color: var(--j-accent); }

/* Reduced motion: hold the light still, at full strength, so nothing is dim. */
@media (prefers-reduced-motion: reduce) {
  .lattice .cast { transform: skewX(-4deg) scale(1.3); opacity: .5; }
  .lit {
    background: none;
    -webkit-text-fill-color: var(--ink);
            color: var(--ink);
  }
  .moon { transform: translate3d(72vw, 12vh, 0); }
}