/*
 * Islam Questions
 * Deep green and gold on warm sand. Latin text in Source Serif 4, Arabic in
 * Amiri, the Quran in Amiri Quran; the running text of the Arabic pages in
 * Noto Naskh Arabic. Written for phones first; wider screens add columns at
 * 40, 48, 62, 72 and 75 rem. Inline directions are written as logical
 * properties (margin-inline, inset-inline, text-align: start), so the Arabic
 * pages (dir="rtl") mirror the layout; the few exceptions are at the end.
 */

/* ===== Fonts ===== */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("type/serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("type/serif-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("type/serif-latin-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("type/serif-latin-ext-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("type/amiri-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("type/amiri-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("type/amiri-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("type/naskh-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri Quran";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("type/amiri-quran.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

/* ===== Palette, type, measures ===== */

:root {
  --sand: #faf6ec;
  --cream: #fffdf7;
  --dune: #f3ecdb;
  --line: #e1d5b6;
  --fg: #1e1b16;
  --fg-soft: #5d5445;
  --green: #0b5a44;
  --green-press: #074231;
  --green-deep: #073d2e;
  --green-night: #052c21;
  --gold: #b48a2f;
  --gold-ink: #8a6417;
  --gold-pale: #dcbc6e;
  --on-green: #f6efdc;
  --on-green-soft: #c9c0a6;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --naskh: "Amiri", "Amiri Quran", "Noto Naskh Arabic", "Traditional Arabic", "Geeza Pro", serif;
  --mushaf: "Amiri Quran", "Amiri", "Noto Naskh Arabic", "Traditional Arabic", serif;
  /* Running text of the Arabic pages; Latin words in it fall through to Source Serif 4. */
  --arabic-text: "Noto Naskh Arabic", "Source Serif 4", "Amiri", "Geeza Pro", "Traditional Arabic", serif;

  --read: 40rem;
  --max: 76rem;
  --edge: clamp(1rem, 4vw, 2.25rem);

  --ico-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23b48a2f' d='M10 0L12.93 2.93L17.07 2.93L17.07 7.07L20 10L17.07 12.93L17.07 17.07L12.93 17.07L10 20L7.07 17.07L2.93 17.07L2.93 12.93L0 10L2.93 7.07L2.93 2.93L7.07 2.93Z'/%3E%3C/svg%3E");

  color-scheme: light;
}

/* ===== Base ===== */

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sand);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-variant-numeric: lining-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

main:focus {
  outline: none;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

p,
li,
blockquote,
figcaption {
  text-wrap: pretty;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  color: var(--green-deep);
  text-wrap: balance;
}

h1 {
  font-size: 1.85rem;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--fg);
}

h2 {
  font-size: 1.32rem;
  line-height: 1.25;
}

h3 {
  font-size: 1.1rem;
  line-height: 1.35;
}

h4 {
  font-size: 1rem;
  line-height: 1.4;
}

strong,
b {
  font-weight: 650;
}

a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--gold) 70%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--green-press);
  text-decoration-color: var(--green-press);
}

:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection {
  background: color-mix(in srgb, var(--gold) 30%, transparent);
}

input,
button {
  font: inherit;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

@media (min-width: 40rem) {
  body {
    font-size: 1.125rem;
    line-height: 1.65;
  }

  h1 {
    font-size: 2.3rem;
    line-height: 1.15;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.18rem;
  }
}

/* Arabic anywhere on the page. */
[lang="ar"] {
  font-family: var(--naskh);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  word-spacing: 0.04em;
}

/* Arabic words within Latin text are set a little larger to match the Latin x-height. */
:not(:lang(ar)) > span[lang="ar"] {
  font-size: 1.2em;
  line-height: 1;
}

.honorific {
  font-size: 1.12em;
  line-height: 1;
  white-space: nowrap;
}

h1 .honorific,
h2 .honorific,
h3 .honorific {
  font-weight: 400;
}

/* ===== Layout helpers ===== */

.shell,
.narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--edge);
}

.shell {
  max-width: calc(var(--max) + 2 * var(--edge));
}

.narrow {
  max-width: calc(var(--read) + 2 * var(--edge));
}

.pagepad {
  padding-block: 2rem 4rem;
}

@media (min-width: 48rem) {
  .pagepad {
    padding-block: 2.75rem 5rem;
  }
}

.sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.skip {
  position: absolute;
  z-index: 100;
  top: 0.5rem;
  inset-inline-start: var(--edge);
  padding: 0.65rem 0.9rem;
  background: var(--cream);
  color: var(--green-deep);
  border: 2px solid var(--gold);
  font-size: 1rem;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.pagenote {
  margin-top: 1rem;
}

.pagenote--gap {
  margin-bottom: 1.5rem;
}

/* A heading with a gold rule under it. */
.ruled {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
}

/* A section heading with a small gold star before it. */
.sechead {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.sechead::before {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  background: var(--ico-star) center / contain no-repeat;
}

/* Beside an English title on a French or German page. */
.inlang {
  display: inline-block;
  margin-inline-start: 0.4em;
  padding: 0 0.4em;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 0.72em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg-soft);
  vertical-align: 0.12em;
  white-space: nowrap;
}

.callout {
  padding: 0.85rem 1rem;
  background: var(--dune);
  border-inline-start: 3px solid var(--gold);
  font-size: 0.98rem;
  line-height: 1.5;
}

/* ===== Ornaments ===== */

/* The band of linked eight-pointed stars under the header and above the footer. */
.girih {
  height: 1.25rem;
  background-color: var(--green-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%23d1ad5c' stroke-width='1'%3E%3Cpath d='M20 2.40L22.23 4.63L25.37 4.63L25.37 7.77L27.60 10L25.37 12.23L25.37 15.37L22.23 15.37L20 17.60L17.77 15.37L14.63 15.37L14.63 12.23L12.40 10L14.63 7.77L14.63 4.63L17.77 4.63Z'/%3E%3Cpath d='M0 7.2L2.8 10 0 12.8M40 7.2 37.2 10 40 12.8M2.8 10h9.6M27.6 10h9.6'/%3E%3C/g%3E%3Cpath fill='%23d1ad5c' d='M20 6.80L20.55 8.67L22.26 7.74L21.33 9.45L23.20 10L21.33 10.55L22.26 12.26L20.55 11.33L20 13.20L19.45 11.33L17.74 12.26L18.67 10.55L16.80 10L18.67 9.45L17.74 7.74L19.45 8.67Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 2.5rem 1.25rem;
  border-block: 1px solid var(--gold);
}

/* The emblem: a gold eight-pointed star around the word raḥma. */
.emblem {
  position: relative;
  flex: none;
  display: inline-block;
  width: 3rem;
  height: 3rem;
}

.emblem__art {
  width: 100%;
  height: 100%;
}

.emblem__star {
  fill: var(--gold);
}

.emblem__core {
  fill: var(--green-deep);
}

.emblem__ring {
  fill: none;
  stroke: var(--gold-pale);
  stroke-width: 1.2;
  opacity: 0.7;
}

.emblem__word {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-top: 0.12em;
  font-family: var(--naskh);
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-pale);
}

.emblem--large {
  width: 3.75rem;
  height: 3.75rem;
}

.abouthead .emblem .emblem__word {
  font-size: 1rem;
}

/* A thin gold rule with a star in the middle. */
.starrule {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--gold);
}

.starrule::before,
.starrule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
}

.starrule svg {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
}

/* ===== Header ===== */

.masthead {
  position: relative;
  z-index: 20;
}

.masthead ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.masthead__strip {
  background: var(--green-night);
  color: var(--on-green-soft);
  font-size: 0.8rem;
  line-height: 1.3;
}

.masthead__stripin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.1rem;
}

.hijri {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  white-space: nowrap;
}

.hijri[hidden] {
  display: none;
}

.hijri__ar {
  display: none;
  font-size: 1.12rem;
  line-height: 1;
  color: var(--gold-pale);
}

.hijri__here {
  font-variant-numeric: lining-nums;
}

.langpick {
  margin-inline-start: auto;
}

.langpick__list {
  display: flex;
  align-items: center;
}

.langpick__list li + li::before {
  content: "·";
  padding-inline: 0.35rem;
  color: color-mix(in srgb, var(--gold-pale) 60%, transparent);
}

.langpick a,
.langpick__on {
  display: inline-block;
  padding-block: 0.4rem;
}

.langpick a {
  color: var(--on-green);
  text-decoration: none;
}

.langpick a:hover {
  color: var(--gold-pale);
  text-decoration: underline;
  text-decoration-color: var(--gold-pale);
}

.langpick__on {
  color: var(--gold-pale);
  font-weight: 600;
}

.masthead__bar {
  background:
    radial-gradient(ellipse at 15% -40%, color-mix(in srgb, var(--green) 85%, var(--gold) 15%), transparent 60%),
    var(--green-deep);
  color: var(--on-green);
}

.masthead__barin {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 3.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-inline-end: auto;
  padding-block: 0.6rem;
  color: var(--on-green);
  text-decoration: none;
  white-space: nowrap;
}

.logo:hover {
  color: #fff;
}

.logo__name {
  font-size: 1.22rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

.masthead .logo .emblem {
  width: 2.6rem;
  height: 2.6rem;
}

.masthead .logo .emblem__word {
  font-size: 0.7rem;
}

/* Wide navigation: hidden on phones and tablets. */
.mainnav,
.finder--bar {
  display: none;
}

.mainnav__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pulldown__toggle,
.mainnav__link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding-inline: 0.7rem;
  color: var(--on-green);
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
}

.pulldown__toggle {
  list-style: none;
}

.pulldown__toggle::-webkit-details-marker {
  display: none;
}

.pulldown__toggle::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 1.5px solid var(--gold-pale);
  border-bottom: 1.5px solid var(--gold-pale);
  transform: translateY(-0.12rem) rotate(45deg);
}

.pulldown[open] > .pulldown__toggle::after {
  transform: translateY(0.1rem) rotate(225deg);
}

.pulldown__toggle:hover,
.pulldown[open] > .pulldown__toggle,
.mainnav__link:hover {
  color: var(--gold-pale);
}

.mainnav__link[aria-current="page"] {
  color: var(--gold-pale);
  text-decoration: underline;
  text-decoration-color: var(--gold-pale);
  text-underline-offset: 0.35em;
}

/* Menu panels drop over the star band, full width. */
.pulldown__panel,
.drawer__panel {
  position: absolute;
  inset-inline: 0;
  top: calc(100% - 1.25rem);
  background: var(--cream);
  color: var(--fg);
  border-top: 2px solid var(--gold);
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.35);
}

.pulldown__panel {
  padding: 1.25rem max(var(--edge), calc((100% - var(--max)) / 2)) 1.4rem;
}

.pulldown__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2rem;
}

.pulldown__all {
  margin-top: 0.9rem;
  font-size: 0.95rem;
}

.catlink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  color: var(--fg);
  text-decoration: none;
}

.catlink__name {
  font-size: 1rem;
  line-height: 1.35;
}

.catlink__ar {
  flex: none;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--gold-ink);
}

.catlink:hover .catlink__name {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.catlink[aria-current] .catlink__name {
  color: var(--green);
  font-weight: 600;
}

/* Phones and tablets: a search link and a menu. */
.mobilenav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-inline-end: -0.5rem;
}

.mobilenav__search {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--on-green);
}

.mobilenav__search:hover {
  color: var(--gold-pale);
}

.mobilenav__search .lens {
  width: 1.3rem;
  height: 1.3rem;
}

.drawer__toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  color: var(--on-green);
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.drawer__toggle::-webkit-details-marker {
  display: none;
}

/* Three bars. */
.drawer__toggle::before {
  content: "";
  width: 1.1rem;
  height: 0.8rem;
  background:
    linear-gradient(currentColor, currentColor) top / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) bottom / 100% 1.5px no-repeat;
}

.drawer[open] > .drawer__toggle,
.drawer__toggle:hover {
  color: var(--gold-pale);
}

.drawer__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.drawer__panel {
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
  padding: 0.25rem var(--edge) 1rem;
}

.drawer__cats .catlink {
  padding-block: 0.7rem;
}

.drawer__more {
  margin-top: 0.4rem;
}

.drawer__more a {
  display: block;
  padding-block: 0.65rem;
  color: var(--green);
  font-size: 1rem;
}

@media (min-width: 30rem) {
  .masthead__strip {
    font-size: 0.85rem;
  }

  .hijri__ar {
    display: inline;
  }

  .masthead__barin {
    min-height: 4.25rem;
  }

  .logo__name {
    font-size: 1.4rem;
  }

  .masthead .logo .emblem {
    width: 3rem;
    height: 3rem;
  }

  .masthead .logo .emblem__word {
    font-size: 1.2em;
  }

  .drawer__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
  }
}

@media (min-width: 62rem) {
  .masthead__barin {
    min-height: 4.75rem;
  }

  .logo__name {
    font-size: 1.55rem;
  }

  .mainnav {
    display: block;
  }

  .mobilenav {
    display: none;
  }

  .masthead__barin .finder--bar {
    display: block;
    flex: none;
    width: 17rem;
    margin-inline-start: 0.75rem;
  }
}

@media (min-width: 75rem) {
  .masthead__barin .finder--bar {
    width: 21rem;
  }
}

/* ===== Search box ===== */

.finder {
  width: 100%;
}

.finder__box {
  display: flex;
  align-items: stretch;
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 2px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.finder__box:focus-within {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent);
}

.finder__input {
  flex: 1 1 auto;
  min-width: 0;
  padding-block: 0.6rem;
  padding-inline: 0.9rem 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-size: 1rem;
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
}

.finder__input::placeholder {
  color: var(--fg-soft);
  opacity: 1;
}

.finder__input:focus {
  outline: none;
}

.finder__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.finder__go {
  flex: none;
  display: grid;
  place-items: center;
  padding: 0 1rem;
  border: 0;
  border-radius: 0;
  border-start-end-radius: 1px;
  border-end-end-radius: 1px;
  background: var(--green);
  color: var(--on-green);
  cursor: pointer;
}

.finder__go:hover {
  background: var(--green-press);
}

.finder__go:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -4px;
}

.finder__go .lens {
  width: 1.15rem;
  height: 1.15rem;
}

.finder--bar .finder__input {
  padding-block: 0.45rem;
  padding-inline: 0.75rem 0;
  font-size: 0.95rem;
}

.finder--bar .finder__go {
  padding-inline: 0.8rem;
}

.finder--hero .finder__box {
  border-color: var(--gold);
}

.finder--hero .finder__input {
  padding-block: 0.85rem;
  padding-inline: 0.85rem 0;
  font-size: 1rem;
}

.finder--hero .finder__go {
  padding-inline: 0.95rem;
  background: var(--gold);
  color: var(--green-night);
}

.finder--hero .finder__go:hover {
  background: var(--gold-pale);
}

.finder--hero .finder__go .lens {
  width: 1.35rem;
  height: 1.35rem;
}

@media (min-width: 30rem) {
  .finder--hero .finder__input {
    padding-block: 0.95rem;
    padding-inline: 1.1rem 0;
    font-size: 1.1rem;
  }

  .finder--hero .finder__go {
    padding-inline: 1.25rem;
  }
}

/* ===== Footer ===== */

.colophon {
  margin-top: auto;
  color: var(--on-green-soft);
}

.colophon__body {
  padding-block: 2.5rem 2rem;
  background: var(--green-night);
}

.colophon ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.colophon a {
  color: var(--on-green);
  text-decoration: none;
}

.colophon a:hover {
  color: var(--gold-pale);
  text-decoration: underline;
  text-decoration-color: var(--gold-pale);
}

.colophon :focus-visible {
  outline-color: var(--gold-pale);
}

.colophon__grid {
  display: grid;
  gap: 2rem;
}

.logo--foot {
  font-size: 1.3rem;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
}

.logo--foot .logo__name {
  font-size: 1.3rem;
  line-height: 1.3;
  letter-spacing: 0;
}

.colophon__line {
  max-width: 24rem;
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.colophon__title {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-pale);
}

.colophon .colophon__title a {
  display: inline-block;
  padding-block: 0.3rem;
  color: var(--gold-pale);
}

.colophon__links--two {
  columns: 2;
  column-gap: 1rem;
}

.colophon__links li {
  break-inside: avoid;
  font-size: 0.92rem;
  line-height: 1.35;
}

.colophon__links--two li {
  font-size: 0.86rem;
}

.colophon__links a {
  display: inline-block;
  padding-block: 0.3rem;
}

.colophon .colophon__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.9rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}

.colophon__langs li {
  font-size: 0.92rem;
  line-height: 1.35;
}

.colophon__langs a,
.colophon__langs span {
  display: inline-block;
  padding-block: 0.3rem;
}

.colophon__langs span {
  color: var(--gold-pale);
}

.colophon__base {
  margin-top: 2.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
  font-size: 0.82rem;
  line-height: 1.55;
}

.colophon__copy {
  margin-top: 0.6rem;
}

@media (min-width: 30rem) {
  .colophon__links--two {
    column-gap: 1.5rem;
  }

  .colophon__links--two li {
    font-size: 0.92rem;
  }
}

@media (min-width: 48rem) {
  .colophon__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
    gap: 2.5rem;
  }
}

/* ===== Lists of answers ===== */

.qlist__rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.qlist__row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--line);
}

.qlist__text {
  min-width: 0;
}

.qlist__link {
  font-size: 1.04rem;
  line-height: 1.4;
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

.qlist__link:hover {
  text-decoration-color: var(--green-press);
}

/* Numbers set in small eight-pointed stars. */
.qlist__n {
  flex: none;
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f3ecdb' stroke='%23b48a2f' stroke-width='.9' d='M10 0.60L12.75 3.35L16.65 3.35L16.65 7.25L19.40 10L16.65 12.75L16.65 16.65L12.75 16.65L10 19.40L7.25 16.65L3.35 16.65L3.35 12.75L0.60 10L3.35 7.25L3.35 3.35L7.25 3.35Z'/%3E%3C/svg%3E") center / contain no-repeat;
  color: var(--green-deep);
  font-size: 0.78rem;
  font-weight: 650;
  font-variant-numeric: lining-nums tabular-nums;
}

.qlist__topic {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.85rem;
  color: var(--gold-ink);
}

.qlist__desc {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.qlist--detail .qlist__row {
  padding-block: 0.9rem;
}

.qlist--detail .qlist__link {
  font-size: 1.12rem;
  font-weight: 550;
}

/* "Show more" rows that open the rest of a list. */
.reveal__toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line);
  color: var(--green);
  font-size: 0.95rem;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reveal__toggle::-webkit-details-marker {
  display: none;
}

.reveal[open] > .reveal__toggle {
  display: none;
}

/* The small gold chevron on collapsible rows. */
.reveal__toggle::after,
.faqs__q::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  margin-inline: auto 0.25rem;
  border-right: 1.5px solid var(--gold-ink);
  border-bottom: 1.5px solid var(--gold-ink);
  transform: translateY(-0.15rem) rotate(45deg);
  transition: transform 0.18s ease;
}

/* ===== Topic cards ===== */

.topiccards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.topiccard {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.1rem;
  height: 100%;
  padding: 0.5rem 0.7rem 0.6rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.topiccard:hover {
  background: #fff;
  border-color: var(--green);
  border-top-color: var(--green);
  color: var(--fg);
}

.topiccard__text {
  min-width: 0;
}

.topiccard__name {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--green-deep);
}

.topiccard:hover .topiccard__name {
  color: var(--green);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.topiccard__count {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8rem;
  color: var(--fg-soft);
}

.topiccard__ar {
  flex: none;
  font-size: 1.2rem;
  line-height: 1.5;
  text-align: end;
  color: var(--gold-ink);
}

@media (min-width: 40rem) {
  .topiccards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
    gap: 0.75rem;
  }

  .topiccard {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding-block: 0.85rem;
    padding-inline: 1.1rem 1rem;
  }

  .topiccard__name {
    font-size: 1.05rem;
  }

  .topiccard__count {
    margin-top: 0.2rem;
    font-size: 0.85rem;
  }

  .topiccard__ar {
    font-size: 1.55rem;
    line-height: 1.3;
  }
}

/* ===== Verse card ===== */

.ayahcard {
  text-align: center;
}

.ayahcard__ar {
  font-family: var(--mushaf);
  font-size: 1.6rem;
  line-height: 2.05;
  color: var(--green-deep);
  text-wrap: balance;
}

.ayahcard__orn {
  padding-inline: 0.15em;
  color: var(--gold);
}

.ayahcard__tr {
  margin-top: 0.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
}

.ayahcard__ref {
  margin-top: 0.5rem;
  font-size: 0.88rem;
}

.ayahcard__ref a {
  display: inline-block;
  padding-block: 0.5rem;
  color: var(--gold-ink);
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

@media (min-width: 40rem) {
  .ayahcard__ar {
    font-size: 1.85rem;
    line-height: 2.15;
  }

  .ayahcard__tr {
    font-size: 1.08rem;
  }

  .ayahcard__ref a {
    display: inline;
    padding: 0;
  }
}

/* ===== Pictures ===== */

.painting__frame {
  overflow: hidden;
  background: var(--dune);
}

.painting__frame img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Framed in a pointed arch with a gold edge. */
.painting--arch .painting__frame {
  --arch: polygon(0% 100%, 0% 28.8%, 0.5% 25.4%, 2% 22.3%, 4.4% 19.5%, 7.5% 16.9%, 11.1% 14.6%, 15.3% 12.4%, 19.8% 10.5%, 24.4% 8.7%, 29.2% 7.1%, 34% 5.6%, 38.5% 4.1%, 42.8% 2.7%, 46.7% 1.4%, 50% 0%, 53.3% 1.4%, 57.2% 2.7%, 61.5% 4.1%, 66% 5.6%, 70.8% 7.1%, 75.6% 8.7%, 80.2% 10.5%, 84.7% 12.4%, 88.9% 14.6%, 92.5% 16.9%, 95.6% 19.5%, 98% 22.3%, 99.5% 25.4%, 100% 28.8%, 100% 100%);
  padding: 3px;
  background: var(--gold);
  clip-path: var(--arch);
}

.painting--arch img {
  clip-path: var(--arch);
}

.painting__credit {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--fg-soft);
}

.painting__credit a {
  color: var(--fg-soft);
  text-decoration-color: var(--line);
}

.painting__credit a:hover {
  color: var(--green);
  text-decoration-color: var(--green);
}

/* ===== Home ===== */

.welcome {
  background-color: var(--green-deep);
  background-image:
    radial-gradient(ellipse at 50% 0%, transparent 0%, var(--green-deep) 78%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23d1ad5c' stroke-width='1' opacity='.22'%3E%3Cpath d='M40 18L46.44 24.44L55.56 24.44L55.56 33.56L62 40L55.56 46.44L55.56 55.56L46.44 55.56L40 62L33.56 55.56L24.44 55.56L24.44 46.44L18 40L24.44 33.56L24.44 24.44L33.56 24.44Z'/%3E%3Cpath d='M40 28L42.85 33.13L48.49 31.51L46.87 37.15L52 40L46.87 42.85L48.49 48.49L42.85 46.87L40 52L37.15 46.87L31.51 48.49L33.13 42.85L28 40L33.13 37.15L31.51 31.51L37.15 33.13Z'/%3E%3Cpath d='M0 0 19.4 19.4M80 0 60.6 19.4M0 80 19.4 60.6M80 80 60.6 60.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 5rem 5rem;
  color: var(--on-green);
  text-align: center;
}

.welcome__in {
  max-width: calc(46rem + 2 * var(--edge));
  padding-block: 1.5rem 1.75rem;
}

.welcome__basmala {
  font-family: var(--mushaf);
  font-size: 1.6rem;
  line-height: 1.6;
  color: var(--gold-pale);
}

.welcome__title {
  margin-top: 0.4rem;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--on-green);
}

.welcome .finder {
  max-width: 38rem;
  margin: 1.1rem auto 0;
}

.homebody {
  padding-block: 1.75rem 4rem;
}

.homebody__pending {
  margin-bottom: 2rem;
}

/* Phones: most asked, the verse, topics, featured. Wide screens: lists left, verse right, topics below. */
.homegrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "asked" "verse" "topics" "featured";
  gap: 2.25rem;
}

.homegrid__asked {
  grid-area: asked;
}

.homegrid__verse {
  grid-area: verse;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
}

.homegrid__topics {
  grid-area: topics;
}

.homegrid__featured {
  grid-area: featured;
}

.homegrid__asked .qlist,
.homegrid__featured .qlist {
  margin-top: 0.75rem;
}

.homegrid__topics .topiccards {
  margin-top: 1rem;
}

.homegrid__verse .ayahcard__ar {
  font-size: 1.45rem;
  line-height: 2.05;
}

.homegrid__painting {
  display: none;
  margin-top: 1.5rem;
}

.homegrid__painting img {
  aspect-ratio: 1.5;
}

@media (min-width: 40rem) {
  .welcome__in {
    padding-block: 2.5rem 2.75rem;
  }

  .welcome__basmala {
    font-size: 2rem;
  }

  .welcome__title {
    font-size: 2.4rem;
  }

  .welcome .finder {
    margin-top: 1.6rem;
  }

  .homebody {
    padding-top: 2.25rem;
  }

  .homegrid {
    gap: 2.75rem;
  }

  .homegrid__verse .ayahcard__ar {
    font-size: 1.6rem;
  }

  .homegrid__painting {
    display: block;
  }
}

@media (min-width: 62rem) {
  .homegrid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
    grid-template-areas: "asked verse" "featured verse" "topics topics";
    grid-template-rows: auto 1fr auto;
    align-items: start;
    column-gap: 4rem;
    row-gap: 2.75rem;
  }

  .homegrid__verse {
    margin: 0;
  }
}

/* The mihrab: a panel with a pointed arch and a gold line inset along its edge. */
.homegrid__verse .mihrab {
  container-type: inline-size;
}

.mihrab__crown {
  position: relative;
}

.mihrab__arch {
  width: 100%;
  height: calc(0.22 * 100cqw);
  overflow: visible;
}

.mihrab__fill {
  fill: var(--cream);
}

.mihrab__edge,
.mihrab__line {
  fill: none;
  stroke-width: 1px;
}

.mihrab__edge {
  stroke: color-mix(in srgb, var(--gold) 60%, var(--line));
}

.mihrab__line {
  stroke: var(--gold);
}

.mihrab__title {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 62%;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}

.mihrab__star {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  margin: 0 auto 0.15rem;
  background: var(--ico-star) center / contain no-repeat;
}

.mihrab__surah {
  display: block;
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--gold-ink);
}

.mihrab__body {
  position: relative;
  margin-top: -1px;
  padding: 0.5rem 7cqw 7cqw;
  background: var(--cream);
  border: 1px solid color-mix(in srgb, var(--gold) 60%, var(--line));
  border-top: 0;
}

.mihrab__body::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 2.5cqw;
  left: calc(2.5cqw - 1px);
  right: calc(2.5cqw - 1px);
  border: 1px solid var(--gold);
  border-top: 0;
  pointer-events: none;
}

/* ===== Breadcrumb trail ===== */

.trail__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--fg-soft);
}

.trail__step {
  min-width: 0;
}

/* On phones the trail stops before the current page; its title follows as the H1. */
.trail__step--here {
  display: none;
}

.trail a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--green);
  text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
}

.trail__sep {
  padding-inline: 0.45rem;
  color: var(--gold-ink);
}

@media (min-width: 48rem) {
  .trail__list {
    margin-bottom: 1rem;
  }

  .trail__step--here {
    display: list-item;
  }

  .trail a {
    display: inline;
    padding: 0;
  }
}

/* ===== Answer page ===== */

.qa {
  max-width: calc(var(--read) + 2 * var(--edge));
}

.qa__side {
  display: none;
}

.qa__num {
  margin-top: 0.75rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold-ink);
}

.qbox {
  margin-top: 1.5rem;
  padding: 0.85rem 0.95rem 0.95rem;
  background: var(--cream);
  border: 1px solid var(--line);
}

.qbox + .qbox {
  margin-top: 1rem;
}

.qbox__label {
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
}

.qbox__text {
  font-size: 1.06rem;
  line-height: 1.55;
}

.qbox--summary {
  background: color-mix(in srgb, var(--green) 7%, var(--cream));
  border-color: color-mix(in srgb, var(--green) 30%, var(--line));
  border-inline-start: 4px solid var(--green);
}

.qbox--summary .qbox__text {
  line-height: 1.6;
}

.qa__verse {
  margin-top: 1.75rem;
  padding: 1.25rem 1rem 0.9rem;
  border-block: 1px solid var(--gold);
}

.reply {
  display: flow-root;
  margin-top: 2.25rem;
}

.reply__title {
  margin-bottom: 1.1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--gold);
  font-size: 1.4rem;
}

.formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 1.08rem;
}

.formula strong {
  color: var(--green-deep);
}

.formula .formula__ar {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--green);
}

.formula--open {
  margin-bottom: 1rem;
}

.formula--close {
  justify-content: center;
}

.reply__rule {
  clear: both;
  margin-block: 2.5rem 1.25rem;
}

.reply__picture {
  width: min(100%, 13rem);
  margin: 0.25rem auto 1.25rem;
}

.reply__picture--wide {
  width: 100%;
}

.faqs,
.seealso,
.refs {
  margin-top: 2.5rem;
}

.faqs__list {
  margin-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.faqs__item {
  border-bottom: 1px solid var(--line);
}

.faqs__q {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding-block: 0.55rem;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.faqs__q::-webkit-details-marker {
  display: none;
}

.faqs__item[open] > .faqs__q::after {
  transform: translateY(0.12rem) rotate(225deg);
}

.faqs__q h3 {
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg);
}

.faqs__q:hover h3 {
  color: var(--green);
}

.faqs__a {
  padding-bottom: 1rem;
  line-height: 1.6;
}

.seealso .qlist {
  margin-top: 0.6rem;
}

.refs__title {
  font-size: 1.2rem;
}

.refs__list {
  margin-top: 0.75rem;
  padding-inline-start: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.refs__list li + li {
  margin-top: 0.35rem;
}

.refs__list li::marker {
  color: var(--gold-ink);
}

.refs__list a {
  display: inline-block;
  padding-block: 0.4rem;
}

.piccredit {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--fg-soft);
}

.piccredit a {
  color: var(--fg-soft);
}

/* Side column: contents and more answers on the topic. */
.sidehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--gold);
  font-size: 0.95rem;
  line-height: 1.35;
}

.sidehead a {
  color: var(--green-deep);
  text-decoration: none;
}

.sidehead a:hover {
  text-decoration: underline;
}

.sidehead__ar {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
  color: var(--gold-ink);
}

.contents__list {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.contents__list li {
  padding-block: 0.3rem;
  padding-inline: 0.85rem 0;
  border-inline-start: 1px solid var(--line);
}

.contents__list a {
  color: var(--fg);
  text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

.contents__list a:hover {
  color: var(--green);
}

.contents + .sametopic {
  margin-top: 2rem;
}

.sametopic__list .qlist__link {
  font-size: 0.9rem;
}

.sametopic__list .qlist__row {
  padding-block: 0.45rem;
}

@media (min-width: 40rem) {
  .qbox {
    padding: 1rem 1.2rem 1.1rem;
  }

  .reply__title {
    font-size: 1.6rem;
  }

  .reply__picture {
    float: right;
    width: 14rem;
    margin-block: 0.35rem 1rem;
    margin-inline: 1.75rem 0;
  }

  [dir="rtl"] .reply__picture {
    float: left;
  }

  .reply__picture--wide {
    width: 18rem;
  }

  .faqs,
  .seealso,
  .refs {
    margin-top: 3rem;
  }

  .refs__list a {
    display: inline;
    padding: 0;
  }
}

@media (min-width: 72rem) {
  .qa {
    display: grid;
    grid-template-columns: minmax(0, var(--read)) minmax(15rem, 19rem);
    justify-content: center;
    column-gap: 4.5rem;
    max-width: calc(var(--max) + 2 * var(--edge));
  }

  .qa__side {
    display: block;
    padding-top: 3.2rem;
  }

  .qa__sidein {
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-inline-end: 0.25rem;
  }
}

/* ===== Answer text and long pages ===== */

.md > * + * {
  margin-top: 1.05em;
}

.md h2 {
  margin-top: 2.1em;
  scroll-margin-top: 1.5rem;
}

.md h3 {
  margin-top: 1.8em;
  scroll-margin-top: 1.5rem;
}

.md h2 + *,
.md h3 + * {
  margin-top: 0.6em;
}

.md ul,
.md ol {
  padding-inline-start: 1.4em;
}

.md li + li,
.md li > ul,
.md li > ol {
  margin-top: 0.45em;
}

.md ul > li::marker {
  color: var(--gold);
}

.md ol > li::marker {
  color: var(--gold-ink);
  font-size: 0.92em;
}

.md img {
  margin-block: 1.5em;
}

.md code {
  padding: 0.1em 0.3em;
  background: var(--dune);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* Quotations without a source line. */
.md blockquote {
  display: flow-root;
  margin-block: 1.6em;
  margin-inline: 1.25rem 0;
}

.md blockquote > * + * {
  margin-top: 0.6em;
}

/* Quotations with a source line: the Arabic, the translation, the source. */
.md .quoted {
  margin-inline: 0;
  padding: 1rem 1rem 0.9rem;
  background: var(--cream);
  border: 1px solid var(--line);
}

.md .quoted__src {
  font-size: 0.84em;
  line-height: 1.45;
  color: var(--gold-ink);
}

.md .quoted__src a {
  color: var(--gold-ink);
  text-decoration-color: color-mix(in srgb, var(--gold) 55%, transparent);
}

.md .quoted__src a:hover {
  color: var(--green);
}

.md .quoted__ar {
  font-size: 1.35em;
  line-height: 1.9;
}

/* The Quran: Amiri Quran, centred, framed, with a star in each corner. */
.md .quoted--quran {
  position: relative;
  padding: 1.3rem 1.05rem 1rem;
  border: 1px solid var(--gold);
  outline: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  outline-offset: -6px;
  background:
    var(--ico-star) top 0.6rem left 0.6rem / 0.7rem no-repeat,
    var(--ico-star) top 0.6rem right 0.6rem / 0.7rem no-repeat,
    var(--ico-star) bottom 0.6rem left 0.6rem / 0.7rem no-repeat,
    var(--ico-star) bottom 0.6rem right 0.6rem / 0.7rem no-repeat,
    var(--cream);
  text-align: center;
}

.md .quoted--quran .quoted__ar {
  font-family: var(--mushaf);
  font-size: 1.45em;
  line-height: 2;
  color: var(--green-deep);
  text-align: center;
}

.md .quoted--quran .quoted__ar::before {
  content: "\FD3F";
  margin-inline-end: 0.2em;
  color: var(--gold);
}

.md .quoted--quran .quoted__ar::after {
  content: "\FD3E";
  margin-inline-start: 0.2em;
  color: var(--gold);
}

.md .quoted--quran .quoted__tr {
  margin-top: 0.5em;
}

/* Hadith: a gold rule at the start, on a darker ground. */
.md .quoted--hadith {
  border: 0;
  border-inline-start: 3px solid var(--gold);
  background: var(--dune);
}

.md .quoted--hadith .quoted__ar {
  color: var(--fg);
  text-align: right;
}

@media (min-width: 40rem) {
  .md .quoted {
    padding: 1.1rem 1.25rem 1rem;
  }

  .md .quoted--quran {
    padding: 1.5rem 1.5rem 1.15rem;
  }

  .md .quoted--quran .quoted__ar {
    font-size: 1.35em;
    line-height: 1.9;
  }
}

/* Tables scroll sideways inside the column. */
.tablescroll {
  margin-block: 1.75em;
  margin-inline: calc(-1 * var(--edge));
  padding-inline: var(--edge);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--green);
}

.md table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.9em;
  line-height: 1.5;
  font-variant-numeric: lining-nums tabular-nums;
}

.md th,
.md td {
  padding-block: 0.65em;
  padding-inline: 0 1em;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}

.md thead th {
  border-bottom-color: var(--green);
  font-weight: 600;
  color: var(--green-deep);
}

.md tr > :last-child {
  padding-inline-end: 0;
}

@media (min-width: 40rem) {
  .tablescroll {
    margin-inline: 0;
    padding-inline: 0;
  }

  .md table {
    min-width: 0;
  }
}

/* Footnotes. */
.noteref {
  font-size: 0.68em;
  line-height: 0;
  vertical-align: 0.6em;
}

.noteref a {
  padding-inline: 0.12em;
  color: var(--gold-ink);
  font-weight: 600;
  text-decoration: none;
}

.noteref a:hover {
  text-decoration: underline;
}

.endnotes {
  position: relative;
  margin-top: 2.75rem;
  padding-top: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

.endnotes::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 5rem;
  border-top: 1px solid var(--gold);
}

.md .endnotes__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
}

.endnotes__list {
  margin-top: 0.6rem;
  padding-inline-start: 1.4em;
}

.endnotes__list li {
  scroll-margin-top: 1.5rem;
}

.endnotes__list li + li {
  margin-top: 0.6em;
}

.endnotes__back {
  margin-inline-start: 0.25em;
  color: var(--fg-soft);
  text-decoration: none;
}

.noteref a,
.endnotes__back {
  scroll-margin-top: 1.5rem;
}

/* ===== Topic pages ===== */

.topicpage {
  max-width: calc(58rem + 2 * var(--edge));
}

.topichead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--gold);
}

.topichead__ar {
  font-size: 1.9rem;
  line-height: 1.3;
  color: var(--gold-ink);
}

.topicpage__count {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--fg-soft);
}

.topicpage__body {
  margin-top: 1.25rem;
}

.topicpage__away {
  margin-top: 2rem;
}

.topicpage__lists > .topicpage__away:first-child {
  margin-top: 0;
}

.topicpage__away .callout {
  margin-bottom: 1rem;
}

.topicpage__sub {
  margin-bottom: 0.25rem;
  font-size: 1.1rem;
}

.topicpage__empty {
  margin-top: 1rem;
}

.topicpage__picture {
  width: 15rem;
  margin: 2rem auto 0;
}

.topicsindex {
  margin-top: 1.5rem;
}

@media (min-width: 40rem) {
  .topichead__ar {
    font-size: 2.4rem;
  }
}

@media (min-width: 62rem) {
  .topicpage__body--pic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    align-items: start;
    gap: 3.5rem;
  }

  .topicpage__picture {
    width: 100%;
    margin: 0.5rem 0 0;
  }
}

/* ===== Search page ===== */

.searchpage__title {
  margin-bottom: 1.25rem;
}

.searchpage__status {
  min-height: 1.5em;
  margin-top: 1.25rem;
  font-size: 0.95rem;
  color: var(--fg-soft);
}

.hits {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
}

.hits__item {
  padding-block: 1rem;
  border-top: 1px solid var(--line);
}

.hits__item:last-child {
  border-bottom: 1px solid var(--line);
}

.hits__link {
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.hits__meta {
  margin-top: 0.2rem;
  font-size: 0.82rem;
  color: var(--gold-ink);
}

.hits__snip {
  display: -webkit-box;
  margin-top: 0.3rem;
  overflow: hidden;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--fg-soft);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.searchpage__browse {
  margin-top: 2rem;
  font-size: 0.98rem;
}

/* ===== About and credits ===== */

.abouthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--gold);
}

.abouttext {
  margin-top: 1.5rem;
}

.imgcredits {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.imgcredit {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1.1rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

.imgcredit:target {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}

.imgcredit__thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--dune);
  border: 1px solid var(--gold);
}

.imgcredit__title {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--fg);
}

.imgcredit__who,
.imgcredit__line {
  margin-top: 0.25rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.imgcredit__line {
  color: var(--fg-soft);
}

@media (min-width: 40rem) {
  .imgcredit {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1.5rem;
  }
}

/* ===== Arabic pages ===== */

/*
 * <html lang="ar" dir="rtl">. The layout mirrors through the logical
 * properties above; what follows sets the type. Arabic reads smaller than
 * Latin at the same size, so the whole page is set one step larger (the rem
 * grows by an eighth), with the open line spacing Arabic needs for its marks.
 * Arabic is never letter-spaced and never slanted.
 */
html[lang="ar"] {
  font-size: 112.5%;
}

html[lang="ar"] body {
  font-family: var(--arabic-text);
  line-height: 1.95;
  word-spacing: 0.03em;
}

html[lang="ar"] * {
  letter-spacing: 0;
}

html[lang="ar"] em,
html[lang="ar"] i,
html[lang="ar"] cite {
  font-style: normal;
}

html[lang="ar"] em {
  color: var(--green-deep);
}

html[lang="ar"] h1 {
  line-height: 1.5;
}

html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  line-height: 1.6;
}

html[lang="ar"] strong,
html[lang="ar"] b {
  font-weight: 700;
}

/* The top strip keeps the size it has on the other pages, so the date and
   the four languages fit on one line on phones. */
html[lang="ar"] .masthead__strip {
  font-size: 0.72rem;
}

html[lang="ar"] .langpick__list li + li::before {
  padding-inline: 0.3rem;
}

@media (min-width: 30rem) {
  html[lang="ar"] .masthead__strip {
    font-size: 0.76rem;
  }
}

/* The breadcrumb's angle points the way the trail reads. */
[dir="rtl"] .trail__sep {
  display: inline-block;
  transform: scaleX(-1);
}

html[lang="ar"] .masthead__bar {
  background:
    radial-gradient(ellipse at 85% -40%, color-mix(in srgb, var(--green) 85%, var(--gold) 15%), transparent 60%),
    var(--green-deep);
}

/* English answers listed on an Arabic page keep their own direction and
   face, at the size and spacing they have on the English pages, and line up
   with the Arabic rows on the right. */
html[lang="ar"] .qlist__row--away,
html[lang="ar"] .hits__item--away {
  line-height: 1.5;
}

html[lang="ar"] .qlist__link[lang="en"],
html[lang="ar"] .hits__link[lang="en"] {
  font-family: var(--serif);
  font-size: 0.95rem;
}

html[lang="ar"] .qlist__desc[lang="en"],
html[lang="ar"] .hits__snip[lang="en"] {
  font-family: var(--serif);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: right;
}

html[lang="ar"] .qbox__text,
html[lang="ar"] .faqs__a {
  line-height: 1.9;
}

html[lang="ar"] .qbox__label {
  font-size: 0.9rem;
  font-weight: 700;
}

/* The formulas: الحمد لله and والله أعلم, alone, in Amiri. */
html[lang="ar"] .formula .formula__ar {
  font-size: 1.65rem;
  line-height: 1.6;
}

/* Quotations: the Quran in Amiri Quran and hadith in Amiri, a step above the text. */
html[lang="ar"] .md .quoted__ar {
  font-size: 1.15em;
  line-height: 2.05;
}

html[lang="ar"] .md .quoted--quran .quoted__ar {
  font-size: 1.3em;
  line-height: 2.15;
}

html[lang="ar"] .md .quoted__src {
  margin-top: 0.35em;
  font-size: 0.82em;
}

html[lang="ar"] .md .quoted--quran {
  padding-block: 1.35rem 1.1rem;
}

html[lang="ar"] .noteref {
  vertical-align: 0.8em;
}

html[lang="ar"] .md table {
  font-size: 0.92em;
}

html[lang="ar"] .imgcredit__title {
  font-style: normal;
}

html[lang="ar"] .imgcredit__title bdi {
  font-style: italic;
}

/* ===== Motion and print ===== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead,
  .colophon,
  .finder,
  .qa__side {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a {
    text-decoration: none;
  }
}