/* =========================================================================
   Prayer Pause - Blog post reading layer.
   Composes after type-a.css and page.css, so a post inherits the same night
   palette, the same brand face on the title, the same system-sans body copy,
   and the same nav and footer as /about/, /blog/, /faq/ and /support/.
   Only what lives inside an article is styled here. No em dashes anywhere.
   ========================================================================= */

/* ---- shell -----------------------------------------------------------------
   The prose column stays near 40rem so a line lands around 70 characters.
   Comparison tables need more room, so they break out of the column below,
   up to 60rem, without widening the reading measure itself.
   -------------------------------------------------------------------------- */
.article {
  --gutter: clamp(20px, 5vw, 40px);
  --wide: 60rem;
  padding: clamp(96px, 14vh, 148px) 0 clamp(48px, 8vh, 80px);
}
.article .container {
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Running text keeps a 40rem measure the way .prose keeps 66ch, while the
   hero, the cards and the tables use the full column. The column itself is
   var(--maxw), so a post lines up with /about/, /blog/, /faq/ and /support/. */
.article__back,
.article__tag,
.article__title,
.article__meta,
.article__lede,
.article__body > p,
.article__body > h2,
.article__body > h3,
.article__body > ul,
.article__body > ol,
.article__body > blockquote { max-width: 40rem; }

/* ---- masthead ---- */
.article__back {
  display: inline-block;
  margin-bottom: 26px;
  font-size: 0.92rem;
  color: var(--muted);
  transition: color 0.2s var(--ease);
}
.article__back:hover { color: var(--accent); }

.article__tag {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

.article__title {
  margin: 0;
  font-family: var(--brand);
  font-weight: 400;
  font-size: clamp(2.05rem, 5.2vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--ink);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--muted);
}
.article__meta span { display: inline-flex; align-items: center; }
.article__meta span + span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  margin-right: 18px;
}

/* ---- hero image ---- */
.article__hero { margin: clamp(28px, 5vh, 44px) 0 clamp(30px, 5vh, 48px); }
.article__hero picture { display: block; }
.article__hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid var(--bd);
}
.article__hero-credit {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
}
.article__hero-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- lede ---- */
.article__lede {
  margin: 0 0 8px;
  font-size: clamp(1.12rem, 2.3vw, 1.3rem);
  line-height: 1.55;
  color: var(--muted);
}

/* ---- body copy ---- */
.article__body { margin-top: 26px; }
.article__body > * + * { margin-top: 1.15em; }

.article__body h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-top: clamp(2.2rem, 5vh, 3rem);
  margin-bottom: 0.2em;
}
.article__body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.14rem, 2.4vw, 1.4rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-top: 1.8rem;
  margin-bottom: 0.2em;
}
.article__body p {
  font-size: 1.06rem;
  line-height: 1.7;
  color: var(--ink);
}
.article__body a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
.article__body a:hover { color: var(--ink); }
.article__body strong,
.article__body b { font-weight: 700; color: var(--ink); }
.article__body em { font-style: italic; }
.article__body [lang="ar"] { font-size: 1.05em; line-height: 1; }

.article__body ul,
.article__body ol {
  display: grid;
  gap: 0.6em;
  padding-left: 0;
  margin-left: 0;
  list-style: none;
  counter-reset: ppnum;
}
.article__body li {
  position: relative;
  padding-left: 1.5em;
  font-size: 1.06rem;
  line-height: 1.65;
  color: var(--ink);
}
.article__body ul > li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.68em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.article__body ol > li { counter-increment: ppnum; }
.article__body ol > li::before {
  content: counter(ppnum) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--accent);
}

.article__body blockquote {
  margin: clamp(1.8rem, 4vh, 2.4rem) 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-size: clamp(1.08rem, 2.3vw, 1.24rem);
  line-height: 1.55;
  color: var(--muted);
}
.article__body cite {
  display: block;
  margin-top: 10px;
  font-size: 0.88rem;
  font-style: normal;
  color: var(--muted);
}
.article__body cite a { color: var(--muted); }

/* ---- comparison tables ------------------------------------------------------
   The wrapper steps outside the reading column so a three column table gets
   real room on a laptop, and scrolls inside its own box on a phone instead of
   pushing the page sideways.
   -------------------------------------------------------------------------- */
.comparison-table-wrapper {
  width: min(var(--wide), calc(100vw - 2 * var(--gutter)));
  margin: clamp(1.8rem, 4vh, 2.4rem) 50%;
  transform: translateX(-50%);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--bd);
  border-radius: 16px;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 520px;
}
.comparison-table th,
.comparison-table td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--bd);
  vertical-align: top;
  line-height: 1.5;
}
.comparison-table thead th {
  background: var(--card);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}
.comparison-table tbody th { color: var(--ink); font-weight: 700; }
.comparison-table td { color: var(--muted); }
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table .hl { background: rgba(242, 187, 103, 0.08); color: var(--ink); }
.comparison-table thead th.hl { color: var(--accent); }

/* ---- in-article call to action: one card, one control, every platform ---- */
.article__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: clamp(2.2rem, 5vh, 3rem) 0;
  padding: clamp(22px, 4vw, 30px);
  background: var(--card);
  border: 1px solid var(--bd);
  border-radius: 18px;
}
.article__cta h3 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.4vw, 1.38rem);
  line-height: 1.3;
  color: var(--ink);
}
.article__cta p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
}
/* the pill sits inside .article__body, whose link colour would otherwise
   paint accent text on an accent background */
.article__cta .cta,
.article__body a.cta {
  margin-left: 0;
  flex: none;
  color: var(--accentInk);
  text-decoration: none;
}
.article__cta .cta:hover,
.article__body a.cta:hover { color: var(--accentInk); }
@media (min-width: 620px) {
  .article__cta { flex-direction: row; align-items: center; gap: 26px; }
  .article__cta-text { flex: 1; }
}

/* ---- keep reading ---- */
.article__related {
  margin-top: clamp(2.6rem, 6vh, 3.6rem);
  padding-top: clamp(24px, 4vh, 34px);
  border-top: 1px solid var(--bd);
}
.article__related h2 {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.article__related-list { display: grid; gap: 10px; }
.article__related-link {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--bd);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.article__related-link:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 480px) {
  .article__body p,
  .article__body li { font-size: 1rem; }
  .comparison-table th,
  .comparison-table td { padding: 11px 13px; }
}