/* ==========================================================================
   Article — page module for every guide (guides/<slug>/index.html); the
   hub borrows its closing call to action
   A reading layout on one centred axis. Every block is either --measure wide
   (the text column: headline, standfirst, prose, author, end CTA) or
   --measure-wide (the pictures and read-next), so the page steps out and
   back on a single centre line instead of drifting between four rails.
   ========================================================================== */

/* reading progress bar */
.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--thread); z-index: 80; transition: width .08s linear; }

/* ---------- The two rails ---------- */
.article-head .wrap,
.end-cta .wrap { max-width: calc(var(--measure) + var(--edge) * 2); }
.article-hero,
.article-body .wrap,
.read-next .wrap { max-width: calc(var(--measure-wide) + var(--edge) * 2); }
.prose,
.article-foot { max-width: var(--measure); margin-inline: auto; }

/* ---------- Article header ---------- */
.article-head { padding-block: var(--sp-9) var(--sp-7); }
.article-head h1 {
  font-weight: 300; font-size: var(--d-1);
  line-height: 1.04; letter-spacing: -0.028em;
  margin-bottom: var(--sp-6);
}
.article-head h1 em { color: var(--thread); }
.article-head .standfirst {
  font-family: var(--font-serif); font-weight: 300;
  font-size: var(--fs-xl); line-height: 1.45; color: var(--ink-soft);
  margin-bottom: var(--sp-7);
}
.article-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4);
  font-size: var(--fs-sm); color: var(--ink-faint);
  border-top: 1px solid var(--line); padding-top: var(--sp-5);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-faint); flex-shrink: 0; }

/* ---------- Hero image ---------- */
.article-hero { margin-block: var(--sp-5) var(--sp-8); }
.article-hero .ph { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }

/* ---------- Article body ----------
   Three ranks inside the prose — 19 / 27 / 38 at full size — each a clear
   step apart, so a subhead can never be mistaken for a section head. */
.article-body { padding-bottom: var(--sp-9); }
.prose > * { margin-bottom: 1.5em; }
.prose p { font-size: var(--fs-md); line-height: 1.72; color: var(--ink-prose); }
.prose p a { color: var(--thread); text-underline-offset: 3px; }

/* Drop cap. font-size x line-height is a whole multiple of the paragraph's
   line-height, so the cap occupies exactly three lines at any type size —
   two on a phone, where three would eat a third of the measure. */
.prose > p.lead-para:first-of-type::first-letter {
  font-family: var(--font-serif); font-weight: 400;
  float: left; font-size: 6.2em; line-height: 0.82;
  padding: 0.02em 0.1em 0 0; color: var(--thread);
}

.prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--d-3); line-height: 1.16; letter-spacing: -0.02em; margin-top: 1.7em; margin-bottom: 0.5em; }
.prose h3 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-xl); line-height: 1.28; letter-spacing: -0.008em; margin-top: 2.4em; margin-bottom: 0.5em; }
/* The rule is outdented so the quotation itself sits on the body rail. */
.prose blockquote {
  font-family: var(--font-serif); font-weight: 300; font-style: italic;
  font-size: var(--d-3); line-height: 1.3; letter-spacing: -0.015em; color: var(--ink);
  border-left: 2px solid var(--thread); padding-left: var(--sp-5);
  margin-block: 1.7em; margin-left: calc(-1 * var(--sp-5));
  max-width: min(100%, 34rem); text-wrap: pretty;
}
.prose blockquote.wide { max-width: none; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { font-size: var(--fs-md); line-height: 1.7; color: var(--ink-prose); margin-bottom: 0.5em; }
.prose li::marker { color: var(--thread); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 2.6em auto; max-width: 60px; }

/* stitched section divider */
.stitch-rule { border: none; height: 2px; max-width: 120px; margin: 2.8em auto; background-image: repeating-linear-gradient(90deg, var(--thread) 0 7px, transparent 7px 13px); }

/* inline pull stat — the air around it is set against the figure's own size,
   not the paragraph's, or an 82px numeral gets a paragraph's worth of space */
.prose .stat { text-align: center; margin-block: var(--sp-8); }
.prose .stat .n { font-family: var(--font-serif); font-weight: 300; font-size: var(--d-0); line-height: 1; color: var(--thread); letter-spacing: -0.03em; }
.prose .stat .l { font-size: var(--fs-base); line-height: 1.55; color: var(--ink-soft); margin-top: var(--sp-4); max-width: 42ch; margin-inline: auto; }

/* ---------- Author card ---------- */
.article-foot { border-top: 1px solid var(--line); padding-top: var(--sp-7); margin-top: var(--sp-7); }
.author { display: flex; gap: var(--sp-4); align-items: center; }
.author .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 1.25rem; flex-shrink: 0; }
.author .who { font-size: var(--fs-ui); line-height: 1.55; }
.author .who strong { display: block; font-weight: 500; margin-bottom: 2px; }
.author .who span { color: var(--ink-faint); }

/* ---------- End CTA ---------- */
.end-cta { background: var(--ink); color: var(--paper); padding-block: var(--sp-9); margin-top: var(--sp-9); }
.end-cta .wrap { text-align: center; }
.end-cta h2 {
  font-weight: 300; font-style: italic; font-size: var(--d-3);
  line-height: 1.1; letter-spacing: -0.022em; margin-bottom: var(--sp-4);
}
.end-cta p { color: var(--paper-body); font-size: var(--fs-md); line-height: 1.6; margin-bottom: var(--sp-6); max-width: 48ch; margin-inline: auto; }
.end-cta .btn { background: var(--paper); border-color: var(--paper); color: var(--ink); }
/* Two ways in: the trial (do it yourself) and the demo (see it first). The
   demo is the quieter of the two, outlined on the dark band. */
.end-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.end-cta .btn-ghost { background: transparent; border-color: var(--paper-faint); color: var(--paper); }
@media (hover: hover) and (pointer: fine) {
  .end-cta .btn:hover { background: var(--thread); border-color: var(--thread); color: var(--paper); }
}
@media (max-width: 620px) {
  .end-cta-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- Read next ---------- */
.read-next { padding-block: var(--sp-9); }
.read-next .rn-head { font-size: var(--fs-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--sp-6); }
.rn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(32px, 4vw, 56px); }
.rn-card { text-decoration: none; color: inherit; }
.rn-card h3 {
  font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-xl);
  line-height: 1.18; letter-spacing: -0.012em;
  margin-bottom: var(--sp-3); transition: color .25s ease;
}
.rn-card p { font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-soft); }
.rn-card .c-meta { margin-top: var(--sp-3); }
@media (hover: hover) and (pointer: fine) {
  .rn-card:hover h3 { color: var(--thread); }
}

/* ---------- Responsive ---------- */
@media (max-width: 620px) {
  .prose > p.lead-para:first-of-type::first-letter { font-size: 4.15em; }
  .prose blockquote { margin-left: 0; padding-left: var(--sp-4); }
  /* the separators are only separators while the row is one line */
  .article-meta { gap: var(--sp-2) var(--sp-4); }
  .article-meta .dot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { display: none; }
}