/* ═══════════════════════════════════════════════════════════════════════
   ARTICLE LAYOUT — long-form reading.

   Why this file exists. The interior pages were built from the marketing
   section styles: .wrap runs to 1480px, .prose caps at 720px and is NOT
   centred, and .section carries 118px of padding top and bottom. On a
   desktop that puts the text down the left and leaves roughly 640px of
   empty column on the right, with 236px of air between every block.

   Fine for a landing page made of full-width bands. Wrong for an article,
   where the reader wants one column, a steady rhythm and nothing to track
   across. This sheet narrows the measure, centres it, and replaces the
   band spacing with an editorial scale.
   ═══════════════════════════════════════════════════════════════════════ */

.article{
  --measure: 720px;      /* body column: ~68 characters at 17px */
  --measure-wide: 860px; /* hero and numbered schedules breathe wider */
}

/* ---------- the column ----------
   Narrowing .wrap itself is what kills the dead space: every child
   (headings, prose, lists, the schedule, the Q&A) inherits the measure
   and centres, instead of each one deciding for itself. */
.article .wrap{width:min(calc(100% - 48px),var(--measure));margin-inline:auto}
.article .phero .wrap,
.article .crumb-wrap{width:min(calc(100% - 48px),var(--measure-wide))}
.article .prose{max-width:none}          /* the wrap is the measure now */

/* ---------- vertical rhythm ----------
   One document, not a stack of bands. Sections no longer carry 118px of
   padding or a full-width rule; space comes from the heading above. */
.article .section{padding:0;border-bottom:0}
.article .section + .section{padding-top:0}

/* ---------- hero ---------- */
.article .phero{padding:26px 0 40px;border-bottom:1px solid var(--line)}
.article .phero h1{font-size:clamp(40px,5.4vw,68px);line-height:.94;margin:14px 0 0}
.article .phero .lead{font-size:18px;line-height:1.66;max-width:62ch;margin:24px 0 0;
  color:#2b2a27}
.article .rule{margin:22px 0 0}
.article .btns{margin:28px 0 0}
.article .crumb{padding:20px 0 0}

/* ---------- headings ----------
   Headings hug the content they introduce: generous space above, tight
   below. That is what makes a long page scannable. */
.article main h2.display{
  font-size:clamp(27px,3.1vw,38px);line-height:1.06;margin:60px 0 18px;
  padding-top:26px;border-top:1px solid var(--line)}
.article main .phero h1{border-top:0;padding-top:0}
.article main h3{
  font-family:"Inter Tight",Arial,sans-serif;text-transform:none;letter-spacing:0;
  font-size:19px;line-height:1.35;font-weight:700;margin:34px 0 10px;color:var(--ink)}

/* ---------- body ---------- */
.article .prose p{font-size:17px;line-height:1.78;color:#2b2a27;margin:0 0 22px}
.article .prose p:last-child{margin-bottom:0}
.article .prose strong{font-weight:700;color:var(--ink)}
.article .prose a{color:inherit;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(17,17,15,.34)}
.article .prose a:hover{text-decoration-color:var(--ink)}

/* lists: hang the marker, give each item room */
.article .prose ul,.article .prose ol{margin:0 0 24px;padding-left:0;list-style:none}
.article .prose li{font-size:17px;line-height:1.72;color:#2b2a27;margin:0 0 13px;
  padding-left:30px;position:relative}
.article .prose ul > li:before{content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:7px;background:var(--yellow);border-radius:50%}
.article .prose ol{counter-reset:bm}
.article .prose ol > li{counter-increment:bm}
.article .prose ol > li:before{content:counter(bm);position:absolute;left:0;top:0;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
  font-size:17px;line-height:1.72;color:#A07100;font-variant-numeric:tabular-nums}
.article .prose li:last-child{margin-bottom:0}

/* ---------- pull quote ----------
   For the one sentence the reader should leave with. */
.article .pull{margin:38px 0;padding:0 0 0 24px;border-left:4px solid var(--yellow)}
.article .pull p{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:900;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(22px,2.5vw,29px);line-height:1.13;color:var(--ink);margin:0}
.article .pull cite{display:block;font-family:"Inter Tight",Arial,sans-serif;
  font-style:normal;text-transform:none;font-weight:600;font-size:13px;
  line-height:1.5;color:var(--muted);margin-top:12px;letter-spacing:0}

/* ---------- key facts panel ---------- */
.article .keyfacts{background:var(--paper2);border:1px solid var(--line);
  padding:24px 26px;margin:34px 0}
.article .keyfacts h3{margin:0 0 14px;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:800;color:var(--muted)}
.article .keyfacts ul{margin:0;padding:0;list-style:none}
.article .keyfacts li{font-size:15px;line-height:1.6;margin:0 0 11px;padding-left:0;
  display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:baseline}
.article .keyfacts li:last-child{margin-bottom:0}
.article .keyfacts li:before{content:none}
.article .keyfacts b{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:900;font-size:20px;line-height:1.2;color:#A07100;white-space:nowrap;
  font-variant-numeric:tabular-nums}

/* ---------- practical answers ----------
   Ruled rows so each question is findable, with the answer set quieter
   than the question. This was previously an undifferentiated h3/p run. */
.article .qa{border-top:1px solid var(--ink);margin:24px 0 0}
.article .qa > div{padding:24px 0 22px;border-bottom:1px solid var(--line)}
.article .qa h3{margin:0 0 9px;font-size:18px;line-height:1.35;font-weight:700}
.article .qa p{margin:0;font-size:16px;line-height:1.72;color:#3a3833}

/* ---------- sources ---------- */
.article .sources li{font-size:15px;line-height:1.6;margin-bottom:11px}
.article .note{font-size:14px;line-height:1.65;color:var(--muted);
  border-top:1px solid var(--line);padding-top:18px;margin-top:26px}

/* ---------- numbered schedule (.inc) ----------
   Already a good device. It only needed room and a tighter cap. */
.article .inc{margin-top:22px}
.article .inc p{max-width:none}

/* ---------- end matter ---------- */
.article .endmatter{margin:66px 0 0;padding:30px 0 0;border-top:3px solid var(--ink)}
.article .endmatter h2.display{margin-top:0;padding-top:0;border-top:0}

/* ---------- foot of the article ---------- */
.article main{padding-bottom:78px}

@media(max-width:820px){
  .article .wrap,.article .phero .wrap{width:calc(100% - 36px)}
  .article main h2.display{margin:44px 0 16px;padding-top:22px}
  .article .prose p,.article .prose li{font-size:16px}
  .article .phero .lead{font-size:17px}
  .article .pull{margin:30px 0;padding-left:18px}
  .article .keyfacts{padding:20px}
}
@media(max-width:560px){
  .article .wrap,.article .phero .wrap{width:calc(100% - 28px)}
}
@media(prefers-reduced-motion:reduce){
  .article .prose a{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   JOB CARDS — the Welcome to the Jungle pattern.

   Title, then a row of meta chips a reader can scan in two seconds
   (pay, place, working pattern, commitment), then short labelled blocks:
   the role, who you are, what you would do. Nothing else. The platform
   extras on WTTJ (funding rounds, investor timeline, headcount splits)
   belong to the site, not to a job description.
   ═══════════════════════════════════════════════════════════════════════ */

.jobs{margin:26px 0 0;display:grid;gap:18px}

.job{border:1px solid var(--line);background:var(--paper2);padding:26px 28px}
.job-title{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:900;text-transform:uppercase;font-size:clamp(23px,2.6vw,30px);
  line-height:1.02;margin:0 0 14px;color:var(--ink)}

/* meta chips */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px;padding:0;list-style:none}
.chips li{margin:0;padding:5px 11px;border:1px solid rgba(17,17,15,.22);
  background:var(--paper);font-size:12px;line-height:1.35;font-weight:600;
  color:#3a3833;white-space:nowrap}
.chips li:before{content:none}
.chips li.pay{background:var(--yellow);border-color:var(--yellow);
  color:var(--ink);font-weight:800}

/* labelled blocks inside a card */
.job-sec{margin:18px 0 0}
.job-sec:first-of-type{margin-top:0}
.job-sec h4{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--muted);margin:0 0 9px;
  font-family:"Inter Tight",Arial,sans-serif}
.job-sec p{font-size:15.5px;line-height:1.7;color:#2b2a27;margin:0}
.job-sec ul{margin:0;padding:0;list-style:none}
.job-sec li{font-size:15.5px;line-height:1.62;color:#2b2a27;margin:0 0 9px;
  padding-left:010px;padding-left:22px;position:relative}
.job-sec li:last-child{margin-bottom:0}
.job-sec li:before{content:"";position:absolute;left:2px;top:.6em;
  width:6px;height:6px;background:#A07100;border-radius:50%}

/* perks — emoji lead, one line each, no essays */
.perks{margin:22px 0 0;padding:0;list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:13px 26px}
.perks li{font-size:15px;line-height:1.55;color:#2b2a27;margin:0;
  padding-left:30px;position:relative}
.perks li:before{content:none}
.perks .ico{position:absolute;left:0;top:0;font-size:16px;line-height:1.55}
.perks b{font-weight:700;color:var(--ink)}

@media(max-width:820px){
  .job{padding:22px 20px}
  .perks{grid-template-columns:1fr;gap:12px}
  .job-sec li,.job-sec p{font-size:15px}
}

/* apply action on each card */
.job-apply{margin:22px 0 0;padding-top:18px;border-top:1px solid rgba(17,17,15,.16);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.job-apply .btn{margin:0}
.job-apply-note{font-size:13px;line-height:1.5;color:var(--muted)}
@media(max-width:520px){.job-apply{gap:10px}.job-apply .btn{width:100%;justify-content:center}}

/* ---------- commencement timeline ----------
   Built for the Employment Rights Act piece, which is fundamentally a list of
   dates. Date on the left so the column scans as a calendar; a status chip
   carries whether a measure is already law, so the reader can stop reading at
   the point they have caught up. */
.article .tl{margin:30px 0;border-top:1px solid var(--ink)}
.article .tl > div{padding:20px 0 18px;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:132px minmax(0,1fr);gap:4px 26px;align-items:start}
.article .tl .d{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:900;font-size:19px;line-height:1.15;color:var(--ink);
  font-variant-numeric:tabular-nums;grid-row:span 2}
.article .tl .d span{display:block;font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:800;margin-top:6px;padding:2px 6px;
  border:1px solid var(--line);color:var(--muted);justify-self:start;width:max-content}
.article .tl .d span.now{background:var(--yellow);border-color:var(--yellow);color:#3a2c00}
.article .tl .d span.done{background:var(--mint2);border-color:var(--mint)}
.article .tl h3{margin:0 0 7px;font-size:17px;line-height:1.35;font-weight:700}
.article .tl ul{margin:0;padding:0;list-style:none}
.article .tl li{font-size:15.5px;line-height:1.65;color:#3a3833;margin:0 0 5px;
  padding-left:16px;position:relative}
.article .tl li:before{content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--muted)}
.article .tl li:last-child{margin-bottom:0}
@media(max-width:560px){
  .article .tl > div{grid-template-columns:1fr;gap:8px}
  .article .tl .d{grid-row:auto;display:flex;align-items:center;gap:10px}
  .article .tl .d span{margin-top:0}
}