/* Rifq — the hosted pages.

   The app's paper, its ink and its one terracotta, and nothing else. The
   values are transcribed from Sources/Design/Tokens.swift; if a token moves
   there, it moves here by hand — this stylesheet is not built from the app.

   There is no dark half. The app has exactly one appearance (0010), and a site
   that flips to a dark ground while the product it is selling never does is
   showing the reader something that does not exist. */

:root {
  color-scheme: light;

  /* The paper, and the two tints lifted off it. */
  --paper:   #FAF7F0;
  --surface: #F1ECE0;
  --canvas:  #E9E4DA;

  /* The ink ramp. */
  --ink:      #221F19;
  --ink-soft: #3D382E;
  --body:     #6B6455;
  --muted:    #9A9284;
  --faint:    #B3AB9B;

  /* Hairlines. */
  --rule:        #EEE7D9;
  --rule-strong: #D8D0C0;

  /* The one terracotta. It marks three things and only three: the
     high-emphasis action, a chosen plan, a kept line. */
  --accent:      #9C4A2F;
  --accent-deep: #7E3722;
  --accent-ink:  #F5F1E6;
  --accent-edge: #DDD5C5;

  --measure: 34rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Tajawal", ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 4rem 1.4rem 5rem;
}

/* The landing page alone. The two legal pages keep the reading measure — a
   line of prose wants one column and about that width whatever the screen is —
   but the landing page has objects on it rather than paragraphs, and at the
   reading measure a desktop reads it as a phone page left in the middle of an
   empty sheet. */
.wrap.wide { max-width: 62rem; }

/* The wordmark, set as type — the app's own face, at the app's own weight. */
.mark {
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 .3rem;
  line-height: 1.4;
}

.tagline { color: var(--body); margin: 0 0 3rem; }

h1 { font-size: 1.7rem; font-weight: 700; line-height: 1.5; margin: 0 0 .4rem; }
h2 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 2.6rem 0 .6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule-strong);
}
h3 { font-size: 1rem; font-weight: 700; margin: 1.6rem 0 .4rem; }
p, li { margin: 0 0 .9rem; }
ul { padding-inline-start: 1.2rem; margin: 0 0 1.2rem; }
a { color: var(--accent); text-underline-offset: .2em; }
strong { font-weight: 700; }

.stamp { color: var(--muted); font-size: .88rem; margin-bottom: 2.4rem; }

/* The line, the one thing on these pages set in Amiri — same rule as the app:
   Amiri sets the Qur'an, Tajawal sets everything else (0005). */
.line {
  font-family: "Amiri", serif;
  font-size: 1.75rem;
  line-height: 2;
  margin: 0 0 .6rem;
}

.card {
  background: var(--surface);
  border-radius: 18px;
  padding: 2rem 1.6rem;
  margin: 0 0 2.6rem;
  text-align: center;
}

.source { color: var(--muted); font-size: .92rem; margin: 0; }
/* Every printed source names its kind first, then cites — and the head is set
   apart by weight and ink, never by colour (0007). */
.source b { font-weight: 500; color: var(--body); }

.cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  text-decoration: none;
  font-weight: 700;
  padding: .85rem 2.2rem;
  border-radius: 999px;
  margin: .4rem 0 0;
}
.cta:hover { background: var(--accent-deep); }
.cta-note { color: var(--muted); font-size: .88rem; margin: .8rem 0 0; }

.promises { list-style: none; padding: 0; margin: 0 0 3rem; }
.promises li {
  border-top: 1px solid var(--rule-strong);
  padding: 1rem 0 .4rem;
}
.promises li span { display: block; color: var(--body); font-size: .92rem; }

footer {
  border-top: 1px solid var(--rule-strong);
  margin-top: 3.5rem;
  padding-top: 1.4rem;
  color: var(--muted);
  font-size: .9rem;
}
footer a { margin-inline-end: 1.1rem; }

/* The English half of the two legal pages. It reads left-to-right inside an
   otherwise right-to-left document, and it is here for App Review as much as
   for any reader. */
.ltr {
  direction: ltr;
  text-align: left;
  font-family: ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
}
.ltr .muted { color: var(--muted); }

/* ---- The hero -------------------------------------------------------- */

.hero { margin-bottom: 3rem; }
.hero .said { margin-bottom: 2.8rem; }

/* ---- The illustration: نصّ اليوم, as the app draws it ------------------

   It is one screen of the app, rebuilt in HTML rather than screenshotted, so
   it stays in step with the tokens above. What it must not do is invent: the
   header is the date and the two glyphs, the reading is the line, its source,
   the tick and the تَأَمُّل, and the action row is the same two marks the app
   draws.

   **جِبال is playing under it, and it plays the way it plays in the app: sharp,
   at the colour it was shot at, with no veil, no blur and nothing at all drawn
   between it and the words** (0010). What makes the page readable is the ink,
   and the ink is that film's own — `FilmInk` for جِبال, transcribed from
   Tokens.swift: a cool near-black in the peaks' own hue, never one shared
   black. The gloss loses its light cut for a regular one, for the same reason
   it does in the app: a light cut at note size is the first thing a moving
   image takes.

   Under Reduce Motion the film does not play, and the page goes back to the
   paper with the paper's own ink — which is exactly what `Film.inkNow` hands
   back on a phone with the switch on. That is why every colour here is a
   variable: the two ink sets are one swap, not two stylesheets. */

.phone {
  margin: 0;
  width: 100%;
  max-width: 19.5rem;
  margin-inline: auto;

  /* جِبال, unveiled — Tk.filmJibalInk / Soft / Rule. */
  --film-ink:  #161C22;
  --film-soft: #1E262E;
  --film-rule: #3E4A55;
  --gloss-weight: 400;
}

.screen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 34px;
  padding: 1.8rem 1.3rem 1.7rem;   /* the day's own gutter, 30pt */
  /* A phone's own proportion, 9:19.5 — so the film is cropped the way it is
     cropped on the glass the ink was measured against. */
  aspect-ratio: 9 / 19.5;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(34, 31, 25, .10);
}

/* The film. Nothing is laid over it — no veil, no wash, no blur. */
.screen .film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.screen > *:not(.film) { position: relative; }

/* The header: the date opens the archive, the two marks open المحفوظات and
   the settings. It never moves while the days roll under it. */
.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.day-header .date { line-height: 1.35; }
.day-header .weekday {
  display: block;
  font-size: .75rem;
  font-weight: 300;
  color: var(--film-soft);
}
.day-header .hijri {
  display: block;
  font-size: .88rem;
  font-weight: 500;
  color: var(--film-ink);
}
.day-header .glyphs { display: flex; align-items: center; gap: .35rem; }
.day-header .glyphs svg { width: 19px; height: 19px; color: var(--film-ink); }

/* The reading, centred in whatever the header and the actions leave. */
.day-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 1.6rem 0;
}
.day-body .line {
  font-size: 1.6rem;
  line-height: 1.95;
  color: var(--film-ink);
  margin: 0 0 1.5rem;
}
.day-body .source { font-size: .82rem; color: var(--film-soft); margin: 0 0 1rem; }
.day-body .source b { color: var(--film-ink); }

/* The tick — a short centred hairline, not a rule across the page. */
.tick {
  width: 34px;
  height: 1px;
  background: var(--film-rule);
  margin: 0 auto 1rem;
}

.gloss-label {
  display: block;
  font-size: .72rem;
  font-weight: 500;
  color: var(--film-soft);
  letter-spacing: .04em;
  margin-bottom: .35rem;
}
.gloss {
  font-size: .84rem;
  font-weight: var(--gloss-weight);
  line-height: 1.85;
  color: var(--film-soft);
  margin: 0;
  text-align: center;
}

/* The two actions: marks, not words, and the same pair on every page that
   carries a line. A button carrying only a mark is a rounded square. */
.day-actions { display: flex; justify-content: center; gap: .875rem; }
.act {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
}
.act svg { width: 19px; height: 19px; }
/* Both are fields, which is why the film's ink stops at the reading: the app
   measures جِبال across the header and the reading bands only, because these
   two carry their own ground. The heart is filled because the line is kept —
   a kept line is one of the three things the terracotta marks (0010). */
.act.keep { background: var(--accent); color: var(--accent-ink); }
.act.send { background: var(--accent); color: var(--accent-ink); }

.caption {
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
  margin: 1.1rem 0 0;
}

/* ---- The three kinds ------------------------------------------------- */

.kinds { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.4rem; }
.kinds li { margin: 0; }
.kinds .kind {
  display: block;
  font-weight: 500;
  margin-bottom: .1rem;
}
/* Amiri sets the Qur'an and nothing else; a hadith and a proverb are Tajawal,
   like every other word in the app (0005). */
.kinds .said-line {
  font-size: 1.15rem;
  line-height: 1.9;
  color: var(--ink);
  margin: 0 0 .2rem;
}
.kinds .said-line.quran { font-family: "Amiri", serif; }
.kinds .cite { color: var(--muted); font-size: .85rem; }

/* No film, and therefore the paper — the same answer `Film.inkNow` gives. */
@media (prefers-reduced-motion: reduce) {
  .phone {
    --film-ink:  var(--ink);
    --film-soft: var(--body);
    --film-rule: var(--rule-strong);
    --gloss-weight: 300;
  }
  .screen .film { display: none; }
  .day-header .weekday { color: var(--muted); }
  .day-header .hijri { color: var(--ink-soft); }
  .day-header .glyphs svg { color: var(--muted); }
  .gloss-label { color: var(--muted); }
}

@media (min-width: 56rem) {
  .wrap.wide { padding-top: 6rem; }
  .hero {
    display: grid;
    grid-template-columns: 1fr .82fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4.5rem;
  }
  .hero .said { grid-column: 1; margin: 0; }
  .hero .said p:last-child { margin-bottom: 0; }
  .hero .phone { grid-column: 2; margin: 0; }
  .mark { font-size: 3.2rem; }
  .tagline { font-size: 1.15rem; margin-bottom: 1.6rem; }

  /* Six promises in two columns. The rule stays on top of each, so the pairs
     read as one list broken in half rather than as two lists. */
  .promises {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    margin-bottom: 4rem;
  }

  .kinds { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }

  footer { display: flex; gap: 0; }
}