/* "How we measure": the methodology page. Every figure here is HTML/CSS/inline SVG drawn with the tokens,
   so it stays crisp, follows Día/Noche and reflows. site-method.js only animates towards what this file
   already renders: with JavaScript blocked the page is complete, the tokens are highlighted, the bars are
   full and the calculator shows the react/react preset. */

:root {
  --sev-c: #e0342b; --sev-h: #ee6c1a; --sev-m: #f2a900; --sev-l: #4f95d8;
  --g-a: #2f9e77; --g-b: #5aa83a; --g-c: #f2a900; --g-d: #ee6c1a; --g-e: #e0342b;
  --rel-out: #e8752a; --rel-in: #1fa3cf;
}

/* a one-line footnote with an icon, used under several figures */
.mn {
  display: flex; gap: 9px; align-items: flex-start;
  margin: clamp(20px, 3vw, 30px) 0 0; max-width: 62ch;
  font-size: .9rem; color: var(--muted);
}
.mn .ic { width: 16px; height: 16px; margin-top: 3px; color: var(--survey); }
.mn-plain { display: block; }

/* diagrams that would crush below their legible width scroll inside their own box, never the page */
.mscroll { overflow-x: auto; overscroll-behavior-x: contain; margin: clamp(22px, 3vw, 32px) 0 0; min-width: 0; }
.mscroll > svg { display: block; width: 100%; height: auto; }
/* a min-width on a figure must never push its grid track wider than the page */
.pair > *, .mx > *, .mg > * { min-width: 0; }

/* ---------- 1 · repository -> city ---------- */
.mp {
  list-style: none; padding: 0; margin: clamp(26px, 4vw, 40px) 0 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr) auto) minmax(0, 1fr);
  gap: 0 clamp(10px, 1.6vw, 20px); align-items: stretch;
}
.mp-node {
  display: grid; align-content: start; gap: 4px;
  border-top: 2px solid var(--ink); padding: 14px 0 4px;
}
.mp-node b { font: 700 1.05rem/1.3 var(--display); letter-spacing: -.015em; }
.mp-node span { color: var(--muted); font-size: .93rem; }
.mp-node-end { border-top-color: var(--survey); }
.mp-ico { display: block; margin-bottom: 4px; }
.mp-ico svg {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: var(--survey); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
/* the connector between two steps: a rule with an arrowhead, horizontal on wide screens, vertical when stacked */
.mp-link { display: flex; align-items: center; padding-top: 30px; }
.mp-link i {
  display: block; position: relative; width: clamp(14px, 2.6vw, 34px); height: 2px;
  background: var(--line); transform-origin: left center;
}
.mp-link i::after {
  content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left-color: var(--line); border-right: 0;
}

@media (max-width: 860px) {
  .mp { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mp-link { padding: 0; height: 28px; }
  .mp-link i { width: 2px; height: 100%; margin-left: 11px; transform-origin: top center; }
  .mp-link i::after { right: auto; top: auto; bottom: -1px; left: 50%; transform: translateX(-50%); border-left-color: transparent; border-top-color: var(--line); border-right: 5px solid transparent; border-bottom: 0; }
}

/* ---------- 2 · anatomy of a building ---------- */
.mb { position: relative; margin: clamp(24px, 4vw, 40px) 0 0; }
.mb-svg { display: block; width: 100%; height: auto; }

.mb-plate path { fill: color-mix(in srgb, var(--survey) 12%, transparent); stroke: var(--line); stroke-width: 1.5; }
.mb-halo { fill: none; stroke: var(--sev-c); stroke-width: 2; stroke-dasharray: 7 9; opacity: .45; }
.mb-tier path { stroke: color-mix(in srgb, var(--ink) 45%, transparent); stroke-width: 1.4; stroke-linejoin: round; }
.mb-top { fill: #ffb347; }
.mb-l { fill: #c9530f; }
.mb-r { fill: #ee6c1a; }
.mb-roof { fill: var(--survey); }
.mb-mast path { stroke: var(--sev-c); stroke-width: 5; stroke-linecap: round; }
.mb-mast circle { fill: var(--sev-c); }

.mb-badge rect { fill: var(--plate); stroke: var(--line); stroke-width: 1.5; }
.mb-badge text { fill: var(--ink); font: 700 22px var(--ui); }
.mb-bd-dot { fill: var(--sev-h); }
.mb-bd-dia { fill: var(--muted); }

.mb-dim path { stroke: var(--muted); stroke-width: 1.4; fill: none; }
.mb-dim-step { stroke-dasharray: 4 5; }
.mb-dim text { fill: var(--muted); font: 600 19px var(--ui); }

.mb-lead path { stroke: color-mix(in srgb, var(--muted) 55%, transparent); stroke-width: 1.5; fill: none; }
.mb-cal circle { fill: var(--plate); stroke: var(--survey); stroke-width: 2; }
.mb-cal text { fill: var(--survey); font: 700 17px var(--ui); text-anchor: middle; }

.mb-labs { list-style: none; margin: 0; padding: 0; }
.mb-lab { display: flex; gap: 9px; align-items: flex-start; font-size: .92rem; line-height: 1.4; }
.mb-lab > b {
  flex: none; width: 21px; height: 21px; border-radius: 50%;
  border: 1.5px solid var(--survey); color: var(--survey);
  display: grid; place-items: center; font: 700 .74rem/1 var(--ui); margin-top: 1px;
}
.mb-lab code { font-size: .85em; white-space: nowrap; }
.mb-lab .g-dot { color: var(--sev-h); }
.mb-lab .g-dia { color: var(--muted); }

@media (min-width: 981px) {
  .mb-lab { position: absolute; top: var(--y); width: 23.5%; transform: translateY(-50%); margin: 0; }
  .mb-lab-l { left: 0; text-align: right; flex-direction: row-reverse; }
  .mb-lab-r { left: 75.5%; }
}
@media (max-width: 980px) {
  .mb { overflow-x: auto; overscroll-behavior-x: contain; }
  .mb-svg { min-width: 620px; }
  .mb-lead { display: none; }
  .mb-labs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px clamp(22px, 4vw, 40px); margin-top: 22px; min-width: 620px;
  }
}
/* on a phone the label gutters are empty (the leaders are gone and the labels sit underneath), so the
   drawing is blown up and cropped to its middle 500 units instead of being shrunk to nothing */
@media (max-width: 700px) {
  .mb { overflow-x: hidden; }
  .mb-svg { min-width: 0; width: 200%; max-width: 760px; margin-left: calc(50% - min(100%, 380px)); }
  .mb-labs { min-width: 0; }
}

/* ---------- 3 · what complexity counts ---------- */
.mx {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 40px); align-items: center;
  margin: clamp(24px, 4vw, 38px) 0 0;
}
.mx-code { min-width: 0; }
.mx-code pre {
  margin: 0; overflow-x: auto; overscroll-behavior-x: contain;
  background: var(--plate); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift); padding: 16px 18px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.6;
  tab-size: 2;
}
.mx-code code { background: none; padding: 0; font-size: inherit; }
.mx-tk {
  font-weight: 700; border-radius: 4px; padding: 1px 4px; margin: 0 -1px;
  background: color-mix(in srgb, var(--survey) 20%, transparent);
  color: var(--survey); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--survey) 45%, transparent);
}
.mx-tk.is-off { background: none; color: inherit; box-shadow: none; font-weight: 400; }

.mx-count { display: grid; justify-items: center; gap: 2px; margin: 0; text-align: center; }
.mx-count b {
  font: 700 clamp(3rem, 8vw, 4.6rem)/1 var(--display); letter-spacing: -.04em;
  color: var(--survey); font-variant-numeric: tabular-nums;
}
.mx-count span { font-size: .85rem; color: var(--muted); max-width: 16ch; }

@media (max-width: 860px) {
  .mx { grid-template-columns: minmax(0, 1fr); }
  .mx-count { justify-items: start; text-align: left; }
}

/* ---------- 4 · where findings come from ---------- */
.mi {
  list-style: none; padding: 0; margin: clamp(26px, 4vw, 42px) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 0 clamp(28px, 4vw, 48px);
}
.mi li { border-top: 2px solid var(--ink); padding: 14px 0 26px; }
.mi h3 { margin: 6px 0 10px; font-size: 1.15rem; }
.mi-ico svg {
  width: 32px; height: 32px; display: block;
  fill: none; stroke: var(--survey); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mi p { margin: 0 0 9px; font-size: .93rem; color: var(--muted); }
.mi em {
  display: block; font-style: normal; font-weight: 600; color: var(--ink);
  font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 3px;
}
.mi code { font-size: .84em; }
.mi-emits b { color: var(--ink); font-weight: 600; }

.ms { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ms li {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--line));
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border-radius: 999px; padding: 5px 14px 5px 11px; font-size: .9rem; font-weight: 500;
}
.ms i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex: none; }

/* ---------- 5 · hotspots ---------- */
.msc { min-width: 520px; max-width: 880px; }
.msc-grid path { stroke: var(--line); stroke-width: 1.4; fill: none; }
.msc-mid { stroke-dasharray: 4 6; }
.msc-q text {
  fill: var(--muted); font: 500 12px var(--ui);
  paint-order: stroke; stroke: var(--fog); stroke-width: 5px; stroke-linejoin: round;
}
.msc-q4 { fill: var(--sev-c) !important; font-weight: 600 !important; }
.sc-dot { fill: color-mix(in srgb, var(--survey) 55%, var(--muted)); opacity: .8; }
.sc-hot { fill: var(--sev-c); }
.msc-mast { stroke: var(--sev-c); stroke-width: 3; stroke-linecap: round; }
.msc-knob { fill: var(--sev-c); }
.msc-hot text { fill: var(--sev-c); font: 600 11px var(--ui); }
.msc-ax { fill: var(--muted); font: 600 11px var(--ui); letter-spacing: .04em; }

/* ---------- 6 · risk of one building ---------- */
.mw { list-style: none; padding: 0; margin: clamp(20px, 3vw, 28px) 0 0; }
.mw li {
  display: grid; grid-template-columns: minmax(84px, 168px) minmax(0, 1fr) 42px;
  gap: 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line);
}
.mw span { font-size: .93rem; }
.mw i { display: block; height: 13px; border-radius: 3px; background: var(--c); width: var(--w); min-width: 4px; transform-origin: left center; }
.mw b { font: 700 1.05rem/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.mw-tiny b { font-size: .95rem; color: var(--muted); }

.mrc { min-width: 440px; }
.mrc-ramp { opacity: .9; }
.mrc-ax { stroke: var(--ink); stroke-width: 1.4; fill: none; }
/* the ramp under these marks is the product's heat gradient in both themes, so they are pinned to
   ink-on-white rather than following the theme */
.mrc-curve { stroke: #fff; stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px #0006); }
.mrc-mk circle { fill: #fff; stroke: #14213d; stroke-width: 2.5; }
.mrc-mk text { fill: #14213d; font: 600 17px var(--ui); paint-order: stroke; stroke: #ffffffd9; stroke-width: 5px; stroke-linejoin: round; }
.mrc-lb text { fill: var(--muted); font: 500 15px var(--ui); }
.mrc-ax-t { font-weight: 600 !important; letter-spacing: .04em; }

/* ---------- 7 · the grade, live ---------- */
.mc {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(26px, 4vw, 52px); align-items: start;
  margin: clamp(26px, 4vw, 40px) 0 0;
}
.mc h3 { font-size: 1.05rem; margin-bottom: 14px; }
.mc-h4 { font: 600 .74rem/1 var(--ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 26px 0 12px; }

.mc-in {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--plate); padding: clamp(16px, 2.4vw, 24px);
}
.mc-presets { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 0 0 10px; }
.mc-pre-l { font-size: .85rem; color: var(--muted); }
.mc-pre { font-family: inherit; }
.mc-pre.is-on { border-style: solid; border-color: var(--survey); color: var(--survey); font-weight: 600; }
.mc-clamp {
  margin: 0 0 14px; font-size: .82rem; line-height: 1.45; color: var(--muted);
  border-left: 3px solid var(--sev-m); padding: 6px 0 6px 11px;
}
.mc-clamp:not(.is-on) { display: none; }

.mc-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 2px 12px; align-items: center; padding: 7px 0; }
.mc-row label { grid-column: 1; grid-row: 1; font-size: .92rem; }
.mc-row input[type="range"] { grid-column: 1; grid-row: 2; width: 100%; accent-color: var(--survey); margin: 0; }
.mc-row output {
  grid-column: 2; grid-row: 1 / span 2; text-align: right;
  font: 700 1rem/1 var(--display); font-variant-numeric: tabular-nums;
}

.mc-out { min-width: 0; }
.mc-head { display: flex; align-items: center; gap: 16px; }
.mc-seal { font-size: 38px; }
.mc-score { margin: 0; display: flex; align-items: baseline; gap: 7px; }
.mc-score b { font: 700 clamp(2.6rem, 6vw, 3.6rem)/1 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.mc-score span { font-size: .9rem; color: var(--muted); }

.mc-bar {
  display: flex; height: 30px; border-radius: 7px; overflow: hidden;
  border: 1px solid var(--line); background: var(--soft);
}
.mc-seg { display: block; width: var(--w); min-width: 0; transition: width .2s ease; }
.mc-seg-score { background: var(--moss); }
.mc-seg-sec { background: var(--sev-c); }
.mc-seg-key { background: var(--sev-h); }
.mc-seg-debt { background: var(--sev-m); }
.mc-seg.is-cap { background-image: repeating-linear-gradient(45deg, #ffffff40 0 6px, transparent 6px 12px); }

.mc-keys { list-style: none; padding: 0; margin: 12px 0 0; }
.mc-key {
  display: grid; grid-template-columns: 13px minmax(0, 1fr) 64px 62px 68px;
  gap: 10px; align-items: center; padding: 6px 0; font-size: .9rem;
  border-bottom: 1px solid var(--line);
}
.mc-key i { width: 13px; height: 13px; border-radius: 3px; }
.mc-key-start i { background: var(--moss); }
.mc-key-sec i { background: var(--sev-c); }
.mc-key-key i { background: var(--sev-h); }
.mc-key-debt i { background: var(--sev-m); }
.mc-key b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.mc-key small { font-size: .76rem; color: var(--muted); text-align: right; }
.mc-key-start b { grid-column: 4; }
.mc-cap { display: block; height: 7px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.mc-cap u { display: block; height: 100%; width: var(--w); background: var(--muted); text-decoration: none; transition: width .2s ease; }
.mc-key.is-cap .mc-cap u { background: var(--sev-c); }
.mc-key.is-cap small { color: var(--sev-c); font-weight: 600; }

.mc-scale { position: relative; padding-top: 12px; }
.mc-zones { display: flex; gap: 2px; }
.mc-zones i {
  width: var(--w); height: 30px; display: grid; place-items: center start; padding-inline: 8px;
  font: 600 .74rem/1 var(--ui); font-style: normal; color: var(--plate);
  white-space: nowrap; overflow: hidden;
}
.mc-zones i:first-child { border-radius: 6px 0 0 6px; }
.mc-zones i:last-child { border-radius: 0 6px 6px 0; }
.mc-zones [data-g="A"] { background: var(--g-a); }
.mc-zones [data-g="B"] { background: var(--g-b); }
.mc-zones [data-g="C"] { background: var(--g-c); }
.mc-zones [data-g="D"] { background: var(--g-d); }
.mc-zones [data-g="E"] { background: var(--g-e); }
.mc-needle {
  position: absolute; left: var(--p); top: 0; width: 2px; height: 44px;
  background: var(--ink); transform: translateX(-1px); transition: left .2s ease;
}
.mc-needle::before {
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0;
}

@media (max-width: 900px) {
  .mc { grid-template-columns: minmax(0, 1fr); }
  .mc-key { grid-template-columns: 13px minmax(0, 1fr) 56px 60px; row-gap: 2px; }
  .mc-key small { grid-column: 4; }
}
@media (max-width: 420px) {
  .mc-key { grid-template-columns: 13px minmax(0, 1fr) 62px; }
  .mc-key .mc-cap { grid-column: 2 / span 2; }
  .mc-key small { grid-column: 3; }
  .mc-zones i { font-size: .66rem; }
}

/* ---------- 8 · the four lenses ---------- */
.ml { list-style: none; padding: 0; margin: clamp(24px, 3vw, 34px) 0 0; border-top: 1.5px solid var(--ink); }
.ml li {
  display: grid; grid-template-columns: 54px 140px minmax(0, 1fr);
  gap: 18px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.ml-bar { height: 11px; border-radius: 3px; background: var(--heat); }
.ml-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-family: var(--display); }
.ml-name .ic { width: 16px; height: 16px; color: var(--survey); }
.ml code { font-size: .88rem; justify-self: start; }

.mg { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; margin: clamp(26px, 4vw, 38px) 0 0; }
.mg-svg { display: block; width: 100%; height: auto; }
.mg-plate { fill: color-mix(in srgb, var(--sev-m) 28%, var(--soft)); stroke: var(--line); stroke-width: 1.5; }
.mg-b path { stroke: color-mix(in srgb, var(--ink) 40%, transparent); stroke-width: 1.2; fill: #ee6c1a; }
.mg-b2 { fill: #c9530f !important; }
.mg-bt { fill: #ffb347 !important; }
.mg-cap { margin: 0; color: var(--muted); font-size: .95rem; max-width: 46ch; }
.mg-cap b { display: block; color: var(--ink); font-weight: 600; font-family: var(--display); margin-bottom: 4px; }

@media (max-width: 760px) {
  .ml li { grid-template-columns: 40px minmax(0, 1fr); gap: 8px 14px; }
  .ml code { grid-column: 2; }
  .mg { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 9 · districts and links ---------- */
.md { list-style: none; padding: 0; margin: clamp(20px, 3vw, 28px) 0 0; display: grid; gap: 4px; }
.md li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: start; }
.md-step {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--survey); color: var(--survey);
  display: grid; place-items: center; font: 600 .76rem/1 var(--ui); grid-row: 1 / span 2;
}
.md-path { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.md-path em {
  font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem;
  border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; background: var(--plate);
}
.md-path em.is-drop { color: var(--muted); text-decoration: line-through; border-style: dashed; background: none; }
.md-path em.is-split { border-style: dashed; color: var(--muted); }
.md-path em.is-win {
  border-color: var(--survey); color: var(--survey); font-weight: 700; font-size: .95rem;
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px;
}
.md-path em.is-win i { width: 11px; height: 11px; border-radius: 3px; background: var(--survey); }
.md-note { font-size: .86rem; color: var(--muted); grid-column: 2; }

.mlk { min-width: 400px; }
.mlk-n rect { fill: var(--plate); stroke: var(--ink); stroke-width: 1.6; }
.mlk-n text { fill: var(--ink); font: 600 16px var(--ui); }
.mlk-side rect { stroke: var(--line); }
.mlk-ext rect { stroke: var(--line); stroke-dasharray: 5 5; fill: none; }
.mlk-ext text { fill: var(--muted); }
.mlk-out { stroke: var(--rel-out); stroke-width: 2.6; fill: none; }
.mlk-in { stroke: var(--rel-in); stroke-width: 2.6; fill: none; }
.mlk-x { stroke: var(--muted); stroke-width: 2; fill: none; stroke-dasharray: 5 5; opacity: .7; }
.mlk-cross { stroke-dasharray: none; stroke-linecap: round; }
.mlk-t { font: 600 14px var(--ui); letter-spacing: .02em; }
.mlk-t-out { fill: var(--rel-out); }
.mlk-t-in { fill: var(--rel-in); }

/* ---------- 10 · honest limits ---------- */
.mlim { max-width: 76ch; gap: 14px; margin-top: clamp(24px, 3vw, 34px); }
.mlim li { font-size: .98rem; }
.mlim .ic { color: var(--survey); }

/* ---------- phones ---------- */
/* Below ~700px a 640-unit chart scaled to the screen would hide its own point behind a scrollbar, so the
   charts drop their minimum width and set their type in larger viewBox units instead: everything fits,
   nothing scrolls sideways, and the labels stay around 12px. */
@media (max-width: 700px) {
  .msc, .mrc, .mlk { min-width: 0; }
  .msc-q text { font-size: 21px; stroke-width: 8px; }
  .msc-ax, .msc-hot text { font-size: 18px; }
  .mrc-mk text { font-size: 24px; stroke-width: 7px; }
  .mrc-lb text { font-size: 21px; }
  .mlk-n text { font-size: 20px; }
  .mlk-t { font-size: 18px; }
}

/* ==========================================================================================
   Presentation layer — the same grammar as the landing: every figure sits on a stage (a recessed
   sheet of plotting paper inside a card), sections are numbered, and a sticky chapter rail says
   where you are. No new content; only how it is held.
   ========================================================================================== */
.mtop { padding-bottom: clamp(20px, 3vw, 34px); }
.mtop h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -.03em; }
.mtop + .mtoc + .band { border-top: 0; }

.mtoc {
  position: sticky; top: 62px; z-index: 5; border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--fog) 82%, transparent); backdrop-filter: blur(12px);
}
.mtoc-in { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.mtoc-in::-webkit-scrollbar { display: none; }
.mtoc a {
  flex: none; display: inline-flex; align-items: baseline; gap: 7px; padding: 7px 12px; border-radius: 999px;
  font-size: .84rem; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.mtoc a i { font: 700 .7rem/1 var(--display); font-style: normal; color: var(--survey); opacity: .7; font-variant-numeric: tabular-nums; }
.mtoc a:hover { color: var(--ink); background: var(--hover); }
.mtoc a.is-on { color: var(--pfg); background: var(--pbg); }
.mtoc a.is-on i { color: inherit; opacity: .75; }

/* numbered sections: a large quiet numeral hanging beside each heading */
main { counter-reset: msec; }
main > .band[id] { counter-increment: msec; scroll-margin-top: 120px; }
main > .band[id] h2 { position: relative; font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
main > .band[id] h2::before {
  content: counter(msec, decimal-leading-zero); display: block; margin-bottom: 10px;
  font: 700 clamp(2.6rem, 5vw, 4rem)/.9 var(--display); letter-spacing: -.04em;
  color: color-mix(in srgb, var(--survey) 24%, transparent);
}

/* the stage */
.mp, .mb, .mx, .mscroll, .mc, .mg, #risk .pair > div, #districts .pair > div, .mi > li {
  border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px #14213d0f, 0 24px 48px -28px #14213d40;
  padding: clamp(18px, 3vw, 34px);
  background:
    radial-gradient(70% 60% at 50% 35%, color-mix(in srgb, var(--survey) 6%, transparent), transparent 72%),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 28px),
    var(--plate);
  margin-top: clamp(24px, 3vw, 36px);
}
.mi { gap: clamp(14px, 2vw, 22px); }
.mi > li { margin-top: 0; border-top-width: 1px; transition: transform .25s ease, border-color .25s ease; }
.mi > li:hover { transform: translateY(-3px); border-color: var(--survey); }
.mc { padding: clamp(14px, 2.4vw, 26px); }
#risk .pair, #districts .pair { align-items: stretch; }

/* lenses: formula and the reason for its constant, side by side */
.ml { border: 1px solid var(--line); border-radius: 20px; background: var(--plate); padding: 6px clamp(14px, 2.4vw, 26px); border-top: 1px solid var(--line); }
.ml li { grid-template-columns: 64px minmax(110px, 170px) minmax(0, auto) minmax(0, 1fr); transition: background-color .2s ease; }
.ml li:last-child { border-bottom: 0; }
.ml-why { color: var(--muted); font-size: .9rem; }

.mlim { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.mlim li { border: 1px solid var(--line); border-radius: 14px; background: var(--plate); padding: 14px 16px; margin: 0; }

@media (max-width: 760px) {
  .mtoc { top: 56px; }
  .ml li { grid-template-columns: 40px 1fr; }
  .ml li code, .ml-why { grid-column: 2; }
}
.mlim { max-width: none; }
#risk .pair > div > :first-child, #districts .pair > div > :first-child { margin-top: 0; }
/* a stage inside a stage is just a figure */
.pair > div .mscroll { border: 0; box-shadow: none; background: none; padding: 0; border-radius: 0; }

/* ---------- lenses as four different cards: same buildings, different paint, labelled scale ---------- */
.ml.ml-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(14px, 2vw, 22px); border: 0; background: none; padding: 0; }
.ml.ml-cards .ml-card {
  display: flex; flex-direction: column; gap: 10px; grid-template-columns: none; border: 1px solid var(--line); border-radius: 20px;
  background: var(--plate); padding: 20px 20px 18px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ml.ml-cards .ml-card:hover { transform: translateY(-4px); border-color: var(--survey); box-shadow: var(--lift); }
.ml-card .ml-name { font-size: 1.25rem; margin: 0; }
.ml-card .ml-name .ic { width: 20px; height: 20px; }
.ml-for { margin: 0; color: var(--muted); font-size: .9rem; min-height: 2.9em; }
.ml-sky {
  display: flex; align-items: flex-end; gap: 5px; height: 96px; padding: 10px 10px 0; border-radius: 12px; border: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 16px), repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 16px), var(--fog);
}
.ml-sky i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-bottom: 0; transform-origin: bottom; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1); }
.ml-card:hover .ml-sky i { transform: scaleY(1.06); }
.ml-sky .t0 { background: color-mix(in srgb, var(--plate) 70%, var(--line)); }
.ml-sky .t1 { background: #ffe08a; } .ml-sky .t2 { background: #ffb347; } .ml-sky .t3 { background: #ff7a3d; } .ml-sky .t4 { background: #e0342b; }
.ml-scale { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: .74rem; font-weight: 600; color: var(--muted); }
.ml-scale .ml-bar { height: 7px; }
.ml-f { margin: 4px 0 0; display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ml-f code { justify-self: start; }
.ml.ml-cards .ml-card { align-items: stretch; text-align: left; justify-items: stretch; }
.ml-card .ml-name { justify-content: flex-start; }
.ml-sky { align-self: stretch; width: auto; }
.ml-sky i { display: block; min-width: 0; }

/* ---------- hotspot scatter, drawn from a real repo: zones, log ticks, the frontier, named dots ---------- */
#hotspots .mscroll { position: relative; }
.msc-z4 { fill: color-mix(in srgb, var(--sev-c) 7%, transparent); }
.msc-front-fill { fill: color-mix(in srgb, var(--sev-c) 10%, transparent); }
.msc-tick { stroke-dasharray: 2 5; opacity: .7; }
.msc-num text { fill: var(--muted); font: 500 10px var(--ui); font-variant-numeric: tabular-nums; }
.msc-front { stroke: var(--sev-c); stroke-width: 1.6; stroke-dasharray: 6 5; fill: none; }
.msc-front-t { fill: var(--sev-c); font: 600 10.5px var(--ui); }
.msc-name { fill: var(--ink); font: 600 11px var(--ui); paint-order: stroke; stroke: var(--plate); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.msc-name.is-hot { fill: var(--sev-c); font-size: 12.5px; }
/* no CSS transition on the hotspot groups: GSAP fades them in and a transition makes it read the wrong end value */
.sc-pt { cursor: pointer; outline: none; }
.sc-dot.sc-pt { transition: r .2s ease, opacity .2s ease, fill .2s ease; }
.sc-dot.sc-pt:hover, .sc-dot.sc-pt:focus-visible { r: 8; opacity: 1; fill: var(--survey); }
.sc-pt:hover .sc-hot, .sc-pt:focus-visible .sc-hot { r: 9; }
.msc-dots:hover .sc-dot:not(:hover) { opacity: .35; }
.msc-tip {
  position: absolute; left: 0; top: 0; z-index: 3; margin: 0; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: var(--fog); border-radius: 10px; padding: 9px 12px; font-size: .78rem; line-height: 1.45;
  box-shadow: var(--lift); opacity: 0; transition: opacity .15s ease;
}
.msc-tip.is-on { opacity: 1; }
.msc-tip b { display: block; font: 700 .9rem/1.2 var(--display); }
.msc-legend { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; font-size: .86rem; color: var(--muted); }
.msc-legend li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.msc-legend i { margin-top: 4px; justify-self: center; }
.msc-l-dot { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--survey) 55%, var(--muted)); }
.msc-l-hot { width: 12px; height: 12px; border-radius: 50%; background: var(--sev-c); box-shadow: 0 -9px 0 -4px var(--sev-c); }
.msc-l-front { width: 20px; height: 0; border-top: 2px dashed var(--sev-c); margin-top: 9px !important; }

/* ---------- complexity as an editor, and what the number is for ---------- */
.mx { grid-template-columns: minmax(0, 1.55fr) minmax(250px, .8fr); align-items: stretch; }
.mx-code { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--plate); box-shadow: var(--lift); display: flex; flex-direction: column; }
.mx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--soft); }
.mx-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mx-file { margin-left: 10px; font: 500 .74rem/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.mx-code pre { border: 0; border-radius: 0; box-shadow: none; background: none; padding: 14px 0; flex: 1 1 auto; counter-reset: ln; font-size: 13.5px; line-height: 1.75; }
.mx-ln { display: block; position: relative; padding: 0 56px 0 52px; counter-increment: ln; white-space: pre; }
.mx-ln::before { content: counter(ln); position: absolute; left: 0; width: 36px; text-align: right; color: var(--muted); opacity: .55; font-size: 11.5px; }
.mx-ln[data-add] { background: color-mix(in srgb, var(--survey) 6%, transparent); }
.mx-ln[data-add]::after {
  content: "+" attr(data-add); position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 700 11px/1 var(--ui); color: var(--survey); padding: 3px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--survey) 14%, transparent);
}
button.mx-tk { font: inherit; font-weight: 700; border: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .15s ease; }
button.mx-tk:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--survey) 34%, transparent); }
button.mx-tk.is-off { text-decoration: line-through; opacity: .55; }
.mx-no { font-style: normal; border-bottom: 1px dashed var(--muted); color: var(--muted); cursor: help; }

.mx-side { display: grid; gap: 14px; align-content: start; }
.mx-side > * { border: 1px solid var(--line); border-radius: 16px; background: var(--plate); padding: 16px 18px; margin: 0; }
.mx-count { grid-template-columns: auto 1fr; justify-items: start; align-items: center; gap: 14px; text-align: left; }
.mx-count b { font-size: clamp(2.6rem, 5vw, 3.6rem); line-height: 1; }
.mx-folder h3 { font: 600 .82rem/1.3 var(--ui); color: var(--muted); margin: 0 0 10px; letter-spacing: 0; }
.mx-folder ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.mx-folder li { display: grid; grid-template-columns: 78px 1fr 24px; gap: 8px; align-items: center; font: 500 .78rem/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--muted); }
.mx-folder li i { height: 8px; border-radius: 4px; width: var(--w); background: color-mix(in srgb, var(--muted) 45%, transparent); transition: width .35s cubic-bezier(.2, 1.2, .4, 1); }
.mx-folder li b { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.mx-folder .is-me { color: var(--survey); } .mx-folder .is-me i { background: var(--survey); } .mx-folder .is-me b { color: var(--survey); }
.mx-sum { display: flex; justify-content: space-between; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font: 600 .85rem/1 ui-monospace, "SF Mono", Menlo, monospace; }
.mx-sum b { font: 700 1.2rem/1 var(--display); }
.mx-tower-box { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: end; min-height: 132px; }
.mx-tower {
  align-self: end; height: var(--h); min-height: 12px; border-radius: 4px 4px 0 0; position: relative;
  background: linear-gradient(90deg, #ff7a3d 0 50%, #e0561f 50%); border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-bottom: 0;
  transition: height .45s cubic-bezier(.2, 1.3, .4, 1);
}
.mx-tower::before { content: ""; position: absolute; inset: -7px -1px auto; height: 7px; background: var(--survey); border-radius: 3px 3px 0 0; }
.mx-tower-box p { margin: 0; display: grid; gap: 4px; }
.mx-tower-box span { font-size: .82rem; color: var(--muted); }
.mx-tower-box b { font: 700 2rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mx-tower-box code { justify-self: start; font-size: .74rem; }
.mx-try { margin: 16px 0 0; display: flex; gap: 8px; align-items: center; font-size: .9rem; color: var(--survey); font-weight: 500; }
.mx-try .ic { width: 16px; height: 16px; flex: none; }
@media (max-width: 860px) { .mx { grid-template-columns: minmax(0, 1fr); } .mx-ln { padding-left: 44px; } }