/* Where the work went. This box owns its entire appearance.
 *
 * The palette is four states and nothing else, because the whole article is a
 * judgement about which of four things is happening to a job: it is opening,
 * it is being renamed, it is shrinking, or it is structurally new. The reader
 * learns the code once in the TL;DR and then reads 226 rows without a legend.
 *
 * Type is set large and serif for the argument, mono for every number. Anything
 * a reader might quote at their manager is a number, so numbers get their own
 * voice and tabular figures throughout.
 */

:root{
  --paper:#F8F5EE;
  --card:#FFFFFF;
  --sunk:#F1EDE3;
  --ink:#191713;
  --ink-2:#454038;
  --muted:#7B7466;
  --rule:#E5DFD2;
  --rule-2:#CEC6B4;

  /* the four states */
  --grow:#0F6B4F;  --grow-w:#E7F2ED;  --grow-b:#BEDCD0;
  --shift:#A85C0B; --shift-w:#FAF0E1; --shift-b:#EBD5B2;
  --fade:#A93226;  --fade-w:#FAEBE9;  --fade-b:#EDCBC5;
  --deep:#23457E;  --deep-w:#E9EDF6;  --deep-b:#C5D0E6;

  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;

  --read:1.19rem;
  --lh:1.78;
  --measure:66ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* Scoped to the page wrapper. The role cards are <article> too, and an
   unscoped rule gave all 226 of them the page's 5rem bottom padding. */
article.page{max-width:62rem;margin:0 auto;padding:0 1.3rem 5rem}
section{margin:3.4rem 0}
h2{font:400 clamp(1.85rem,4vw,2.6rem)/1.12 var(--serif);letter-spacing:-.02em;
  margin:0 0 1rem;text-wrap:balance}
h3{font:600 1.16rem/1.35 var(--sans);letter-spacing:-.01em;margin:2rem 0 .7rem}
p{margin:0 0 1.3rem;font-size:var(--read);line-height:var(--lh);color:var(--ink-2);
  max-width:var(--measure)}
p strong,li strong{color:var(--ink);font-weight:640}
a{color:var(--deep);text-decoration:none;border-bottom:1px solid rgba(35,69,126,.32)}
a:hover{border-bottom-color:var(--deep)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--deep);outline-offset:2px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ─────────── hero ─────────── */
.hero{padding:3.4rem 0 .5rem}
.eyebrow{font:500 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 1.4rem;max-width:none}
.hero h1{font:400 clamp(2.6rem,7.4vw,4.6rem)/1 var(--serif);margin:0 0 1.3rem;
  letter-spacing:-.026em;text-wrap:balance;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--grow)}
.dek{font-size:clamp(1.06rem,2.4vw,1.24rem);line-height:1.62;color:var(--ink-2);
  margin:0 0 1.6rem;max-width:52ch}
.byline{display:flex;flex-wrap:wrap;gap:1.1rem;margin:0;padding:1.1rem 0 0;
  border-top:1px solid var(--rule);
  font:500 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  max-width:none}

/* the flow figure: old jobs streaming into new ones */
.flow{margin:2.4rem 0 0;position:relative}
.flow svg{width:100%;height:auto;display:block;overflow:visible}
.flow-cap{margin:1rem 0 0;font-size:.92rem;line-height:1.6;color:var(--muted);max-width:60ch}
.flow-cap b{color:var(--ink)}
.fl-path{fill:none;stroke-linecap:round;opacity:.5}
.fl-lab{font:500 12.5px var(--sans);fill:var(--ink-2)}
.fl-lab.r{font-weight:640;fill:var(--ink)}
.fl-hd{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;fill:var(--muted)}
.fl-dot{r:3.4}

/* ─────────── stat strip ─────────── */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;
  margin:2.4rem 0 0;padding:0;list-style:none}
.strip li{background:var(--card);border:1px solid var(--rule);border-radius:11px;
  padding:.95rem 1rem}
.strip b{display:block;font:400 1.85rem/1 var(--serif);letter-spacing:-.03em;color:var(--ink);
  font-variant-numeric:tabular-nums;margin-bottom:.3rem}
.strip span{font-size:.83rem;line-height:1.42;color:var(--muted);display:block}
.strip li.g b{color:var(--grow)} .strip li.s b{color:var(--shift)} .strip li.f b{color:var(--fade)}

/* ─────────── tl;dr ─────────── */
.tldr{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:1.8rem clamp(1.1rem,3vw,2rem);margin:3rem 0}
.tldr-l{display:inline-block;font:600 10.5px/1 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);border:1px solid var(--rule-2);
  border-radius:20px;padding:.34rem .7rem;margin-bottom:1.1rem}
.tldr-lead{font-size:1.16rem;line-height:1.62;color:var(--ink);font-weight:500;
  max-width:60ch;margin-bottom:1.5rem}
.tldr ol{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.tldr li{padding:.95rem 1.1rem .95rem 1.15rem;border-radius:11px;border:1px solid;
  font-size:1.01rem;line-height:1.62;color:var(--ink-2)}
.tldr li b{display:block;color:var(--ink);font-weight:640;margin-bottom:.2rem}
.t-g{background:var(--grow-w);border-color:var(--grow-b)}
.t-s{background:var(--shift-w);border-color:var(--shift-b)}
.t-f{background:var(--fade-w);border-color:var(--fade-b)}
.t-d{background:var(--deep-w);border-color:var(--deep-b)}

/* ─────────── section furniture ─────────── */
.kicker{font:500 10.5px/1 var(--mono);letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .8rem}
.lede{font-size:1.2rem;line-height:1.66;color:var(--ink);max-width:58ch;font-weight:450}
.rule{height:1px;background:var(--rule);border:0;margin:3.6rem 0}
/* The convention note sits above 226 rows, so it is set small enough to skim
   past and still be there when a number looks odd. */
.small-note{font-size:.88rem;line-height:1.6;color:var(--muted);max-width:72ch;
  margin:0 0 1.1rem}
.small-note strong{color:var(--ink-2)}

/* ─────────── the finder ─────────── */
/* A sage panel rather than a dark one. This is the hopeful section, so it sits
   in the green the rest of the page uses for "opening". The rows inside stay
   white, otherwise the green and amber pills would sink into the panel. */
.finder{background:#D9E8E0;border:1px solid #BCD6C8;border-radius:18px;
  padding:clamp(1.4rem,4vw,2.4rem);margin:3rem 0}
.finder h2{color:var(--ink);margin-bottom:.6rem}
.finder .lede{color:var(--ink-2);max-width:56ch;font-size:1.08rem}
.f-in{position:relative;margin:1.6rem 0 0}
.f-in input{width:100%;font:400 1.12rem var(--sans);padding:.95rem 1.1rem;
  border-radius:12px;border:1px solid #A9C7B7;background:#FFFFFF;color:var(--ink)}
.f-in input::placeholder{color:#8C9A92}
.f-in input:focus-visible{outline:2px solid var(--grow);outline-offset:1px;border-color:transparent}
.f-hint{margin:.7rem 0 0;font-size:.87rem;color:var(--ink-2);display:flex;flex-wrap:wrap;gap:.4rem;
  align-items:center}
.f-hint button{font:500 11.5px var(--mono);letter-spacing:.05em;text-transform:uppercase;
  background:#FFFFFF;border:1px solid #B6D0C2;color:#3D5A4C;border-radius:20px;
  padding:.32rem .7rem;cursor:pointer}
.f-hint button:hover{border-color:var(--grow);color:var(--grow)}
.f-out{margin:1.4rem 0 0;display:grid;gap:.6rem}
.f-row{background:#FFFFFF;border:1px solid #C6DCD0;border-radius:12px;padding:1rem 1.1rem;
  display:grid;gap:.55rem}
.f-was{font-size:.87rem;color:var(--muted);line-height:1.5}
.f-was b{color:var(--ink-2);font-weight:600}
.f-arrow{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.f-now{font:600 1.1rem var(--sans);color:var(--ink);letter-spacing:-.01em}
.f-w{font-size:.95rem;line-height:1.6;color:var(--ink-2);max-width:62ch}
.f-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.f-empty{color:var(--ink-2);font-size:.95rem;padding:.6rem 0}
.f-more{margin:1rem 0 0;font-size:.9rem;color:var(--ink-2)}
.f-more a{color:var(--grow);border-bottom-color:rgba(15,107,79,.35)}

/* ─────────── figures ─────────── */
figure{margin:2rem 0;padding:0}
figure svg{width:100%;height:auto;display:block;overflow:visible}
figcaption{margin-top:.9rem;font-size:.92rem;line-height:1.62;color:var(--muted);max-width:62ch}
figcaption b{color:var(--ink)}
.fig-card{background:var(--card);border:1px solid var(--rule);border-radius:14px;
  padding:clamp(1rem,2.6vw,1.6rem)}
.ax{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.gl{stroke:var(--rule);stroke-width:1}
.vl{font:600 12px var(--mono);fill:var(--ink);font-variant-numeric:tabular-nums}
.bl{font:500 12.5px var(--sans);fill:var(--ink-2)}

/* quadrant */
.quad{position:relative}
.q-dot{cursor:pointer;transition:r .12s ease}
.q-tip{position:absolute;pointer-events:none;background:var(--ink);color:#F6F2E9;
  border-radius:9px;padding:.5rem .7rem;font-size:.83rem;line-height:1.4;max-width:17rem;
  opacity:0;transition:opacity .12s ease;z-index:5;box-shadow:0 8px 24px -12px rgba(0,0,0,.5)}
.q-tip b{display:block;color:#fff;font-size:.88rem;margin-bottom:.15rem}
.q-tip.on{opacity:1}

/* the split bars */
.split{display:grid;gap:1rem;margin:1.6rem 0}
.sp{display:grid;grid-template-columns:minmax(0,1fr);gap:.4rem}
.sp-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap}
.sp-hd b{font-weight:640;font-size:1rem;color:var(--ink)}
.sp-hd span{font-family:var(--mono);font-size:.95rem;font-variant-numeric:tabular-nums}
.sp-bar{height:34px;border-radius:8px;position:relative;background:var(--sunk);overflow:hidden}
.sp-fill{position:absolute;inset:0 auto 0 0;border-radius:8px}
.sp-note{font-size:.88rem;color:var(--muted);line-height:1.55}

/* ─────────── quote / callout ─────────── */
.pull{border-left:3px solid var(--grow);padding:.2rem 0 .2rem 1.3rem;margin:2.2rem 0;
  max-width:56ch}
.pull p{font:400 1.3rem/1.55 var(--serif);color:var(--ink);margin:0;letter-spacing:-.012em}
.pull cite{display:block;margin-top:.7rem;font:500 11px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-style:normal}
.warn-box{background:var(--shift-w);border:1px solid var(--shift-b);border-radius:14px;
  padding:1.3rem 1.4rem;margin:2.2rem 0}
.warn-box h3{margin:0 0 .5rem;color:var(--shift)}
.warn-box p{font-size:1.01rem;margin-bottom:.7rem;color:var(--ink-2)}
.warn-box p:last-child{margin-bottom:0}
.tl{width:100%;border-collapse:collapse;font-size:.95rem;margin:.8rem 0 0}
.tl th,.tl td{text-align:left;padding:.45rem .7rem .45rem 0;border-bottom:1px solid var(--shift-b)}
.tl th{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tl td:first-child{font-family:var(--mono);white-space:nowrap;font-variant-numeric:tabular-nums;
  color:var(--ink)}
.tw{overflow-x:auto}

/* ─────────── the index ─────────── */
.ix-bar{position:sticky;top:0;z-index:20;background:rgba(248,245,238,.94);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);padding:.7rem 0;margin:0 0 1.4rem}
.ix-row{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.ix-row input[type=search]{flex:1 1 13rem;min-width:0;font:400 .95rem var(--sans);
  padding:.55rem .8rem;border:1px solid var(--rule-2);border-radius:9px;background:var(--card);
  color:var(--ink)}
.ix-row select{font:400 .87rem var(--sans);padding:.55rem .6rem;border:1px solid var(--rule-2);
  border-radius:9px;background:var(--card);color:var(--ink);max-width:100%}
.chip{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem .7rem;border:1px solid var(--rule-2);border-radius:9px;background:var(--card);
  color:var(--ink-2);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#FFFDF8}
.chip.g[aria-pressed=true]{background:var(--grow);border-color:var(--grow)}
.chip.s[aria-pressed=true]{background:var(--shift);border-color:var(--shift)}
.chip.f[aria-pressed=true]{background:var(--fade);border-color:var(--fade)}
.ix-n{margin-left:auto;font:500 .8rem var(--mono);color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ix-n b{color:var(--ink);font-size:.95rem}

.grp{margin:2.4rem 0 .8rem;display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.grp h3{font:400 1.55rem/1.2 var(--serif);margin:0;letter-spacing:-.018em}
.grp span{font:500 .74rem var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.sub{font:500 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  margin:1.4rem 0 .5rem;padding-top:.7rem;border-top:1px solid var(--rule)}

.role{background:var(--card);border:1px solid var(--rule);border-radius:12px;margin-bottom:.5rem}
.role.hype{border-style:dashed;border-color:var(--shift-b)}
.rhd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:.4rem 1rem;
  align-items:start;width:100%;text-align:left;background:none;border:0;padding:.9rem 1.05rem;
  cursor:pointer;font:inherit;color:inherit}
.rhd>*{min-width:0}
.rhd:hover .rt{color:var(--grow)}
.rt{display:block;font:600 1.03rem/1.3 var(--sans);letter-spacing:-.012em;overflow-wrap:anywhere}
.rw{margin:.22rem 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-2);max-width:70ch}
.ralt{margin:.32rem 0 0;font:500 .78rem var(--mono);color:var(--shift)}
.ralt b{font-weight:640}
.pills{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:flex-end;align-items:center;
  min-width:0;max-width:38ch}
.pill{font:600 .62rem var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .45rem;border-radius:4px;white-space:nowrap;border-left:3px solid transparent}
.d-HIGH{background:var(--grow-w);color:var(--grow);border-left-color:var(--grow)}
.d-MEDIUM{background:var(--deep-w);color:var(--deep);border-left-color:var(--deep)}
.d-EMERGING{background:var(--shift-w);color:var(--shift);border-left-color:var(--shift)}
.d-DECLINING{background:var(--fade-w);color:var(--fade);border-left-color:var(--fade)}
.k-LOW{background:var(--grow-w);color:var(--grow)}
.k-MEDIUM{background:var(--shift-w);color:var(--shift)}
.k-HIGH,.k-EXTREME{background:var(--fade-w);color:var(--fade)}
.tag{font:600 .61rem var(--mono);letter-spacing:.09em;text-transform:uppercase;
  padding:.22rem .45rem;border-radius:4px}
.g-accessible{background:var(--grow-w);color:var(--grow)}
.g-hype{background:var(--shift-w);color:var(--shift)}
.g-declining{background:var(--fade-w);color:var(--fade)}
.pay{font:500 .75rem var(--mono);font-variant-numeric:tabular-nums;color:var(--ink-2);
  max-width:23ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pay.est{color:var(--muted);border-bottom:1px dashed var(--rule-2)}

.rbody{display:none;padding:0 1.05rem 1.1rem;border-top:1px solid var(--rule)}
.role.open .rbody{display:block}
.role.open{border-color:var(--rule-2)}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem;
  padding-top:1rem}
.col h4{font:600 .64rem var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .45rem}
.col ul{margin:0;padding-left:1.05rem}
.col li{font-size:.89rem;line-height:1.55;color:var(--ink-2);margin-bottom:.22rem}
.col.learn li{font-family:var(--mono);font-size:.8rem}
.col p{font-size:.89rem;line-height:1.6;margin:0;color:var(--ink-2)}
.rmeta{margin-top:1rem;padding-top:.8rem;border-top:1px dashed var(--rule);
  font-size:.85rem;line-height:1.6;color:var(--muted)}
.rmeta div{margin-bottom:.3rem}
.rmeta b{color:var(--ink-2);font-weight:640}
.rmeta a{word-break:break-word}
.ix-empty{text-align:center;padding:3rem 1rem;color:var(--muted)}

/* ─────────── close ─────────── */
.close{background:var(--sunk);border:1px solid var(--rule);border-radius:16px;
  padding:1.6rem clamp(1.1rem,3vw,1.9rem);margin:3rem 0}
.close h3{margin-top:0}
.close p{font-size:1.01rem;max-width:70ch}
.close p:last-child{margin-bottom:0}

@media(max-width:44rem){
  /* On a phone the reader should reach the rows without a full screen of
     preamble, so the masthead gives back some of its air. */
  .hero{padding:1.8rem 0 .4rem}
  .hero h1{font-size:clamp(2.2rem,11vw,3rem)}
  .dek{font-size:1.02rem}
  .rhd{grid-template-columns:minmax(0,1fr)}
  .pills{justify-content:flex-start;max-width:none}
  .ix-n{margin-left:0;width:100%}
  .hero h1{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* The top of the page takes the same white sheet the site uses elsewhere, so
   the ivory reads as the surface it is lying on rather than as flat ground.
   It stops before the sticky filter bar: a sheet with a sticky element inside
   it fights itself the moment the page scrolls. */
.sheet{background:var(--card);border:1px solid var(--rule);border-radius:16px;
  padding:clamp(1.15rem,3.2vw,2.4rem) clamp(1.15rem,3.2vw,2.4rem) clamp(1rem,2.4vw,1.6rem);
  margin:1.2rem 0 1.6rem;
  box-shadow:0 1px 2px rgba(25,23,19,.04),0 14px 34px -26px rgba(25,23,19,.2)}
.sheet .hero{padding-top:.4rem}
.sheet section{margin:2rem 0 0}