/* Khalis — a sundial on a sandstone wall. Warm stone, ink, a brass hand,
   and six bands of sky that follow the day from dawn to night. Tokens match the app's day palette
   (src/theme.ts); the site keeps the day tone whatever the visitor's dark mode setting. */

@font-face { font-family: 'Aboreto'; src: url('assets/fonts/Aboreto_400Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('assets/fonts/Figtree_400Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('assets/fonts/Figtree_500Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('assets/fonts/Figtree_600SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Amiri Quran'; src: url('assets/fonts/AmiriQuran_400Regular.ttf') format('truetype'); font-display: swap; }

:root {
  --bg: #efe9df;
  --sheet: #f8f5ef;
  --ink: #24211c;
  --muted: #6b655a;
  --line: #ddd5c7;
  --brass: #a8701a;
  --brand: #0f6b5a;
  --gold: #b9832f;
  --deep: #174d40;
  --on-deep: #f6f1e6;
  --brass-soft: #f1e2c4;
  --em: #0f6b5a; /* the coloured word in a headline */
  --fajr: #5b6fa6;
  --sunrise: #e9c77b;
  --dhuhr: #e0a64a;
  --asr: #c9763a;
  --maghrib: #8a4f6e;
  --isha: #2a3555;
  --display: 'Aboreto', 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --arabic: 'Amiri Quran', 'Amiri', 'Geeza Pro', 'Noto Naskh Arabic', serif;
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Links in the running text are underlined in brass; low specificity, so a page's own link style wins */
:where(main) a { text-decoration-color: var(--gold); text-underline-offset: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: 0.02em; }
p { margin: 0; text-wrap: pretty; }
.ar { font-family: var(--arabic); direction: rtl; unicode-bidi: isolate; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.label { font-family: var(--display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--deep); color: var(--on-deep); padding: 8px 14px; border-radius: 8px; z-index: 50; }
.skip:focus { left: 12px; }
/* Read out, not shown */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }

/* The six bands of the day as a thin rule */

/* ── Header ───────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--brand); }
.wordmark svg { height: 30px; width: auto; }
.wordmark .en { font-family: var(--display); font-size: 22px; letter-spacing: 0.08em; }
.nav { display: flex; align-items: center; gap: 26px; }
.nav > a, .menu > summary { text-decoration: none; font-size: 15px; color: var(--muted); }
.nav > a:hover, .menu > summary:hover, .menu[open] > summary { color: var(--ink); }
.nav > a[aria-current='page'], .menu > summary.here { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1.5px; text-underline-offset: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--gold); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500; white-space: nowrap; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 4px var(--brass-soft); }

/* The two menus are plain <details>, so they open without JavaScript; site.js only closes them tidily. */
.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.2s; }
.menu[open] > summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.menu .panel { position: absolute; z-index: 30; background: var(--sheet); border: 1px solid var(--line); border-radius: 22px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(36, 33, 28, 0.42); }
.inside { position: relative; }
.inside .panel { top: calc(100% + 18px); left: 50%; transform: translateX(-50%); width: min(600px, calc(100vw - 40px)); }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.chapters a { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 1px 14px; padding: 12px 14px; border-radius: 14px; text-decoration: none; }
.chapters a::before { content: ''; grid-row: span 2; width: 10px; height: 10px; margin-top: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.chapters b { font-weight: 600; color: var(--ink); }
.chapters span { font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.chapters a:hover, .chapters a[aria-current='page'] { background: var(--bg); }
.chapters .when { font-family: var(--display); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; }

/* Phone menu: one button that opens every page */
.phone { display: none; }
.phone > summary { border: 1px solid var(--line); background: var(--sheet); color: var(--ink); border-radius: 999px; padding: 8px 16px; font-weight: 500; }
.phone .panel { top: calc(100% + 1px); left: 0; right: 0; border-radius: 0 0 24px 24px; border-top: 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) 22px max(16px, env(safe-area-inset-left, 0px)); max-height: calc(100dvh - 70px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; }
.phone .chapters { grid-template-columns: minmax(0, 1fr); }
.phone .also { list-style: none; margin: 10px 0 0; padding: 14px 14px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 22px; }
.phone .also a { text-decoration: none; font-weight: 500; }
.phone .also a[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 6px; }
.phone .soon-line { margin: 16px 14px 0; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) {
  .nav { display: none; }
  .phone { display: block; }
  .top .wrap { gap: 12px; }
}

/* ── Hero ─────────────────────────────────────────── */
.hero { padding: 56px 0 72px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(44px, 6.4vw, 86px); line-height: 1.02; color: var(--ink); }
.hero h1 em { font-style: normal; color: var(--em); }
.hero .lede { margin-top: 26px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 33em; }
.hero .lede strong { color: var(--ink); font-weight: 500; }
.nos { list-style: none; padding: 0; margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.nos li { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 500; }
.nos li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--brand); background: radial-gradient(circle, var(--brand) 0 3px, transparent 3.5px); }
.cta { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.soon { display: inline-flex; flex-direction: column; gap: 2px; background: var(--deep); color: var(--on-deep); padding: 14px 22px; border-radius: 16px; }
.soon b { font-family: var(--display); font-weight: 400; letter-spacing: 0.12em; font-size: 15px; }
.soon span { font-size: 14px; opacity: 0.85; }
.cta a { font-weight: 500; text-decoration-color: var(--gold); text-underline-offset: 5px; }
@media (max-width: 920px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } .hero { padding-top: 32px; } }

/* The live sundial */
.sundial { background: var(--sheet); border: 1px solid var(--line); border-radius: 30px; padding: 22px 22px 18px; position: relative; box-shadow: 0 30px 60px -40px rgba(36, 33, 28, 0.35); }
.sundial .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 6px; }
.sundial .place { font-family: var(--display); letter-spacing: 0.14em; font-size: 14px; }
.sundial .date { font-size: 13px; color: var(--muted); text-align: right; }
.dial { position: relative; width: 100%; max-width: 440px; margin: 0 auto; aspect-ratio: 392 / 352; }
.dial svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dial svg text { font-family: var(--display); }
.dial .centre { position: absolute; inset: 30% 26%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.dial .centre .now { font-size: clamp(22px, 3.4vw, 30px); line-height: 1.15; font-family: var(--display); }
.dial .centre .until { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sundial .next { margin: 4px 6px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--deep); color: var(--on-deep); border-radius: 18px; padding: 14px 18px; }
.sundial .next .name { font-family: var(--display); font-size: 22px; letter-spacing: 0.06em; }
.sundial .next .in { font-size: 14px; opacity: 0.85; font-variant-numeric: tabular-nums; text-align: right; }
.times { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 2px; }
.times div { border: 1px solid var(--line); border-radius: 14px; padding: 9px 12px; display: flex; flex-direction: column; gap: 1px; }
.times div.on { border-color: var(--brand); border-width: 1.5px; }
.times dt { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 11.5px; letter-spacing: 0.08em; color: var(--muted); }
.times dt::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.times dd { margin: 0; font-size: 19px; font-variant-numeric: tabular-nums; font-weight: 500; }
.sundial .foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 6px 0; font-size: 13px; color: var(--muted); }
.sundial select { font: 500 14px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; max-width: 100%; }
@media (max-width: 480px) { .times { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sundial { padding: 16px 12px 14px; border-radius: 24px; } }

/* ── The name ─────────────────────────────────────── */
.name-band { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; }
.name-band .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; padding-top: 92px; padding-bottom: 92px; position: relative; }
.name-band .arch-bg { position: absolute; right: -60px; bottom: -120px; height: 520px; opacity: 0.08; pointer-events: none; }
.name-band .verse { font-size: clamp(40px, 6vw, 72px); line-height: 1.9; text-align: right; }
.name-band .verse mark { background: none; color: var(--sunrise); }
.name-band .tr { margin-top: 10px; font-size: 18px; text-align: right; opacity: 0.9; }
.name-band .ref { margin-top: 8px; font-size: 13px; text-align: right; opacity: 0.7; }
.name-band .ref a { color: inherit; }
.name-band h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; }
.name-band .meaning p { margin-top: 18px; font-size: 18px; line-height: 1.6; opacity: 0.9; max-width: 30em; }
.name-band .label { color: var(--on-deep); opacity: 0.7; display: block; margin-bottom: 14px; }
@media (max-width: 920px) { .name-band .wrap { grid-template-columns: 1fr; gap: 36px; padding-top: 64px; padding-bottom: 64px; } }

/* ── Ledger ───────────────────────────────────────── */
.section { padding: 104px 0; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.06; margin-top: 14px; }
.section-head p { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 36em; }
.ledger { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.bill { background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; padding: 34px 34px 28px; position: relative; box-shadow: 0 24px 50px -40px rgba(36, 33, 28, 0.45); }
.bill::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 10px -2px, transparent 9px, var(--sheet) 9.5px) 0 0 / 20px 10px repeat-x; }
.bill .title { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--ink); padding-bottom: 12px; margin-bottom: 6px; }
.bill .title b { font-family: var(--display); font-weight: 400; letter-spacing: 0.14em; }
.bill .title span { font-size: 13px; color: var(--muted); }
.line { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.line .what { font-weight: 500; }
.line .else { grid-column: 1; font-size: 14px; color: var(--muted); }
.line .ours { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--brand); }
.total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px; margin-top: 8px; border-top: 3px double var(--ink); }
.total b { font-family: var(--display); font-weight: 400; letter-spacing: 0.14em; font-size: 18px; }
.total span { font-family: var(--display); font-size: 34px; color: var(--brand); }
.bill .small { margin-top: 18px; font-size: 13px; color: var(--muted); }
.ledger aside { position: sticky; top: 110px; }
.ledger aside h3 { font-size: 26px; line-height: 1.2; }
.ledger aside p { margin-top: 14px; color: var(--muted); }
.ledger aside .why { margin-top: 26px; border-left: 2px solid var(--gold); padding-left: 18px; }
.ledger aside .why p { color: var(--ink); }
@media (max-width: 920px) { .ledger { grid-template-columns: 1fr; } .ledger aside { position: static; } .bill { padding: 26px 20px 22px; } }

/* ── Chapters: the day, from Fajr to Isha ─────────── */
.day { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chapter { display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 0.8fr); gap: 0 48px; padding: 76px 0; border-top: 1px solid var(--line); align-items: center; }
.chapter:first-of-type { border-top: 0; }
.chapter .rail { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.chapter .rail .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent); }
.chapter .rail .stem { flex: 1; width: 2px; background: linear-gradient(var(--c), transparent); border-radius: 1px; }
.chapter .rail .t { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); letter-spacing: 0.24em; font-size: 12px; color: var(--muted); }
.chapter .text .when { font-family: var(--display); font-size: 13px; letter-spacing: 0.22em; color: var(--c-ink, var(--muted)); }
.chapter h3 { font-size: clamp(30px, 3.6vw, 46px); line-height: 1.08; margin-top: 10px; }
.chapter .text > p { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 32em; }
.chapter ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.chapter li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 16px; }
.chapter li::before { content: ''; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--c); }
.chapter li b { font-weight: 600; }
.chapter.flip .text { order: 3; }
.chapter.flip figure { order: 2; }
.chapter .quote { margin-top: 26px; padding: 18px 20px; border-radius: 16px; background: var(--bg); }
.chapter .quote .ar { font-size: 26px; line-height: 2; text-align: right; display: block; }
.chapter .quote p { font-size: 15px; color: var(--muted); margin-top: 4px; }
.steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 22px; }
.steps span { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 4px 11px; }
.steps i { width: 12px; height: 1px; background: var(--muted); }
.steps small { width: 100%; color: var(--muted); font-size: 13px; }

/* An app screen inside the Khalis arch */
.window { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Screens sit in a plain phone: a dark bezel, rounded corners and the island. The screens are the app in its light theme with the status bar cropped off, so the strip under the island keeps the app's own sandstone. */
.device { position: relative; width: min(100%, 320px); padding: 10px; border-radius: 48px; background: #1f1d1a; box-shadow: 0 0 0 1px rgba(36, 33, 28, 0.12), 0 30px 60px -30px rgba(36, 33, 28, 0.5); }
.device::before { content: ''; position: absolute; top: 20px; left: 50%; width: 30%; height: 22px; transform: translateX(-50%); border-radius: 999px; background: #1f1d1a; z-index: 1; }
.device .screen { border-radius: 38px; overflow: hidden; background: #efe9df; padding-top: 44px; }
.device img { display: block; width: 100%; height: auto; }
.window figcaption { font-size: 13px; color: var(--muted); text-align: center; max-width: 280px; }
@media (max-width: 920px) {
  .chapter { grid-template-columns: 34px minmax(0, 1fr); gap: 28px 18px; padding: 56px 0; }
  .chapter figure, .chapter.flip figure { grid-column: 2; order: 3; }
  .chapter.flip .text { order: 2; }
  .chapter .rail { grid-row: 1 / span 2; }
  .chapter .rail .t { display: none; }
}

/* Also inside */
.more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 8px; }
.more div { padding: 22px 22px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.more b { display: block; font-weight: 600; }
.more span { display: block; margin-top: 6px; font-size: 15px; color: var(--muted); }
.more div.wide { grid-column: span 2; background: var(--brass-soft); }
@media (max-width: 920px) { .more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .more { grid-template-columns: 1fr; } .more div.wide { grid-column: auto; } }

/* ── Privacy ──────────────────────────────────────── */
.privacy .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.privacy h2 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.04; margin-top: 14px; }
.privacy .lead { margin-top: 20px; font-size: 18px; color: var(--muted); }
.facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.facts li { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.facts b { font-family: var(--display); font-weight: 400; letter-spacing: 0.1em; font-size: 14px; padding-top: 3px; }
.facts p { color: var(--muted); }
.facts p strong { color: var(--ink); font-weight: 500; }
@media (max-width: 920px) { .privacy .wrap { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .facts li { grid-template-columns: 1fr; gap: 6px; } }

/* ── Questions ────────────────────────────────────── */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: 19px; font-weight: 500; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 0.25s; }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details > div { padding: 0 0 24px; color: var(--muted); max-width: 44em; display: grid; gap: 12px; }

/* ── Sources ──────────────────────────────────────── */
.sources { columns: 2; column-gap: 48px; margin-top: 10px; }
.sources p { break-inside: avoid; margin-bottom: 16px; font-size: 15px; color: var(--muted); }
.sources p b { color: var(--ink); font-weight: 600; display: block; }
@media (max-width: 720px) { .sources { columns: 1; } }

/* ── Footer ───────────────────────────────────────── */
.foot-band { background: var(--deep); color: var(--on-deep); padding: 80px 0 40px; }
.foot-band .wrap { display: grid; gap: 40px; }
.foot-band .sign { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 28px; }
.foot-band .wordmark { color: var(--on-deep); }
.foot-band .wordmark svg { height: 54px; }
.foot-band .wordmark .en { font-size: 36px; }
.foot-band .tag { font-family: var(--display); letter-spacing: 0.24em; font-size: 13px; opacity: 0.8; margin-top: 14px; }
.foot-band .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; font-size: 13px; opacity: 0.75; border-top: 1px solid rgba(246, 241, 230, 0.2); padding-top: 22px; }
.foot-band .soon { background: rgba(246, 241, 230, 0.08); border: 1px solid rgba(246, 241, 230, 0.18); }
.sitemap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; border-top: 1px solid rgba(246, 241, 230, 0.2); padding-top: 32px; }
.sitemap .label { color: var(--on-deep); opacity: 0.65; }
.sitemap ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.sitemap a { text-decoration: none; font-size: 15px; opacity: 0.9; display: inline-flex; align-items: center; gap: 10px; }
.sitemap a:hover { opacity: 1; text-decoration: underline; text-decoration-color: var(--sunrise); text-underline-offset: 5px; }
.sitemap a[aria-current='page'] { opacity: 1; color: var(--sunrise); }
.sitemap .inside a::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px rgba(246, 241, 230, 0.35); }
.sitemap .inside ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 24px; }
.sitemap .inside { grid-column: span 2; }
@media (max-width: 720px) { .sitemap { grid-template-columns: minmax(0, 1fr); } .sitemap .inside { grid-column: auto; } }

/* ══ Shared parts of the inner pages ══════════════════════════════════════════════════════════
   Every inner page sets its own hour of the day as --c on <body> (Fajr for prayer times, Sunrise for
   the Quran, and so on), and these parts take their colour from it. */

.page-hero { padding: 52px 0 84px; }
.page-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 56px; align-items: center; }
.page-hero.plain .wrap { grid-template-columns: minmax(0, 1fr); }
.page-hero.plain { padding-bottom: 56px; }
.page-hero h1 { font-size: clamp(40px, 5.8vw, 78px); line-height: 1.03; }
.page-hero h1 em, h2 em { font-style: normal; color: var(--em); }
.page-hero .lede { margin-top: 24px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); max-width: 34em; }
.page-hero .lede strong { color: var(--ink); font-weight: 500; }
/* A row of plain counts under the headline: "114 surahs · 6 reciters · offline" */
.glance { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 30px; }
.glance li { display: grid; gap: 2px; }
.glance b { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.glance span { font-size: 13.5px; color: var(--muted); }
.page-hero .window .device { width: min(100%, 300px); }
/* On a phone, four counts sit as an even two by two rather than three and a lone one */
@media (max-width: 560px) { .page-hero .glance:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } }
@media (max-width: 920px) {
  .page-hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .page-hero { padding: 32px 0 64px; }
}

/* Where to go on a long inner page: a row of chips under the counts */
.jump-label { display: block; margin-top: 34px; }
.jump { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.jump a { display: inline-block; border: 1px solid var(--line); background: var(--sheet); border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 0.2s; }
.jump a:hover { border-color: var(--gold); }

/* A band of the page on the lighter sheet, ruled off from its neighbours */
.band { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band + .band { border-top: 0; }
.deep-band { background: var(--deep); color: var(--on-deep); }
.deep-band .label { color: var(--on-deep); opacity: 0.7; }
.deep-band .section-head p { color: var(--on-deep); opacity: 0.85; }

/* Text beside a picture, either way round */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 40px 64px; align-items: center; }
.split.flip > :first-child { order: 2; }
.split .text > p { margin-top: 16px; font-size: 18px; color: var(--muted); max-width: 32em; }
.split h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; margin-top: 12px; }
.split h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin-top: 10px; }
@media (max-width: 920px) { .split { grid-template-columns: minmax(0, 1fr); } .split.flip > :first-child { order: 0; } }

/* A list of points, each with a ring in the page's colour (the same as the home page chapters) */
.points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; font-size: 16px; }
.points li::before { content: ''; width: 9px; height: 9px; margin-top: 8px; border-radius: 50%; border: 2px solid var(--c, var(--brand)); }
.points li b { font-weight: 600; }

/* Ruled rows of a term and what it means, as in the privacy facts */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.rows > li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.rows > li > b:first-child { font-family: var(--display); font-weight: 400; letter-spacing: 0.1em; font-size: 14px; padding-top: 3px; }
.rows > li p { color: var(--muted); }
.rows > li p + p { margin-top: 8px; }
.rows > li p strong { color: var(--ink); font-weight: 500; }
@media (max-width: 560px) { .rows > li { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* A quiet aside in brass */
.note { border-left: 2px solid var(--gold); background: var(--brass-soft); border-radius: 0 14px 14px 0; padding: 16px 20px; font-size: 15.5px; }
.note b { font-weight: 600; }
.note p + p { margin-top: 8px; }

/* Data tables scroll inside their own box on a phone, never the page */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 16px; background: var(--sheet); }
table.data { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
table.data caption { text-align: left; padding: 14px 18px 4px; font-size: 13px; color: var(--muted); caption-side: top; }
table.data th, table.data td { text-align: left; padding: 11px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data thead th { font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; }

/* Form parts for the small tools on some pages (Zakat, fasting, method comparison) */
.tool { background: var(--sheet); border: 1px solid var(--line); border-radius: 26px; padding: 24px; box-shadow: 0 30px 60px -44px rgba(36, 33, 28, 0.4); }
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-size: 13.5px; font-weight: 500; color: var(--muted); }
.field input, .field select { font: 500 16px var(--body); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; width: 100%; min-width: 0; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.field small { font-size: 12.5px; color: var(--muted); }
.choice { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.choice label { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-block; border: 1px solid var(--line); background: var(--bg); border-radius: 999px; padding: 7px 14px; font-size: 14.5px; font-weight: 500; }
.choice input:checked + span { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.choice input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 15px var(--body); border-radius: 999px; padding: 10px 18px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn.solid { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
/* Anything you can type in or pick takes a brass edge under the pointer */
.btn:hover, .choice label:hover span, :where(input:not([type='radio'], [type='checkbox']), select, textarea):hover { border-color: var(--gold); }

/* Long reading: privacy, credits, help */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 16px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; margin-top: 56px; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-family: var(--body); font-weight: 600; font-size: 19px; letter-spacing: 0; margin-top: 30px; scroll-margin-top: 96px; }
.prose p, .prose li { color: var(--muted); }
.prose strong { color: var(--ink); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: 8px; }
.prose .note p, .prose .note li { color: var(--ink); }
/* A contents list beside long pages, sticky on wide screens */
.with-toc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; }
.toc { position: sticky; top: 100px; font-size: 14.5px; }
.toc ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; border-left: 1px solid var(--line); }
.toc a { display: block; padding-left: 14px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); }
.toc a:hover { color: var(--ink); border-left-color: var(--gold); }
@media (max-width: 920px) { .with-toc { grid-template-columns: minmax(0, 1fr); gap: 32px; } .toc { position: static; } }

/* The end of every inner page: the part of the day before and after this one */
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 72px; padding-bottom: 96px; }
.pager a { display: grid; gap: 4px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--sheet); text-decoration: none; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; }
.pager a::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.pager a:hover { border-color: var(--gold); transform: translateY(-2px); }
.pager .dir { font-size: 13px; color: var(--muted); }
.pager b { font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: 0.03em; }
.pager .when { font-family: var(--display); font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }
.pager .next { text-align: right; grid-column: 2; }
.pager .next::before { left: auto; right: 0; }
@media (max-width: 560px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager .next { grid-column: auto; } }
@media (prefers-reduced-motion: reduce) { .pager a:hover { transform: none; } }

/* Gentle entrance, only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .js .rise.in { opacity: 1; transform: none; }
}