/* NepDex · Version B "Route" */
:root{
  --snow:#f1f4f5; --paper:#fbfcfc; --ink:#10242b; --slate:#566b74; --line:#d3dde1; --tint:#e1e9ed;
  --rhodo:#b0154b; --lichen:#2f6f4e; --rust:#9c3d12;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--snow);color:var(--ink);font:400 1rem/1.6 var(--body);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}
h1{font-size:clamp(2.4rem,5.4vw,4.4rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:1.625rem}
h3{font-size:1.1875rem;line-height:1.2}
p{margin:0 0 .75em}
a{color:inherit}
.muted{color:var(--slate)} .small{font-size:.8125rem;line-height:1.45} .r{text-align:right}
.up{color:var(--lichen);font-weight:600} .down{color:var(--rust);font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:6px;z-index:10}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--rhodo);outline-offset:2px;border-radius:3px}
ul.plain{list-style:none;margin:0;padding:0}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter)}

/* header */
.site{border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 1.5rem/1 var(--display);letter-spacing:-.04em}
.site nav{display:flex;gap:26px}
.site nav a{text-decoration:none;font-size:.9375rem;font-weight:500;color:var(--slate);padding:6px 0;border-bottom:2px solid transparent}
.site nav a:hover{color:var(--ink)}
.site nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.foot{border-top:1px solid var(--line);margin-top:96px;padding:28px 0 40px;color:var(--slate);font-size:.8125rem}

/* generic sections */
main>section{margin-top:72px}
main>section.page-head,main>section.hero{margin-top:0}
.hero{padding:72px 0 8px}
.hero h1{max-width:13em}
.lede{font-size:1.1875rem;line-height:1.6;color:var(--slate);max-width:58ch;margin-top:20px}
.page-head{padding:56px 0 8px}
.page-head+*{margin-top:40px}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.6rem);max-width:16em}
.actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.9375rem;padding:13px 20px;border-radius:6px}
.btn:hover{background:#1e3d49}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.link:hover{color:var(--rhodo)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.note{margin-top:14px}

/* route */
.route{margin-top:56px}
.route-fig{margin:0}
.route-svg{display:block;width:100%;height:auto;overflow:visible}
.ridge-fill{fill:var(--tint)}
.ridge-line{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ground{stroke:var(--ink);stroke-width:1.5}
.drop{stroke:#9fb3bc;stroke-width:1.2;stroke-dasharray:3 5}
.camp{cursor:pointer}
.camp .dot{fill:var(--ink);stroke:var(--snow);stroke-width:3}
.camp .halo{fill:none;stroke:var(--rhodo);stroke-width:2;opacity:0}
.camp.sel .dot{fill:var(--rhodo)}
.camp.sel .halo{opacity:1}
.camp.sel .drop{stroke:var(--rhodo)}
.flag .pole{stroke:var(--ink);stroke-width:1.5}
.flag .pennant{fill:var(--rhodo)}
.flag text{font:600 13px var(--body);fill:var(--rhodo);letter-spacing:.02em}
.camps{display:grid;grid-template-columns:repeat(8,1fr)}
.camps button{font:inherit;color:var(--slate);background:none;border:0;border-top:1px solid var(--line);padding:14px 4px 12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:0;min-height:56px}
.camps .cn{font-weight:600;font-size:.875rem}
.camps .cc{font-size:.75rem}
.camps button:hover{color:var(--ink)}
.camps button[aria-pressed="true"]{color:var(--ink);box-shadow:inset 0 3px 0 var(--rhodo);border-top-color:transparent}
.route figcaption{margin-top:14px;max-width:80ch}
.panel{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:40px;padding:28px 0 36px;border-top:1px solid var(--ink);margin-top:20px}
.panel h3{margin:4px 0 12px;font-size:1.5rem}
.panel .count{font:700 2.5rem/1 var(--display);letter-spacing:-.03em;margin:2px 0 8px}
.panel.swap>div{animation:fade .25s ease-out}
@keyframes fade{from{opacity:.25}to{opacity:1}}
.stats{border-top:1px solid var(--line);padding-top:32px}
.stats p{font:600 clamp(1.4rem,2.6vw,2rem)/1.3 var(--display);letter-spacing:-.02em;max-width:34em}
.stats strong{font-weight:700}

/* rows */
.rows{list-style:none;margin:0;padding:0}
.rows>li{display:grid;gap:24px 40px;align-items:center;padding:22px 0;border-top:1px solid var(--line)}
.rows>li:last-child{border-bottom:1px solid var(--line)}
.rows h2,.rows h3{margin-bottom:4px}
.rows p{margin-bottom:0}
.rows3>li{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) auto}
.rows2>li{grid-template-columns:minmax(0,1fr) auto}
.rowsV>li{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 150px;align-items:start}
.rowsV .link{display:inline-block;margin-top:8px;font-size:.9375rem}
.rowsV .sig{margin-top:8px;font-size:.875rem}
.rowsV .val{font:700 1.375rem/1.2 var(--display);letter-spacing:-.02em}
.rowsF>li{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);align-items:start}
.rowsF .val{font:700 1.5rem/1 var(--display);margin-top:8px}
.num{text-align:right;white-space:nowrap}
.rowsV .num{text-align:left}

/* pips */
.pips-wrap{display:inline-flex;flex-direction:column;gap:6px;vertical-align:middle}
td .pips-wrap{flex-direction:row;align-items:center;gap:8px}
.pips{display:inline-flex;gap:3px}
.pips i{display:block;width:15px;height:7px;border-radius:1px;background:var(--line)}
.pips i.on{background:var(--ink)} .pips i.cur{background:var(--rhodo)}
.pip-label{font-size:.8125rem;color:var(--slate)}

/* tables */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:560px}
th{font-size:.8125rem;font-weight:600;color:var(--slate);text-align:left;padding:10px 12px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
th.r{text-align:right}
th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px}
th button:hover{color:var(--ink);text-decoration-color:currentColor}
th[aria-sort="ascending"] button::after{content:" ▲";font-size:.7em}
th[aria-sort="descending"] button::after{content:" ▼";font-size:.7em}
td{padding:15px 12px;border-bottom:1px solid var(--line);font-size:.9375rem;vertical-align:middle}
td.symbol,.symbol{font-weight:700}
tbody tr:hover{background:var(--paper)}
.tools{display:flex;margin-bottom:8px}
.field{display:flex;flex-direction:column;gap:6px;font-size:.8125rem;font-weight:600;color:var(--slate)}
.field input{font:400 1rem var(--body);color:var(--ink);background:var(--paper);border:1px solid #b6c5cc;border-radius:6px;padding:11px 14px;width:min(360px,100%)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{font:600 .875rem var(--body);color:var(--slate);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;min-height:40px}
.chips button:hover{border-color:var(--slate);color:var(--ink)}
.chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.chips+.rows{margin-top:24px}

/* chart */
.readout{margin:8px 0 6px;font-size:1rem}
.readout strong{font:700 2rem/1 var(--display);letter-spacing:-.03em;margin-right:8px}
.spark-wrap{border-bottom:1.5px solid var(--ink)}
.spark{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair}
.spark text{font:400 11px var(--body);fill:var(--slate)}
.spark .grid{stroke:var(--line);stroke-width:1}
.spark .sfill{fill:var(--tint)} .spark .sline{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.spark .xh{stroke:var(--slate);stroke-width:1;stroke-dasharray:3 3}
.spark .sdot{fill:var(--rhodo);stroke:var(--snow);stroke-width:2}
.axis{display:flex;justify-content:space-between;margin-top:6px}

/* case study */
.case{display:grid;grid-template-columns:280px minmax(0,1fr);gap:64px;align-items:start}
.today{position:sticky;top:20px;border-top:1.5px solid var(--ink);padding-top:16px}
.today h2{font-size:1.25rem;margin-bottom:14px}
.today dl,.summary{margin:0}
.today dl>div{padding:12px 0;border-top:1px solid var(--line)}
.today dt,.summary dt{font-size:.8125rem;color:var(--slate)}
.today dd,.summary dd{margin:2px 0 0;font:700 1.25rem/1.25 var(--display);letter-spacing:-.02em}
.today dd .small,.summary dd .small{font-family:var(--body);letter-spacing:0;font-weight:600}
.climb{list-style:none;margin:0;padding:0;position:relative}
.climb>li::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:var(--line)}
.climb>li:last-child::before{display:none}
.climb>li{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:24px;padding-bottom:44px}
.climb>li:last-child{padding-bottom:0}
.step{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font:700 .9375rem/32px var(--display);text-align:center}
.climb>li:last-child .step{background:var(--rhodo)}
.climb h3{font-size:1.5rem;margin:2px 0 8px;max-width:22em}
.climb p{max-width:60ch}
.own{display:flex;gap:2px;height:16px;margin-top:16px;max-width:520px}
.own span,.legend i{display:block}
.own span{height:100%}
.o1{background:var(--ink)} .o2{background:#436a7d} .o3{background:#8fb0bd} .o4{background:#c9dae1}
.own span:first-child{border-radius:3px 0 0 3px}.own span:last-child{border-radius:0 3px 3px 0}
.legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{width:10px;height:10px;border-radius:2px}

/* founders */
.meter{height:10px;background:var(--line);border-radius:2px;margin-top:8px}
.meter span{display:block;height:100%;background:var(--ink);border-radius:2px}
.check-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;margin-top:20px;align-items:start}
fieldset{border:0;margin:0;padding:0;min-width:0}
.check li{border-top:1px solid var(--line)}
.check li:last-child{border-bottom:1px solid var(--line)}
.check label{display:flex;gap:14px;align-items:center;padding:14px 0;cursor:pointer;min-height:52px}
.check input{width:22px;height:22px;accent-color:var(--rhodo);flex:none;margin:0}
.result{position:sticky;top:20px;border-top:1.5px solid var(--ink);padding-top:16px}
.result .big{font:700 2.25rem/1.1 var(--display);letter-spacing:-.03em;margin:4px 0 14px}
.result #rnext{margin-top:16px;max-width:42ch}

/* portfolio */
.summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;border-top:1.5px solid var(--ink);padding-top:16px}
.summary dd{font-size:1.5rem}
.summary dd .small{display:block;margin-top:2px}
.alloc{display:flex;gap:2px;height:44px;margin-top:16px}
.alloc span{display:block;height:100%}
.alloc span:first-child{border-radius:4px 0 0 4px}.alloc span:last-child{border-radius:0 4px 4px 0}
.alloc+.legend{margin-top:12px}

/* about */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.two h2{margin-bottom:12px}.two .gap{margin-top:32px}
.two p{max-width:56ch}
.layers{list-style:none;margin:16px 0 0;padding:0}
.layers>li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start;padding:20px 0;border-top:1px solid var(--line)}
.layers>li>div:first-child{padding-left:calc(var(--i)*40px)}
.layers>li:last-child{border-bottom:1px solid var(--line)}
.layers p{margin:0}

/* motion: one moment, on the route only */
@media (prefers-reduced-motion:no-preference){
  .ridge-line{animation:draw 1.5s cubic-bezier(.3,.6,.2,1) both}
  .flag{opacity:0;animation:pop .5s var(--d,1s) ease-out forwards}
  @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
  @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){.panel.swap>div{animation:none}}

/* responsive */
@media (max-width:900px){
  .panel{grid-template-columns:1fr 1fr}.panel>div:first-child{grid-column:1/-1}
  .case{grid-template-columns:1fr;gap:40px}.today{position:static}
  .check-grid,.two{grid-template-columns:1fr;gap:36px}.result{position:static}
  .summary{grid-template-columns:1fr 1fr}
  .rows3>li,.rowsV>li,.rowsF>li{grid-template-columns:1fr}
  .rows3 .num{text-align:left}
  .layers>li{grid-template-columns:1fr;gap:6px}.layers>li>div:first-child{padding-left:calc(var(--i)*14px)}
}
@media (max-width:720px){
  .bar{flex-wrap:wrap;gap:12px}
  .site nav{width:100%;overflow-x:auto;gap:22px;padding-bottom:2px;margin-inline:calc(var(--gutter)*-1);padding-inline:var(--gutter);scrollbar-width:none;white-space:nowrap}
  .hero{padding-top:44px}.page-head{padding-top:36px}
  .camps{grid-template-columns:repeat(4,1fr)}
  .flag text{display:none}
  .hide-sm{display:none}
  table{min-width:0}
  td .pips{display:none}
  th,td{padding-left:6px;padding-right:6px}
  td{font-size:.875rem}
  .sec-head{flex-wrap:wrap}
  main>section{margin-top:56px}
}
@media (max-width:520px){
  .hide-xs{display:none}
  .site nav{gap:16px}.site nav a{font-size:.875rem}
  .panel{grid-template-columns:1fr}
  .summary{grid-template-columns:1fr 1fr;gap:24px}
  .rowsV>li{gap:16px}
}