/* Quran Pages, quranpages.org. The 4.0 site: the illuminated app on a page.

   The site follows the app. By day the ground is the app's bright cream
   paper (DayGround), lit from the top, with a touch of burnished grain and
   the rosette lattice pressed into it tone on tone (GroundPattern). In the
   dark it is the app's lapis night (IllumGround), the same lattice in cream.
   There is no sky any more: the app took it off the paper on 27 October.

   The parts come from the manuscript, as the app's do. The bar is a lapis
   band under a gold rule, like the app's tab band. Buttons are cartouches
   with pointed ends. Cards are square and ruled: a black line, then a gold
   rule edged in black, set in from the edge. Gold is the leaf, #C49641 and
   #F1DC9B; gold for words is the app's goldInk. The painted pieces are the
   app's own paintings, grown in and lit by assets/site.js.

   Fraunces is the store pages' caption face; everything else is the system
   face, as in the app. Arabic Quran text is the KFGQPC Uthmanic Hafs the app
   draws the mushaf with.

   Light or dark follows the visitor's system setting. ?theme=dark or
   ?theme=light forces one, for checking. */

/* ---- fonts ---- */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-VF.woff") format("woff");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("fonts/Fraunces-Italic-VF.woff") format("woff");
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "UthmanicHafs";
  src: url("fonts/UthmanicHafsV22.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ---- tokens: Light, paper and gold ---- */
:root {
  --groundTop:  #FFFAEE;                /* DayGround's three stops */
  --groundMid:  #FDF5E3;
  --groundFoot: #F8ECD3;
  --paper:      #FDF5E3;
  --card:       #FFFEFA;                /* Theme.page, a leaf laid on a leaf */
  --ink:        #22271F;
  --ink2:       #4A4F43;
  --inkSoft:    #6A6458;
  --rule:       rgba(34, 39, 31, .10);
  --line:       #1C1916;                /* Illum.line, round every shape */
  --edge:       rgba(28, 25, 22, .55);

  --gold:       #C49641;                /* Illum.goldShadow, the leaf */
  --goldLight:  #F1DC9B;                /* Illum.goldLight, its burnished side */
  --goldText:   #86621F;                /* Illum.goldInk, gold for words */
  --goldSoft:   rgba(196, 150, 65, .14);
  --lapis:      #1F3479;
  --lapisDeep:  #1A2A66;
  --cream:      #FBF5E6;
  --cartouche:  #F4E7C6;                /* Illum.cartoucheCream */

  --pattern:    url("art/ground-day.svg");
  --grainBlend: multiply;
  --grainOn:    .26;
  --phoneEdge:  rgba(28, 25, 22, .5);
  --phoneShadow: 0 24px 56px rgba(60, 48, 20, .18), 0 2px 6px rgba(0, 0, 0, .06);
  --artShadow:  drop-shadow(0 18px 30px rgba(60, 48, 20, .14));

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --quran: "UthmanicHafs", "Scheherazade New", "Noto Naskh Arabic", serif;

  --wrap: 1120px;
  --margin: 24px;
  --press: .12s; --tap: .25s; --value: .40s;
  color-scheme: light;
}

/* ---- Dark, lapis and gold ---- */
:root.dark {
  --groundTop:  #161D3A;                /* IllumGround: Illum.lapisNight down to #10162E */
  --groundMid:  #131A35;
  --groundFoot: #10162E;
  --paper:      #161D3A;
  --card:       #172042;                /* Illum.card at night, a deep lapis */
  --ink:        #E9E2D2;
  --ink2:       #CFC7B5;
  --inkSoft:    #A89F8C;
  --rule:       rgba(251, 245, 230, .12);
  --edge:       rgba(0, 0, 0, .55);
  --goldText:   #E9C979;
  --goldSoft:   rgba(241, 220, 155, .12);
  --pattern:    url("art/ground-night.svg");
  --grainBlend: screen;
  --grainOn:    .03;
  --phoneEdge:  rgba(0, 0, 0, .6);
  --phoneShadow: 0 30px 70px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
  --artShadow:  drop-shadow(0 22px 34px rgba(0, 0, 0, .45));
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --groundTop:  #161D3A;
    --groundMid:  #131A35;
    --groundFoot: #10162E;
    --paper:      #161D3A;
    --card:       #172042;
    --ink:        #E9E2D2;
    --ink2:       #CFC7B5;
    --inkSoft:    #A89F8C;
    --rule:       rgba(251, 245, 230, .12);
    --edge:       rgba(0, 0, 0, .55);
    --goldText:   #E9C979;
    --goldSoft:   rgba(241, 220, 155, .12);
    --pattern:    url("art/ground-night.svg");
    --grainBlend: screen;
    --grainOn:    .03;
    --phoneEdge:  rgba(0, 0, 0, .6);
    --phoneShadow: 0 30px 70px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .4);
    --artShadow:  drop-shadow(0 22px 34px rgba(0, 0, 0, .45));
    color-scheme: dark;
  }
}

/* ---- base ---- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--goldSoft); }
a { color: var(--goldText); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--margin); }

/* The store pages' caption: Fraunces, the second half in gold italic. */
h1, h2 {
  font-family: var(--serif);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 0;
  font-optical-sizing: auto;
  text-wrap: balance;
}
/* The ladder, 16 × 1.189ⁿ: 13 · 16 · 19 · 23 · 27 · 32 · 45 · 64 · 76. */
h1 { font-size: clamp(45px, 6.4vw, 76px); }
h2 { font-size: clamp(32px, 4vw, 45px); }
h1 em, h2 em { font-style: italic; font-weight: 520; color: var(--goldText); }
h3 { font-family: var(--ui); font-size: 19px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(19px, 2vw, 23px); line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The label step, like CONTINUE in the app: small capitals, tracked, gold ink. */
.eyebrow {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--goldText); margin: 0 0 12px;
}

/* ---- the ground ----
   Paper lit from the top, a touch of grain, the rosettes pressed in. */
.ground {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: linear-gradient(180deg, var(--groundTop) 0%, var(--groundMid) 45%, var(--groundFoot) 100%);
}
.ground::before, .ground::after { content: ""; position: absolute; inset: 0; }
.ground::before {
  background: url("art/grain.webp") 0 0 / 512px 512px;
  mix-blend-mode: var(--grainBlend); opacity: var(--grainOn);
}
.ground::after { background: var(--pattern) 0 0 / 88px 88px; }
/* the light from the top, by day only */
body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 70%);
}
:root.dark body::before { display: none; }
@media (prefers-color-scheme: dark) { :root:not(.light) body::before { display: none; } }

/* ---- the bar: a lapis band under a gold rule, like the app's tab band ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, var(--lapis), var(--lapisDeep));
  /* the rule under it: black, gold, black */
  box-shadow: 0 1px 0 var(--line), 0 3px 0 var(--gold), 0 4px 0 var(--line), 0 10px 24px rgba(16, 22, 46, .18);
}
.site-header .bar {
  max-width: var(--wrap); margin: 0 auto; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margin);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 540; font-size: 23px; letter-spacing: -.01em;
  color: var(--cream); text-decoration: none; white-space: nowrap;
}
.wordmark b { font-weight: 540; }
.wordmark i { font-style: italic; font-weight: 500; color: var(--goldLight); }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  font-family: var(--ui); font-size: 16px; font-weight: 500; color: rgba(251, 245, 230, .82);
  text-decoration: none; padding: 0 12px; height: 44px; line-height: 44px;
  transition: color var(--tap) ease;
}
.nav a:hover { color: var(--goldLight); }

/* ---- the mark: icon A's ring, wings and Iqra, on no ground ---- */
.mark { display: inline-block; width: 40px; height: 40px; flex: none;
  background: url("img/mark.png") center / contain no-repeat;
  background-image: image-set(url("img/mark.webp") type("image/webp"), url("img/mark.png") type("image/png")); }

/* ---- the cartouche: straight along top and foot, a point at each end ----
   As the app's Cartouche: the tip is a third of the height. A filled one is
   rimmed in gold edged in black; the rim is the shape itself, the fill a
   second shape set in from it. */
.cartouche {
  --h: 44px; --tip: calc(var(--h) * .34); --rim: var(--gold); --fill: var(--lapis); --on: var(--cream);
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 calc(var(--tip) + 14px);
  font-family: var(--ui); font-size: 16px; font-weight: 600; letter-spacing: .01em;
  color: var(--on); text-decoration: none; white-space: nowrap; cursor: pointer; border: 0;
  background: var(--line);
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%);
  transition: transform var(--press) ease, filter var(--tap) ease;
}
.cartouche::before, .cartouche::after { content: ""; position: absolute; z-index: -1;
  clip-path: polygon(var(--tip) 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, var(--tip) 100%, 0 50%); }
.cartouche::before { inset: 1px; background: var(--rim); }
.cartouche::after { inset: 3px; background: var(--fill); }
.cartouche:hover { filter: brightness(1.07); }
.cartouche:active { transform: scale(.985); }
/* on the lapis band, the cream cartouche with lapis words, as Listen on the app's plate */
.cartouche.cream { --fill: var(--cartouche); --on: var(--lapis); }
.nav .cartouche { --h: 40px; margin-left: 8px; color: var(--on); line-height: normal; padding: 0 calc(var(--tip) + 12px); }
.nav .cartouche:hover { color: var(--on); }

/* Android visitors: the App Store steps aside and Google Play stays. Everyone
   else sees both stores side by side. */
.android-only-inline { display: none !important; }
:root.android .android-only-inline { display: inline-flex !important; }
:root.android .ios-only { display: none !important; }

/* Apple's own badge, as Apple draws it: black on paper, white in the dark,
   never redrawn or recoloured, and at least 40 tall. */
.badge { display: inline-block; line-height: 0; transition: transform var(--press) ease; }
.badge img { height: 54px; width: auto; }
.badge:hover { transform: translateY(-1px); }
/* Google Play, in the same black-on-paper and white-in-the-dark as Apple's
   badge beside it, so the two stores read as a pair. Words only: no logo. */
.play-badge { display: inline-flex; flex-direction: column; justify-content: center; line-height: 1.05;
  height: 54px; padding: 0 18px; border-radius: 9px; background: #000; color: #fff; text-decoration: none;
  border: 1px solid #a6a6a6; font-family: var(--ui); }
.play-badge .play-small { font-size: 10px; letter-spacing: .06em; font-weight: 500; }
.play-badge .play-big { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
:root.dark .play-badge { background: #fff; color: #000; border-color: #fff; }
@media (prefers-color-scheme: dark) { :root:not(.light) .play-badge { background: #fff; color: #000; border-color: #fff; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.night-only { display: none; }
:root.dark .day-only { display: none; }
:root.dark .night-only { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .day-only { display: none; }
  :root:not(.light) .night-only { display: block; }
}

/* ---- a card: square, and ruled as a page's text is ----
   A black hairline round the edge, then, 4 in, a gold rule edged in black. */
.card {
  background: var(--card);
  border: 1px solid var(--edge);
  box-shadow: inset 0 0 0 4px var(--card), inset 0 0 0 4.7px var(--edge),
              inset 0 0 0 6.2px var(--gold), inset 0 0 0 6.9px var(--edge),
              0 2px 8px rgba(60, 48, 20, .06);
}

/* ---- the painted pieces, grown in and lit by site.js ----
   The still picture stands until the painting is ready to grow; with no
   WebGL, or with Reduce Motion, the still picture is what shows. */
.illum { position: relative; display: block; }
.illum > img, .illum > canvas { display: block; width: 100%; height: auto; }
.illum > canvas { position: absolute; inset: 0; height: 100%; animation: arrive .5s ease; }
@keyframes arrive { from { opacity: 0; } }
:root.gl .illum:not(.still) > img { visibility: hidden; }
.illum.still > canvas { display: none; }

/* the crest over a centred heading: the app's crown, rays and all */
.crest { width: 132px; margin: 0 auto 16px; }
/* the gold rule with a rosette, from under the banner's caption */
.rule { width: 266px; height: auto; margin: 24px 0; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ---- sections ---- */
section { padding: 72px 0; position: relative; }
.section-head { max-width: 640px; }
.section-head p.lead { margin-top: 16px; }
.center { text-align: center; }
.center .section-head { margin: 0 auto; }

/* ---- hero ----
   The words on the left; on the right the shamsa grows in behind two phones:
   the Al-Fatihah opening in front, the Quran tab (by day, or at night in
   Dark) behind it. */
.hero { padding: 72px 0 48px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.hero h1 { color: var(--ink); }
.hero .rule { margin: 28px 0 24px; }
.hero .lead { margin: 0; max-width: 32ch; }
.hero .cta { margin-top: 32px; }
.hero .fine { margin: 16px 0 0; font-size: 13px; color: var(--inkSoft); }
.stage { position: relative; height: 760px; max-width: 560px; margin-left: auto; width: 100%; }
.stage .shamsa { position: absolute; width: 720px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0;
  filter: var(--artShadow); }
.phone {
  display: block; width: 100%; height: auto; aspect-ratio: 660 / 1434;
  border-radius: 13.5% / 6.2%; border: 1px solid var(--phoneEdge); box-shadow: var(--phoneShadow);
  background: var(--card);
}
.stage picture { position: absolute; width: 300px; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; display: block; }

/* ---- bands: one feature, its screens, a few lines ---- */
.band { padding: 64px 0; }
.band-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; }
.band.flip .band-grid { grid-template-columns: 1.2fr 1fr; }
.band .copy { max-width: 450px; justify-self: start; }
.band.flip .copy { order: 2; }
.band h2 { color: var(--ink); font-size: clamp(28px, 3.4vw, 40px); }
.band ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.band li { padding-left: 24px; position: relative; color: var(--ink2); font-size: 19px; line-height: 1.45; }
/* a gold point edged in black, the khatim's diamond */
.band li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 7px; height: 7px;
  background: var(--gold); box-shadow: 0 0 0 .7px var(--line); transform: rotate(45deg); }
.band .media { display: flex; justify-content: center; align-items: flex-start; gap: 24px; }
.band .media > picture { display: block; width: 280px; }
.band .media.one > picture { width: 320px; }
.band .media.two > picture:last-child { margin-top: 48px; }
.new { display: inline-block; margin-left: 6px; padding: 1px 8px 2px; vertical-align: 2px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lapis); background: var(--cartouche); border: 1px solid var(--edge); }
:root.dark .new { color: var(--lapis); }

/* ---- the vines: the app's scroll, grown across the page ----
   A band wider than most screens, centred, so a phone sees its heart and a
   wide screen nearly all of it. It grows from the middle out as it arrives. */
.vine { overflow: hidden; padding: 8px 0; pointer-events: none; }
.vine .illum { width: clamp(1000px, 112vw, 1600px); position: relative; left: 50%; transform: translateX(-50%); }

/* ---- the surahs' paintings: a strip of the app's own tiles, drifting past
   between gold rules. Shown, not sold: no heading, no words. ---- */
.frieze { padding: 0; overflow: hidden; margin: 24px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  box-shadow: inset 0 3px 0 var(--gold), inset 0 4px 0 var(--line), inset 0 -3px 0 var(--gold), inset 0 -4px 0 var(--line);
  background: color-mix(in srgb, var(--card) 60%, transparent); }
.frieze-track { display: flex; width: max-content; padding: 22px 0; animation: drift 140s linear infinite; }
.frieze-row { display: flex; gap: 16px; margin: 0; padding: 0 8px; list-style: none; }
.frieze-row li { width: 240px; flex: none; }
.frieze .illum { aspect-ratio: 480 / 261; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(28, 25, 22, .16); overflow: hidden; background: var(--lapis); }
@keyframes drift { to { transform: translateX(-50%); } }

/* ---- iPhone Duo and iPad: the open book, wide ---- */
.spread .section-head .lead { margin: 16px auto 0; max-width: 46ch; }
.spread picture { display: block; max-width: 960px; margin: 32px auto 0; }
.duo { display: block; width: 100%; height: auto; filter: var(--artShadow); }
.spread-note { font-size: 13px; color: var(--inkSoft); margin: 24px auto 0; }
/* ---- the pen: a page of its own, the iPad big, two steps beside it ---- */
.pen-feature .section-head { margin: 0 auto; text-align: center; max-width: 720px; }
.pen-feature .section-head .lead { margin: 16px auto 0; max-width: 52ch; }
.pen-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 48px; }
.pen-page { margin: 0; }
.pen-page .pad { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border-radius: 22px;
  border: 1px solid var(--phoneEdge); box-shadow: var(--phoneShadow); background: var(--card); }
.pen-steps { display: flex; flex-direction: column; gap: 20px; }
.pen-step { padding: 32px; position: relative; }
.pen-step h3 { font-family: var(--serif); font-weight: 560; font-size: 23px; color: var(--ink); margin: 0 0 8px; }
.pen-step p { color: var(--ink2); margin: 0; }
/* the step's number in a gold point, like the app's verse marks */
.pen-step .step-n { width: 32px; height: 32px; margin: 0 0 12px; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--lapis);
  background: var(--goldLight); border: 1px solid var(--line); border-radius: 50%; box-shadow: inset 0 0 0 2px var(--gold); }
.pen-step img.bar { width: 100%; height: auto; margin-top: 20px; border-radius: 12px; box-shadow: 0 4px 14px rgba(28, 25, 22, .14); }
.pen-step img.people { width: min(100%, 340px); height: auto; margin: 20px auto 0; border-radius: 18px 18px 4px 4px;
  border: 1px solid var(--edge); box-shadow: 0 6px 18px rgba(28, 25, 22, .14); }
.pen-step img.night-only { display: none; }
:root.dark .pen-step img.day-only { display: none; }
:root.dark .pen-step img.night-only { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not(.light) .pen-step img.day-only { display: none; }
  :root:not(.light) .pen-step img.night-only { display: block; }
}
.pen-notes { list-style: none; padding: 0; margin: 40px auto 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; }
.pen-notes li { display: inline-flex; align-items: center; gap: 10px; color: var(--ink2); }
.pen-notes li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold); box-shadow: 0 0 0 .7px var(--line); transform: rotate(45deg); }

/* ---- more: the parts of the app with no screen of their own ---- */
.notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
.note { padding: 28px; }
.note h3 { color: var(--ink); margin: 0 0 8px; }
.note p { font-size: 16px; color: var(--ink2); margin: 0; }

/* ---- reviews: what people wrote on the App Store, word for word ---- */
.said { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; max-width: 900px; margin: 40px auto 0; text-align: start; }
.review { margin: 0; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.review blockquote { margin: 0; }
.review p { font-size: 19px; line-height: 1.5; color: var(--ink2); margin: 0; }
.review .r-title { font-family: var(--serif); font-weight: 540; font-size: 23px; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); margin: 0 0 8px; }
/* the store's Arabic in a face made for prose; the mushaf's face is for the Quran alone */
.review [lang="ar"], .review [lang="ar"] p, .review [lang="ar"] .r-title {
  font-family: "Geeza Pro", "SF Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif; letter-spacing: 0; }
.review blockquote[lang="ar"] p { font-size: 23px; line-height: 1.7; }
.review blockquote[lang="ar"] .r-title { font-size: 27px; font-weight: 600; }
.r-english { border-top: 1px solid var(--rule); padding-top: 16px; }
.r-english .r-label { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--inkSoft); margin: 0 0 8px; }
.r-english .r-title { font-size: 19px; margin-bottom: 4px; }
.r-english p { font-size: 16px; }
.review figcaption { margin-top: auto; font-size: 16px; font-weight: 600; color: var(--ink); }
.review figcaption span { font-weight: 400; color: var(--inkSoft); }

/* ---- questions ---- */
.qa { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.q { padding: 28px; }
.q h3 { margin: 0 0 8px; color: var(--ink); }
.q p { font-size: 16px; color: var(--ink2); margin: 0; }

/* ---- our promise ---- */
.pledge { padding: 48px; }
.pledge h2 { margin-bottom: 16px; }
.pledge p { color: var(--ink2); font-size: 19px; line-height: 1.45; max-width: 640px; margin: 0; }
.pledge p + p { margin-top: 16px; font-size: 16px; }
.ticks { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px 32px; }
.ticks li { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ink); }
.ticks li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold); box-shadow: 0 0 0 .7px var(--line); transform: rotate(45deg); }

/* ---- get it: a page in the banner's own painted border ---- */
.get .framed {
  max-width: 760px; margin: 0 auto; padding: 40px 32px;
  border: 56px solid transparent;
  border-image: url("art/frame.webp") 113 round;
  background: var(--card); background-clip: padding-box;
  text-align: center;
}
/* the border is fetched as the panel fades in, not with the first view */
:root.js .get .framed:not(.in) { border-image-source: none; }
.get-icon { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 24px;
  box-shadow: 0 8px 24px rgba(16, 22, 46, .22), 0 1px 2px rgba(0, 0, 0, .1); }
.get h2 { margin-bottom: 12px; }
.get .lead { margin: 0 auto; max-width: 30ch; }
.get .cta { justify-content: center; margin-top: 32px; }

/* ---- thanks ---- */
.sources { max-width: 720px; margin: 12px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink2); text-wrap: balance; }
.sources .src { white-space: nowrap; }
.sources .src:not(:last-child)::after { content: "·"; margin: 0 4px 0 12px; color: var(--gold); }

/* ---- footer: the lapis band again, as at the foot of a page ---- */
.site-footer {
  padding: 56px 0 64px; margin-top: 32px;
  background: linear-gradient(180deg, var(--lapis), var(--lapisDeep));
  box-shadow: 0 -1px 0 var(--line), 0 -3px 0 var(--gold), 0 -4px 0 var(--line);
  color: rgba(251, 245, 230, .82);
}
:root.dark .site-footer { background: linear-gradient(180deg, #0F1530, #0B1026); }
@media (prefers-color-scheme: dark) { :root:not(.light) .site-footer { background: linear-gradient(180deg, #0F1530, #0B1026); } }
/* in the dark the bar is a shade deeper than the lapis night under it */
:root.dark .site-header { background: linear-gradient(180deg, #0F1530, #0D1329); }
@media (prefers-color-scheme: dark) { :root:not(.light) .site-header { background: linear-gradient(180deg, #0F1530, #0D1329); } }
.foot-grid { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.foot-grid > div:first-child { flex: 0 1 400px; }
.foot-grid > div:last-child { flex: 1 1 420px; max-width: 560px; }
.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }
.foot-links a { font-size: 16px; color: var(--cream); text-decoration: none; }
.foot-links a:hover { color: var(--goldLight); }
.foot-note { font-size: 13px; color: rgba(251, 245, 230, .78); margin-top: 24px; }
.foot-note + .foot-note { margin-top: 8px; font-size: 11px; color: rgba(251, 245, 230, .6); }
.foot-ayah { margin: 20px 0 0; max-width: 380px; }
.foot-ayah .ar { font-family: var(--quran); direction: rtl; color: var(--goldLight); font-size: 27px; line-height: 1.7; margin: 0; }
/* The mushaf's face is 290 KB, for this one ayah: site.js loads it when the
   footer comes near, and the ayah is shown only in it, never in a stand-in. */
:root.js .foot-ayah .ar:not(.ready) { font-family: serif; visibility: hidden; }
.foot-ayah .en { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.45; color: rgba(251, 245, 230, .82); margin: 8px 0 0; }
.foot-ayah .ref { font-size: 13px; color: rgba(251, 245, 230, .6); margin: 6px 0 0; }

/* ---- content pages ---- */
.doc { max-width: 760px; margin: 0 auto; padding: 48px var(--margin) 96px; }
.doc .paper { padding: 56px; }
.doc h1 { font-size: clamp(32px, 5vw, 45px); margin-bottom: 8px; }
.doc .updated { font-size: 13px; color: var(--inkSoft); margin-bottom: 32px; }
.doc h2 { font-family: var(--ui); font-size: 23px; font-weight: 600; letter-spacing: -.01em; margin: 40px 0 12px; line-height: 1.3; }
.doc h3 { font-size: 19px; margin: 24px 0 8px; }
.doc p, .doc li { color: var(--ink2); font-size: 16px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc ul, .doc ol { padding-left: 24px; }
.doc li { margin-bottom: 8px; }
.doc a { word-break: break-word; }
.back { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: var(--ink2); text-decoration: none; margin-bottom: 16px; }
.back:hover { color: var(--goldText); }
/* a panel inside a card: a sunk sheet with a gold rule down its leading edge */
.callout { background: var(--goldSoft); border-left: 2px solid var(--gold); padding: 24px; margin: 24px 0; }
.callout p:last-child { margin-bottom: 0; }
:root.dark .callout { background: rgba(0, 0, 0, .2); }
@media (prefers-color-scheme: dark) { :root:not(.light) .callout { background: rgba(0, 0, 0, .2); } }
.signoff { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 16px; }
.signoff .mark { width: 52px; height: 52px; }
.signoff p { margin: 0; font-family: var(--serif); font-style: italic; color: var(--ink2); font-size: 19px; line-height: 1.35; }
.notfound { text-align: center; padding-top: 112px; }
.notfound .mark { width: 88px; height: 88px; margin-bottom: 24px; }
.notfound .cartouche { --h: 48px; }

/* ---- motion ----
   Words and screens fade in as they arrive; nothing slides or rises (the
   app's rule for letters). The paintings grow in. Reduce Motion turns it off. */
.reveal { opacity: 0; transition: opacity .8s ease; }
.reveal.later { transition-delay: .15s; }
.reveal.in { opacity: 1; }
:root:not(.js) .reveal { opacity: 1; }

/* ---- focus ---- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---- responsive ---- */
@media (max-width: 1060px) { .nav .hide-md { display: none; } }
@media (max-width: 980px) {
  .hero { padding-top: 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero .lead { max-width: 44ch; }
  /* the phones and the shamsa keep their places, scaled to the column */
  .stage { margin: 0 auto; height: auto; aspect-ratio: 1 / 1.12; max-width: 560px; }
  .stage picture { width: 50%; }
  .stage .shamsa { width: 120%; }
  .band { padding: 48px 0; }
  .band-grid, .band.flip .band-grid { grid-template-columns: 1fr; gap: 32px; }
  .band.flip .copy { order: 0; }
  .band .copy { max-width: 560px; }
  .band .media.one > picture { width: min(320px, 76%); }
  .band .media.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 600px; margin: 0 auto; width: 100%; }
  .band .media.two > picture { width: auto; }
  .notes, .qa { grid-template-columns: repeat(2, 1fr); }
  .said { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .pledge { padding: 48px 32px; }
  .pen-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pen-page .pad { max-width: 440px; }
}
@media (max-width: 620px) {
  :root { --margin: 16px; }
  .hide-sm { display: none; }
  .site-header .bar { height: 56px; }
  .wordmark { font-size: 20px; gap: 8px; }
  .wordmark .mark { width: 34px; height: 34px; }
  .nav .cartouche { --h: 38px; font-size: 15px; }
  h1 { font-size: clamp(40px, 12vw, 52px); }
  .hero { padding: 40px 0 32px; }
  .hero .cta { justify-content: flex-start; }
  section { padding: 56px 0; }
  .band { padding: 40px 0; }
  .band .media.two { gap: 12px; }
  .band .media.two > picture:last-child { margin-top: 32px; }
  .band li, .pledge p { font-size: 17px; }
  .frieze-row li { width: 180px; }
  .frieze-track { padding: 16px 0; }
  .notes, .qa { grid-template-columns: 1fr; gap: 12px; }
  .note, .q { padding: 24px; }
  .pledge { padding: 32px 24px; }
  .pledge h2 { font-size: 30px; }
  .ticks { flex-direction: column; gap: 12px; }
  .review { padding: 28px 24px; }
  .review p { font-size: 17px; }
  .review blockquote[lang="ar"] p { font-size: 21px; }
  .review blockquote[lang="ar"] .r-title { font-size: 23px; }
  .review .r-title { font-size: 20px; }
  .get .framed { border-width: 36px; padding: 28px 12px; }
  .get-icon { width: 76px; height: 76px; border-radius: 17px; }
  .foot-grid { flex-direction: column; gap: 32px; }
  .foot-grid > div:first-child, .foot-grid > div:last-child { flex: none; }
  .doc { padding: 24px var(--margin) 72px; }
  .doc .paper { padding: 32px 24px; }
  .doc h2 { font-size: 19px; }
  .sources .src { display: block; }
  .sources .src::after { display: none; }
  .pen-page .pad { border-radius: 14px; }
  .pen-step { padding: 24px; }
  .pen-notes { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .nav .cartouche { padding: 0 calc(var(--tip) + 8px); }
  .wordmark { font-size: 18px; }
}

/* motion is a courtesy, never a requirement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cartouche:active, .badge:hover { transform: none; }
  .reveal { opacity: 1; transition: none; }
  .frieze { overflow-x: auto; }
  .frieze-track { animation: none; }
}