/* ---------- perspectives (/work/perspectives/) ----------
   Scoped to .psp; loaded from inside the article so it also applies when the homepage overlay
   lifts the page. Only the site's own tokens: two cities are told apart by accent and ink, which
   is all the palette has, and anchors by a ring rather than a third colour. */

/* TKTK: unmissable, so nothing ships with a gap nobody noticed */
.psp .tk{font-weight:500;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.5;color:var(--accent);
  background:rgba(46,58,87,.07);padding:1px 4.38px;border-radius:1.75px;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-variant-numeric:tabular-nums;}

.psp-stats{margin-top:clamp(35px,5vw,49px);}

/* (01) the verdict: one step under the question, well above the body */
.psp-verdict__txt p{font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.3;letter-spacing:-0.01em;color:var(--ink);max-width:22em;margin-top:15.75px;}

/* (02) the chain */
.psp-chain svg{display:block;width:100%;height:auto;max-width:490px;}
.psp-chain rect{fill:var(--paper);stroke:var(--line);stroke-width:1;}
/* sizes are in the drawing's 560-unit width: at a 327px phone column 22 reads as ~13px */
.psp-chain text{font-family:var(--sans);font-size:22px;fill:var(--ink-2);}
.psp-chain text.k{font-weight:500;font-family:var(--mono);font-size:15px;letter-spacing:.04em;fill:var(--faint-2);font-variant-numeric:tabular-nums;}
.psp-chain text.tk{letter-spacing:.04em;font-weight:500;font-family:var(--mono);font-size:15px;fill:var(--accent);font-variant-numeric:tabular-nums;}
.psp-chain__old text:not(.k):not(.tk){fill:var(--faint-2);}
.psp-chain__old .strike{stroke:var(--ink-soft);stroke-width:1.3;fill:none;}
.psp-chain__new rect{stroke:var(--accent);stroke-width:1.6;}
.psp-chain__new text:not(.k){fill:var(--ink);}
.psp-chain__step{stroke:var(--line);stroke-width:1.3;fill:none;}
.psp-chain__head{fill:var(--line);}
.psp-chain__back{stroke:var(--accent);stroke-width:1.4;stroke-dasharray:5 5;fill:none;}
.psp-chain__head2{fill:var(--accent);}
.psp-chain__lbl{font-weight:500;font-family:var(--mono);font-size:15px;letter-spacing:.04em;fill:var(--accent);font-variant-numeric:tabular-nums;}

/* (03) the methods box: set apart like a box in a paper, a ruled frame on the second paper */
.psp-methods{margin-top:15.75px;background:var(--paper-2);border:1px solid var(--line);padding:clamp(17.5px,3vw,31.5px);}
.psp-methods__hd{font-weight:500;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;color:var(--faint-2);padding-bottom:12.25px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
.psp-methods__dl{margin:0;display:grid;}
.psp-methods__dl > div{display:grid;grid-template-columns:minmax(9em,13em) 1fr;gap:5.25px 24.5px;padding:12.25px 0;
  border-bottom:1px solid rgba(28,27,24,.09);}
.psp-methods__dl dt{font-weight:500;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink);padding-top:2.62px;font-variant-numeric:tabular-nums;}
.psp-methods__dl dd{margin:0;font-size:13.12px;line-height:1.6;color:var(--ink-soft);max-width:40em;}
.psp-methods__slot{margin-top:19.25px;padding:14px 15.75px;border:1px dashed var(--line);background:var(--paper);}
.psp-methods__k{font-weight:500;display:block;font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;color:var(--faint-2);margin-bottom:8.75px;font-variant-numeric:tabular-nums;}
.psp-methods__slot ol{margin:0;padding-left:1.4em;font-size:13.12px;line-height:1.6;color:var(--ink-2);}
.psp-methods__slot li{margin-bottom:.5em;}
.psp-methods__src{margin-top:8.75px;font-size:11.38px;color:var(--faint);}
.psp-methods__note{margin-top:15.75px;}

/* (04) findings: the claim in the serif, its evidence under it in the body */
.psp-findings{list-style:none;margin:15.75px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(17.5px,3vw,35px);}
.psp-findings li{display:grid;grid-template-columns:2.4em 1fr;gap:0 8.75px;padding:19.25px 0 22.75px;border-top:1px solid rgba(28,27,24,.09);}
.psp-findings__n{letter-spacing:.04em;font-weight:500;grid-row:1 / span 2;font-family:var(--mono);font-size:9.62px;color:var(--accent);padding-top:6.12px;font-variant-numeric:tabular-nums;}
.psp-findings__claim{letter-spacing:-0.025em;font-family:var(--serif);font-weight:500;font-size:clamp(1.2rem,1.7vw,1.4rem);line-height:1.02;color:var(--ink);margin:0 0 8.75px;}
.psp-findings__ev{font-size:13.12px;line-height:1.6;color:var(--ink-soft);margin:0;}

/* data states: sample rows are labelled, an empty file says so instead of drawing */
.psp-sample{font-weight:500;font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;line-height:1.5;color:var(--accent);margin:0 0 12.25px;
  padding:7px 8.75px;border-left:1.75px solid var(--accent);background:rgba(46,58,87,.05);font-variant-numeric:tabular-nums;}
.psp-empty{font-weight:500;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;line-height:1.6;color:var(--ink-2);
  padding:clamp(24.5px,5vw,49px) clamp(15.75px,3vw,28px);background:var(--stripe);border:1px dashed var(--ink-soft);font-variant-numeric:tabular-nums;}
.psp-empty span{color:var(--accent);}
.psp-warn{color:var(--accent);}

/* (05) the network: one panel per city, side by side; stacked on the phone */
.psp-c0{fill:var(--accent);background:var(--accent);}
.psp-c1{fill:var(--ink);background:var(--ink);}
.psp-c2{fill:var(--faint-2);background:var(--faint-2);}
.psp-net__panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(14px,2.5vw,28px);}
.psp-net__panel{margin:0;}
.psp-net__panel svg{display:block;width:100%;height:auto;background:var(--paper-2);}
.psp-tie{fill:none;vector-effect:non-scaling-stroke;}
.psp-tie--prior{stroke:var(--faint-2);stroke-width:1;stroke-dasharray:2 3;opacity:.7;}
.psp-tie--fresh{stroke:var(--ink-soft);stroke-width:1;opacity:.45;}
.psp-node{stroke:var(--paper-2);stroke-width:1.2;}
.psp-ring{fill:none;stroke:var(--ink);stroke-width:1.4;}
.psp-net__name{font-weight:500;display:flex;align-items:center;gap:7px;margin-top:8.75px;font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;color:var(--ink);font-variant-numeric:tabular-nums;}
.psp-net__name span{color:var(--faint-2);}
.psp-dot{display:inline-block;width:7.88px;height:7.88px;border-radius:50%;}
.psp-key{font-weight:500;list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:7px 21px;
  font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;color:var(--faint);font-variant-numeric:tabular-nums;}
.psp-key li{display:flex;align-items:center;gap:7px;}
.psp-key i{display:inline-block;flex:none;}
.psp-key__fresh{width:19.25px;height:0;border-top:1.31px solid var(--ink-soft);}
.psp-key__prior{width:19.25px;height:0;border-top:1.31px dashed var(--faint-2);}

/* a text-only chapter has no title between the eyebrow and the body */
.psp .chap__eyebrow + .chap__body{margin-top:14px;}
.psp-key__size{width:10.5px;height:10.5px;border-radius:50%;background:var(--faint-2);box-shadow:-7px 1.75px 0 -2.62px var(--faint-2);margin-left:5.25px;}
.psp-key__ring{width:10.5px;height:10.5px;border-radius:50%;border:1.23px solid var(--ink);}
.psp-net .plate__cap{max-width:46em;}

/* (06) the reproduction metric, as a standalone statement */
.psp-repro__n{font-family:var(--serif);font-weight:500;font-size:clamp(4.5rem,13vw,10rem);line-height:1.02;letter-spacing:-0.025em;color:var(--ink);margin-top:15.75px;}
.psp-repro__s{letter-spacing:-0.01em;font-family:var(--serif);font-weight:300;font-size:clamp(1.45rem,2.5vw,2.05rem);line-height:1.3;color:var(--ink);max-width:20em;margin-top:12.25px;}
.psp-repro__f{font-size:var(--t-small);line-height:1.55;color:var(--faint);max-width:38em;margin-top:14px;}

/* (07) the topic graph */
.psp-kg svg{display:block;width:100%;height:auto;background:var(--paper-2);}
.psp-kg__edge{stroke:var(--line);stroke-linecap:round;opacity:.8;}
.psp-kg__node circle{fill:var(--accent);fill-opacity:.85;stroke:var(--paper-2);stroke-width:2;}
.psp-kg__node text{font-family:var(--sans);font-size:17px;fill:var(--ink-2);paint-order:stroke;stroke:var(--paper-2);stroke-width:4px;stroke-linejoin:round;}
.psp-kg__cat{font-weight:500;font-family:var(--mono);font-size:15px;letter-spacing:.04em;fill:var(--faint-2);text-transform:uppercase;font-variant-numeric:tabular-nums;}
.psp-table{margin-top:15.75px;}
.psp-table summary{font-weight:500;cursor:pointer;font-family:var(--mono);font-size:9.62px;letter-spacing:.04em;color:var(--accent);padding:7px 0;font-variant-numeric:tabular-nums;}
.psp-table table{width:100%;border-collapse:collapse;font-size:var(--t-small);margin-top:7px;}
.psp-table th{text-align:left;font-family:var(--mono);font-weight:500;font-size:9.62px;letter-spacing:.04em;color:var(--faint-2);padding:5.25px 8.75px 5.25px 0;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
.psp-table td{padding:6.12px 8.75px 6.12px 0;color:var(--ink-2);border-bottom:1px solid rgba(28,27,24,.09);}
.psp-table td:nth-child(n+3),.psp-table th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums;}

/* (08) photographs: two across, then three; a slot with no image keeps the site's stripe */
.psp-consent{margin-top:12.25px;}
.psp-photos{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2.5vw,24.5px);margin-top:17.5px;}
.psp-photos > .plate{grid-column:span 2;}
.psp-photos > .plate:nth-child(-n+2){grid-column:span 3;}
.psp-photos .plate__img > img{aspect-ratio:3 / 2;object-fit:cover;height:auto;}
.psp-slot{aspect-ratio:3 / 2;background:var(--stripe);}

/* the software, small and late */
.psp-software{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(17.5px,3vw,35px);row-gap:14px;align-items:start;
  margin-top:clamp(42px,7vw,70px);padding-top:19.25px;border-top:1px solid rgba(28,27,24,.09);}
.psp-software > p{grid-column:1 / span 5;font-size:var(--t-small);line-height:1.6;color:var(--faint);}
.psp-software__screens{grid-column:7 / -1;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.psp-software .psp-slot{aspect-ratio:4 / 3;}

.psp-questions p{letter-spacing:-0.01em;font-weight:300;font-family:var(--serif);font-size:1.2rem;line-height:1.4;color:var(--ink);}
.psp-questions p:has(> .tk:only-child){font-family:var(--sans);font-size:var(--t-prose);}

@media(max-width:717px){
  .psp-findings{grid-template-columns:1fr;}
  .psp-methods__dl > div{grid-template-columns:1fr;}
  .psp-photos > .plate,.psp-photos > .plate:nth-child(-n+2){grid-column:1 / -1;}
  .psp-software > p,.psp-software__screens{grid-column:1 / -1;}
  /* on the phone the topic graph keeps only the biggest labels, set larger */
  .psp-kg__node:not(.is-major) text{display:none;}
  .psp-kg__node text{font-size:34px;stroke-width:7px;}
  .psp-kg__cat{font-size:22.75px;}
}
