/* Emergnt Media — Perspectives article pages (perspectives/<slug>/).
   Article pages reuse the case-study system (base.css + case.css + case.js).
   This file only adds what articles need on top: a smaller title for long
   headlines, inline links in running text, the numbered checklist and the
   sources list. */

/* long headlines: same type, smaller scale than a client name */
.ar .cs-title{font-size:clamp(44px, 6.6vw, 112px);line-height:1;letter-spacing:-.05em}
.ar .cs-title--tag{margin-top:.12em;font-size:clamp(26px, 3.4vw, 56px);line-height:1.08;letter-spacing:-.04em}
html .ar .cs-tmask{font-size:clamp(44px, 6.6vw, 112px)}
html .ar .cs-tmask--sub{font-size:clamp(26px, 3.4vw, 56px)}

/* inline links in running text: hairline that darkens on hover */
.ar :is(.cs-p, .cs-qa__a, .ar-list__d, .cs-open__lede) a{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:var(--sm);transition:text-decoration-color .3s ease}
.ar :is(.cs-p, .cs-qa__a, .ar-list__d, .cs-open__lede) a:hover,
.ar :is(.cs-p, .cs-qa__a, .ar-list__d, .cs-open__lede) a:focus-visible{text-decoration-color:var(--fg)}

/* numbered checklist (rules + tabular numbers, like the case-study steps) */
.ar-list{list-style:none;margin:0;padding:0;max-width:880px;counter-reset:ar}
.ar-list li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:24px;padding:18px 0 22px;border-top:1px solid var(--rule)}
.ar-list li::before{counter-increment:ar;content:counter(ar, decimal-leading-zero);padding-top:5px;font-size:var(--small);line-height:16px;letter-spacing:.01em;color:var(--sm);font-variant-numeric:tabular-nums}
.ar-list__t{display:block;font-size:18px;line-height:1.45;letter-spacing:-.01em}
.ar-list__d{display:block;margin-top:6px;max-width:62ch;font-size:16px;line-height:1.6;opacity:.7;text-wrap:pretty}

/* sources */
.ar-src{list-style:none;margin:0;padding:0;max-width:880px}
.ar-src li{border-top:1px solid var(--rule);padding:12px 0 14px;font-size:14px;line-height:1.5;letter-spacing:-.005em}
.ar-src a{color:var(--sm);transition:color .3s ease;overflow-wrap:anywhere}
.ar-src a:hover,.ar-src a:focus-visible{color:var(--fg)}

@media (max-width:759px){
  .ar-list li{grid-template-columns:28px minmax(0,1fr);column-gap:12px}
  .ar-list__t{font-size:17px}
}

/* the h1 holds both title lines so the full headline stays one heading */
.ar-h1{margin:0;font-size:inherit;font-weight:400}
.ar-h1 .cs-tmask,.ar-h1 .cs-title{display:block}