/* ================================================================
   THE DATA FIRM — APP SHELL  ·  tdf-app.css
   One fixed screen. No page scroll. A chapter rail swaps views in
   place while the country stays behind everything.
   Built on the TDF Design System: the Ratio still governs — the map
   and data carry the colour, the furniture stays white/grey/red.
   ================================================================ */

:root{
  --red:#d81f26; --red-deep:#a5141a; --grey:#6e6f72; --mist:#f7f6f4;
  --line:#dcdad4; --grey40:#9a9b9e; --deep:#3a3a3c;
  --ink:#111115; --ink2:#1a1a1f; --inkline:rgba(255,255,255,.13);
  --n1:#e8e7e4; --n2:#cfcecb; --n3:#adadb0; --n4:#8b8b8f; --n5:#66666a;
  --s1:#fbe3e4; --s2:#f2a9ad; --s3:#e4676e; --s4:#d81f26; --s5:#8f1218;
  --display:"Source Serif 4",Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --logo:"Trebuchet MS","Segoe UI",Tahoma,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0;background:var(--ink);color:#e6e6ea;font-family:var(--sans);
  font-size:16px;line-height:1.55;overflow:hidden;-webkit-font-smoothing:antialiased;}

/* ---------- background: the country ---------- */
/* The whole of India is always visible and never cropped.
   Rendered as a matrix of cells, not as a traced boundary. */
.bg{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:74px 3vw 78px;z-index:0;pointer-events:none;}
.bg svg{height:100%;width:100%;max-height:100%;overflow:visible;}
.scrim{position:fixed;inset:0;z-index:1;pointer-events:none;transition:background .6s ease;
  background:radial-gradient(85% 70% at 26% 50%, rgba(17,17,21,.97) 0%, rgba(17,17,21,.90) 34%, rgba(17,17,21,.46) 68%, rgba(17,17,21,.26) 100%),
             linear-gradient(180deg, rgba(17,17,21,.9) 0%, rgba(17,17,21,0) 18%, rgba(17,17,21,0) 66%, rgba(17,17,21,.95) 100%);}
body[data-view]:not([data-view="0"]) .scrim{
  background:linear-gradient(180deg, rgba(17,17,21,.94) 0%, rgba(17,17,21,.965) 40%, rgba(17,17,21,.98) 100%);}

/* ---------- shell ---------- */
.app{position:relative;z-index:2;height:100svh;display:grid;
  grid-template-columns:246px 1fr;grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top" "rail main" "bottom bottom";}

.top{grid-area:top;display:flex;align-items:center;gap:20px;padding:18px 40px;
  border-bottom:1px solid var(--inkline);}
.wordmark{font-family:var(--logo);color:#e6e6e8;font-size:21px;letter-spacing:.04em;}
.wordmark b{color:#ff4a50;font-weight:700;}
.tagline{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:#6a6a74;}
.top .btn{margin-left:auto;}

/* ---------- chapter rail ---------- */
.rail{grid-area:rail;border-right:1px solid var(--inkline);padding:26px 0;
  display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.rail button{display:flex;align-items:baseline;gap:12px;background:none;border:0;
  border-left:2px solid transparent;padding:10px 22px 10px 38px;text-align:left;cursor:pointer;
  font-family:var(--sans);transition:background .2s,border-color .2s;}
.rail button i{font-style:normal;font-size:10px;font-weight:600;letter-spacing:.14em;color:#4f4f59;}
.rail button b{font-size:13.5px;font-weight:500;color:#83838e;transition:color .2s;}
.rail button:hover b{color:#d4d4da;}
.rail button.on{border-left-color:var(--red);background:rgba(216,31,38,.09);}
.rail button.on b{color:#fff;font-weight:600;}
.rail button.on i{color:var(--red);}

/* ---------- views ---------- */
.stagearea{grid-area:main;position:relative;overflow:hidden;}
.view{position:absolute;inset:0;padding:34px 46px;overflow:auto;
  display:flex;flex-direction:column;justify-content:flex-start;gap:22px;
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .42s ease,transform .42s cubic-bezier(.22,.85,.28,1),visibility .42s;}
.view.on{opacity:1;visibility:visible;transform:none;}
.view::-webkit-scrollbar{width:6px;}
.view::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px;}

.vgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
.vhead{max-width:44ch;}
.vk{display:block;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin-bottom:12px;}

h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,4.4vw,68px);line-height:.96;
  letter-spacing:-.042em;color:#fff;margin:0 0 20px;}
h1 .hl{color:var(--red);}
h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.9vw,40px);line-height:1.1;
  letter-spacing:-.028em;color:#fff;margin:0;}
.thesis{font-family:var(--display);font-size:clamp(16px,1.5vw,21px);line-height:1.44;
  color:#a5a5ae;max-width:42ch;margin:0 0 24px;}
.thesis em{color:#fff;font-style:normal;font-weight:600;}
.thesis.sm{font-size:17px;margin-bottom:14px;}
.fine{font-size:12.5px;color:#75757f;line-height:1.55;margin:0;max-width:88ch;}
.fine b{color:#b9b9c1;}

.acts{display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;background:var(--red);color:#fff;border:1px solid var(--red);
  font-size:13.5px;font-weight:600;padding:12px 22px;text-decoration:none;cursor:pointer;border-radius:2px;
  transition:background .18s,transform .18s;}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-1px);}
.btn.ghost{background:transparent;color:#c2c2c9;border-color:rgba(255,255,255,.24);}
.btn.ghost:hover{background:transparent;color:#fff;border-color:#fff;}
.btn.sm{padding:9px 17px;font-size:12.5px;}

.verdict{font-family:var(--display);font-size:clamp(19px,2.2vw,30px);line-height:1.24;
  letter-spacing:-.02em;color:#8b8b94;margin:0;max-width:40ch;}
.verdict .hl{color:#fff;}
.verdict .dim{color:#6a6a74;}
.verdict.sm{font-size:clamp(16px,1.6vw,21px);max-width:74ch;}

/* ---------- 01 switcher ---------- */
.switch{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);border-radius:2px;overflow:hidden;}
.stabs{display:flex;border-bottom:1px solid var(--inkline);}
.stabs button{flex:1;background:none;border:0;border-right:1px solid rgba(255,255,255,.09);
  color:#82828c;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:12px 6px;cursor:pointer;transition:color .2s,background .2s;}
.stabs button:last-child{border-right:0;}
.stabs button:hover{color:#d8d8de;}
.stabs button.on{color:#fff;background:rgba(216,31,38,.18);box-shadow:inset 0 -2px 0 var(--red);}
.spair{display:grid;grid-template-columns:1fr 1.3fr;transition:opacity .17s ease;}
.spair.fading{opacity:0;}
.spair .scol{padding:24px 22px;}
.spair .scol.us{border-left:1px solid var(--inkline);position:relative;}
.spair .scol.us::before{content:"";position:absolute;left:-1px;top:24px;width:2px;height:24px;background:var(--red);}
.slab{display:block;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#6a6a74;margin-bottom:11px;}
.scol.us .slab{color:var(--red);}
.spair p{margin:0;font-size:15px;line-height:1.5;color:#7e7e88;min-height:6em;}
.scol.us p{color:#f2f2f4;font-size:16px;}

/* ---------- 02 versus ---------- */
.versus{border-top:1px solid var(--inkline);}
.vrow{display:grid;grid-template-columns:120px 1fr 1fr;border-bottom:1px solid var(--inkline);}
.vrow > div{padding:14px 22px 15px 0;font-size:14.5px;line-height:1.45;color:#87878f;}
.vrow.vh > div{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5f5f69;padding-bottom:10px;}
.vrow.vh .us{color:var(--red);}
.vrow .vl{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#5b5b65;padding-top:16px;}
.vrow .us{color:#fff;padding-left:22px;border-left:1px solid var(--inkline);position:relative;}
.vrow:not(.vh) .us::before{content:"";position:absolute;left:-1px;top:14px;width:2px;height:22px;background:var(--red);}

/* ---------- 03 cocktail ---------- */
.cocktail{display:flex;align-items:stretch;flex-wrap:wrap;
  border-top:1px solid var(--inkline);border-bottom:1px solid var(--inkline);padding:26px 0;}
.cocktail .cx{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 20px;}
.cocktail .cx:first-child{padding-left:0;}
.cn{font-family:var(--display);font-weight:700;font-size:clamp(26px,3.5vw,50px);line-height:1;
  letter-spacing:-.035em;color:#fff;font-variant-numeric:tabular-nums;}
.cl{font-size:11px;color:#7b7b85;line-height:1.3;max-width:13ch;}
.op{display:flex;align-items:center;font-family:var(--display);font-size:clamp(16px,1.9vw,24px);color:#4c4c56;}
.op.eq{color:var(--red);padding:0 14px;}
.cx.tot{padding-left:22px;border-left:1px solid var(--inkline);}
.cx.tot .cn{color:var(--red);}
.cx.tot .cl{color:#c6c6ce;max-width:16ch;}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.cols3 p{margin:0;font-size:14px;line-height:1.6;color:#83838d;}
.cols3 b{color:#fff;font-weight:600;}

/* ---------- 04 reach ---------- */
.reach{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;}
.strata{display:grid;gap:1px;background:var(--inkline);border:1px solid var(--inkline);}
.strata > div{background:var(--ink2);display:grid;grid-template-columns:70px 1fr;gap:12px;
  padding:8px 14px;align-items:baseline;}
.sn{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);}
.sd{font-size:14px;color:#dcdce1;}
.nest{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.nest figure{margin:0;}
.nest svg{width:100%;height:auto;display:block;border:1px solid var(--inkline);background:var(--ink2);}
.nest figcaption{margin-top:8px;font-size:12px;color:#82828c;line-height:1.4;}
.nest figcaption b{display:block;color:#fff;font-size:13.5px;font-weight:600;margin-bottom:1px;}

/* ---------- 05 lenses ---------- */
.lenses{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--inkline);
  border:1px solid var(--inkline);}
.lens{background:var(--ink2);padding:13px 15px;}
.lens b{display:block;font-size:14px;color:#fff;font-weight:600;margin-bottom:2px;}
.lens span{font-size:11.5px;color:#7c7c86;line-height:1.35;}

/* ---------- 06 work ---------- */
.wcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.wcard{border:1px solid var(--inkline);background:rgba(255,255,255,.03);padding:24px 24px;border-radius:2px;}
.wq{font-family:var(--display);font-size:clamp(17px,1.8vw,23px);line-height:1.28;color:#fff;margin:0 0 16px;}
.wa{font-size:14px;line-height:1.55;color:#86868f;margin:0 0 16px;}
.wfor{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin:0;padding-top:13px;border-top:1px solid var(--inkline);}
.proofset{display:flex;flex-wrap:wrap;align-items:stretch;}
.pgroup{display:flex;flex-direction:column;gap:11px;padding:2px 28px;border-left:1px solid var(--inkline);}
.pgroup:first-child{padding-left:0;border-left:none;}
.pgroup.tech{margin-left:auto;padding-right:0;}
.pl{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#63636d;white-space:nowrap;}
.marks{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.marks img{height:26px;width:auto;box-sizing:content-box;
  background:#fff;padding:9px 13px;border-radius:2px;
  filter:grayscale(100%) contrast(.95);opacity:.82;
  transition:opacity .25s,filter .25s,box-shadow .25s;}
.marks img:hover{filter:none;opacity:1;box-shadow:0 0 0 1px rgba(216,31,38,.45);}

/* ---------- 07 checks ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--inkline);
  border:1px solid var(--inkline);}
.chk{background:var(--ink2);padding:15px 18px;display:grid;grid-template-columns:26px 1fr;gap:14px;}
.chk i{font-style:normal;font-family:var(--display);font-size:19px;font-weight:700;color:var(--red);line-height:1.2;}
.chk b{display:block;font-size:14.5px;color:#fff;font-weight:600;margin-bottom:3px;}
.chk span{font-size:13px;color:#83838d;line-height:1.5;}
.chk.red{background:rgba(216,31,38,.10);}

/* ---------- 08 who ---------- */
.whogrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--inkline);border:1px solid var(--inkline);}
.who{background:var(--ink2);padding:16px 18px;}
.who b{display:block;font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:7px;}
.who span{font-family:var(--display);font-size:15.5px;line-height:1.3;color:#e2e2e7;}

/* ---------- bottom bar ---------- */
.bottom{grid-area:bottom;display:flex;align-items:center;gap:30px;padding:14px 40px;
  border-top:1px solid var(--inkline);background:rgba(17,17,21,.6);backdrop-filter:blur(8px);}
.bigstats{display:flex;gap:46px;flex:1;}
.bigstats > div{display:flex;align-items:baseline;gap:9px;}
.bigstats .n{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.1vw,30px);line-height:1;
  letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums;}
.bigstats .n i{font-style:normal;font-size:.5em;color:#84848e;}
.bigstats .n.red{color:var(--red);}
.bigstats .l{font-size:11px;color:#75757f;}
.humansfirst{font-size:9.5px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--red);}

button:focus-visible,a:focus-visible{outline:2px solid var(--red);outline-offset:3px;}

/* ================================================================
   MOBILE & SHORT SCREENS — the shell becomes a normal page.
   Forcing a fixed shell onto a phone fights the user.
   ================================================================ */
@media(max-width:1000px), (max-height:620px){
  body{overflow:auto;}
  .app{height:auto;grid-template-columns:1fr;
    grid-template-areas:"top" "rail" "main" "bottom";}
  .top{padding:14px 20px;position:sticky;top:0;background:rgba(17,17,21,.94);
    backdrop-filter:blur(10px);z-index:10;}
  .tagline{display:none;}
  .rail{flex-direction:row;overflow-x:auto;padding:0;border-right:0;
    border-bottom:1px solid var(--inkline);position:sticky;top:53px;z-index:9;
    background:rgba(17,17,21,.94);backdrop-filter:blur(10px);}
  .rail button{border-left:0;border-bottom:2px solid transparent;padding:12px 16px;white-space:nowrap;}
  .rail button.on{border-left:0;border-bottom-color:var(--red);}
  .rail button i{display:none;}
  .stagearea{overflow:visible;}
  .view{position:relative;inset:auto;opacity:1;visibility:visible;transform:none;
    display:none;padding:30px 20px;overflow:visible;}
  .view.on{display:flex;}
  .vgrid,.reach,.cols3,.wcards,.checks,.whogrid{grid-template-columns:1fr;gap:22px;}
  .lenses{grid-template-columns:1fr 1fr;}
  .spair{grid-template-columns:1fr;}
  .spair .scol.us{border-left:0;border-top:1px solid var(--inkline);}
  .spair p{min-height:0;}
  .stabs{flex-wrap:wrap;}
  .stabs button{flex:1 1 33%;}
  .vrow{grid-template-columns:1fr;}
  .vrow.vh{display:none;}
  .vrow > div{padding:10px 0;}
  .vrow .us{padding:10px 0 14px 16px;border-left:2px solid var(--red);}
  .vrow:not(.vh) .us::before{display:none;}
  .cocktail .op{display:none;}
  .cocktail .cx{flex:1 1 30%;padding:8px 10px;}
  .cx.tot{flex:1 1 100%;border-left:0;border-top:1px solid var(--inkline);padding-top:14px;}
  .pgroup{flex:1 1 100%;padding:0;border-left:0;}
  .pgroup.tech{margin-left:0;}
  .proofset{gap:18px;}
  .bottom{flex-wrap:wrap;padding:16px 20px;}
  .bigstats{gap:22px;flex-wrap:wrap;}
  .bg{position:fixed;inset:0;opacity:.28;}
  .bg svg{height:100%;}
  .scrim,body[data-view]:not([data-view="0"]) .scrim{
    background:linear-gradient(180deg,rgba(17,17,21,.9),rgba(17,17,21,.97));}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}

/* ---------- 03 the big number ---------- */
.bignum{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  border-top:1px solid var(--inkline);border-bottom:1px solid var(--inkline);padding:30px 0;}
.bn{font-family:var(--display);font-weight:700;font-size:clamp(52px,9vw,132px);line-height:.9;
  letter-spacing:-.05em;color:var(--red);font-variant-numeric:tabular-nums;}
.bl{font-size:15px;line-height:1.55;color:#8c8c96;max-width:38ch;}

/* ---------- 06 four work cards ---------- */
.wcards.four{grid-template-columns:repeat(4,1fr);gap:14px;}
.wcards.four .wcard{padding:18px 18px;}
.wcards.four .wq{font-size:clamp(15px,1.35vw,18px);margin-bottom:12px;}
.wcards.four .wa{font-size:13px;line-height:1.5;margin-bottom:12px;}
.wcards.four .wfor{padding-top:10px;font-size:9.5px;}
@media(max-width:1200px){.wcards.four{grid-template-columns:1fr 1fr;}}
@media(max-width:1000px){.wcards.four{grid-template-columns:1fr;}}

.subhead{font-size:14.5px;color:#8a8a94;margin:12px 0 0;max-width:70ch;line-height:1.5;}
.subhead em{font-style:normal;color:#fff;font-weight:600;}

/* ================================================================
   LIGHT THEME  ·  body.light
   The same shell on white. The Ratio reads more literally here:
   white dominates, grey carries, red stays rare — and the map
   becomes a proper choropleth rather than a glow.
   ================================================================ */

.themetog{margin-left:auto;background:none;border:1px solid rgba(255,255,255,.22);
  color:#a8a8b2;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:8px 14px;border-radius:2px;cursor:pointer;
  transition:color .2s,border-color .2s;}
.themetog:hover{color:#fff;border-color:#fff;}
.top .themetog + .btn{margin-left:12px;}

body.light{background:#fff;color:var(--deep);}
body.light .themetog{border-color:var(--line);color:var(--grey40);}
body.light .themetog:hover{color:var(--red);border-color:var(--red);}

/* map on white */

body.light .scrim,
body.light[data-view]:not([data-view="0"]) .scrim{
  background:radial-gradient(88% 72% at 26% 50%, rgba(255,255,255,.985) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.70) 68%, rgba(255,255,255,.52) 100%),
             linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.42) 20%, rgba(255,255,255,.42) 64%, rgba(255,255,255,.97) 100%);}
body.light[data-view]:not([data-view="0"]) .scrim{
  background:linear-gradient(180deg, rgba(255,255,255,.955) 0%, rgba(255,255,255,.975) 42%, rgba(255,255,255,.99) 100%);}

/* shell furniture */
body.light .top,
body.light .rail,
body.light .bottom{border-color:var(--line);}
body.light .bottom{background:rgba(255,255,255,.72);}
body.light .wordmark{color:var(--grey);}
body.light .wordmark b{color:var(--red);}
body.light .tagline{color:var(--grey40);}
body.light .rail button i{color:#c2c1bd;}
body.light .rail button b{color:var(--grey);}
body.light .rail button:hover b{color:var(--deep);}
body.light .rail button.on{background:rgba(216,31,38,.06);}
body.light .rail button.on b{color:var(--deep);}
body.light .rail button.on i{color:var(--red);}

/* type */
body.light h1,body.light h2{color:var(--deep);}
body.light h1 .hl{color:var(--red);}
body.light .thesis{color:var(--grey);}
body.light .thesis em{color:var(--deep);}
body.light .fine{color:var(--grey40);}
body.light .fine b{color:var(--deep);}
body.light .subhead{color:var(--grey);}
body.light .subhead em{color:var(--deep);}
body.light .verdict{color:var(--grey);}
body.light .verdict .hl{color:var(--deep);}
body.light .verdict .dim{color:var(--grey40);}
body.light .btn.ghost{color:var(--grey);border-color:var(--line);}
body.light .btn.ghost:hover{color:var(--red);border-color:var(--red);}
body.light .view::-webkit-scrollbar-thumb{background:var(--line);}

/* switcher */
body.light .switch{background:rgba(255,255,255,.9);border-color:var(--line);}
body.light .stabs{border-color:var(--line);}
body.light .stabs button{border-right-color:var(--line);color:var(--grey40);}
body.light .stabs button:hover{color:var(--deep);}
body.light .stabs button.on{color:var(--deep);background:rgba(216,31,38,.07);}
body.light .spair .scol.us{border-left-color:var(--line);}
body.light .slab{color:var(--grey40);}
body.light .scol.us .slab{color:var(--red);}
body.light .spair p{color:var(--grey40);}
body.light .scol.us p{color:var(--deep);}

/* versus */
body.light .versus,body.light .vrow{border-color:var(--line);}
body.light .vrow > div{color:var(--grey);}
body.light .vrow.vh > div{color:var(--grey40);}
body.light .vrow.vh .us{color:var(--red);}
body.light .vrow .vl{color:var(--grey40);}
body.light .vrow .us{color:var(--deep);border-left-color:var(--line);}

/* big number */
body.light .bignum{border-color:var(--line);}
body.light .bl{color:var(--grey);}
body.light .cols3 p{color:var(--grey);}
body.light .cols3 b{color:var(--deep);}

/* reach */
body.light .strata,body.light .strata > div{border-color:var(--line);}
body.light .strata{background:var(--line);}
body.light .strata > div{background:#fff;}
body.light .sd{color:var(--deep);}
body.light .nest svg{border-color:var(--line);background:#fff;}
body.light .nest figcaption{color:var(--grey);}
body.light .nest figcaption b{color:var(--deep);}

/* lenses */
body.light .lenses{background:var(--line);border-color:var(--line);}
body.light .lens{background:#fff;}
body.light .lens b{color:var(--deep);}
body.light .lens span{color:var(--grey40);}

/* work */
body.light .wcard{background:var(--mist);border-color:var(--line);}
body.light .wq{color:var(--deep);}
body.light .wa{color:var(--grey);}
body.light .wfor{color:var(--red);border-top-color:var(--line);}
body.light .pgroup{border-left-color:var(--line);}
body.light .pl{color:var(--grey40);}
body.light .marks img{background:#fff;box-shadow:inset 0 0 0 1px var(--line);
  filter:grayscale(100%) contrast(.92);opacity:.72;}
body.light .marks img:hover{filter:none;opacity:1;box-shadow:inset 0 0 0 1px rgba(216,31,38,.4);}

/* checks */
body.light .checks{background:var(--line);border-color:var(--line);}
body.light .chk{background:#fff;}
body.light .chk b{color:var(--deep);}
body.light .chk span{color:var(--grey);}
body.light .chk.red{background:rgba(216,31,38,.05);}

/* who */
body.light .whogrid{background:var(--line);border-color:var(--line);}
body.light .who{background:#fff;}
body.light .who span{color:var(--deep);}

/* bottom bar */
body.light .bigstats .n{color:var(--deep);}
body.light .bigstats .n i{color:var(--grey40);}
body.light .bigstats .n.red{color:var(--red);}
body.light .bigstats .l{color:var(--grey40);}

@media(max-width:1000px), (max-height:620px){
  body.light .top,body.light .rail{background:rgba(255,255,255,.95);}
  body.light .bg{opacity:.5;}
  body.light .scrim,body.light[data-view]:not([data-view="0"]) .scrim{
    background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.97));}
}

/* ================================================================
   v7 — THE BENCHMARK & THE WORK GRAPHICS
   MatrAIx stops being a chapter and becomes a recurring yardstick.
   Every engagement is drawn as the shape of the problem it solved.
   ================================================================ */

/* ---------- benchmark strip ---------- */
.bench{border-top:1px solid var(--inkline);padding-top:16px;margin-top:4px;}
.bench.tight{margin-top:0;}
.bk{display:block;font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:#5e5e68;margin-bottom:12px;}
.brow{display:grid;grid-template-columns:190px minmax(90px,1fr) minmax(180px,1.1fr);
  gap:18px;align-items:center;padding:5px 0;}
.bnm{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:#77777f;white-space:nowrap;}
.bbar{display:block;height:9px;background:rgba(255,255,255,.07);position:relative;overflow:hidden;}
.bbar i{position:absolute;inset:0 auto 0 0;width:0;background:#55555f;
  transition:width 1.1s cubic-bezier(.22,.85,.28,1) .15s;}
.view.on .bbar i{width:var(--w);}
.bbar i.hatch{background:repeating-linear-gradient(135deg,#55555f 0 5px,transparent 5px 10px),#33333b;}
.brow.us .bnm{color:#fff;}
.brow.us .bbar i{background:var(--red);}
.bv{font-size:12.5px;color:#dcdce1;line-height:1.35;}
.bv.dim{color:#75757f;}
.bnote{font-size:12.5px;color:#7a7a84;line-height:1.5;margin:12px 0 0;max-width:84ch;}
@media(max-width:900px){
  .brow{grid-template-columns:1fr;gap:5px;}
  .bbar{height:7px;}
}

/* ---------- strata gains a bar + a cut line ---------- */
.strata > div{grid-template-columns:66px 1fr 84px;position:relative;}
.sbar{display:block;height:6px;background:rgba(255,255,255,.07);position:relative;align-self:center;}
.sbar::after{content:"";position:absolute;inset:0 auto 0 0;width:0;background:var(--s3);
  transition:width .9s cubic-bezier(.22,.85,.28,1) .2s;}
.view.on .sbar::after{width:var(--w);}
.strata > div:nth-child(n+7) .sbar::after{background:var(--red);}
.cutline{position:absolute;left:0;right:0;top:calc(6 * (100% / 9));display:flex;align-items:center;gap:10px;
  transform:translateY(-1px);pointer-events:none;}
.cutline i{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--red) 0 5px,transparent 5px 10px);}
.cutline b{font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);background:var(--ink);padding:2px 8px;white-space:nowrap;}
.strata{position:relative;}

/* ---------- built chapter layout ---------- */
.builtgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;}
@media(max-width:1000px){.builtgrid{grid-template-columns:1fr;gap:24px;}}
.bignum{border:0;padding:0;display:block;}
.bignum .bn{display:block;font-size:clamp(48px,7.6vw,110px);}
.bignum .bl{display:block;margin-top:14px;}
.cols3{grid-template-columns:1fr;gap:16px;}
.builtgrid .cols3 p{border-left:2px solid var(--inkline);padding-left:16px;}

/* ================================================================
   WORK CARD GRAPHICS
   ================================================================ */
.wcards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1250px){.wcards{grid-template-columns:1fr 1fr;}}
@media(max-width:1000px){.wcards{grid-template-columns:1fr;}}
.wcard{border:1px solid var(--inkline);background:rgba(255,255,255,.028);padding:0;border-radius:2px;
  display:flex;flex-direction:column;overflow:hidden;}
.wviz{padding:16px 16px 6px;border-bottom:1px solid var(--inkline);background:rgba(0,0,0,.16);}
.wcard .wq{font-family:var(--display);font-size:clamp(14.5px,1.3vw,17px);line-height:1.3;
  color:#fff;margin:16px 16px 10px;}
.wcard .wa{font-size:12.5px;line-height:1.5;color:#83838d;margin:0 16px 12px;}
.wfor{font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);
  margin:12px 16px 14px;padding-top:11px;border-top:1px solid var(--inkline);}

/* micro-boxes for numbers */
.wnums{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--inkline);margin:auto 0 12px;padding:0;border-top:1px solid var(--inkline);
  border-bottom:1px solid var(--inkline);}
.wnums li{background:var(--ink);padding:9px 12px;display:flex;flex-direction:column;gap:2px;}
.wnums b{font-family:var(--display);font-size:17px;font-weight:700;color:#fff;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.wnums b i{font-style:normal;font-size:.58em;color:var(--red);margin-left:1px;}
.wnums span{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#6e6e78;}

.wtags{list-style:none;display:flex;flex-wrap:wrap;gap:5px;margin:0 16px 12px;padding:0;}
.wtags li{font-size:10px;letter-spacing:.04em;color:#8e8e98;border:1px solid var(--inkline);
  padding:4px 9px;border-radius:20px;}

/* 1 · media-dark cell grid */
.cellgrid{display:grid;grid-template-columns:repeat(34,1fr);gap:1.5px;}
.cellgrid i{aspect-ratio:1;background:#3a3a43;opacity:0;animation:cellin .4s forwards;animation-delay:var(--d);}
.cellgrid i.dk{background:var(--red);}
@keyframes cellin{to{opacity:1;}}

/* 2 · venn */
.venn{width:100%;height:auto;display:block;}
.venn circle{fill:rgba(216,31,38,.16);stroke:rgba(216,31,38,.55);stroke-width:1;
  mix-blend-mode:screen;}
.venn circle:nth-child(3){fill:rgba(216,31,38,.26);}

/* 3 · population dots */
.dotpop{display:grid;grid-template-columns:repeat(28,1fr);gap:2px;}
.dotpop i{aspect-ratio:1;border-radius:50%;background:#3a3a43;opacity:0;
  animation:cellin .35s forwards;animation-delay:var(--d);}
.dotpop i.hi{background:var(--red);}

/* 4 · ranked bars */
.rankbars{display:flex;align-items:flex-end;gap:2px;height:78px;}
.rankbars i{flex:1;background:#3a3a43;height:0;align-self:flex-end;
  animation:barup .5s cubic-bezier(.22,.85,.28,1) forwards;animation-delay:var(--d);}
.rankbars i.top{background:var(--red);}
@keyframes barup{to{height:var(--h);}}

.vizkey{display:flex;gap:14px;padding:8px 16px 12px;}
.vizkey span{display:flex;align-items:center;gap:5px;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:#68686f;}
.vizkey em{width:8px;height:8px;display:block;}
.vizkey .k1{background:#3a3a43;} .vizkey .k2{background:var(--red);} .vizkey .k3{background:var(--red);border-radius:50%;}

.proofrow{margin-top:10px;}
.dimnote{color:#5d5d66;}

/* replay the card animations when a chapter is opened */
.view .cellgrid i,.view .dotpop i,.view .rankbars i{animation-play-state:paused;}
.view.on .cellgrid i,.view.on .dotpop i,.view.on .rankbars i{animation-play-state:running;}

/* ---------- light overrides for the new pieces ---------- */
body.light .bench{border-color:var(--line);}
body.light .bk{color:var(--grey40);}
body.light .bnm{color:var(--grey);}
body.light .brow.us .bnm{color:var(--deep);}
body.light .bbar{background:var(--line);}
body.light .bbar i{background:var(--n3);}
body.light .bbar i.hatch{background:repeating-linear-gradient(135deg,var(--n3) 0 5px,transparent 5px 10px),var(--n1);}
body.light .bv{color:var(--deep);} body.light .bv.dim{color:var(--grey40);}
body.light .bnote{color:var(--grey);}
body.light .sbar{background:var(--line);}
body.light .cutline b{background:#fff;}
body.light .builtgrid .cols3 p{border-left-color:var(--line);}
body.light .wcard{background:#fff;border-color:var(--line);}
body.light .wviz{background:var(--mist);border-bottom-color:var(--line);}
body.light .wcard .wq{color:var(--deep);}
body.light .wcard .wa{color:var(--grey);}
body.light .wfor{border-top-color:var(--line);}
body.light .wnums{background:var(--line);border-color:var(--line);}
body.light .wnums li{background:#fff;}
body.light .wnums b{color:var(--deep);}
body.light .wnums span{color:var(--grey40);}
body.light .wtags li{color:var(--grey);border-color:var(--line);}
body.light .cellgrid i,body.light .dotpop i,body.light .rankbars i{background:var(--n2);}
body.light .venn circle{fill:rgba(216,31,38,.14);stroke:rgba(216,31,38,.5);mix-blend-mode:multiply;}
body.light .vizkey span{color:var(--grey40);}
body.light .vizkey .k1{background:var(--n2);}
body.light .dimnote{color:var(--grey40);}


/* keep the whole country in frame on small screens too */
@media(max-width:1000px), (max-height:620px){
  .bg{padding:60px 16px 70px;}
}

/* ---------- the record: dated, public, verifiable ---------- */
.record{border-top:1px solid var(--inkline);margin-top:14px;}
.rec{display:grid;grid-template-columns:104px 1fr 130px;gap:20px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--inkline);}
.recd{font-family:var(--display);font-size:15px;font-weight:700;color:var(--red);
  letter-spacing:-.01em;white-space:nowrap;padding-top:1px;}
.recb b{display:block;font-size:14.5px;font-weight:600;color:#fff;margin-bottom:4px;line-height:1.35;}
.recb span{display:block;font-size:12.5px;color:#7d7d87;line-height:1.5;}
.rect{font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#5f5f69;
  text-align:right;padding-top:3px;white-space:nowrap;}
@media(max-width:900px){
  .rec{grid-template-columns:1fr;gap:5px;}
  .rect{text-align:left;}
}
body.light .record,body.light .rec{border-color:var(--line);}
body.light .recb b{color:var(--deep);}
body.light .recb span{color:var(--grey);}
body.light .rect{color:var(--grey40);}

/* ---------- live demo chapter ---------- */
.demoframe{flex:1;min-height:0;border:1px solid var(--inkline);background:rgba(0,0,0,.22);
  border-radius:2px;overflow:hidden;position:relative;}
.demoframe iframe{width:100%;height:100%;border:0;display:block;}
.demoholder{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;text-align:center;padding:24px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.018) 0 12px,transparent 12px 24px);}
.demoholder .dk{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--red);}
.demoholder b{font-family:var(--display);font-size:24px;font-weight:600;color:#fff;}
.demoholder p{font-size:13px;color:#6e6e78;max-width:44ch;margin:0;}
.demonote{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--inkline);
  border:1px solid var(--inkline);}
.demonote > div{background:var(--ink);padding:12px 16px;}
.dl{display:block;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:5px;}
.demonote p{margin:0;font-size:12.5px;line-height:1.5;color:#82828c;}
@media(max-width:1000px){
  .demoframe{min-height:60vh;}
  .demonote{grid-template-columns:1fr;}
}
body.light .demoframe{border-color:var(--line);background:var(--mist);}
body.light .demoholder b{color:var(--deep);}
body.light .demoholder p{color:var(--grey40);}
body.light .demonote{background:var(--line);border-color:var(--line);}
body.light .demonote > div{background:#fff;}
body.light .demonote p{color:var(--grey);}

/* ---------- doors: things you can open right now ---------- */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0;}
.door{display:flex;flex-direction:column;gap:12px;text-decoration:none;
  border:1px solid var(--inkline);background:rgba(255,255,255,.028);padding:26px 26px 22px;
  border-radius:2px;transition:border-color .25s,background .25s,transform .25s;}
.door:hover{border-color:var(--red);background:rgba(216,31,38,.07);transform:translateY(-2px);}
.dtag{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.door b{font-family:var(--display);font-size:clamp(19px,2vw,27px);font-weight:600;line-height:1.22;
  letter-spacing:-.02em;color:#fff;}
.door p{margin:0;font-size:13.5px;line-height:1.55;color:#83838d;}
.dmeta{list-style:none;display:flex;gap:1px;background:var(--inkline);margin:10px 0 0;padding:0;
  border:1px solid var(--inkline);}
.dmeta li{flex:1;background:var(--ink);padding:9px 12px;display:flex;flex-direction:column;gap:3px;}
.dmeta span{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#63636d;}
.dmeta em{font-style:normal;font-size:14px;font-weight:600;color:#fff;}
.dgo{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:var(--red);}
@media(max-width:1000px){.doors{grid-template-columns:1fr;}}
.reclink{color:inherit;text-decoration:none;border-bottom:1px solid rgba(216,31,38,.5);}
.reclink:hover{color:var(--red);}

body.light .door{background:#fff;border-color:var(--line);}
body.light .door:hover{background:rgba(216,31,38,.04);border-color:var(--red);}
body.light .door b{color:var(--deep);}
body.light .door p{color:var(--grey);}
body.light .dmeta{background:var(--line);border-color:var(--line);}
body.light .dmeta li{background:var(--mist);}
body.light .dmeta span{color:var(--grey40);}
body.light .dmeta em{color:var(--deep);}
.subhead.thin{font-size:12.5px;color:#6f6f79;margin-top:7px;}
body.light .subhead.thin{color:var(--grey40);}

/* ================================================================
   THEME-AWARE DIAGRAM PALETTES
   Every diagram colour now lives here, not in the script, so the
   light theme can repaint them instead of inheriting dark values.
   ================================================================ */

/* --- the map matrix --- */
.bg .t0{fill:#fbe3e4;} .bg .t1{fill:#f2a9ad;} .bg .t2{fill:#e4676e;} .bg .t3{fill:#d81f26;}
.bg .t4{fill:#8f1218;} .bg .t5{fill:#3f4046;} .bg .t6{fill:#55565c;} .bg .t7{fill:#6e6f72;}

body.light .bg .t0{fill:#f2a9ad;} body.light .bg .t1{fill:#e4676e;}
body.light .bg .t2{fill:#d81f26;} body.light .bg .t3{fill:#a5141a;}
body.light .bg .t4{fill:#8f1218;} body.light .bg .t5{fill:#8b8b8f;}
body.light .bg .t6{fill:#6e6f72;} body.light .bg .t7{fill:#adadb0;}

/* the light scrim was drowning the map — let it through */
body.light .scrim{
  background:radial-gradient(80% 66% at 24% 50%, rgba(255,255,255,.955) 0%, rgba(255,255,255,.88) 32%, rgba(255,255,255,.50) 66%, rgba(255,255,255,.30) 100%),
             linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.20) 20%, rgba(255,255,255,.20) 66%, rgba(255,255,255,.94) 100%);}
body.light[data-view]:not([data-view="0"]) .scrim{
  background:linear-gradient(180deg, rgba(255,255,255,.90) 0%, rgba(255,255,255,.935) 42%, rgba(255,255,255,.96) 100%);}

/* --- resolution nest --- */
.nest .n1,.nestrow .n1{fill:#e8e7e4;} .nest .n2,.nestrow .n2{fill:#cfcecb;} .nest .n3,.nestrow .n3{fill:#adadb0;} .nest .n4,.nestrow .n4{fill:#8b8b8f;}
.nest .n5,.nestrow .n5{fill:#66666a;} .nest .n6,.nestrow .n6{fill:#f2a9ad;} .nest .n7,.nestrow .n7{fill:#d81f26;}
body.light .nest .n1,.nestrow .n1{fill:#dcdad4;} body.light .nest .n2,.nestrow .n2{fill:#bfbeba;}
body.light .nest .n3,.nestrow .n3{fill:#9a9b9e;} body.light .nest .n4,.nestrow .n4{fill:#7c7c80;}
body.light .nest .n5,.nestrow .n5{fill:#5c5c60;} body.light .nest .n6,.nestrow .n6{fill:#e4676e;}
body.light .nest .n7,.nestrow .n7{fill:#d81f26;}

/* --- work-card diagrams: darken the neutrals so they read on white --- */
body.light .cellgrid i,
body.light .dotpop i,
body.light .rankbars i{background:#a8a8ac;}
body.light .cellgrid i.dk,
body.light .dotpop i.hi,
body.light .rankbars i.top{background:var(--red);}
body.light .wviz{background:#fff;border-bottom-color:var(--line);}
body.light .vizkey .k1{background:#a8a8ac;}
body.light .venn circle{fill:rgba(216,31,38,.16);stroke:rgba(216,31,38,.62);stroke-width:1.1;}

/* --- benchmark bars --- */
body.light .bbar{background:#e6e5e1;}
body.light .bbar i{background:#8b8b8f;}
body.light .bbar i.hatch{background:repeating-linear-gradient(135deg,#8b8b8f 0 5px,transparent 5px 10px),#d6d5d1;}

/* --- strata bars --- */
body.light .sbar{background:#e6e5e1;}
body.light .sbar::after{background:#e4676e;}
body.light .strata > div:nth-child(n+7) .sbar::after{background:var(--red);}


/* ================================================================
   OVERFLOW-SAFE CENTRING
   A centred flex column pushes overflow out of BOTH ends, which
   puts the headline above the scroll origin and clips it. Auto
   margins centre when there is spare room and collapse to zero
   when there isn't, so tall chapters simply start at the top.
   ================================================================ */
/* `safe center` centres only while the content fits; the moment it
   overflows it behaves like flex-start, so nothing is ever pushed
   above the scroll origin. flex-start is the fallback. */
@supports (justify-content: safe center){
  .view{justify-content:safe center;}
}

/* tighten the two densest chapters so they fit without scrolling */
.view[data-v="2"] .strata > div{padding:6px 14px;}
.view[data-v="2"] .nest{gap:12px;}
.view[data-v="2"] .nest figcaption{margin-top:6px;font-size:11.5px;}
.view[data-v="2"] .reach{gap:34px;}
.view[data-v="4"] .wcards{gap:12px;}
.view[data-v="4"] .wviz{padding:12px 14px 4px;}
.view[data-v="4"] .wcard .wq{margin:13px 14px 8px;}
.view[data-v="4"] .wcard .wa{margin:0 14px 10px;}
.view[data-v="4"] .wtags{margin:0 14px 10px;}
.view[data-v="4"] .wfor{margin:10px 14px 12px;}
.view[data-v="4"] .rankbars{height:66px;}
.view[data-v="4"] .proofset{margin-top:4px;}
.view[data-v="4"] .marks img{height:22px;padding:7px 11px;}

/* programme mark in the record line */
.recmark{height:30px;width:auto;justify-self:start;align-self:center;
  background:#fff;padding:6px 9px;border-radius:2px;
  filter:grayscale(100%) contrast(.95);opacity:.82;transition:filter .25s,opacity .25s;}
.rec:hover .recmark{filter:none;opacity:1;}
body.light .recmark{box-shadow:inset 0 0 0 1px var(--line);opacity:.72;}
body.light .rec:hover .recmark{opacity:1;}
@media(max-width:900px){.recmark{margin-bottom:6px;}}


/* ---------- chapter 05 · fits without clipping ---------- */
.view[data-v="4"]{gap:14px;}
.view[data-v="4"] .wcard .wa{font-size:12px;line-height:1.45;}
.view[data-v="4"] .wcards{flex:0 1 auto;min-height:0;}
.view[data-v="4"] .cellgrid{gap:1.2px;}
.view[data-v="4"] .dotpop{gap:1.6px;}
.view[data-v="4"] .vizkey{padding:6px 14px 8px;}
.view[data-v="4"] .record{margin-top:6px;}
.view[data-v="4"] .rec{padding:10px 0;}

/* ---------- chapter 03 · a little more room at the top ---------- */
.view[data-v="2"]{gap:16px;}
.view[data-v="2"] .bench{padding-top:12px;}

/* ---------- chapter 07 · the closing line gets the full width ---------- */
.closer{border-top:2px solid var(--red);padding-top:20px;margin-top:4px;max-width:none;}
.closer p{margin:0;font-family:var(--display);letter-spacing:-.022em;line-height:1.24;}
.closer .a{font-size:clamp(16px,1.7vw,22px);color:#75757f;max-width:none;margin-bottom:10px;}
.closer .b{font-size:clamp(21px,2.6vw,36px);color:#fff;max-width:none;}
.closer .b em{font-style:normal;color:var(--red);}
body.light .closer .a{color:var(--grey40);}
body.light .closer .b{color:var(--deep);}
.thinner{color:#65656f;}
body.light .thinner{color:var(--grey40);}

/* ================================================================
   v8 — COMPOSED TO THE BUDGET
   The content area is 100svh minus chrome. Each chapter below is
   composed to that height rather than assembled and then squeezed.
   ================================================================ */

.view{padding:26px 44px;gap:18px;}
.vhead h2{margin-bottom:0;}

/* ---------- 03 · reach ---------- */
.reach2{display:grid;grid-template-columns:1fr 1.12fr;gap:40px;align-items:start;}
.rcol{display:flex;flex-direction:column;gap:10px;min-width:0;}
.rlab{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#5e5e68;}
.view[data-v="2"] .strata > div{grid-template-columns:60px 1fr 78px;padding:5px 13px;}
.view[data-v="2"] .sd{font-size:13px;}
.nestrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.nestrow figure{margin:0;}
.nestrow svg{width:100%;height:auto;display:block;border:1px solid var(--inkline);background:var(--ink2);}
.nestrow figcaption{margin-top:7px;font-size:11px;color:#7c7c86;line-height:1.35;}
.nestrow figcaption b{display:block;color:#fff;font-size:12.5px;font-weight:600;margin-bottom:1px;}
.view[data-v="2"] .bench{margin-top:4px;}
@media(max-width:1100px){.reach2{grid-template-columns:1fr;gap:24px;}}
body.light .nestrow svg{border-color:var(--line);background:#fff;}
body.light .nestrow figcaption{color:var(--grey);}
body.light .nestrow figcaption b{color:var(--deep);}
body.light .rlab{color:var(--grey40);}

/* ---------- 05 · work: one feature, three rows ---------- */






.ftag{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.fq{font-family:var(--display);font-size:clamp(17px,1.75vw,23px);line-height:1.26;color:#fff;margin:0;}
.fa{font-size:12.5px;line-height:1.5;color:#83838d;margin:0;}
.fnums{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--inkline);border:1px solid var(--inkline);margin:auto 0 0;padding:0;}
.fnums li{background:var(--ink);padding:8px 8px;display:flex;flex-direction:column;gap:2px;}
.fnums b{font-family:var(--display);font-size:15px;font-weight:700;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.fnums b i{font-style:normal;font-size:.6em;color:var(--red);}
.fnums span{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#6c6c76;line-height:1.2;}




.rviz .venn{width:100%;height:auto;display:block;}





.creds{border-top:1px solid var(--inkline);padding-top:12px;display:flex;flex-direction:column;gap:10px;}
.credfoot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.credline{font-size:11px;color:#6e6e78;line-height:1.4;}
.credline b{color:#b6b6be;font-weight:600;}
.credline.right{margin-left:auto;text-align:right;max-width:52ch;}
.view[data-v="4"] .marks img{height:20px;padding:6px 10px;}
.view[data-v="4"] .pgroup{padding:0 20px;gap:8px;}
.recmark{height:26px;}
@media(max-width:900px){.credline.right{margin-left:0;text-align:left;}}




body.light .fnums{background:var(--line);border-color:var(--line);}
body.light .fnums li{background:#fff;}
body.light .fnums b{color:var(--deep);}
body.light .fnums span{color:var(--grey40);}
body.light .creds{border-top-color:var(--line);}
body.light .credline{color:var(--grey40);}
body.light .credline b{color:var(--deep);}

/* ---------- 07 · check ---------- */
.view[data-v="6"] .checks{grid-template-columns:repeat(3,1fr);}
.view[data-v="6"] .chk{padding:13px 15px;}
.view[data-v="6"] .chk b{font-size:13.5px;}
.view[data-v="6"] .chk span{font-size:12px;line-height:1.45;}
.provrow{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;
  border-top:1px solid var(--inkline);padding-top:12px;}
.provbars{display:flex;flex-direction:column;gap:3px;}
.provrow .brow{grid-template-columns:180px minmax(70px,.7fr) 1.3fr;padding:2px 0;}
@media(max-width:1000px){
  .view[data-v="6"] .checks{grid-template-columns:1fr;}
  .provrow{grid-template-columns:1fr;gap:10px;}
}
body.light .provrow{border-top-color:var(--line);}

.closer{border-top:2px solid var(--red);padding-top:16px;}
.closer .a{font-size:clamp(14px,1.35vw,17px);margin-bottom:8px;}
.closer .b{font-size:clamp(19px,2.3vw,32px);}

/* densities matched to the smaller slots in the work rows */



.feature .vizkey{padding:6px 16px 10px;}
.view[data-v="4"] .cellgrid{gap:1.4px;}

body.light .nestrow .n1{fill:#dcdad4;} body.light .nestrow .n2{fill:#bfbeba;}
body.light .nestrow .n3{fill:#9a9b9e;} body.light .nestrow .n4{fill:#7c7c80;}
body.light .nestrow .n5{fill:#5c5c60;} body.light .nestrow .n6{fill:#e4676e;}
body.light .nestrow .n7{fill:#d81f26;}
/* BUG 2: the hover target moved when the mark left the record row */
.recmark:hover{filter:none;opacity:1;}


/* ================================================================
   v9 — WORK DELIVERED, COMPOSED
   One wide hero case, then three equal columns, then credentials.
   Rows size to their content: no 1fr tracks, so nothing can be
   clipped or forced to overlap.
   ================================================================ */

.view[data-v="4"]{gap:16px;}

/* --- the hero case --- */
.hero-case{display:grid;grid-template-columns:1.15fr 1fr;gap:0;align-items:stretch;
  border:1px solid var(--inkline);background:rgba(255,255,255,.03);border-radius:2px;overflow:hidden;}
.hcviz{padding:16px 18px 10px;background:rgba(0,0,0,.22);border-right:1px solid var(--inkline);
  display:flex;flex-direction:column;justify-content:center;gap:10px;}
.hckey{display:flex;gap:16px;}
.hckey span{display:flex;align-items:center;gap:6px;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:#68686f;}
.hckey em{width:8px;height:8px;display:block;}
.hckey .k1{background:#3a3a43;} .hckey .k2{background:var(--red);}
.hctext{padding:18px 22px;display:flex;flex-direction:column;gap:10px;justify-content:center;}
.ftag{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.fq{font-family:var(--display);font-size:clamp(18px,2vw,26px);line-height:1.22;color:#fff;margin:0;}
.fa{font-size:12.5px;line-height:1.5;color:#83838d;margin:0;}
.fnums{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--inkline);border:1px solid var(--inkline);margin:4px 0 0;padding:0;}
.fnums li{background:var(--ink);padding:8px 9px;display:flex;flex-direction:column;gap:2px;}
.fnums b{font-family:var(--display);font-size:16px;font-weight:700;color:#fff;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.fnums b i{font-style:normal;font-size:.6em;color:var(--red);}
.fnums span{font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:#6c6c76;line-height:1.2;}
.view[data-v="4"] .cellgrid{grid-template-columns:repeat(34,1fr);gap:1.6px;}

/* --- three supporting cases --- */
.case3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.ccard{border:1px solid var(--inkline);background:rgba(255,255,255,.03);border-radius:2px;
  padding:14px 16px 14px;display:flex;flex-direction:column;gap:8px;}
.cviz{height:58px;display:flex;align-items:center;}
.cviz .venn{height:58px;width:auto;}
.cviz .dotpop{grid-template-columns:repeat(25,1fr);gap:1.6px;width:100%;}
.cviz .rankbars{height:52px;width:100%;gap:2px;}
.cviz .vizkey{display:none;}
.cq{font-family:var(--display);font-size:15.5px;line-height:1.26;color:#fff;margin:0;}
.ca{font-size:12px;line-height:1.5;color:#83838d;margin:0;}
.cfor{font-size:8.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red);
  margin:auto 0 0;padding-top:9px;border-top:1px solid var(--inkline);}
@media(max-width:1100px){
  .hero-case{grid-template-columns:1fr;}
  .hcviz{border-right:0;border-bottom:1px solid var(--inkline);}
  .case3{grid-template-columns:1fr;}
}

/* --- credentials --- */
.creds{border-top:1px solid var(--inkline);padding-top:11px;display:flex;flex-direction:column;gap:8px;}
.view[data-v="4"] .pgroup{padding:0 18px;gap:7px;}
.view[data-v="4"] .marks img{height:19px;padding:6px 9px;}
.view[data-v="4"] .marks{gap:9px;}
.credline{font-size:10.5px;color:#67676f;line-height:1.45;margin:0;}
.credline b{color:#b6b6be;font-weight:600;}

body.light .hero-case,body.light .ccard{background:#fff;border-color:var(--line);}
body.light .hcviz{background:var(--mist);border-right-color:var(--line);}
body.light .fq,body.light .cq{color:var(--deep);}
body.light .fa,body.light .ca{color:var(--grey);}
body.light .cfor{border-top-color:var(--line);}
body.light .hckey .k1{background:#a8a8ac;}

/* ================================================================
   v10 — FIXED GEOMETRY FOR EVERY DIAGRAM
   Diagrams no longer size themselves from their container. Cells
   are explicit pixel values, so a diagram cannot outgrow its slot
   and land on the text beneath it.
   ================================================================ */

.cellgrid{display:grid;gap:1.6px;}
.cellgrid i{width:auto;aspect-ratio:1;background:#3a3a43;opacity:0;
  animation:cellin .4s forwards;animation-delay:var(--d);border-radius:.5px;}
.cellgrid i.dk{background:var(--red);}

.dotpop{display:grid;}
.dotpop i{border-radius:50%;background:#3a3a43;opacity:0;
  animation:cellin .35s forwards;animation-delay:var(--d);}
.dotpop i.hi{background:var(--red);}

/* hero case: the grid is fluid but capped, and its own legend is in the markup */
.view[data-v="4"] .hcviz .cellgrid{grid-template-columns:repeat(34,1fr);max-width:100%;}

/* supporting cards: explicit dot size, so 200 dots are always 8 rows of 5px */
.cviz .dotpop{grid-template-columns:repeat(25,5px);gap:2px;justify-content:start;}
.cviz .dotpop i{width:5px;height:5px;aspect-ratio:auto;}
.cviz .rankbars{height:50px;width:100%;gap:2px;align-items:flex-end;}
.cviz{height:56px;overflow:hidden;display:flex;align-items:center;}
.cviz .venn{height:56px;width:auto;}

/* ================================================================
   v10 — CHAPTER 04 · ONE POPULATION, RE-CUT
   ================================================================ */
.lenslay{display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:stretch;}
@media(max-width:1000px){.lenslay{grid-template-columns:1fr;}}

.lenspick{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--inkline);
  border:1px solid var(--inkline);align-content:start;}
.lenspick button{background:var(--ink);border:0;color:#84848e;font-family:var(--sans);
  font-size:11px;font-weight:500;letter-spacing:.02em;padding:9px 8px;cursor:pointer;
  text-align:left;transition:background .18s,color .18s;}
.lenspick button:hover{color:#e2e2e7;background:#26262b;}
.lenspick button.on{background:var(--red);color:#fff;font-weight:600;}

.lensout{border:1px solid var(--inkline);background:rgba(255,255,255,.03);border-radius:2px;
  padding:22px 26px;display:flex;flex-direction:column;gap:16px;transition:opacity .16s ease;}
.lensout.fading{opacity:0;}
.lotag{font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--red);}
.loq{font-family:var(--display);font-size:clamp(19px,2.2vw,30px);line-height:1.22;
  letter-spacing:-.022em;color:#fff;margin:8px 0 0;max-width:26ch;}
.locuts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--inkline);border:1px solid var(--inkline);}
.locuts li{background:var(--ink);padding:11px 13px;font-size:12.5px;line-height:1.45;color:#a8a8b2;}
.lobar{margin-top:auto;}
.lolab{display:block;font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#5e5e68;margin-bottom:9px;}
.segbar{display:flex;height:46px;gap:2px;}
.segbar i{display:block;height:100%;width:var(--w);transition:width .6s cubic-bezier(.22,.85,.28,1);}
.segbar .s0{background:var(--s1);} .segbar .s1{background:var(--s2);} .segbar .s2{background:var(--s3);}
.segbar .s3{background:var(--s4);} .segbar .s4{background:#55565c;} .segbar .s5{background:#3f4046;}

body.light .lenspick{background:var(--line);border-color:var(--line);}
body.light .lenspick button{background:#fff;color:var(--grey);}
body.light .lenspick button:hover{background:var(--mist);color:var(--deep);}
body.light .lenspick button.on{background:var(--red);color:#fff;}
body.light .lensout{background:#fff;border-color:var(--line);}
body.light .loq{color:var(--deep);}
body.light .locuts{background:var(--line);border-color:var(--line);}
body.light .locuts li{background:var(--mist);color:var(--grey);}
body.light .lolab{color:var(--grey40);}
body.light .segbar .s4{background:#8b8b8f;} body.light .segbar .s5{background:#adadb0;}

/* the old lens grid is gone */
.lenses,.lens{display:none;}

/* ================================================================
   v11 — FLUID WIDTH, FIXED ROW HEIGHT
   The correct pattern for these diagrams: they fill the width of
   whatever box they are in, and their height is set by an explicit
   row height, so it is knowable in advance and cannot overflow.
   ================================================================ */

.cellgrid i{aspect-ratio:auto;height:6px;width:auto;border-radius:1px;}
.view[data-v="4"] .hcviz .cellgrid{gap:1.4px;width:100%;}
.hcviz{padding:18px 20px 14px;}

.dotpop i{aspect-ratio:auto;height:6px;width:auto;}
.cviz .dotpop{grid-template-columns:repeat(30,1fr);gap:2px;width:100%;justify-content:stretch;}
.cviz .dotpop i{width:auto;height:6px;border-radius:1.5px;}
.cviz .rankbars{height:56px;width:100%;gap:2px;}
.cviz .venn{width:100%;height:56px;}
.cviz{height:58px;}

/* ================================================================
   v11 — CHAPTER 04 · AFFORDANCE AND A STABLE PANEL
   ================================================================ */
.lenslay{grid-template-columns:236px 1fr;align-items:stretch;}
.lenscol{display:flex;flex-direction:column;gap:9px;}
.lenshint{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.lenshint em{font-style:normal;font-size:9px;animation:nudge 1.6s ease-in-out infinite;}
.lenshint b{color:#5e5e68;font-weight:500;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(3px);}}
.lenspick{flex:1;align-content:stretch;}
.lenspick button{position:relative;padding:0 10px;display:flex;align-items:center;min-height:30px;}
.lenspick button.on::after{content:"▸";position:absolute;right:8px;font-size:10px;opacity:.9;}

/* the panel no longer resizes between lenses */




.lobar{margin-top:auto;padding-top:14px;}
@media(max-width:1000px){
  .lohead{min-height:0;}
  .locuts{grid-template-columns:1fr;}
  .locuts li{min-height:0;}
}
body.light .lenshint b{color:var(--grey40);}


/* ================================================================
   v12 — A FRAME THAT DOES NOT MOVE
   Minimums still let a longer lens push the panel taller. These are
   fixed heights, so only the words change between lenses.
   ================================================================ */
.lenslay{align-items:start;}
.lensout{height:318px;padding:20px 24px;gap:0;display:flex;flex-direction:column;}
.lohead{height:96px;overflow:hidden;flex:0 0 auto;}
.loq{font-size:clamp(17px,1.85vw,24px);line-height:1.24;margin:9px 0 0;max-width:30ch;}
.locuts{flex:0 0 auto;height:66px;}
.locuts li{padding:9px 12px;font-size:12px;line-height:1.4;display:flex;align-items:center;}
.lobar{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;
  margin-top:0;padding-top:14px;}
.segbar{height:44px;}
.lenscol{height:318px;}
.lenspick button{min-height:0;}
@media(max-width:1000px){
  .lensout,.lenscol{height:auto;}
  .lohead{height:auto;}
  .locuts{height:auto;}
}

/* ================================================================
   v13 — ONE-LINE QUESTIONS, SIX FIGURES, AN UNCLIPPED VENN
   ================================================================ */

/* the question now sits on a single line, so the panel below gets
   the height it was losing to a wrapped second line */
.lohead{height:64px;}
.loq{font-size:clamp(15px,1.62vw,21px);line-height:1.3;margin:8px 0 0;max-width:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lensout{height:296px;}
.lenscol{height:296px;}
.locuts{height:74px;}
.locuts li{font-size:12.5px;}
.segbar{height:56px;}
@media(max-width:1240px){.loq{font-size:clamp(14px,1.5vw,18px);}}
@media(max-width:1000px){
  .loq{white-space:normal;overflow:visible;}
  .lohead{height:auto;}
  .locuts{height:auto;}
}

/* six figures on the hero case, three across */
.fnums.six{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;}
.fnums.six li{padding:7px 9px;}
.fnums.six b{font-size:15px;}

/* the third circle used to run past the bottom of the viewBox and
   get clipped; the trio is now horizontal, wide and short, which
   also suits a 58px slot far better */
.cviz{height:64px;}
.cviz .venn{width:100%;height:64px;}
.venn circle{fill:rgba(216,31,38,.18);stroke:rgba(216,31,38,.62);stroke-width:1.4;}
body.light .venn circle{fill:rgba(216,31,38,.15);stroke:rgba(216,31,38,.6);}

/* ================================================================
   v14 — THE RE-GROUPING FIELD
   396 dots, each one a slice of the population. They do not move
   between lenses; they only change which group they belong to.
   That is the chapter's whole argument, made literal.
   ================================================================ */
.segdots{display:grid;grid-template-columns:repeat(44,1fr);gap:2px;}
.segdots i{height:5px;border-radius:50%;transition:background .55s ease;}
.segdots .g0{background:var(--s2);}   /* the engaged edge */
.segdots .g1{background:#6e6f72;}     /* the settled middle */
.segdots .g2{background:var(--red);}  /* the opportunity */
.segdots .g3{background:#3a3a43;}     /* outside the question */

.seglegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;}
.seglegend span{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.04em;color:#8b8b95;}
.seglegend em{width:8px;height:8px;border-radius:50%;display:block;}
.seglegend .g0{background:var(--s2);} .seglegend .g1{background:#6e6f72;}
.seglegend .g2{background:var(--red);} .seglegend .g3{background:#3a3a43;}
.lolab b{color:#5e5e68;font-weight:500;letter-spacing:.1em;}

body.light .segdots .g1{background:#8b8b8f;}
body.light .segdots .g3{background:#cfcecb;}
body.light .seglegend span{color:var(--grey);}
body.light .seglegend .g1{background:#8b8b8f;} body.light .seglegend .g3{background:#cfcecb;}
body.light .lolab b{color:var(--grey40);}

/* room for the field and its legend */
.lensout{height:322px;} .lenscol{height:322px;}
.locuts{height:70px;}
@media(max-width:1000px){.lensout,.lenscol{height:auto;}.locuts{height:auto;}}

/* ================================================================
   v15 — THE BAR, FILLED WITH DOTS
   Back to the linear bar cut into proportional segments, but each
   segment is a field of dots rather than a flat wash: the people
   stay visible inside the shape.
   ================================================================ */
.segdots{display:none;}

.segbar{display:flex;height:58px;gap:3px;}
.segbar i{display:block;height:100%;flex:0 0 var(--w);
  background-image:radial-gradient(currentColor 1.5px, transparent 1.7px);
  background-size:7px 7px;background-position:center;
  box-shadow:inset 0 0 0 1px currentColor;
  transition:flex-basis .6s cubic-bezier(.22,.85,.28,1), color .5s ease;}
.segbar .g0{color:var(--s2);}
.segbar .g1{color:#7d7e82;}
.segbar .g2{color:var(--red);}
.segbar .g3{color:#4a4a53;}

.seglegend{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:11px;}
.seglegend span{display:flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.04em;color:#8b8b95;}
.seglegend em{width:8px;height:8px;border-radius:50%;display:block;flex:0 0 8px;}
.seglegend b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums;}
.seglegend .g0{background:var(--s2);} .seglegend .g1{background:#7d7e82;}
.seglegend .g2{background:var(--red);} .seglegend .g3{background:#4a4a53;}

body.light .segbar .g1{color:#8b8b8f;}
body.light .segbar .g3{color:#c2c1bd;}
body.light .seglegend span{color:var(--grey);}
body.light .seglegend b{color:var(--deep);}
body.light .seglegend .g1{background:#8b8b8f;} body.light .seglegend .g3{background:#c2c1bd;}

/* ================================================================
   v16 — CHAPTER 05 BACK INSIDE ITS BUDGET
   The hero was ~230px because six figures sat in two rows. One row
   of six halves that, and the Mumbai card gets a wider column so
   its fuller description costs lines, not height.
   ================================================================ */

.view[data-v="4"]{gap:14px;}
.view[data-v="4"] .vhead h2{font-size:clamp(24px,3.1vw,38px);}

/* hero case */
.hero-case{grid-template-columns:1.25fr 1fr;}
.hcviz{padding:14px 16px 12px;gap:8px;}
.hctext{padding:15px 20px;gap:8px;}
.fq{font-size:clamp(17px,1.85vw,23px);}
.fa{font-size:12px;line-height:1.45;}
.fnums.row6{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:1fr;margin:2px 0 0;}
.fnums.row6 li{padding:7px 7px;}
.fnums.row6 b{font-size:14px;}
.fnums.row6 span{font-size:8px;letter-spacing:.06em;}

/* three cases — Mumbai takes the wider column */
.case3{grid-template-columns:1.4fr 1fr 1fr;gap:12px;}
.ccard{padding:12px 14px;gap:7px;}
.cq{font-size:14.5px;}
.ca{font-size:11.5px;line-height:1.45;}
.cfor{padding-top:8px;font-size:8px;}
.cviz{height:58px;}
.cviz .venn{height:58px;}

/* credentials */
.creds{padding-top:9px;gap:7px;}
.view[data-v="4"] .marks img{height:18px;padding:5px 8px;}
.credline{font-size:10px;}
@media(max-width:1100px){.case3{grid-template-columns:1fr;}}

/* two-part kicker: the label in red, the promise carried after it */
.vk b{color:#7d7d87;font-weight:600;letter-spacing:.2em;}
body.light .vk b{color:var(--grey40);}

/* ================================================================
   OPTICAL SIZING FOR THE CHALLENGE LOCKUP
   Every other mark is a single-line wordmark. This one stacks
   "Maruti Suzuki" above "Mobility Challenge" beside an icon, so at
   a shared height it renders each line at roughly a third the size
   and becomes unreadable. It needs its own height to read equally.
   ================================================================ */
.marks img[alt*="Mobility"]{
  height:34px;padding:4px 10px;
  filter:grayscale(100%) contrast(1.15) brightness(1.05);opacity:.95;}
.marks img[alt*="Mobility"]:hover{filter:none;opacity:1;}
.view[data-v="4"] .marks img[alt*="Mobility"]{height:32px;padding:3px 9px;}

/* pay for the extra height elsewhere in the band */
.view[data-v="4"] .creds{padding-top:7px;gap:6px;}
.view[data-v="4"] .pgroup{gap:6px;padding:0 16px;}
.view[data-v="4"] .marks{gap:8px;}
.view[data-v="4"] .credline{font-size:9.5px;line-height:1.4;}

body.light .marks img[alt*="Mobility"]{
  filter:grayscale(100%) contrast(1.1);opacity:.85;box-shadow:inset 0 0 0 1px var(--line);}
body.light .marks img[alt*="Mobility"]:hover{filter:none;opacity:1;}

/* the challenge group carries its name in type, so the mark can be
   a device rather than something that has to be read */
.pgroup.recog-g .pl{white-space:nowrap;line-height:1.6;max-width:none;}
.pgroup.recog-g .pl b{display:block;color:var(--red);font-weight:600;letter-spacing:.18em;}
body.light .pgroup.recog-g .pl b{color:var(--red);}

/* let this group take the width its two lines need */
.pgroup.recog-g{flex:0 0 auto;}

/* ================================================================
   CHAPTER 02 — DEPTH, DRAWN TO SCALE
   Three bars on one linear axis: 1,290 / 5,000+ / 1.6m. The first
   two are slivers, and that is the honest picture — it shows the
   headroom without overstating what is filled today.
   ================================================================ */
.brow.cap .bnm{color:var(--red);}
.brow.cap .bbar i{background:repeating-linear-gradient(90deg,
  rgba(216,31,38,.85) 0 3px, rgba(216,31,38,.25) 3px 7px);}
.brow.cap .bv{color:#fff;font-weight:600;}
.brow .bbar i{min-width:2px;}
.bnote b{color:#c9c9d0;font-weight:600;}
.cols3 p em{font-style:normal;color:#c9c9d0;}
.view[data-v="1"] .cols3 p{font-size:13px;line-height:1.55;}
.view[data-v="1"] .bignum .bn{font-size:clamp(42px,6.4vw,92px);}
body.light .brow.cap .bv{color:var(--deep);}
body.light .brow.cap .bbar i{background:repeating-linear-gradient(90deg,
  rgba(216,31,38,.85) 0 3px, rgba(216,31,38,.22) 3px 7px);}
body.light .bnote b{color:var(--deep);}
body.light .cols3 p em{color:var(--deep);}

/* the big figure carries its unit, and today's built count sits under it */
.bignum .bn i{font-style:normal;font-size:.42em;color:#8e8e97;margin-left:2px;letter-spacing:0;}
.bignum .bl b{display:block;margin-top:8px;color:#c9c9d0;font-weight:600;}
.bnote b{display:inline-block;margin-top:5px;}
body.light .bignum .bn i{color:var(--grey40);}
body.light .bignum .bl b{color:var(--deep);}

/* ================================================================
   PERSISTENT FORWARD CONTROL
   Navigation belongs in the chrome, not inside the content — so it
   costs no chapter height and sits in the same place every time.
   It names its destination rather than saying "next".
   ================================================================ */
.nextbtn{display:flex;align-items:center;gap:10px;background:none;cursor:pointer;
  border:1px solid var(--inkline);border-radius:2px;padding:8px 15px;
  font-family:var(--sans);transition:border-color .2s,background .2s;}
.nextbtn:hover{border-color:var(--red);background:rgba(216,31,38,.09);}
.nextbtn .nl{font-size:9px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#63636d;}
.nextbtn b{font-size:12.5px;font-weight:600;color:#e2e2e7;white-space:nowrap;}
.nextbtn em{font-style:normal;font-size:13px;color:var(--red);transition:transform .2s;}
.nextbtn:hover em{transform:translateX(3px);}
.nextbtn.restart .nl{color:var(--red);}
body.light .nextbtn{border-color:var(--line);}
body.light .nextbtn:hover{border-color:var(--red);background:rgba(216,31,38,.05);}
body.light .nextbtn .nl{color:var(--grey40);}
body.light .nextbtn b{color:var(--deep);}
@media(max-width:1000px){.nextbtn{order:3;width:100%;justify-content:center;}}

/* ================================================================
   THE MARK
   The real lockup replaces the type placeholder, persistent in the
   header on every chapter. Two artworks: the grey ink is lifted for
   the dark theme, the red is untouched in both.
   ================================================================ */
.brandmark{display:inline-flex;align-items:center;text-decoration:none;cursor:pointer;
  transition:opacity .2s;}
.brandmark:hover{opacity:.82;}
.brandmark img{height:34px;width:auto;display:block;}
.brandmark .lm-light{display:none;}
body.light .brandmark .lm-dark{display:none;}
body.light .brandmark .lm-light{display:block;}
@media(max-width:1000px){.brandmark img{height:28px;}}

/* ================================================================
   THE MARK, AS SUPPLIED
   Placed bottom-right with its white plate and keyline intact, so a
   single artwork reads correctly on both themes without a variant.
   ================================================================ */
.brandbox{height:64px;width:auto;display:block;border-radius:1px;}
body.light .brandbox{box-shadow:0 0 0 1px var(--line);}
.bottom{padding:10px 40px;gap:24px;}
.bigstats .n{font-size:clamp(19px,1.95vw,27px);}
.bigstats{gap:38px;}
@media(max-width:1000px){
  .brandbox{height:52px;margin:0 auto;}
  .bottom{padding:14px 20px;}
}

/* the tagline sits under the wordmark, aligned to its left edge */
.brandstack{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1;}
.brandstack .wordmark{font-size:21px;line-height:1;}
.brandstack .humansfirst{font-size:8.5px;letter-spacing:.34em;line-height:1;}
@media(max-width:1000px){
  .brandstack .wordmark{font-size:18px;}
  .brandstack .humansfirst{font-size:7.5px;letter-spacing:.28em;}
}

/* the tracked caps carry trailing letter-space, which throws optical
   centring to the left — nudge it back by half the tracking */
.brandstack .humansfirst{text-indent:.34em;}

/* ================================================================
   THE MARK, TOP RIGHT
   Floated clear of the content in the space every chapter leaves
   below the header. Non-interactive, so it can never intercept a
   click meant for something underneath it.
   ================================================================ */
.brandbox{position:fixed;top:118px;right:40px;z-index:15;
  height:62px;width:auto;display:block;pointer-events:none;
  border-radius:1px;box-shadow:0 2px 14px rgba(0,0,0,.35);}
body.light .brandbox{box-shadow:0 0 0 1px var(--line);}

/* keep chapter content out of its lane */
.view{padding-right:150px;}
.view .vhead{max-width:calc(100% - 20px);}

/* it needs real room — stand it down when there isn't any */
@media(max-width:1240px), (max-height:700px){
  .brandbox{display:none;}
  .view{padding-right:44px;}
}
.bottom{gap:28px;}

/* ================================================================
   THE MARK — TWO SIZES, TWO JOBS
   Small in the footer, present on every chapter, signing the page
   off. Full size on the closing chapter, where its own wordmark and
   tagline are finally large enough to be read.
   ================================================================ */
.brandbox{position:static;top:auto;right:auto;z-index:auto;
  height:62px;pointer-events:auto;box-shadow:none;}
body.light .brandbox{box-shadow:0 0 0 1px var(--line);}
.view{padding-right:44px;}
@media(max-width:1240px), (max-height:700px){
  .brandbox{display:block;}
}
@media(max-width:1000px){.brandbox{height:52px;}}

.signoff{height:112px;width:auto;display:block;margin:20px 0 0;border-radius:1px;}
body.light .signoff{box-shadow:0 0 0 1px var(--line);}
@media(max-width:1000px){.signoff{height:86px;}}

/* the signature closes the chapter, centred across both columns */
.signrow{display:flex;justify-content:center;align-items:center;
  border-top:1px solid var(--inkline);padding-top:16px;margin-top:2px;}
.signoff{height:96px;width:auto;display:block;margin:0;border-radius:1px;}
body.light .signrow{border-top-color:var(--line);}
@media(max-width:1000px){.signoff{height:78px;}.signrow{padding-top:14px;}}

/* the signature sits under the panels it belongs to */
.rightcol{display:flex;flex-direction:column;gap:14px;min-width:0;}
.signrow{border-top:0;padding-top:0;margin-top:0;justify-content:center;}
.signoff{height:86px;}
@media(max-width:1000px){.signoff{height:72px;}}

/* floating signature, centred across the full chapter width */
.rightcol{display:contents;}
.signrow{display:flex;justify-content:center;align-items:center;
  border-top:0;padding-top:0;margin-top:6px;}
.signoff{height:92px;}
@media(max-width:1000px){.signoff{height:74px;}}

/* ================================================================
   THE SIGNATURE NEEDS AIR
   Sitting flush under the taller column, the mark read as part of
   the contact block. Space is what separates a sign-off from a
   continuation.
   ================================================================ */
.view[data-v="7"] .vgrid{align-items:start;}
.view[data-v="7"] .signrow{margin-top:34px;padding-bottom:4px;}
.view[data-v="7"] .signoff{height:88px;}
@media(max-width:1000px){
  .view[data-v="7"] .signrow{margin-top:22px;}
  .view[data-v="7"] .signoff{height:72px;}
}

/* the signature centres to the panel grid it sits under */
.view[data-v="7"] .rightcol{display:flex;flex-direction:column;gap:0;min-width:0;}
.view[data-v="7"] .signrow{display:flex;justify-content:center;margin-top:26px;padding-bottom:0;}
.view[data-v="7"] .signoff{height:84px;}
@media(max-width:1000px){
  .view[data-v="7"] .signrow{margin-top:20px;}
  .view[data-v="7"] .signoff{height:70px;}
}

/* the closing chapter carries the mark at full size in its own right,
   so the small one in the bar stands down there and nowhere else */
body[data-view="7"] .brandbox{visibility:hidden;}

/* ================================================================
   THE ASK — an on-page form
   A mailto: hands the visitor to whatever the OS thinks their mail
   client is. For anyone without one configured that is a dead end,
   so the enquiry is captured here instead.
   ================================================================ */
.askform{display:flex;flex-direction:column;gap:8px;margin:14px 0 10px;max-width:460px;}
.askform .f2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.askform input[type=text],.askform input[type=email]{
  background:rgba(255,255,255,.04);border:1px solid var(--inkline);border-radius:2px;
  color:#fff;font-family:var(--sans);font-size:13.5px;padding:10px 12px;width:100%;
  transition:border-color .2s,background .2s;}
.askform input::placeholder{color:#6d6d77;}
.askform input:focus{outline:none;border-color:var(--red);background:rgba(216,31,38,.06);}
.askform .btn{align-self:flex-start;margin-top:2px;border:1px solid var(--red);}
.askform .btn:disabled{opacity:.55;cursor:default;transform:none;}
.hp{position:absolute;left:-9999px;}
.formnote{margin:2px 0 0;font-size:12px;color:#7d7d87;min-height:1.2em;}
.formnote.ok{color:#7ac48a;}
.formnote.err{color:var(--red);}

.copymail{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:inherit;color:var(--red);text-decoration:none;display:inline-flex;align-items:baseline;gap:7px;}
.copymail em{font-style:normal;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:#6d6d77;border:1px solid var(--inkline);border-radius:2px;padding:2px 6px;}
.copymail:hover em{color:#fff;border-color:var(--red);}

body.light .askform input[type=text],body.light .askform input[type=email]{
  background:#fff;border-color:var(--line);color:var(--deep);}
body.light .askform input::placeholder{color:var(--grey40);}
body.light .askform input:focus{border-color:var(--red);background:rgba(216,31,38,.03);}
body.light .formnote{color:var(--grey);}
body.light .formnote.ok{color:#2e7d43;}
body.light .copymail em{color:var(--grey40);border-color:var(--line);}
body.light .copymail:hover em{color:var(--red);border-color:var(--red);}
@media(max-width:640px){.askform .f2{grid-template-columns:1fr;}}

/* ================================================================
   The host's badge sits bottom-right. Move our mark to the left of
   the bar rather than fight it for the same corner.
   ================================================================ */
.brandbox{order:-1;margin-right:6px;}
.bottom{padding-right:150px;}
@media(max-width:1000px){.bottom{padding-right:20px;}}

/* more clearance on the right so the host badge cannot sit over the
   Next control — it needs room for the badge plus its own margin */
.bottom{padding-right:230px;}
.nextbtn{margin-right:4px;}
@media(max-width:1240px){.bottom{padding-right:200px;}}
@media(max-width:1000px){.bottom{padding-right:20px;}.nextbtn{margin-right:0;}}