:root { --ink:#1c1c1a; --muted:#6b6a64; --rule:#ddd9cd; --bg:#faf8f3; --accent:#2f4a3a;
        --c0:#4f7a5c; --c1:#3f6f8f; --c2:#b5793a; --c3:#7c5a8a;
        --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); border-top:4px solid var(--accent);
       font:17px/1.65 Georgia, "Times New Roman", serif; }
main { max-width:1120px; margin:0 auto; padding:48px 32px 80px; }
header { display:flex; justify-content:space-between; align-items:baseline;
         border-bottom:1px solid var(--rule); padding-bottom:14px; margin-bottom:44px; }
header .brand { font-size:24px; letter-spacing:.01em; color:var(--ink); text-decoration:none; font-weight:bold; }
header .sub { color:var(--muted); font-size:14px; margin-left:10px; font-weight:normal; font-style:italic; }
nav { display:flex; flex-wrap:wrap; gap:6px 22px; }
nav a { margin:0; color:var(--muted); text-decoration:none; font:14px var(--sans);
        letter-spacing:.04em; text-transform:uppercase; padding-bottom:4px; }
nav a:hover { color:var(--accent); }
nav a.current { color:var(--accent); border-bottom:2px solid var(--accent); }
h1 { font-weight:normal; font-size:34px; line-height:1.2; margin:0 0 10px; letter-spacing:-.01em; }
h2 { font-weight:normal; font-size:22px; margin:52px 0 12px; padding-top:18px; border-top:1px solid var(--rule); }
h3 { font-weight:normal; font-size:19px; margin:0; }
h4 { font:600 15px var(--sans); margin:0 0 4px; }
p { margin:0 0 14px; }
.lead { font-size:19px; color:#3a3a36; }
main > p, .steps, .wip { max-width:46rem; }
.meta { color:var(--muted); font:14px var(--sans); margin-bottom:26px; }
.note { color:var(--muted); font-size:14px; }
a { color:var(--accent); }

/* weight bar */
.alloc { display:flex; height:34px; border-radius:3px; overflow:hidden; margin:0 0 6px; }
.alloc div { display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden;
             font:600 11px var(--sans); letter-spacing:.02em; white-space:nowrap; min-width:0; border-right:2px solid var(--bg); }
.alloc div:last-child { border-right:0; }
.alloc-cap { color:var(--muted); font:12px var(--sans); }
.legend { display:flex; flex-wrap:wrap; gap:4px 18px; margin:6px 0 34px; font:12px var(--sans); color:var(--muted); }
.legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; }

/* tables */
table { width:100%; border-collapse:collapse; font:15px var(--sans); }
th, td { padding:9px 12px 9px 0; text-align:right; border-bottom:1px solid var(--rule); }
th:first-child, td:first-child, th.l, td.l { text-align:left; }
th { font-weight:600; color:var(--muted); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
     border-bottom:1px solid var(--ink); white-space:nowrap; vertical-align:bottom; }
th[data-sort] { cursor:pointer; }
th[data-sort]:hover { color:var(--ink); }
th[data-dir=desc]::after { content:" \25BE"; } th[data-dir=asc]::after { content:" \25B4"; }
th i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:var(--c); }
th:nth-child(2) { width:34%; }
th:first-child { width:36px; }
td.l { font-family:Georgia, serif; font-size:16px; }
td.l small { color:var(--muted); margin-left:7px; font:11.5px var(--sans); letter-spacing:.04em; }
td.num { font-variant-numeric:tabular-nums; padding-right:14px;
         background:linear-gradient(to right, color-mix(in srgb, var(--c) 75%, transparent) var(--w), transparent var(--w))
                    no-repeat 0 calc(100% - 2px) / calc(100% - 14px) 4px; }
td.tot { font-weight:700; color:var(--accent); font-size:16px; }
td.wt { font-weight:600; }
tr:hover td { background-color:rgba(47,74,58,.045); }
.scroll { overflow-x:auto; }

.wip { background:#f1ede1; border-left:3px solid var(--c2); padding:12px 16px; margin:0 0 30px;
       font:14.5px/1.55 var(--sans); color:#3a3a36; }
.wip p { margin:4px 0 0; }
.wip .tag { font:600 11px var(--sans); letter-spacing:.08em; text-transform:uppercase; color:var(--c2); }

/* performance */
.stats { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 22px; }
.stat { flex:1 1 150px; border:1px solid var(--rule); border-top:3px solid var(--accent); padding:12px 16px; background:#fff9; }
.sv { font:600 26px var(--sans); letter-spacing:-.01em; } .sl { font:12px var(--sans); color:var(--muted);
      letter-spacing:.05em; text-transform:uppercase; margin-top:2px; }
.pos { color:#2f6b45; } .neg { color:#9a4434; }
.chart svg { width:100%; height:auto; display:block; }
.chart .grid { stroke:#e6e2d6; } .chart .base { stroke:#a9a596; stroke-dasharray:4 4; }
.chart .tx { font:11px var(--sans); fill:#8a897f; }
.chart .ln { fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.chart .area { fill:var(--accent); opacity:.08; } .chart .dot { fill:var(--accent); }
table.months { max-width:360px; } table.months td { font-variant-numeric:tabular-nums; }

.formula { display:flex; align-items:center; flex-wrap:wrap; gap:14px; background:#f4f1e7;
           border-left:3px solid var(--accent); padding:18px 22px; margin:10px 0 14px;
           font:italic 22px Georgia, serif; }
.formula sub, .formula sup { font-size:.6em; }
.formula .frac { display:inline-flex; flex-direction:column; text-align:center; }
.formula .frac > span:first-child { border-bottom:1px solid var(--ink); padding:0 8px 4px; }
.formula .frac > span:last-child { padding:4px 8px 0; }
.formula .cap { margin-left:auto; font:13px var(--sans); color:var(--muted); letter-spacing:.02em; }

/* method page */
.steps { list-style:none; margin:0; padding:0; }
.steps li { display:flex; gap:16px; margin-bottom:18px; }
.steps .n { flex:none; width:30px; height:30px; border-radius:50%; background:var(--accent); color:#fff;
            font:600 14px/30px var(--sans); text-align:center; margin-top:2px; }
.steps p { margin:2px 0 0; color:#3a3a36; }
.pillar { border-left:4px solid var(--c); padding:2px 0 2px 20px; margin:26px 0; }
.ph { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.pw { font:12px var(--sans); color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.metric { display:flex; gap:22px; align-items:center; padding:14px 0; border-top:1px solid var(--rule); }
.metric .mt { flex:1; } .metric .mt p { margin:0 0 6px; font-size:15.5px; }
.metric .note { font-size:14px; }
.curve { flex:none; width:280px; }
.curve svg { width:100%; height:auto; display:block; }
.curve .ax { stroke:#bdb9ab; stroke-width:1; } .curve .mid { stroke:#bdb9ab; stroke-width:1; stroke-dasharray:3 3; }
.curve .tx { font:10px var(--sans); fill:#8a897f; }
table.ex td, table.ex th { text-align:center; } table.ex td.l, table.ex th.l { text-align:left; }
table.ex .wrow td { color:var(--muted); font-size:13px; } table.ex .strong { font-weight:700; color:var(--accent); }

footer { margin-top:64px; color:var(--muted); font:12.5px/1.6 var(--sans); border-top:1px solid var(--rule);
         padding-top:16px; }
footer p { margin:0 0 6px; }
@media (max-width:640px) {
  body { font-size:16px; } main { padding:28px 16px 56px; } h1 { font-size:28px; }
  header { flex-direction:column; gap:12px; } nav { gap:6px 16px; }
  table { font-size:13.5px; } .metric { flex-direction:column; align-items:stretch; }
  .curve { width:100%; max-width:300px; } .alloc div { font-size:0; }
}