/* The Provider Index: white paper, black drawing. Tokens override the Anatomy kit's light theme (iso.css). */
.iso[data-theme="light"]{
  --anatomy-page:#fff;--anatomy-card:#fff;--anatomy-paper:#fff;--anatomy-face:#fff;--anatomy-top:#fff;
  --anatomy-shade-0:#e1e1e1;--anatomy-shade-1:#e9e9e9;--anatomy-shade-2:#f0f0f0;--anatomy-shade-3:#f7f7f7;
  --anatomy-lit-top:#fff;--anatomy-lit-shade:#efefef;
  --anatomy-hi:#000;--anatomy-mid:#26262a;--anatomy-lo:#5c5c62;--anatomy-faint:#a2a2a8;--anatomy-lit:#000;
  --anatomy-dot:#111;--anatomy-halo:#6a6a6a;--anatomy-halo-opacity:.28;--anatomy-weight:.7px;
  --ink:#0a0a0a;--ink-2:#3d3d42;--ink-3:#6b6b72;--rule:#0a0a0a1f;--rule-strong:#0a0a0a;
  --sans:"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --pad:clamp(16px,3.4vw,40px);
  --mast:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 17px/1.55 var(--sans);font-kerning:normal}
a{color:inherit}
h1,h2,h3{font-weight:700;letter-spacing:-.018em;line-height:1.12;margin:0}
.skip{position:absolute;left:-999px;top:8px;background:#000;color:#fff;padding:8px 12px;z-index:20}
.skip:focus{left:8px}
:focus-visible{outline:2px solid #000;outline-offset:3px}

/* masthead */
.mast{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--mast);padding:0 var(--pad);white-space:nowrap;background:#ffffffeb;border-bottom:1px solid var(--rule)}
@supports (backdrop-filter:blur(1px)){.mast{background:#ffffffd9;backdrop-filter:saturate(1.2) blur(8px)}}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:-.01em}
.brand-mark{width:22px;height:22px;fill:none;stroke:#000;stroke-width:1.6;stroke-linejoin:round}
.mast nav{display:flex;gap:clamp(12px,2.4vw,28px);font:500 13px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.mast nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.mast nav a:hover,.mast nav a[aria-current]{border-bottom-color:#000}

.eyebrow,.step-no,.kicker,.plate-top,.plate-bottom,.hint{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);margin:0}

/* the scene: a tall section whose stage sticks while its progress drives the figure */
.scene{position:relative}
.stage{display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(20px,3vw,48px);padding:var(--pad);align-items:center}
.js .scene{height:var(--len,600vh)}
.js .stage{position:sticky;top:var(--mast,57px);height:calc(100vh - var(--mast,57px));height:calc(100svh - var(--mast,57px));padding-top:clamp(12px,2vw,24px);padding-bottom:clamp(12px,2vw,24px)}
.panel{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:center;min-height:0}
.intro h1{font-size:clamp(30px,3.6vw,52px);margin:14px 0 18px;max-width:15em}
.lede{font-size:clamp(16px,1.25vw,19px);color:var(--ink-2);max-width:31em;margin:0 0 22px}
.hint{display:inline-flex;align-items:center;gap:10px}
.hint::after{content:"";width:1px;height:28px;background:#000;transform-origin:top;animation:drop 1.8s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.steps{list-style:none;margin:0;padding:0}
.step{border-top:1px solid var(--rule-strong);padding:16px 0 4px}
.step + .step{margin-top:28px}
.step h2{font-size:clamp(24px,2.5vw,36px);margin:10px 0 12px}
.step p{margin:0 0 12px;max-width:34em;color:var(--ink-2)}
.step-no span{color:#000;margin-right:10px}
.step-src{display:inline-block;font:500 12.5px/1.45 var(--mono);text-decoration:none;border-bottom:1px solid #000}
.step-src::before{content:"Read: "}

.together{margin-top:40px}
.together h2{font-size:clamp(26px,2.6vw,38px);margin:8px 0 16px}
.arts{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule-strong)}
.art a{display:grid;grid-template-columns:1fr;gap:4px;padding:12px 0 13px;text-decoration:none;border-bottom:1px solid var(--rule)}
.art a:hover .art-title{text-decoration:underline;text-underline-offset:3px}
.art-meta{display:flex;gap:14px;font:500 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.art-meta .kicker{color:#000}
.art-title{font-weight:700;font-size:clamp(17px,1.35vw,20px);line-height:1.25;letter-spacing:-.01em}
.art-dek{font-size:14.5px;line-height:1.45;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more{display:inline-block;margin-top:16px;font:500 12.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:1px solid #000}

/* with the script: one phase at a time, one step at a time */
.js .panel>[data-phase]{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0}
.js .panel>[data-phase]:not(.is-on){display:none}
.js .step{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;visibility:hidden}
.js .step.is-on{position:relative;opacity:1;visibility:visible}
.js .steps{position:absolute}
.js .together .art{display:none}
.js .together .art.is-shown{display:block}
.js .together .art.is-now .art-title{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.count{font:500 11.5px/1.3 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.1em;margin:10px 0 0}

/* the plate around a figure, after the kit's card */
.plate{margin:0;position:relative;align-self:stretch;display:flex;flex-direction:column;border:1px solid #000;min-height:0;background:#fff}
.plate-top,.plate-bottom{display:flex;justify-content:space-between;gap:12px;padding:12px 14px}
.plate-top span:first-child,.plate-bottom [data-readout]{color:#000}
.plate-bottom [data-readout]{font-variant-numeric:tabular-nums;text-align:right}
.plate-fig{flex:1;min-height:220px;display:flex;align-items:center;justify-content:center;padding:0 8px}
.plate-fig svg{width:100%;height:100%;max-height:calc(100svh - 160px);display:block}
.no-js .plate-fig svg,.still .plate-fig svg{max-height:78vh}
.asm.is-lit .iso-edge{stroke:#000;stroke-width:1.15px}
.asm.is-lit .iso-top{fill:#fff}

/* below the scene */
.after{padding:clamp(40px,7vw,96px) var(--pad);border-top:1px solid var(--rule)}
.after-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.after-card{display:flex;flex-direction:column;gap:14px;padding:22px;border:1px solid #000;text-decoration:none;min-height:150px;justify-content:space-between;transition:background .2s,color .2s}
.after-card:hover{background:#000;color:#fff}
.after-card:hover .eyebrow{color:#fff}
.after-title{font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.01em}

/* article pages */
.read{max-width:760px;margin:0 auto;padding:clamp(32px,6vw,72px) var(--pad) 72px}
.read-head h1{font-size:clamp(32px,4.4vw,54px);margin:14px 0 16px}
.read-head .dek{font-size:clamp(18px,1.6vw,21px);color:var(--ink-2);margin:0 0 18px;line-height:1.45}
.byline{font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);padding-bottom:22px;border-bottom:1px solid #000;margin:0}
.takeaways{margin:28px 0;padding:20px 22px;border:1px solid #000}
.takeaways h2,.sources h2{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;margin:0 0 12px}
.takeaways ul{margin:0;padding-left:18px}
.takeaways li{margin:6px 0}
.read-body{font-size:18px;line-height:1.65}
.read-body h2{font-size:clamp(23px,2.3vw,29px);margin:44px 0 14px}
.read-body h3{font-size:20px;margin:30px 0 10px}
.read-body p{margin:0 0 18px}
.read-body blockquote{margin:22px 0;padding:2px 0 2px 18px;border-left:2px solid #000;color:var(--ink-2)}
.read-body table,.table table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.4;margin:22px 0}
.read-body th,.read-body td{border-bottom:1px solid var(--rule);padding:9px 10px 9px 0;text-align:left;vertical-align:top}
.read-body th{font:500 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #000}
.read-body .table,.read-body table{display:block;overflow-x:auto}
.sources{margin-top:48px;padding-top:20px;border-top:1px solid #000;font-size:14.5px}
.sources ol{padding-left:20px;margin:0}
.sources li{margin:6px 0;overflow-wrap:anywhere}

/* footer */
.foot{border-top:1px solid #000;padding:36px var(--pad) 44px;display:grid;gap:24px}
.foot-row{display:grid;grid-template-columns:1fr 2fr;gap:24px}
.foot-row p{margin:0;max-width:52em;color:var(--ink-2);font-size:15px}
.foot-brand{font-weight:700;color:#000!important}
.foot-small p{font-size:13px;color:var(--ink-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:18px;font:500 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;grid-column:2}
.foot-small{grid-template-columns:2fr 1fr}
.foot-small nav{grid-column:auto;justify-content:flex-end}

@media (max-width:900px){
  .stage{grid-template-columns:1fr;gap:12px}
  .js .stage{grid-template-rows:minmax(0,1fr) auto;align-items:stretch}
  .js .stage .plate{order:-1}
  .js .panel{min-height:min(46svh,380px);justify-content:flex-start}
  .js .panel>[data-phase]{top:0;transform:none}
  .intro h1{font-size:clamp(26px,7vw,34px);margin:8px 0 10px}
  .lede{font-size:15.5px;margin-bottom:12px}
  .step{padding-top:10px}
  .step h2{font-size:23px;margin:6px 0 8px}
  .step p{font-size:15px;line-height:1.5;margin-bottom:8px}
  .together{margin-top:0}
  .together h2{font-size:23px;margin:4px 0 8px}
  .art a{padding:8px 0 9px}
  .art-dek{display:none}
  .plate-fig svg{max-height:none}
  .plate-top,.plate-bottom{padding:8px 10px}
  .plate-hint{display:none}
  .js .panel{min-height:min(42svh,350px)}
  .together .more{margin-top:10px}
  .after-grid{grid-template-columns:1fr}
  .foot-row,.foot-small{grid-template-columns:1fr}
  .foot nav{grid-column:auto;justify-content:flex-start}
  .iso[data-theme="light"]{--mast:50px}
  .mast{padding:0 16px}
  .mast nav{gap:12px;font-size:11px}
  .brand span{font-size:15px}
}
@media (max-width:420px){.brand span{display:none}}
@media (prefers-reduced-motion:reduce){.hint::after{animation:none}}
.art-static{display:grid;gap:4px;padding:12px 0 13px;border-bottom:1px solid var(--rule)}
/* reduced motion or no script: nothing moves, so the figure stays in view beside the text and no line asks for a scroll */
.still .stage,.no-js .stage{align-items:start}
.still .plate-fig svg,.no-js .plate-fig svg{height:min(70vh,640px);min-height:260px}
.still .plate,.no-js .plate{position:sticky;top:calc(var(--mast,57px) + 16px);align-self:start;height:clamp(360px,80vh,760px)}
.still .hint,.still .plate-hint,.no-js .hint,.no-js .plate-hint{display:none}
@media (max-width:900px){.still .plate,.no-js .plate{position:relative;top:0;height:70vh}}
