@charset "utf-8";

/* Ported verbatim from sahifah-mockup css/main.css, section 13.
   Every value is a token from tokens.css — no raw colours, sizes or magic numbers. */

/* ============================================================
   13. THE ARTICLE PAGE
   ------------------------------------------------------------
   The page this site exists for. Everything here serves one
   thing: sustained, comfortable reading of long-form text.

     measure       34rem = 68 characters of Source Serif 4
     size          --text-md (18px) — larger than UI text
     leading       1.75, opening to 1.9 on lines with Arabic
     paragraphs    separated by space, not indented
     headings      generous space above, little below, so each
                   heading binds to the text it introduces
   ============================================================ */

/* -- 13a. Article shell -------------------------------------- */
.article-layout {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
}

/* The rail arrives only at 75em. Below that the main column
   would fall under 48rem and the feature-block bleed would no
   longer fit — so the contents move above the article instead. */
@media (min-width: 75em) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--space-3xl);
  }
}

/* -- 13b. Article masthead ----------------------------------- */
.article-header {
  max-width: var(--measure-wide);
  margin-inline: auto;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-xl);
  border-bottom: var(--border-hairline);
  text-align: center;
}

.article-header__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-md);
}

/* The Arabic title sits above the English as a quiet echo. */
.article-header__arabic {
  font-family: var(--font-arabic);
  font-size: var(--text-arabic-hadith);
  line-height: var(--leading-arabic-inline);
  color: var(--burgundy-400);
  direction: rtl;
  margin-bottom: var(--space-xs);
}

.article-header__title {
  font-size: var(--text-fluid-h1);
  line-height: var(--leading-tight);
  color: var(--colour-heading-deep);
  margin-bottom: var(--space-sm);
}

.article-header__lede {
  font-size: var(--text-fluid-lede);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
  max-width: var(--measure-wide);
  margin-inline: auto;
  text-wrap: pretty;
}

.article-header__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs) var(--space-md);
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-text-meta);
}

.article-header__author {
  font-weight: var(--weight-semibold);
  color: var(--colour-text-muted);
}

/* -- 13c. Prose ---------------------------------------------- */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--colour-text);
  /* Avoid single-word last lines without wrecking the rag. */
  text-wrap: pretty;
  /* Opening quotes and dashes hang into the margin. */
  hanging-punctuation: first last;
}

/* The default rhythm: one paragraph interval between siblings. */
.prose > * + * {
  margin-top: var(--space-paragraph);
}

/* NB: do not add a `.prose p { margin: 0 }` rule here — it would
   out-specify the sibling rule above and collapse the paragraph
   rhythm. The global reset already zeroes p margins. */

/* Feature blocks keep their own symmetric interval, which has to
   out-specify the sibling rule above (hence the two classes). */
.prose > .ayah,
.prose > .hadith,
.prose > .pull-quote,
.prose > .note,
.prose > figure {
  margin-block: var(--space-xl);
}

/* Headings bind downward: much space above, little below. */
.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--space-heading-before);
  margin-bottom: var(--space-heading-after);
  text-wrap: balance;
}

.prose h2 + *,
.prose h3 + *,
.prose h4 + * {
  margin-top: 0;
}

.prose h2 {
  font-size: var(--text-2xl);
  color: var(--colour-heading);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--border-hairline);
}

.prose h3 {
  font-size: var(--text-xl);
  color: var(--colour-heading-deep);
}

/* h4 drops to the body face — a run-in heading, not a display
   one, so it does not compete with the h3 above it. */
.prose h4 {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  color: var(--ink-900);
}

.prose a {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-hairline);
  text-underline-offset: var(--space-3xs);
  text-decoration-color: var(--colour-link-underline);
}

.prose a:hover {
  text-decoration-color: var(--colour-link-hover);
}

.prose em {
  font-style: italic;
}

.prose strong {
  font-weight: var(--weight-semibold);
  color: var(--colour-text-strong);
}

/* -- Opening paragraph: a Cormorant initial, not a novelty ---- */
.prose__opening::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: var(--weight-semibold);
  color: var(--colour-heading);
  margin-right: var(--space-2xs);
  padding-top: var(--space-3xs);
}

/* -- Lists --------------------------------------------------- */
.prose ul,
.prose ol {
  padding-left: var(--space-md);
}

.prose li + li {
  margin-top: var(--space-2xs);
}

.prose ul > li {
  position: relative;
  padding-left: var(--space-sm);
}

/* A small burgundy lozenge for bullets — the ornament again. */
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: var(--space-3xs);
  height: var(--space-3xs);
  background-color: var(--burgundy-400);
  transform: rotate(45deg);
}

.prose ol {
  list-style: decimal;
  padding-left: var(--space-lg);
}

.prose ol > li {
  list-style: decimal;
  padding-left: var(--space-3xs);
}

.prose ol > li::marker {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  color: var(--colour-heading);
}

/* -- Feature blocks step out to --measure-wide --------------- */
@media (min-width: 52em) {
  .prose > .ayah,
  .prose > .hadith,
  .prose > .pull-quote,
  .prose > figure {
    margin-inline: var(--prose-bleed);
  }
}

/* -- Pull quote ---------------------------------------------- */
.pull-quote {
  margin-block: var(--space-xl);
  padding-block: var(--space-md);
  border-block: var(--border-accent);
  text-align: center;
}

.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-medium);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--colour-heading);
  text-wrap: balance;
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-sm);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-meta);
}

/* -- Figures & captions -------------------------------------- */
.prose figure {
  margin-block: var(--space-xl);
}

.prose figcaption {
  margin-top: var(--space-xs);
  padding-top: var(--space-2xs);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--colour-text-meta);
}

/* -- Note: an aside beside the argument ---------------------- */
.note {
  padding: var(--space-md);
  background-color: var(--cream-050);
  border: var(--border-cream);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}

.note p {
  margin: 0;
}

.note__title {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-heading);
  margin-bottom: var(--space-2xs);
}

/* -- Footnotes ----------------------------------------------- */
.footnote-ref {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  vertical-align: super;
  line-height: var(--leading-flat);
  text-decoration: none;
  padding-inline: var(--space-3xs);
}

.footnotes {
  max-width: var(--measure);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: var(--border-hairline);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}

.footnotes__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-text-meta);
  margin-bottom: var(--space-md);
}

.footnotes ol {
  list-style: decimal;
  padding-left: var(--space-md);
  display: grid;
  gap: var(--space-2xs);
}

.footnotes li {
  list-style: decimal;
}

.footnotes li::marker {
  color: var(--colour-heading);
}

/* -- Article footer ------------------------------------------ */
.article-footer {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--measure-wide);
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-lg);
  border-top: var(--border-hairline);
}

.article-footer__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.article-footer__tags-label {
  margin-right: var(--space-2xs);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--colour-text-meta);
}

/* -- Author card --------------------------------------------- */
.author-card {
  display: grid;
  gap: var(--space-sm) var(--space-md);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  padding: var(--space-md);
  background-color: var(--cream-050);
  border: var(--border-cream);
  border-radius: var(--radius-tile);
}

/* Initials in a cream tile, in place of a photograph. The
   answer page's attribution line reuses the same tile. */
.author-card__mark,
.answer-attribution__mark {
  display: grid;
  place-items: center;
  width: var(--space-xl);
  height: var(--space-xl);
  background-color: var(--paper);
  border: var(--rule-hairline) solid var(--cream-400);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--colour-heading);
}

.author-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--colour-heading);
  margin-bottom: var(--space-3xs);
}

.author-card__bio {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--colour-text-muted);
}

/* -- 13d. The rail ------------------------------------------- */
.rail {
  display: grid;
  gap: var(--space-xl);
  align-content: start;
  font-size: var(--text-sm);
}

@media (min-width: 75em) {
  .rail {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
  }
}

.rail__title {
  font-family: var(--font-display);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-text-meta);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-sm);
  border-bottom: var(--border-hairline);
}

.rail__body {
  color: var(--colour-text-muted);
  line-height: var(--leading-relaxed);
}

.toc__list {
  display: grid;
  gap: var(--space-2xs);
}

.toc__link {
  display: block;
  padding-left: var(--space-2xs);
  border-left: var(--rule-thin) solid var(--colour-rule);
  color: var(--colour-text-muted);
  line-height: var(--leading-normal);
  transition: var(--transition-colour);
}

.toc__link:hover {
  border-left-color: var(--burgundy-600);
  color: var(--colour-link-hover);
}

.toc__list .toc__list {
  margin-top: var(--space-2xs);
  padding-left: var(--space-sm);
}

/* Below 75em the contents collapse into a details block. */
.toc-collapsible {
  max-width: var(--measure-wide);
  margin: 0 auto var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--cream-050);
  border: var(--border-cream);
  border-radius: var(--radius-lg);
}

@media (min-width: 75em) {
  .toc-collapsible {
    display: none;
  }
}

.toc-collapsible > summary {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--colour-heading);
  cursor: pointer;
  list-style: none;
}

.toc-collapsible > summary::-webkit-details-marker {
  display: none;
}

.toc-collapsible > summary::after {
  content: ' +';
  font-family: var(--font-body);
}

.toc-collapsible[open] > summary::after {
  content: ' \2212';
}

.toc-collapsible[open] > summary {
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-sm);
  border-bottom: var(--border-cream);
}