*{box-sizing:border-box}
:root{--paper:#f2f2f2;--ink:#1b1b1b;--navy:#153a80;--line:#d8d6d2;--mute:#6b6b6b;
--card:#fff;--display:'Source Serif 4',ui-serif,Georgia,serif;
--sans:'Source Sans 3',system-ui,-apple-system,'Segoe UI',sans-serif;
--mono:'Source Code Pro',ui-monospace,Menlo,monospace}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--sans)}
a{color:var(--navy)}
.wrap{max-width:960px;margin:0 auto;padding:0 20px 72px}
.hd{display:flex;gap:20px;align-items:flex-start;padding:34px 0 22px;border-bottom:1px solid var(--line)}
.hd img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:#e4e2de;flex:0 0 96px}
h1{font:600 38px/1.15 var(--display);margin:0 0 8px;letter-spacing:-.01em}
.sub{font:500 15px/1.5 var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em;margin:0}
.lede{font:400 20px/1.45 var(--display);margin:12px 0 0;max-width:62ch}
h2{font:600 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
color:var(--mute);margin:44px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
table{width:100%;border-collapse:collapse}
td,th{padding:11px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
td.n,th.n{text-align:right;font-family:var(--mono);white-space:nowrap}
tr:last-child td{border-bottom:0}
.bname{font-weight:600}
.band{background:var(--card);border:1px solid var(--line);padding:18px 20px;margin-top:14px}
.band .big{font:600 30px/1.1 var(--display);color:var(--navy)}
.note{font-size:14px;color:var(--mute);margin:8px 0 0;max-width:66ch}
.vid{font-size:15px}
.vid a{text-decoration:none}
.vid a:hover{text-decoration:underline}
.foot{margin-top:56px;padding-top:20px;border-top:1px solid var(--line);
font-size:14px;color:var(--mute)}
.gaps a{display:inline-block;margin:0 8px 8px 0;background:var(--card);
border:1px solid var(--line);padding:7px 12px;text-decoration:none;font-size:15px}
.gaps a:hover{border-color:var(--navy)}
.rung{display:block;font:500 11px/1.5 var(--mono);color:var(--mute);
text-transform:uppercase;letter-spacing:.06em;margin-top:5px}
.want{font-weight:600}
.said{font:400 16px/1.5 var(--display);max-width:58ch}
.said a{text-decoration:none}
.said a:hover{text-decoration:underline}
.saidv{display:block;font:400 13px/1.45 var(--sans);color:var(--mute);margin-top:6px}
.chan{margin:14px 0 0}
.chan a{display:inline-block;background:var(--card);border:1px solid var(--line);
padding:8px 14px;text-decoration:none;font:500 15px var(--sans)}
.chan a:hover{border-color:var(--navy)}
.srch{width:100%;padding:13px 15px;font:400 17px var(--sans);border:1px solid var(--line);
background:var(--card);margin:18px 0 6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px;margin-top:16px}
.cc{background:var(--card);border:1px solid var(--line);padding:14px;text-decoration:none;color:inherit;display:block}
.cc:hover{border-color:var(--navy)}
.cc b{display:block;font:600 17px/1.25 var(--display);margin-bottom:5px}
.cc span{font:500 12px/1.4 var(--mono);color:var(--mute)}
/* EVERY VIDEO, as something you can watch. The thumbnail is 16:9 because that is the
   shape YouTube stores, so nothing is cropped and every card in the row is the same
   height whatever arrived. */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
gap:18px 14px;margin-top:16px}
.vc{min-width:0}
.vt{display:block;width:100%;position:relative;padding:0;border:1px solid var(--line);
background:#e6e4e0;cursor:pointer;aspect-ratio:16/9;overflow:hidden}
.vt[hidden]{display:none}
.vt img{width:100%;height:100%;object-fit:cover;display:block}
.vt:hover{border-color:var(--navy)}
/* The play mark is the only thing saying this picture is not a picture. It sits on its
   own disc so it is legible over a bright frame and a dark one alike (rule 97). */
.vp{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:46px;height:46px;border-radius:50%;background:rgba(12,12,12,.66);color:#fff;
font-size:17px;line-height:46px;text-align:center;padding-left:3px}
.vt:hover .vp{background:var(--navy)}
.vd{position:absolute;right:6px;bottom:6px;background:rgba(12,12,12,.78);color:#fff;
font:600 11px/1 var(--mono);padding:4px 6px}
.vf{width:100%;aspect-ratio:16/9;border:1px solid var(--line);display:block}
.vtt{margin:8px 0 0;font:600 15px/1.3 var(--display)}
.vtt a{text-decoration:none}
.vtt a:hover{text-decoration:underline}
.vm{margin:4px 0 0;font:500 12px/1.45 var(--mono);color:var(--mute)}
.vm a{color:var(--mute)}
/* THE SHELVES. Taken is FILLED and open is an outline, which is the one meaning a
   filled navy box already carries everywhere else on this site: this one is on, this
   one is not (rules 41, 116). Nothing here is pressable, so nothing pretends to be:
   these are two states of a fact, not a control. */
.shelves{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sh{display:inline-block;border:1px solid var(--line);background:var(--card);
padding:7px 12px;font-size:15px}
.sh i{font-style:normal;font:500 12px/1 var(--mono);color:var(--mute);margin-left:6px}
.sh.on{background:var(--navy);border-color:var(--navy);color:#fff}
.sh.on i{color:rgba(255,255,255,.78)}
/* WHO PAYS THEM, as rows that open. Every row is one grid, so the name, the count,
   the years and the plus sit on the same four verticals down the whole list however
   long a company name is. */
.payers{border-top:1px solid var(--line)}
.payer{border-bottom:1px solid var(--line)}
.pr{width:100%;display:grid;grid-template-columns:1fr auto auto 22px;gap:14px;
align-items:baseline;background:none;border:0;padding:12px 2px;text-align:left;
cursor:pointer;font:inherit;color:inherit}
.pr:hover{background:rgba(21,58,128,.04)}
.pr:hover .pn{color:var(--navy)}
.pn{font:600 17px/1.3 var(--display)}
.pv,.pw{font:500 13px/1.4 var(--mono);color:var(--mute);white-space:nowrap}
/* The control says which state it is in, and it says it by CHANGING SHAPE rather
   than by swapping a word: a plus turned 45 degrees is a cross (rule 116). */
.px{font:500 20px/1 var(--mono);color:var(--mute);text-align:center;
transition:transform .14s}
.pr[aria-expanded="true"] .px{transform:rotate(45deg);color:var(--navy)}
.pd{padding:0 2px 16px}
.pd[hidden]{display:none}
.pm{font:500 12px/1.5 var(--mono);color:var(--mute);text-transform:uppercase;
letter-spacing:.06em;margin:0 0 8px}
.pa{margin:0 0 10px;max-width:70ch}
.pmore{margin:0}
.pmore a{font:600 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;
text-decoration:none;border:1px solid var(--line);background:var(--card);
padding:9px 13px;display:inline-block}
.pmore a:hover{border-color:var(--navy)}
@media(max-width:620px){
.pr{grid-template-columns:1fr 22px;gap:4px 10px}
.pn{grid-column:1}.px{grid-row:1;grid-column:2}
.pv,.pw{grid-column:1;font-size:12px}}
@media(max-width:620px){.hd{flex-direction:column}h1{font-size:30px}}
.bpop{position:fixed;inset:0;z-index:9500}
.bpop[hidden]{display:none}
.bpop.loading{background:rgba(10,10,10,.5)}
.bpop iframe{width:100%;height:100%;border:0;display:block}
.bpop-note{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
font:400 18px/1.4 var(--sans,system-ui);pointer-events:none}
.bpop-note:empty{display:none}
.bpop-none{color:var(--mute,#6b6b6b);font-size:14px}