/* =========================================================================
   QALadder — article pages
   Long-form content: the take-home hub, scenario questions, the career
   cluster, the tool landing pages and the 404. Everything is tokens from
   theme.css; this file only arranges them.

   One column, sized for reading. The measure (72ch) is the design decision
   here — these pages are 1,500–4,000 words and the audience is often on a
   phone after work. Nothing on these pages competes with the text.
   ========================================================================= */

.article{
  max-width:72ch;margin:0 auto;padding:44px 20px 72px;
}
.article header.a-head{margin-bottom:34px;}
.article .eyebrow{margin-bottom:10px;display:inline-block;}
.article h1{
  font-size:clamp(26px,4.4vw,36px);font-weight:800;line-height:1.18;
  letter-spacing:-.02em;margin:0 0 14px;
}
.article .a-lead{
  font-size:var(--fs-md);line-height:1.65;color:var(--text-soft);margin:0;
}

.article h2{
  font-size:var(--fs-xl);font-weight:700;letter-spacing:-.015em;
  margin:44px 0 14px;line-height:1.25;
}
.article h3{
  font-size:var(--fs-md);font-weight:700;margin:30px 0 10px;line-height:1.3;
}
.article p{margin:0 0 16px;line-height:1.7;}
.article ul,.article ol{margin:0 0 16px;padding-left:24px;line-height:1.7;}
.article li{margin-bottom:6px;}
.article li::marker{color:var(--accent);}
.article strong{font-weight:650;color:var(--text);}
.article a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.article a:hover{color:var(--accent-deep);}

.article code{
  font-family:var(--font-mono);font-size:.9em;
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;
}
.article pre{
  background:var(--ink-dark);color:#E6EAF2;border-radius:var(--r);
  padding:16px 18px;overflow-x:auto;margin:0 0 18px;
  font-family:var(--font-mono);font-size:var(--fs-sm);line-height:1.6;
}
.article pre code{background:none;border:none;padding:0;color:inherit;}

/* Tables scroll inside their own box rather than widening the page —
   comparison tables are how several of these pages win their SERP. */
.article .tbl{overflow-x:auto;margin:0 0 18px;}
.article table{
  border-collapse:collapse;width:100%;font-size:var(--fs-sm);line-height:1.55;
}
.article th{
  text-align:left;font-family:var(--font-display);font-weight:700;
  padding:10px 12px;border-bottom:2px solid var(--border-strong);
  white-space:nowrap;
}
.article td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top;}

/* Question blocks on the scenario page — same visual family as the
   interview bank's cards, without the collapse behaviour. */
.article .sc-q{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:20px 22px;margin:0 0 22px;
}
.article .sc-q h3{margin-top:0;}
.article .sc-lbl{
  display:block;font-family:var(--font-mono);font-size:var(--fs-2xs);
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-deep);margin:16px 0 6px;
}
.article .sc-q .sc-lbl:first-of-type{margin-top:0;}
.article .sc-trap{
  border-left:3px solid var(--fail);padding-left:14px;
}

/* FAQ — visible text, mirrored by the FAQPage JSON-LD. */
.article .faq{margin-top:8px;}
.article .faq h3{margin:22px 0 6px;}

/* End-of-page pointer to the next thing worth doing. One, not a wall. */
.article .next{
  background:var(--grad-brand-soft);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:22px 24px;margin-top:48px;
}
.article .next h2{margin:0 0 8px;font-size:var(--fs-lg);}
.article .next p{margin:0 0 14px;color:var(--text-soft);}

/* Tool landing pages: the try-it block sits above the fold. */
.article .try{
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:22px 24px;margin:26px 0 34px;
  box-shadow:var(--shadow-sm);
}
.article .try p{margin:0 0 14px;color:var(--text-soft);}
.article .try .btn{margin:0;}

/* 404 */
.nf-wrap{
  max-width:560px;margin:0 auto;padding:96px 20px 72px;text-align:center;
}
.nf-code{
  font-family:var(--font-mono);font-weight:700;font-size:15px;
  color:var(--accent);letter-spacing:.08em;
}
.nf-wrap h1{font-size:clamp(24px,4vw,32px);margin:10px 0 12px;letter-spacing:-.02em;}
.nf-wrap p{color:var(--text-soft);line-height:1.65;margin:0 0 26px;}
.nf-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}

@media(max-width:640px){
  .article{padding:30px 16px 56px;}
  .article h2{margin-top:36px;}
  .article .sc-q{padding:16px;}
}