/* ---------- Long read ---------- */
.art { padding-block:56px 112px; }
.art-head, .prose { max-width:760px; margin:0 auto; padding-left:max(24px, env(safe-area-inset-left,0px)); padding-right:max(24px, env(safe-area-inset-right,0px)); }
.art-head h1 { margin:28px 0 0; font-size:clamp(48px, 6.6vw, 92px); line-height:.96; font-weight:500; letter-spacing:-.045em; }
.dek { margin:28px 0 0; font-size:23px; line-height:34px; letter-spacing:-.01em; color:var(--ink-muted); text-wrap:pretty; }
.byline { margin-top:32px; padding-block:20px; display:flex; align-items:center; gap:14px; border-block:1px solid var(--line); font-size:14.5px; color:var(--ink-muted); }
.byline img { width:40px; height:40px; }
.byline b { display:block; color:var(--ink); font-weight:600; }
.prose { margin-top:56px; font-size:19px; line-height:32px; }
.prose h2 { margin:64px 0 0; font-size:32px; line-height:38px; font-weight:500; letter-spacing:-.025em; text-wrap:balance; }
.prose p { margin:20px 0 0; text-wrap:pretty; }
.prose a { text-decoration-color:var(--line-control); text-underline-offset:4px; }
.prose a:hover { text-decoration-color:var(--ink); }
.funnel5 { margin:36px -48px 0; padding:32px 40px; border-radius:var(--r-md); background:var(--tint-sky); }
.funnel5 ol { list-style:none; margin:0; padding:0; counter-reset:f; display:flex; flex-direction:column; gap:18px; }
.funnel5 li { counter-increment:f; display:grid; grid-template-columns:28px 1fr; gap:8px 12px; align-items:center; }
.funnel5 li::before { content:counter(f); width:26px; height:26px; display:grid; place-items:center; border-radius:50%; background:var(--paper); font-size:12.5px; font-weight:600; color:var(--ink-muted); }
.q5 { font-size:17px; line-height:25px; color:var(--ink); }
.funnel5 i { grid-column:2; display:block; height:10px; width:calc(var(--w) * 1%); min-width:10px; border-radius:999px; background:color-mix(in srgb, var(--sky-ink) 22%, var(--paper)); transition:width 1.1s var(--ease); }
.funnel5 li.on .q5 { font-weight:600; } .funnel5 li.on i { background:var(--signal); } .funnel5 li.on::before { background:var(--ink); color:var(--paper); }
.funnel5 figcaption { margin-top:18px; font-size:13px; color:var(--ink-subtle); }
.funnel5.armed i { width:0; }
.facts { margin:32px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0; border-top:1px solid var(--ink); }
.fact { display:flex; flex-direction:column; gap:10px; padding:22px 22px 4px 0; }
.fact + .fact { padding-left:22px; border-left:1px solid var(--line); }
.fact b { font-size:44px; line-height:1; font-weight:500; letter-spacing:-.04em; }
.fact p { margin:0; font-size:15px; line-height:23px; color:var(--ink-muted); }
.fact a { margin-top:auto; font-size:13px; color:var(--ink-subtle); }
.breaks { margin:28px 0 0; display:grid; gap:0; }
.breaks div { padding:18px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:220px 1fr; gap:20px; }
.breaks div:last-child { border-bottom:1px solid var(--line); }
.breaks b { font-size:17px; line-height:26px; font-weight:600; }
.breaks p { margin:0; font-size:16.5px; line-height:26px; color:var(--ink-muted); }
.pull { margin:64px -48px 0; padding:0; font-size:clamp(28px, 3.4vw, 40px); line-height:1.2; font-weight:400; letter-spacing:-.022em; color:var(--ink); text-wrap:balance; }
.pull::before { content:""; display:block; width:48px; height:3px; margin-bottom:24px; border-radius:2px; background:var(--signal); }
.promises3 { margin:28px 0 0; display:flex; flex-direction:column; gap:12px; }
.promises3 div { padding:22px 24px; border-radius:14px; background:var(--mist); }
.promises3 span { font-size:17px; font-weight:600; color:var(--signal); }
.promises3 p { margin:6px 0 0; font-size:16.5px; line-height:26px; color:var(--ink-muted); }
.art-sources { margin-top:72px; padding-top:8px; border-top:1px solid var(--line); }
.art-sources h2 { margin-top:24px; font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.01em; }
.art-sources ul { margin:14px 0 0; padding-left:20px; font-size:15px; line-height:24px; color:var(--ink-muted); }
.art-sources li + li { margin-top:8px; }
@media (max-width: 900px) { .funnel5, .pull { margin-inline:0; } }
@media (max-width: 640px) {
  .prose { font-size:18px; line-height:30px; } .dek { font-size:20px; line-height:30px; }
  .funnel5 { padding:22px 18px; }
  .facts { grid-template-columns:1fr; border-top:0; } .fact, .fact + .fact { padding:20px 0; border-left:0; border-top:1px solid var(--line); }
  .breaks div { grid-template-columns:1fr; gap:6px; }
}
@media (prefers-reduced-motion: reduce) { .funnel5 i { transition:none; } }
