/* ==========================================================================
   Dhuq — editorial, imagery, search and error surfaces
   Loaded on articles, categories, search, 404, and anywhere an image slot or
   a provenance line appears. Tokens come from style.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Image slots
   Every figure reserves its aspect ratio before the image loads, so a
   photograph arriving later cannot push the page around.
   -------------------------------------------------------------------------- */

.dhuq-figure {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-soft);
}

.dhuq-figure > img,
.dhuq-figure > picture,
.dhuq-figure__img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
  /* Where an attachment names its own focal point, the crop keeps the subject
     rather than the middle of the frame. */
  object-position: var(--focal, 50% 50%);
}

.dhuq-figure > picture > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: inherit;
  object-fit: cover;
  object-position: inherit;
}

/* A slot that declares a mobile crop changes shape with it, so the box the
   layout reserved is the box the image fills. */
@media (max-width: 699px) {
  .dhuq-figure > img,
  .dhuq-figure > picture,
  .dhuq-figure__img {
    aspect-ratio: var(--ratio-mobile, var(--ratio, 4 / 3));
  }
}

.dhuq-figure__caption {
  padding-block-start: var(--space-3);
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* The fallback. An ivory field, a hairline, the brand mark — quiet enough to
   read as a design decision rather than a missing asset. */
.dhuq-figure--placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  background:
    radial-gradient(120% 90% at 50% 8%, color-mix(in srgb, var(--brand-green) 5%, transparent), transparent 62%),
    var(--surface-soft);
  border: 1px solid var(--border-soft);
  color: color-mix(in srgb, var(--brand-green) 26%, transparent);
}

.dhuq-figure--placeholder.dhuq-figure--v1 {
  background:
    radial-gradient(110% 80% at 82% 18%, color-mix(in srgb, var(--brand-gold) 11%, transparent), transparent 58%),
    var(--surface-warm);
}

.dhuq-figure--placeholder.dhuq-figure--v2 {
  background:
    linear-gradient(168deg, color-mix(in srgb, var(--brand-green) 6%, var(--paper)), var(--paper) 62%);
}

.dhuq-motif {
  inline-size: clamp(56px, 16%, 104px);
  block-size: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.85;
}

.dhuq-motif__drop { fill: color-mix(in srgb, currentColor 10%, transparent); }
.dhuq-motif__rule { opacity: 0.55; }

.is-dark .dhuq-figure--placeholder {
  background: color-mix(in srgb, var(--brand-green), #000 12%);
  border-color: color-mix(in srgb, var(--brand-ivory) 12%, transparent);
  color: color-mix(in srgb, var(--brand-gold) 62%, transparent);
}

/* --------------------------------------------------------------------------
   Article cards
   -------------------------------------------------------------------------- */

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-8) var(--space-6);
  margin-block-start: var(--space-6);
}

.article-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.article-card__media {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-card__media .dhuq-figure {
  transition: transform var(--dur-slow) var(--ease-out);
}

.article-card:hover .article-card__media .dhuq-figure { transform: scale(1.015); }

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.article-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--step-caption);
  color: var(--text-muted);
}

.article-card__category {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: var(--step-eyebrow);
  color: var(--brand-green);
  text-decoration: none;
}

.article-card__category:hover { text-decoration: underline; }

.article-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
}

.article-card__title a {
  color: inherit;
  text-decoration: none;
}

.article-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
}

.article-card__standfirst {
  margin: 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* A card with no image gets a rule where the image would have been, so the
   grid still reads as a grid rather than as ragged text blocks. */
.article-card--textual .article-card__body {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--gold-line);
}

/* The lead article. Two columns on desktop, stacked below. */
.article-lead {
  margin-block: var(--space-8) var(--space-10);
  padding-block-end: var(--space-9);
  border-block-end: 1px solid var(--border-soft);
}

.article-card--lead {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.article-card--lead .article-card__title { font-size: var(--step-h2); }

.article-card--lead .article-card__standfirst {
  font-size: var(--step-body-lg);
  line-height: var(--lh-body);
  max-inline-size: 38ch;
}

.article-card--lead .article-card__more {
  margin: 0;
  font-size: var(--step-body-sm);
  font-weight: 600;
  color: var(--brand-green);
}

.article-card--lead .article-card__more::after {
  content: " →";
  transition: padding-inline-start var(--dur) var(--ease);
}

.article-card--lead:hover .article-card__more::after { padding-inline-start: 0.2em; }

@media (max-width: 860px) {
  .article-card--lead { grid-template-columns: 1fr; gap: var(--space-5); }
  .article-card--lead .article-card__title { font-size: var(--step-h3); }
}

/* --------------------------------------------------------------------------
   Category navigation
   -------------------------------------------------------------------------- */

.category-nav {
  margin-block: var(--space-7) var(--space-6);
  padding-block-end: var(--space-6);
  border-block-end: 1px solid var(--border-soft);
}

.category-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-nav li { margin: 0; }

.category-nav .badge { text-decoration: none; }

.category-nav__count {
  margin-inline-start: 0.45em;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}

.category-hero { margin-block-end: var(--space-8); }

/* --------------------------------------------------------------------------
   The article itself
   -------------------------------------------------------------------------- */

.article__header {
  padding-block-start: var(--space-7);
  padding-block-end: var(--space-7);
}

.article__title {
  font-family: var(--font-display);
  font-size: var(--step-h1);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: -0.012em;
  margin-block-start: var(--space-3);
  text-wrap: balance;
}

/* The standfirst is a bridge between display and body: the display face, but
   at a size and a measure that still reads as a sentence rather than a title. */
.article__standfirst {
  margin-block-start: var(--space-5);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.08rem + 0.66vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.article__meta {
  margin-block-start: var(--space-6);
  color: var(--text-muted);
}

.article__hero { margin-block-end: var(--space-4); }

.article__credit {
  margin: 0 auto var(--space-8);
  font-size: var(--step-caption);
  color: var(--text-muted);
}

/* Reading column. The body sits at the text container; media breaks out. */
.article__body { margin-block-start: var(--space-7); }

.article__body > .wp-block-image,
.article__body > figure,
.article__body > .wp-block-gallery {
  margin-inline: calc(-1 * var(--space-7));
  margin-block: var(--space-8);
}

.article__body > figure img,
.article__body > .wp-block-image img {
  border-radius: var(--radius-lg);
}

.article__body figcaption {
  margin-block-start: var(--space-3);
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  text-align: start;
}

@media (max-width: 720px) {
  .article__body > .wp-block-image,
  .article__body > figure,
  .article__body > .wp-block-gallery {
    margin-inline: 0;
  }
}

.article__body h2 {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  margin-block-start: var(--space-9);
}

.article__body h3 {
  font-family: var(--font-ui);
  font-size: var(--step-h4);
  font-weight: 600;
  margin-block-start: var(--space-7);
}

.article__body blockquote,
.article__body .wp-block-quote {
  margin-block: var(--space-8);
  margin-inline: 0;
  padding-inline-start: var(--space-6);
  border-inline-start: 2px solid var(--brand-gold);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--text-primary);
}

.article__body .wp-block-pullquote {
  margin-block: var(--space-9);
  padding-block: var(--space-6);
  border-block: 1px solid var(--border-soft);
  text-align: center;
}

.article__body ul,
.article__body ol { padding-inline-start: 1.5em; }

.article__body li { padding-inline-start: 0.2em; }

.article__body li::marker { color: var(--brand-gold); }

/* A callout. Editors reach it with the "Is callout" class on a group block. */
.article__body .is-callout,
.callout {
  margin-block: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  border-inline-start: 3px solid var(--brand-green);
  font-size: var(--step-body-sm);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-8) 0;
  padding: 0;
  list-style: none;
}

.article__tags li { margin: 0; }
.article__tags .badge { text-decoration: none; }

/* The article's destination inside the product. */
.article-cta {
  margin-block-start: var(--space-9);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  border: 1px solid var(--border-soft);
}

.article-cta__label {
  margin: 0 0 var(--space-2);
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-green);
}

.article-cta__text {
  margin: 0 0 var(--space-5);
  max-inline-size: 40ch;
  color: var(--text-secondary);
}

/* Previous / next */
.article-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-9);
}

.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.article-nav__link:hover {
  border-color: var(--green-line);
  background: var(--surface-soft);
}

.article-nav__link--next { text-align: end; }

.article-nav__label {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.article-nav__title {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  line-height: var(--lh-snug);
}

/* Foot of the Articles section */
.articles-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  margin-block: var(--space-10) var(--space-8);
  padding: var(--space-7) var(--space-8);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
}

.articles-footer__text { max-inline-size: 42ch; }
.articles-footer__text > * + * { margin-block-start: var(--space-2); }
.articles-footer .btn { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Provenance
   -------------------------------------------------------------------------- */

.provenance {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border-soft);
}

.provenance__list { margin: 0; }

.provenance__row {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-2);
}

.provenance__row dt {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding-block-start: 0.18em;
}

.provenance__row dd {
  margin: 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

.provenance__note {
  display: block;
  font-size: var(--step-caption);
  color: var(--text-muted);
}

@media (max-width: 560px) {
  .provenance__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* --------------------------------------------------------------------------
   Tafsir
   -------------------------------------------------------------------------- */

.tafsir { margin-block-start: var(--space-5); }

.tafsir__entry + .tafsir__entry {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-soft);
}

.tafsir__span {
  margin: 0 0 var(--space-2);
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.tafsir__text { margin: 0; color: var(--text-secondary); }

.tafsir__text[lang="ar"] {
  font-family: var(--font-ar-display);
  font-size: calc(1em * var(--ar-scale));
  line-height: var(--lh-arabic);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Reader additions
   -------------------------------------------------------------------------- */

.reader__bismillah {
  margin-block: var(--space-6) var(--space-7);
  text-align: center;
  font-size: calc(1.22em * var(--ar-scale));
  line-height: var(--lh-quran);
  color: var(--brand-green);
}

.ayah__sajdah {
  display: block;
  margin-block-start: var(--space-2);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--brand-gold);
}

.qword--marker {
  color: var(--brand-gold);
  padding-inline: 0.1em;
}

.qword--plain {
  display: inline;
  padding-inline: 0.06em;
}

/* Previous / next surah */
.surah-nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
  margin-block: var(--space-9);
}

.surah-nav__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.surah-nav__link:hover { border-color: var(--green-line); background: var(--surface-soft); }
.surah-nav__link--next { text-align: end; }

.surah-nav__label {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.surah-nav__name {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
}

.surah-nav__english { font-size: var(--step-caption); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

.search-form__row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.search-form__row .input { flex: 1 1 auto; min-inline-size: 0; }
.search-form__row .btn { flex: 0 0 auto; }

.search-hero__form {
  max-inline-size: 34rem;
  margin-block-start: var(--space-6);
}

.search-group + .search-group { margin-block-start: var(--space-10); }

.search-results,
.verse-results {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.search-results li,
.verse-results li { margin: 0; }

.search-result,
.verse-result {
  display: block;
  padding: var(--space-5) 0;
  border-block-end: 1px solid var(--border-soft);
  text-decoration: none;
  color: inherit;
}

.search-result:hover,
.verse-result:hover { background: var(--surface-soft); }

.search-result__type {
  display: inline-block;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.search-result__title {
  display: block;
  margin-block-start: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
}

.search-result__snippet {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--step-body-sm);
  color: var(--text-secondary);
}

.verse-result {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  gap: var(--space-4);
  align-items: baseline;
}

.verse-result__ref {
  font-size: var(--step-body-sm);
  font-weight: 600;
  color: var(--brand-green);
}

.verse-result__key {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-caption);
  font-weight: 400;
  color: var(--text-muted);
}

.verse-result__text {
  font-size: calc(1.05em * var(--ar-scale));
  line-height: var(--lh-quran);
}

@media (max-width: 640px) {
  .verse-result { grid-template-columns: 1fr; gap: var(--space-2); }
}

.search-suggestions { margin-block-start: var(--space-9); }

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

.error-404 { max-inline-size: 52rem; }

.error-404__mark {
  color: color-mix(in srgb, var(--brand-green) 30%, transparent);
  margin-block-end: var(--space-6);
}

.error-404__mark .dhuq-motif { inline-size: 76px; }

.error-404__lede { margin-block-start: var(--space-4); max-inline-size: 44ch; }

.error-404__search {
  max-inline-size: 30rem;
  margin-block-start: var(--space-7);
}

.error-404__routes { margin-block-start: var(--space-8); }

.error-404__home { margin-block-start: var(--space-8); }

/* --------------------------------------------------------------------------
   Section headers with a rule
   -------------------------------------------------------------------------- */

.section-header--rule {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  margin-block-end: var(--space-2);
}

.section-header--rule::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--border-soft);
}

.page-hero--editorial { padding-block-end: var(--space-3); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .article-card__media .dhuq-figure,
  .article-card--lead .article-card__more::after {
    transition: none;
  }
  .article-card:hover .article-card__media .dhuq-figure { transform: none; }
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: var(--space-9);
  align-items: center;
}

.about-hero__title { text-wrap: balance; }

.about-hero__lede {
  margin-block-start: var(--space-5);
  max-inline-size: 40ch;
}

@media (max-width: 900px) {
  .about-hero { grid-template-columns: 1fr; gap: var(--space-7); }
  .about-hero__media { max-inline-size: 26rem; }
}

/* A pull quote set in the display face, breaking the reading rhythm once. */
.about-pull {
  margin-block: var(--space-8);
  padding-block: var(--space-6);
  border-block: 1px solid var(--gold-line);
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  font-style: italic;
  line-height: 1.34;
  text-wrap: balance;
  color: var(--brand-green);
}

.about-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-8) var(--space-7);
  margin-block-start: var(--space-7);
}

.about-principle { display: flex; flex-direction: column; gap: var(--space-2); }

.about-principle__number {
  margin: 0 0 var(--space-1);
  font-family: var(--font-ui);
  font-size: var(--step-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--brand-gold);
}

.about-principle__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.about-principle__text {
  margin: 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.about-org {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-9);
  align-items: center;
}

@media (max-width: 900px) {
  .about-org { grid-template-columns: 1fr; gap: var(--space-6); }
}

.about-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}

@media (max-width: 760px) {
  .about-cta { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .about-cta .cluster { display: grid; grid-template-columns: minmax(0, 1fr); }
  .about-cta .btn { inline-size: 100%; }
}

/* The generated provenance list. */
.source-list {
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.source-list__item {
  margin: 0;
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border-soft);
}

.source-list__item:last-child { border-block-end: 1px solid var(--border-soft); }

.source-list__kind {
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.source-list__name {
  margin: var(--space-1) 0 0;
  font-size: var(--step-body);
  font-weight: 600;
}

.source-list__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--step-caption);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Home
   -------------------------------------------------------------------------- */

.home-hero {
  padding-block: var(--section-y-tight) var(--space-8);
}

.home-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
}

.home-hero__lede {
  margin-block-start: var(--space-5);
  max-inline-size: 36ch;
}

.home-hero__actions { margin-block-start: var(--space-7); }

.home-hero__note {
  margin-block-start: var(--space-5);
  font-size: var(--step-caption);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .home-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
}

/* The hero specimen: a real ayah from the installed corpus, standing in for a
   photograph. Truer than stock imagery, and it costs one query. */
.hero-specimen {
  display: grid;
  place-items: center;
  gap: var(--space-5);
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--brand-gold) 9%, transparent), transparent 62%),
    var(--surface-warm);
  border: 1px solid var(--gold-line);
  text-align: center;
}

.hero-specimen__ayah {
  margin: 0;
  font-size: calc(1.5em * var(--ar-scale));
  line-height: var(--lh-quran);
  color: var(--brand-green);
}

.hero-specimen__rule {
  inline-size: 3.5rem;
  margin: 0;
  border: 0;
  border-block-start: 1px solid var(--gold-line);
}

.hero-specimen__caption {
  margin: 0;
  max-inline-size: 26ch;
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}

/* The corpus strip — the page's one set of real numbers. */
.corpus-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--space-9);
  align-items: center;
}

.corpus-strip__text > * + * { margin-block-start: var(--space-4); }
.corpus-strip__text p { max-inline-size: 46ch; }
.corpus-strip__actions { margin-block-start: var(--space-6); }

.corpus-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin: 0;
}

.corpus-facts > div { min-inline-size: 0; }

.corpus-facts dt {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--brand-gold) 82%, var(--brand-ivory));
}

.corpus-facts dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-ui);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.08;
  color: var(--text-on-dark);
}

.corpus-facts__source { grid-column: 1 / -1; }

.corpus-facts__source dd {
  font-size: var(--step-body-sm);
  font-weight: 500;
  font-variant-numeric: normal;
  line-height: var(--lh-snug);
}

.corpus-facts__source a { color: var(--text-on-dark); }

@media (max-width: 900px) {
  .corpus-strip__inner { grid-template-columns: 1fr; gap: var(--space-7); }
  .corpus-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .corpus-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.door-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* How it works */
.journey--with-media {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--space-9);
  align-items: center;
}

@media (max-width: 900px) {
  .journey--with-media { grid-template-columns: 1fr; gap: var(--space-7); }
}

.journey__steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-7) var(--space-6);
  margin: var(--space-7) 0 0;
  padding: 0;
  list-style: none;
}

.journey__steps > li {
  counter-increment: step;
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--gold-line);
}

.journey__steps > li::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--step-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--brand-gold);
}

.journey__step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.journey__step-text {
  margin: var(--space-2) 0 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Footer seam
   The footer normally stands off the content above it. When the last section
   is itself a full-bleed dark band, that gap reads as a mistake — two green
   blocks with a stripe of ivory between them — so it closes up.
   -------------------------------------------------------------------------- */

.site-main:has(> section:last-child.is-dark) + .site-footer,
.site-main:has(> article > section:last-child.is-dark) + .site-footer {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   Card icon
   The same treatment as the games hub, but defined here so it is correct on
   the 404 and the search page, which do not load the games stylesheet.
   -------------------------------------------------------------------------- */

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--green-soft);
  color: var(--brand-green);
}

.card__icon svg { inline-size: 1.35rem; block-size: 1.35rem; }

/* ==========================================================================
   Reading layers — translation, word meanings, tafsir
   Added when those datasets became available. The rule that governs all of
   it: the Arabic stays the largest, warmest thing in the block, and every
   other layer is quieter than the one above it.
   ========================================================================== */

.ayah__body { display: grid; gap: var(--space-4); }

.ayah__translation {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--step-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* Footnote markers stay in the text — they are only re-sized so they stop
   interrupting the sentence. Nothing is removed. */
.fn-marker {
  font-size: 0.64em;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--brand-gold);
  vertical-align: super;
  line-height: 0;
}

/* A word a gharib work explains, marked inside the ayah itself. A dotted
   underline rather than a highlight: the Qur'anic line must not turn into a
   row of buttons. */
.qgloss {
  appearance: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-block-end: 1px dotted var(--gold-line);
  text-underline-offset: 0.3em;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  border-radius: var(--radius-xs);
}

.qgloss:hover,
.qgloss[aria-expanded="true"] {
  border-block-end-color: var(--brand-gold);
  background: color-mix(in srgb, var(--brand-gold) 11%, transparent);
}

.qgloss:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* The disclosure stack under an ayah. */
.ayah__layers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.layer { min-inline-size: 0; flex: 1 1 100%; }

.layer > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: fit-content;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--step-caption);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.layer > summary::-webkit-details-marker { display: none; }
.layer > summary::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--dur) var(--ease);
}

.layer[open] > summary::before { transform: rotate(-135deg) translateY(-1px); }

.layer > summary:hover { border-color: var(--gold-line); color: var(--text-primary); }
.layer > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.layer__label { font-weight: 600; color: var(--text-primary); }
.layer__count,
.layer__span,
.layer__lang {
  font-size: var(--step-eyebrow);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.layer__lang {
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--surface-warm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.layer[open] { flex-basis: 100%; }

.layer > *:not(summary) {
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--gold-line);
}

/* Word meanings. Arabic on both sides, so the whole block is RTL. */
.glosses { margin: 0; display: grid; gap: var(--space-3); }

.glosses__row {
  display: grid;
  gap: var(--space-1);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--border-soft);
}

.glosses__row:last-child { border-block-end: 0; padding-block-end: 0; }

.glosses dt {
  margin: 0;
  font-family: var(--font-quran);
  font-size: calc(1.02em * var(--ar-scale));
  line-height: 1.8;
  color: var(--brand-green);
}

.glosses dd {
  margin: 0;
  font-family: var(--font-ar-ui);
  font-size: 0.97em;
  line-height: var(--lh-arabic);
  color: var(--text-secondary);
}

.footnotes p {
  margin: 0 0 var(--space-3);
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-inline-size: 62ch;
}

.footnotes p:last-child { margin-block-end: 0; }

.tafsir__text {
  margin: 0;
  font-family: var(--font-ar-ui);
  font-size: calc(0.95em * var(--ar-scale));
  line-height: var(--lh-arabic);
  color: var(--text-secondary);
}

/* The popover a marked word opens. */
.gloss-pop {
  position: absolute;
  z-index: var(--z-popover);
  max-inline-size: min(26rem, calc(100vw - 2rem));
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-lg);
  background: var(--white);
  box-shadow: var(--shadow-overlay);
}

.gloss-pop__term {
  margin: 0 0 var(--space-2);
  font-family: var(--font-quran);
  font-size: calc(1.05em * var(--ar-scale));
  line-height: 1.8;
  color: var(--brand-green);
}

.gloss-pop__gloss {
  margin: 0;
  font-family: var(--font-ar-ui);
  font-size: 0.97em;
  line-height: var(--lh-arabic);
  color: var(--text-secondary);
}

.gloss-pop__source {
  margin: var(--space-3) 0 0;
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-soft);
  font-size: var(--step-eyebrow);
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .layer > *:not(summary) { padding-inline-start: var(--space-4); }
}

/* ==========================================================================
   Homepage — the specimen, the layer run, the two ways in
   ========================================================================== */

.home-hero { padding-block: var(--space-9) var(--space-8); }

.home-hero__inner { align-items: center; }

.home-hero__title { max-inline-size: 15ch; }

.home-hero__lede { max-inline-size: 42ch; }

/* The specimen is one real ayah, rendered by the Reader's own functions. */
.specimen {
  margin: 0;
  display: grid;
  gap: var(--space-5);
  padding: var(--space-8) var(--space-7) var(--space-7);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(130% 100% at 78% 0%, color-mix(in srgb, var(--brand-gold) 10%, transparent), transparent 60%),
    var(--surface-warm);
  border: 1px solid var(--gold-line);
  box-shadow: var(--shadow-sm);
}

.specimen__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--gold-line);
}

.specimen__ref {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  color: var(--brand-green);
}

.specimen__label {
  font-size: var(--step-eyebrow);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.specimen .ayah__arabic {
  margin: 0;
  font-size: calc(1.34em * var(--ar-scale));
  line-height: var(--lh-quran);
  color: var(--brand-green);
  text-align: start;
}

.specimen__translation {
  margin: 0;
  font-size: var(--step-body-lg);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.specimen__gloss {
  margin: 0;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--white) 70%, transparent);
}

.specimen__gloss dt {
  margin: 0;
  font-family: var(--font-quran);
  font-size: calc(0.98em * var(--ar-scale));
  color: var(--brand-green);
}

.specimen__gloss dd {
  margin: 0;
  font-family: var(--font-ar-ui);
  font-size: 0.92em;
  line-height: var(--lh-arabic);
  color: var(--text-secondary);
}

.specimen__link {
  justify-self: start;
  font-size: var(--step-body-sm);
  font-weight: 600;
  color: var(--brand-green);
  text-decoration-color: var(--gold-line);
  text-underline-offset: 0.35em;
}

.specimen__link:hover { text-decoration-color: var(--brand-gold); }

/* The arrow link used to close a section without a second button. */
.link-arrow {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-size: var(--step-body-sm);
  font-weight: 600;
  color: var(--brand-green);
  text-decoration: none;
  white-space: nowrap;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.link-arrow:hover::after { transform: translateX(0.15em); }

.link-arrow--on-dark { color: var(--brand-ivory); }

/* The four layers, as a numbered editorial run rather than four boxes. */
.layers {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-9);
  align-items: start;
}

.layers__lead { position: sticky; top: 7rem; }
.layers__note { margin-block-start: var(--space-4); max-inline-size: 34ch; }

.layers__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.layer-item {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-block-start: 1px solid var(--border-soft);
}

.layer-item:first-child { border-block-start: 0; padding-block-start: 0; }
.layer-item:last-child { padding-block-end: 0; }

.layer-item__index {
  font-family: var(--font-ui);
  font-size: var(--step-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--brand-gold);
  padding-block-start: 0.35em;
}

.layer-item__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.layer-item__text {
  margin: var(--space-2) 0 0;
  max-inline-size: 56ch;
  color: var(--text-secondary);
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
}

.tag {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: var(--step-eyebrow);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tag--quiet { background: var(--surface-warm); color: var(--text-muted); }

@media (max-width: 900px) {
  .layers { grid-template-columns: 1fr; gap: var(--space-7); }
  .layers__lead { position: static; }
}

/* Two ways in, plus a search. Asymmetric on purpose — the search panel is
   a form, not a card, and should not pretend otherwise. */
.ways {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}

.way-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-7) var(--space-6) var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

a.way-card:hover {
  border-color: var(--gold-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

a.way-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.way-card__eyebrow {
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.way-card__title {
  font-family: var(--font-display);
  font-size: var(--step-h3);
  font-weight: 600;
  line-height: var(--lh-heading);
}

.way-card__text {
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-inline-size: 34ch;
}

.way-card__figure {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--brand-green) 8%, transparent);
  pointer-events: none;
}

.way-card--search { background: var(--surface-warm); }

.way-card__field {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.way-card__field .input { flex: 1 1 auto; min-inline-size: 0; }

/* Principles: three columns of quiet text, no boxes. */
.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-8) var(--space-7);
  margin-block-start: var(--space-7);
}

.principle { display: flex; flex-direction: column; gap: var(--space-2); }

.principle__title {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.principle__text {
  margin: 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.section-header--centred {
  text-align: center;
  max-inline-size: 44ch;
  margin-inline: auto;
}

.section-header__sub {
  max-inline-size: 56ch;
  margin-block-start: var(--space-3);
}

.section-header--rule { justify-content: space-between; }
.section-header--rule .link-arrow { flex: 0 0 auto; }

.journey__figure { border-radius: var(--radius-lg); overflow: hidden; }

.journey__caption {
  margin: var(--space-3) 0 0;
  font-size: var(--step-caption);
  color: var(--text-muted);
}

.about-cta__text { margin-block-start: var(--space-4); max-inline-size: 46ch; }

.corpus-strip { padding-block: var(--section-y-tight); }
.closing-band { padding-block: var(--section-y-tight); }

.closing-band--visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(42rem 22rem at 8% 15%, color-mix(in srgb, var(--brand-gold) 16%, transparent), transparent 68%),
    var(--surface-warm);
  border-block: 1px solid var(--gold-line);
}

.closing-band--visual::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../images/geometry-pattern.svg");
  background-size: 12rem 12rem;
  opacity: 0.24;
  mask-image: linear-gradient(90deg, transparent 28%, #000);
  pointer-events: none;
}

.closing-band--visual h2 { color: var(--brand-green); }
.closing-band--visual .about-cta__text { color: var(--text-secondary); }

.surah-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: var(--space-3);
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.75rem);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(32rem 24rem at 88% 6%, color-mix(in srgb, var(--brand-gold) 14%, transparent), transparent 68%),
    var(--surface-warm);
}

.surah-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("../images/geometry-pattern.svg");
  background-size: 10rem 10rem;
  opacity: 0.18;
  mask-image: linear-gradient(90deg, transparent 38%, #000);
}

.surah-hero::after {
  content: attr(data-surah-number);
  position: absolute;
  z-index: -1;
  inset-block-end: -0.2em;
  inset-inline-end: clamp(1rem, 4vw, 3rem);
  font-family: var(--font-ui);
  font-size: clamp(6rem, 4rem + 8vw, 11rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.08em;
  color: color-mix(in srgb, var(--brand-green) 8%, transparent);
  pointer-events: none;
}

@media (max-width: 40rem) {
  .surah-hero { padding: var(--space-6); }
  .surah-hero::after { font-size: 7rem; }
}

/* ==========================================================================
   Index heroes: a title, a lede, and a rail of real numbers
   ========================================================================== */

.page-hero--index {
  padding-block: var(--space-9) var(--space-8);
}

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
  gap: var(--space-9);
  align-items: end;
}

.hero-split__lead .lede { margin-block-start: var(--space-5); max-inline-size: 52ch; }

.stat-rail {
  margin: 0;
  display: grid;
  gap: var(--space-5);
  padding-inline-start: var(--space-6);
  border-inline-start: 1px solid var(--border-soft);
}

.stat-rail__item dt {
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.stat-rail__item dd {
  margin: var(--space-1) 0 0;
  font-family: var(--font-ui);
  font-size: var(--step-h3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--brand-green);
}

@media (max-width: 900px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--space-7); }
  .stat-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-inline-start: 0;
    padding-block-start: var(--space-5);
    border-inline-start: 0;
    border-block-start: 1px solid var(--border-soft);
  }
}

/* ==========================================================================
   The juz index
   Thirty rows, each a number and a run of chapters. A table would be the
   obvious shape and the wrong one: the chapter list is variable-length and
   wraps, which a table cell handles badly at phone width.
   ========================================================================== */

.juz-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid var(--border-soft);
}

.juz-row {
  display: grid;
  grid-template-columns: 5rem minmax(0, 1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--border-soft);
  align-items: start;
}

.juz-row__index {
  display: grid;
  place-items: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  text-decoration: none;
  color: var(--brand-green);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.juz-row__index:hover {
  background: var(--brand-green);
  border-color: var(--brand-green);
  color: var(--brand-ivory);
}

.juz-row__index:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.juz-row__num {
  font-family: var(--font-ui);
  font-size: var(--step-h4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.juz-row__span {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  font-size: var(--step-body-sm);
  color: var(--text-secondary);
}

.juz-row__key {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-primary);
}

.juz-row__count { font-size: var(--step-caption); color: var(--text-muted); }

.juz-row__surahs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.juz-row__surahs a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--white);
  font-size: var(--step-caption);
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.juz-row__surahs a:hover { border-color: var(--gold-line); background: var(--surface-warm); }
.juz-row__surahs a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.juz-chip__part { color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .juz-row { grid-template-columns: 3.5rem minmax(0, 1fr); gap: var(--space-4); }
  .juz-row__index { inline-size: 2.75rem; block-size: 2.75rem; }
}

.split-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
}

.split-cta p { margin: var(--space-2) 0 0; color: var(--text-secondary); max-inline-size: 48ch; }

/* ==========================================================================
   Sources and licences
   ========================================================================== */

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: var(--space-6);
}

.source-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-7) var(--space-6);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--white);
}

.source-card--stale { border-color: var(--attention); background: var(--attention-soft); }

.source-card__kind {
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-gold);
}

.source-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.source-card__provider {
  margin: 0;
  font-size: var(--step-body-sm);
  color: var(--text-secondary);
}

.source-card__facts {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-block: 1px solid var(--border-soft);
}

.source-card__facts-wide { grid-column: 1 / -1; }

.source-card__facts dt {
  margin: 0;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.source-card__facts dd {
  margin: var(--space-1) 0 0;
  font-size: var(--step-body-sm);
  color: var(--text-primary);
}

.checksum {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  word-break: break-all;
  color: var(--text-secondary);
}

.source-card__verdict {
  margin: 0;
  font-size: var(--step-caption);
  font-weight: 600;
}

.source-card__verdict--passed { color: var(--correct); }
.source-card__verdict--failed { color: var(--attention); }

.source-card__notes {
  margin: 0;
  font-size: var(--step-caption);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

.source-card__notice > summary {
  font-size: var(--step-caption);
  color: var(--text-muted);
  cursor: pointer;
}

.source-card__notice pre {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--text-secondary);
  max-block-size: 22rem;
  overflow: auto;
}

.source-card__link { margin: auto 0 0; padding-block-start: var(--space-3); }

.source-card__link a {
  font-size: var(--step-body-sm);
  font-weight: 600;
  color: var(--brand-green);
}

/* ==========================================================================
   The ayah band
   A page about reading the Qur'an has one genuinely beautiful thing to look
   at, and it is the script. This band is that, set large and left almost
   entirely alone: no frame, no quotation marks, no ornament.
   ========================================================================== */

.ayah-band {
  padding-block: clamp(3.5rem, 2rem + 6vw, 6.5rem);
}

.ayah-band--warm {
  background:
    radial-gradient(120% 130% at 50% 0%, color-mix(in srgb, var(--brand-gold) 7%, transparent), transparent 58%),
    var(--surface-warm);
}

.ayah-band--green { background: var(--brand-green); }

.ayah-band__inner { text-align: center; }

.ayah-band__arabic {
  margin: 0;
  font-size: clamp(1.65rem, 1rem + 2.6vw, 3rem);
  line-height: var(--lh-quran);
  color: var(--brand-green);
  text-align: center;
}

.is-dark .ayah-band__arabic { color: var(--brand-ivory); }

.ayah-band__translation {
  margin: var(--space-6) auto 0;
  max-inline-size: 46ch;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

.is-dark .ayah-band__translation { color: var(--text-on-dark-soft); }

.ayah-band__ref {
  margin: var(--space-6) 0 0;
  font-size: var(--step-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ayah-band__ref::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 1px;
  margin: 0 auto var(--space-5);
  background: var(--gold-line);
}

.ayah-band__ref a { color: inherit; text-decoration: none; }
.ayah-band__ref a:hover { color: var(--brand-green); text-decoration: underline; text-underline-offset: 0.35em; }

.is-dark .ayah-band__ref { color: var(--text-on-dark-soft); }
.is-dark .ayah-band__ref::before { background: color-mix(in srgb, var(--brand-gold) 50%, transparent); }
.is-dark .ayah-band__ref a:hover { color: var(--brand-ivory); }

/* A single lead card should take the row, not a quarter of it: one article
   sitting in a four-column grid reads as three missing articles. */
.article-grid--one { grid-template-columns: minmax(0, 1fr); }

.article-grid--many > .article-card--lead { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .article-grid--many > .article-card--lead {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: center;
  }
  .article-grid--many > .article-card--lead .article-card__media { margin: 0; }
}

/* Contact — what people usually write about. */
.contact-reasons { margin-block-start: var(--space-8); }

.contact-reasons__list {
  margin: var(--space-5) 0 0;
  display: grid;
  gap: var(--space-5);
}

.contact-reasons__item {
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-soft);
}

.contact-reasons__item:last-child { border-block-end: 0; padding-block-end: 0; }

.contact-reasons dt {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.contact-reasons dd {
  margin: var(--space-2) 0 0;
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* A verse in the search results, with the line that matched. */
.verse-result__translation {
  display: block;
  margin-block-start: var(--space-3);
  font-size: var(--step-body-sm);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}

/* A lead card with no photograph is one column, not two with a gap. */
.article-grid--many > .article-card--lead.article-card--textual { display: block; }

.article-card--lead.article-card--textual .article-card__body {
  max-inline-size: 58ch;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--gold-line);
}

/* The About hero without a photograph: the word the site is named after. */
.about-hero--textual { align-items: center; }

.about-hero__mark {
  display: grid;
  place-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-7);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 110% at 50% 0%, color-mix(in srgb, var(--brand-gold) 9%, transparent), transparent 60%),
    var(--surface-warm);
  border: 1px solid var(--gold-line);
}

.about-hero__word {
  font-family: var(--font-quran);
  font-size: clamp(4rem, 2.5rem + 6vw, 7rem);
  line-height: 1.5;
  color: var(--brand-green);
}

.about-hero__gloss {
  font-family: var(--font-display);
  font-size: var(--step-h4);
  font-style: italic;
  color: var(--text-muted);
}

.about-hero__gloss::before {
  content: "";
  display: block;
  inline-size: 2.5rem;
  block-size: 1px;
  margin: 0 auto var(--space-4);
  background: var(--gold-line);
}