/* Rangeland guide - all styling lives here.
   You should not need to touch this file to change wording. */

  :root{
    --paper:#F4F5F7; --surface:#FFFFFF; --ink:#12161D; --ink-2:#4A5260; --ink-3:#6E7684;
    --rule:#C8CDD5; --rule-soft:#E2E5EA; --accent:#5636C9; --hot:#B0341F; --good:#3E7A5E;
    --wash:rgba(86,54,201,.07); --band:rgba(18,22,29,.045);
    --now:#2a78d6; --then:#e34948; --bld:#5B3FB8; --pj2:#0E6B7D;
    --shadow:0 1px 3px rgba(18,22,29,.07);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#0F1218; --surface:#171C24; --ink:#E7EAF0; --ink-2:#9BA4B3; --ink-3:#7C8695;
      --rule:#333B48; --rule-soft:#232A34; --accent:#A78EFF; --hot:#F0836C; --good:#5FC0A0;
      --wash:rgba(167,142,255,.1); --band:rgba(231,234,240,.05);
      --now:#3987e5; --then:#e66767; --bld:#7B5BD6; --pj2:#5CC3D6;
      --shadow:0 1px 3px rgba(0,0,0,.45);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0F1218; --surface:#171C24; --ink:#E7EAF0; --ink-2:#9BA4B3; --ink-3:#7C8695;
    --rule:#333B48; --rule-soft:#232A34; --accent:#A78EFF; --hot:#F0836C; --good:#5FC0A0;
    --wash:rgba(167,142,255,.1); --band:rgba(231,234,240,.05);
    --now:#3987e5; --then:#e66767; --bld:#7B5BD6; --pj2:#5CC3D6;
    --shadow:0 1px 3px rgba(0,0,0,.45);
  }

  *{box-sizing:border-box}
  body{background:var(--paper);color:var(--ink);font-family:"Source Serif 4",Georgia,serif;
       font-size:18px;line-height:1.62;margin:0;padding:0 22px 72px;-webkit-font-smoothing:antialiased}
  .wrap{max-width:720px;margin:0 auto}
  p{margin:0 0 18px}
  strong{font-weight:600}
  section{margin-bottom:52px}

  .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 20px}
  h1{font-family:Archivo,"Helvetica Neue",sans-serif;font-weight:800;
     font-size:clamp(1.85rem,5.6vw,2.5rem);line-height:1.08;letter-spacing:-.024em;
     text-wrap:balance;margin:0 0 16px}
  h1 .sub{display:block;font-size:.5em;font-weight:600;line-height:1.35;letter-spacing:-.008em;
          color:var(--ink-2);margin-top:14px}
  .standfirst{font-size:1.06rem;color:var(--ink-2);line-height:1.55;margin:0 0 16px}
  header{padding:46px 0 0}

  h2{font-family:Archivo,sans-serif;font-weight:700;font-size:1.42rem;letter-spacing:-.018em;
     line-height:1.2;text-wrap:balance;margin:0 0 16px;display:flex;gap:14px;align-items:baseline}
  h2 .num{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600;color:var(--accent);
          letter-spacing:.06em;flex:none;padding-top:2px}
  h3{font-family:Archivo,sans-serif;font-weight:600;font-size:1.06rem;margin:26px 0 10px;letter-spacing:-.006em}

  .toc{background:var(--surface);border:1px solid var(--rule);padding:20px 24px;margin:0 0 44px}
  .toc p{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.13em;
         text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
  .toc ol{margin:0;padding-left:22px;display:grid;gap:7px;font-size:.98rem}
  .toc a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-soft)}
  .toc a:hover{border-bottom-color:var(--accent);color:var(--accent)}

  ul{margin:0 0 18px;padding-left:0;list-style:none;display:grid;gap:13px}
  ul li{padding-left:26px;position:relative}
  ul li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}

  table{border-collapse:collapse;width:100%;font-size:1rem;margin:6px 0 10px}
  th{font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
     color:var(--ink-3);text-align:left;border-bottom:1px solid var(--rule);padding:8px 8px 8px 0;font-weight:600}
  td{border-bottom:1px solid var(--rule-soft);padding:10px 8px 10px 0;vertical-align:baseline}
  td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0;
       padding-left:16px;font-family:Archivo,sans-serif;font-weight:600}
  th.n{text-align:right;padding-left:16px}
  td.now{color:var(--ink-2)} td.then{color:var(--hot);font-weight:700}
  td.nob{color:var(--then);font-weight:700} td.bld{color:var(--accent);font-weight:700}
  td.dif{font-family:"IBM Plex Mono",monospace;font-size:.85rem;font-weight:600;color:var(--ink-3)}
  td.dif.down{color:var(--good)} td.dif.up{color:var(--hot)}
  .tw{overflow-x:auto}
  .tw.wide table{min-width:500px}
  .tw.fund table{min-width:460px;table-layout:fixed}
  .tw.fund col.c1{width:40%} .tw.fund col.c2{width:16%} .tw.fund col.c3{width:44%}
  .tw.fund td.n{padding-right:18px}
  .tw.fund th.n{padding-right:18px}
  .tw.fund td:last-child,.tw.fund th:last-child{text-align:left;padding-right:0}
  @media (max-width:620px){
    .tw.fund table{min-width:0;font-size:.86rem;table-layout:auto}
    .tw.fund col.c1,.tw.fund col.c2,.tw.fund col.c3{width:auto}
    .tw.fund td.n,.tw.fund th.n{padding-right:10px;padding-left:8px}
  }
  @media (max-width:620px){
    .tw.wide table{min-width:0;font-size:.84rem}
    .tw.wide td,.tw.wide th{padding-right:0}
    .tw.wide td.n,.tw.wide th.n{padding-left:9px}
    .tw.wide td.dif{font-size:.76rem}
  }
  @media (max-width:360px){
    .tw.wide table{font-size:.78rem}
    .tw.wide td.n,.tw.wide th.n{padding-left:6px}
    .tw.wide td.dif{font-size:.7rem}
  }

  figure{margin:22px 0 8px;background:var(--surface);border:1px solid var(--rule);padding:20px 20px 8px;
         overflow-x:auto;box-shadow:var(--shadow)}
  figure svg{display:block;width:100%;min-width:560px;height:auto}
  figcaption{font-family:"IBM Plex Mono",monospace;font-size:11px;line-height:1.6;color:var(--ink-3);
             border-top:1px solid var(--rule-soft);margin-top:14px;padding:11px 0 12px}

  .meeting{background:var(--accent);color:#fff;padding:26px 26px 24px;margin:0 0 26px}
  .meeting .k{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.13em;
              text-transform:uppercase;opacity:.85;margin-bottom:12px}
  .meeting .d{font-family:Archivo,sans-serif;font-weight:800;font-size:clamp(1.4rem,5vw,2rem);
              line-height:1.12;letter-spacing:-.02em;margin-bottom:10px}
  .meeting .w{font-size:1rem;line-height:1.5;opacity:.95;margin:0}
  .meeting .dl{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.3);font-size:.96rem}
  .meeting .post{display:none}
  .meeting[data-phase="post"] .pre{display:none}
  .meeting[data-phase="post"] .post{display:block}
  .meeting a{color:#fff;text-decoration:underline;text-underline-offset:2px}
  .meeting a:hover{text-decoration-thickness:2px}
  :root[data-theme="dark"] .meeting a{color:#12161D}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .meeting a{color:#12161D}}
  :root[data-theme="dark"] .meeting{color:#12161D}
  :root[data-theme="dark"] .meeting .dl{border-top-color:rgba(18,22,29,.3)}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .meeting{color:#12161D}
    :root:not([data-theme="light"]) .meeting .dl{border-top-color:rgba(18,22,29,.3)}
  }

  .callout{background:var(--band);border-left:3px solid var(--accent);padding:16px 20px;margin:0 0 20px;
           font-size:1rem;color:var(--ink-2)}
  .callout strong{color:var(--ink)}
  .callout h3{margin:0 0 8px;font-size:1.02rem}

  /* system-of-projects panel */
  .system{border:2px solid var(--accent);padding:0;margin:24px 0 20px;background:var(--surface)}
  .system .hd{background:var(--accent);color:#fff;padding:12px 20px;font-family:Archivo,sans-serif;
              font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
  :root[data-theme="dark"] .system .hd{color:#12161D}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .system .hd{color:#12161D}}
  .system .bd{padding:6px 20px 14px}
  .system table{margin:0;font-size:.94rem}
  .system td{padding:9px 8px 9px 0}
  .system .id{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);white-space:nowrap}
  .system .stg{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;line-height:1.6;
    letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:5px;font-weight:400}
  .system .stg.live{color:var(--accent);font-weight:600}
  .system tr.me td{background:var(--wash);font-weight:600}
  .system tr.me .id{color:var(--accent);font-weight:600}

  .quote{border-left:3px solid var(--accent);background:var(--band);padding:16px 20px;margin:0 0 18px;
    font-size:1rem;line-height:1.55;color:var(--ink)}
  .quote .attr{display:block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.08em;
    text-transform:uppercase;color:var(--ink-3);margin-top:11px}
  .slide .quote p{margin:0;color:var(--ink)}
  .q{border-top:1px solid var(--rule-soft);padding:20px 0 4px}
  .q h3{margin:0 0 8px;font-size:1.04rem}
  .q p{margin:0 0 10px;font-size:1rem;color:var(--ink-2)}
  .q .why{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.7;color:var(--ink-3)}
  .q .why b{color:var(--accent);letter-spacing:.09em;text-transform:uppercase;font-size:9.5px}

  /* corrections notice + notes */
  .notice{border:1px solid var(--rule);border-left:3px solid var(--hot);background:var(--surface);
    padding:15px 18px;margin:0 0 26px}
  .notice .k{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--hot);margin:0 0 7px}
  .notice p{margin:0;font-size:.97rem;line-height:1.55;color:var(--ink-2)}
  .notice a{color:var(--accent)}
  /* updates */
  .upd{border:1px solid var(--rule);background:var(--surface);margin:0 0 26px}
  .upd summary{cursor:pointer;list-style:none;padding:13px 18px;font-family:"IBM Plex Mono",monospace;
    font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .upd summary::-webkit-details-marker{display:none}
  .upd summary::after{content:"  +"}
  .upd[open] summary::after{content:"  \2212"}
  .upd summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
  .upd .bd{padding:2px 18px 16px}
  .upd h4{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--accent);margin:30px 0 4px;
    display:flex;align-items:center;gap:12px}
  .upd h4::after{content:"";flex:1;height:1px;background:var(--rule)}
  .upd .bd h4:first-of-type{margin-top:8px}
  .upd ol{list-style:none;margin:0;padding:0;display:grid;gap:0}
  .upd li{display:flex;gap:14px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--rule-soft);
    font-size:.96rem;line-height:1.5;color:var(--ink-2)}
  .upd li:first-child{border-top:0}
  .upd .dt{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--accent);flex:0 0 92px;padding-top:3px}
  .upd ol.past .dt{color:var(--ink-3);font-weight:400}
  .upd li strong{color:var(--ink)}
  .upd a{color:var(--accent)}

  .notes{counter-reset:cn;margin-top:6px}
  .note{border-top:1px solid var(--rule-soft);padding:16px 0}
  .note:first-child{border-top:0;padding-top:4px}
  .note h4{font-family:Archivo,sans-serif;font-weight:700;font-size:1.01rem;line-height:1.35;
    margin:0 0 9px;color:var(--ink)}
  .note h4::before{counter-increment:cn;content:"C" counter(cn) "\00a0\00a0";
    font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
  .note p{margin:0 0 7px;font-size:.97rem;line-height:1.55;color:var(--ink-2)}
  .note p:last-child{margin-bottom:0}
  .note .lab{font-family:"IBM Plex Mono",monospace;font-size:9px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-3);margin-right:9px}
  .note strong{color:var(--ink)}

  .src{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;line-height:1.9;color:var(--ink-2)}
  .src a{color:var(--accent)}
  footer{border-top:1px solid var(--rule);padding-top:22px;font-size:.9rem;color:var(--ink-3)}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  /* corridor + pipeline svg */
  .s-seg{stroke-width:16;fill:none;stroke-linecap:butt}
  .s-this{stroke:var(--accent)} .s-other{stroke:var(--rule)}
  .s-lab{font-family:Archivo,sans-serif;font-weight:600;font-size:12.5px;fill:var(--ink)}
  .s-len{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--ink-3);letter-spacing:.05em}
  .s-mark{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-2);letter-spacing:.04em}
  .s-tick{stroke:var(--ink-3);stroke-width:1}
  .s-brace{stroke:var(--accent);stroke-width:1.5;fill:none}
  .s-brlab{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;fill:var(--accent);letter-spacing:.1em}
  .p-box{fill:var(--surface);stroke:var(--rule);stroke-width:1.2}
  .p-box-now{fill:var(--wash);stroke:var(--accent);stroke-width:1.8}
  .p-t{font-family:Archivo,sans-serif;font-weight:600;font-size:12px;fill:var(--ink)}
  .p-d{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-3);letter-spacing:.04em}
  .p-arrow{stroke:var(--ink-3);stroke-width:1.3;fill:none}
  .p-here{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;fill:var(--accent);letter-spacing:.1em}
  .ah{fill:var(--ink-3)}

  /* cross-section svg */
  .x-travel{fill:#6E7684} .x-bike{fill:var(--accent)} .x-median{fill:var(--good)}
  .x-path{fill:var(--rule)}
  :root[data-theme="dark"] .x-travel{fill:#5A6472}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .x-travel{fill:#5A6472}}
  .x-w{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;fill:#fff}
  .x-w-d{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;fill:var(--ink)}
  .x-t{font-family:Archivo,sans-serif;font-weight:600;font-size:12.5px;fill:var(--ink)}
  .x-s{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--ink-3);letter-spacing:.05em}
  .x-rw{stroke:var(--ink-3);stroke-width:1;fill:none}
  .x-key{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--ink-2)}

  /* cost bars */
  .c-me{fill:#5636C9} .c-other{fill:#6E7684}
  :root[data-theme="dark"] .c-me{fill:#9B7CF0}
  :root[data-theme="dark"] .c-other{fill:#7C8695}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .c-me{fill:#9B7CF0}
    :root:not([data-theme="light"]) .c-other{fill:#7C8695}
  }
  .c-lab{font-family:"Source Serif 4",serif;font-size:12.5px;fill:var(--ink)}
  .c-sub{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-3);letter-spacing:.04em}
  .c-val{font-family:Archivo,sans-serif;font-weight:700;font-size:12.5px;fill:var(--ink)}
  .c-grid{stroke:var(--rule-soft);stroke-width:1}
  .c-ax{font-family:Archivo,sans-serif;font-weight:700;font-size:11px;fill:var(--ink-3)}
  .c-note{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-3);letter-spacing:.04em}
  .c-row:hover .c-lab{fill:var(--accent);font-weight:600}

  /* LOS dumbbell */
  .l-name{font-family:"Source Serif 4",serif;font-size:12.5px;fill:var(--ink)}
  .l-grid{stroke:var(--rule-soft);stroke-width:1}
  .l-axis{font-family:Archivo,sans-serif;font-weight:700;font-size:12px;fill:var(--ink-3)}
  .l-conn{stroke:var(--ink-3);stroke-width:2}
  .l-now{fill:var(--now);stroke:var(--surface);stroke-width:2}
  .l-then{fill:var(--then);stroke:var(--surface);stroke-width:2}
  .l-nob{fill:var(--then);stroke:var(--surface);stroke-width:2}
  .l-bld{fill:var(--bld);stroke:var(--surface);stroke-width:2}
  .l-letter{font-family:Archivo,sans-serif;font-weight:700;font-size:10px;fill:#fff}
  .l-leg{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--ink-2);letter-spacing:.04em}
  .l-note{font-family:"IBM Plex Mono",monospace;font-size:9.5px;fill:var(--ink-3)}
  .l-row:hover .l-name{fill:var(--accent);font-weight:600}

  /* ---- reading modes ---- */
  .hlt{display:none}
  html.brief .det{display:none}
  html.brief .hlt{display:block}

  .modebar{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--rule);
    margin:0 0 32px;padding:12px 0 11px;display:flex;gap:8px 16px;align-items:center;flex-wrap:wrap;
    box-shadow:0 8px 12px -10px rgba(0,0,0,.3)}
  .modebar .lab{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3)}
  .seg{display:inline-flex;border:1px solid var(--rule);background:var(--surface)}
  .seg button{font-family:Archivo,sans-serif;font-size:13px;font-weight:600;color:var(--ink-2);
    background:none;border:0;padding:7px 15px;cursor:pointer;letter-spacing:-.005em}
  .seg button + button{border-left:1px solid var(--rule)}
  .seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
  :root[data-theme="dark"] .seg button[aria-pressed="true"]{color:#12161D}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .seg button[aria-pressed="true"]{color:#12161D}
  }
  .seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  #modenote,.modenote{font-family:"IBM Plex Mono",monospace;font-size:10.5px;line-height:1.5;color:var(--ink-3);flex:1 1 230px}
  .seg button:disabled{color:var(--ink-3);cursor:not-allowed;background:repeating-linear-gradient(135deg,transparent 0 5px,var(--band) 5px 10px)}
  .deck .slide ul{margin:6px 0 14px}
  section, .toc, .slide{scroll-margin-top:66px}

  /* ---- slides ---- */
  .slide{background:var(--surface);border:1px solid var(--rule);box-shadow:var(--shadow);
    padding:32px 30px 26px;margin:0 0 20px}
  .slide .sn{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.16em;
    text-transform:uppercase;color:var(--accent);margin:0 0 13px}
  .slide h2{display:block;font-family:Archivo,sans-serif;font-weight:800;
    font-size:clamp(1.3rem,3.7vw,1.85rem);line-height:1.13;letter-spacing:-.024em;
    text-wrap:balance;margin:0 0 14px;color:var(--ink)}
  .slide p{font-size:1.02rem;line-height:1.55;color:var(--ink-2);margin:0 0 13px}
  .slide p:last-of-type{margin-bottom:0}
  .slide .foot{font-family:"IBM Plex Mono",monospace;font-size:10px;line-height:1.7;color:var(--ink-3);
    letter-spacing:.04em;border-top:1px solid var(--rule-soft);margin-top:20px;padding-top:12px}
  /* responsive deck visuals (no fixed-width SVG) */
  .viz{margin:20px 0 14px}
  .vrow{padding:11px 0;border-top:1px solid var(--rule-soft)}
  .vrow:first-child{border-top:0;padding-top:2px}
  .vhead{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:7px}
  .vnm{font-family:Archivo,sans-serif;font-weight:600;font-size:.95rem;color:var(--ink);line-height:1.3}
  .vval{font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;white-space:nowrap;color:var(--ink)}
  .vtrack{height:14px;background:var(--rule-soft)}
  .vfill{height:100%;background:#6E7684}
  :root[data-theme="dark"] .vfill{background:#7C8695}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vfill{background:#7C8695}}
  .vfill.me{background:var(--accent)}
  :root[data-theme="dark"] .vfill.me{background:#9B7CF0}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .vfill.me{background:#9B7CF0}}
  .vsub{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);margin-top:6px}

  .lrow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:space-between;
    padding:9px 0;border-top:1px solid var(--rule-soft)}
  .lrow:first-child{border-top:0}
  .lnm{font-size:.95rem;color:var(--ink);flex:1 1 165px;line-height:1.35}
  .grades{display:flex;align-items:center;gap:7px;flex:0 0 auto}
  .g{font-family:Archivo,sans-serif;font-weight:700;font-size:12px;color:#fff;width:26px;height:26px;
    display:inline-flex;align-items:center;justify-content:center;border-radius:50%}
  .g.now{background:var(--now)} .g.then{background:var(--then)}
  .g.same{background:var(--rule);color:var(--ink-2)}
  .arw{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3)}
  .lkey{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);margin-top:14px;display:flex;gap:8px 18px;flex-wrap:wrap;align-items:center}
  .lkey span{display:inline-flex;align-items:center;gap:6px}
  .dot{width:10px;height:10px;border-radius:50%;display:inline-block}
  .dot.now{background:var(--now)} .dot.then{background:var(--then)}
  .dot.nob{background:var(--then)} .dot.bld{background:var(--bld)}
  .g.nob{background:var(--then)} .g.bld{background:var(--bld)}

  .steps{margin:20px 0 14px;display:grid;gap:2px;background:var(--rule-soft);border:1px solid var(--rule-soft)}
  .step{background:var(--surface);padding:12px 14px;display:flex;gap:10px 14px;align-items:baseline;flex-wrap:wrap}
  .step .st{font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);flex:1 1 130px}
  .step .sm{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--ink-3);flex:0 0 auto}
  .step.now{background:var(--wash);box-shadow:inset 3px 0 0 var(--accent)}
  .step.now .st,.step.now .sm{color:var(--accent)}

  .stats{display:flex;flex-wrap:wrap;gap:2px;margin:20px 0 16px}
  .stat{flex:1 1 132px;background:var(--surface);border:1px solid var(--rule-soft);padding:15px 14px 14px}
  .stat .v{font-family:Archivo,sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1;
    font-size:clamp(1.45rem,4.4vw,2rem);color:var(--ink)}
  .stat .v.hot{color:var(--then)}
  .stat .v.acc{color:var(--accent)}
  .stat .v.good{color:var(--good)}
  .stat .k{font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);margin-top:9px;line-height:1.55}

  /* stacked corridor bar */
  .sbar{display:flex;gap:2px;margin:20px 0 0}
  .sseg{height:34px}
  .sseg.me{background:var(--accent)}
  .sseg.other{background:#6E7684}
  :root[data-theme="dark"] .sseg.other{background:#7C8695}
  :root[data-theme="dark"] .sseg.me{background:#9B7CF0}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .sseg.other{background:#7C8695}
    :root:not([data-theme="light"]) .sseg.me{background:#9B7CF0}
  }
  .sseg{height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden;
    padding:0 8px;text-align:center}
  .sseg span{font-family:Archivo,sans-serif;font-weight:700;font-size:11.5px;line-height:1.25;
    color:#fff;letter-spacing:-.005em}
  :root[data-theme="dark"] .sseg span{color:#12161D}
  @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sseg span{color:#12161D}}
  .snodes{position:relative;height:46px;margin-top:0}
  .snodes i{position:absolute;top:0;width:1px;background:var(--rule)}
  .snodes i.a{height:7px}
  .snodes i.b{height:21px}
  .snodes span{position:absolute;font-family:"IBM Plex Mono",monospace;font-size:9px;
    font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
  .snodes span.a{top:10px}
  .snodes span.b{top:24px}
  @media (max-width:560px){
    .sseg span{font-size:10px}
    .sseg.tiny span{display:none}
    .snodes span{font-size:7.5px;letter-spacing:.02em}
  }

  /* expandable block */
  .xp{margin-top:14px;border-top:1px solid var(--rule-soft)}
  .xp summary{cursor:pointer;list-style:none;padding:12px 0 2px;font-family:"IBM Plex Mono",monospace;
    font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
  .xp summary::-webkit-details-marker{display:none}
  .xp summary::after{content:"  +"}
  .xp[open] summary::after{content:"  \2212"}
  .xp summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

  .qlist{counter-reset:q;margin:4px 0 0;padding:0;list-style:none;display:grid;gap:0}
  .qlist li{position:relative;padding:15px 0 15px 46px;border-top:1px solid var(--rule-soft);
    font-size:1.01rem;line-height:1.5;color:var(--ink)}
  .qlist li::before{counter-increment:q;content:counter(q,decimal-leading-zero);position:absolute;left:0;top:16px;
    font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--accent);letter-spacing:.06em}
  .qlist li b{font-weight:600}

  @media print{
    .modebar,.hlt{display:none !important}
    .det{display:block !important}
    body{background:#fff;color:#000;font-size:10pt;padding:0;line-height:1.4}
    .wrap{max-width:100%} header{padding:0} .toc{display:none}
    h1{font-size:17pt} h2{font-size:12pt} section{margin-bottom:18px}
    .meeting{background:#fff;color:#000;border:2px solid #000;padding:12px 14px}
    .meeting .dl{border-top-color:#999}
    .system .hd{background:#fff;color:#000;border-bottom:1px solid #000}
    figure{box-shadow:none;page-break-inside:avoid} td.then{color:#000}
    a{color:#000;text-decoration:none} .src{font-size:8pt}
  }

/* Skip link, for keyboard and screen-reader users. */
  .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:10px 16px;z-index:10}
  .skip:focus{left:12px;top:12px}


/* ==========================================================================
   NETWORK MAP
   Everything the schematic needs, scoped to .netmap so it cannot collide with
   the rest of the guide. Markup is in index.html; data and behaviour are in
   app.js. The colour ramp is a single-hue ordinal scale checked for monotone
   lightness, step separation and contrast in both themes - do not hand-tweak
   the five --v steps without re-checking them.
   ========================================================================== */
  .netmap{
    --context:#8A929E;
    --v1:#86b6ef; --v2:#5598e7; --v3:#2a78d6; --v4:#1c5cab; --v5:#0d366b;
    --g-good:#0ca30c; --g-warn:#fab219; --g-serious:#ec835a; --g-crit:#d03b3b;
  }
  :root[data-theme="dark"] .netmap{
    --context:#79828F;
    --v1:#184f95; --v2:#256abf; --v3:#3987e5; --v4:#6da7ec; --v5:#b7d3f6;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .netmap{
      --context:#79828F;
      --v1:#184f95; --v2:#256abf; --v3:#3987e5; --v4:#6da7ec; --v5:#b7d3f6;
    }
  }

  /* --- the three-way toggle --- */
  .netmap .nmviews{display:flex;flex-wrap:wrap;margin:0 0 14px;border:1px solid var(--rule);
    background:var(--surface);box-shadow:var(--shadow)}
  .netmap .nmviews button{flex:1 1 210px;min-width:0;text-align:left;background:none;border:0;
    border-right:1px solid var(--rule-soft);padding:12px 16px;cursor:pointer;font-family:inherit;
    transition:background .12s}
  .netmap .nmviews button:last-child{border-right:0}
  .netmap .nmviews button:hover{background:var(--band)}
  .netmap .nmviews .t{display:block;font-family:Archivo,"Helvetica Neue",sans-serif;font-weight:700;
    font-size:.97rem;letter-spacing:-.012em;color:var(--ink)}
  .netmap .nmviews .s{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;
    letter-spacing:.05em;color:var(--ink-3);margin-top:4px;line-height:1.5}
  .netmap .nmviews button[aria-pressed="true"]{background:var(--accent)}
  .netmap .nmviews button[aria-pressed="true"] .t,
  .netmap .nmviews button[aria-pressed="true"] .s{color:#fff}
  :root[data-theme="dark"] .netmap .nmviews button[aria-pressed="true"] .t,
  :root[data-theme="dark"] .netmap .nmviews button[aria-pressed="true"] .s{color:#12161D}
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .netmap .nmviews button[aria-pressed="true"] .t,
    :root:not([data-theme="light"]) .netmap .nmviews button[aria-pressed="true"] .s{color:#12161D}
  }

  /* --- the figure. On a wide screen it breaks out of the 720px column,
         because a map you have to scroll sideways is not a map. --- */
  .netmap figure{margin:0;background:var(--surface);border:1px solid var(--rule);
    padding:14px 12px 8px;box-shadow:var(--shadow);overflow-x:auto}
  .netmap figure svg{display:block;width:100%;min-width:780px;height:auto}
  @media (min-width:920px){
    .netmap figure,.netmap .nmviews{width:calc(100vw - 48px);max-width:1060px;margin-left:50%;
      transform:translateX(-50%)}
  }
  .netmap figcaption{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;
    line-height:1.65;color:var(--ink-3);border-top:1px solid var(--rule-soft);margin-top:12px;
    padding:11px 4px 6px}
  .netmap figcaption > p{display:none;margin:0}
  .netmap figcaption > p.on{display:block}
  .netmap .src{margin-top:14px}

  /* --- map marks --- */
  .netmap .nmseg line{fill:none;stroke-linecap:round}
  .netmap .nmseg .base,.netmap .nmseg .top{
    transition:opacity .13s,stroke-width .5s cubic-bezier(.4,0,.2,1),stroke .5s}
  @media (prefers-reduced-motion:reduce){
    .netmap .nmseg .base,.netmap .nmseg .top{transition:opacity .13s}
  }
  .netmap .nmseg .base{stroke:none;stroke-width:7}
  .netmap .nmseg .top{stroke:none;stroke-width:7}
  .netmap .nmseg.s-hollow .base{stroke:var(--rule);stroke-width:7}
  .netmap .nmseg.s-hollow .top{stroke:var(--surface);stroke-width:3.5}
  .netmap .nmseg.s-absent .top{stroke:var(--context);stroke-width:5;stroke-dasharray:2 7;opacity:.5}
  .netmap .nmseg.s-out .top{stroke:var(--context);stroke-width:7}
  /* volume is carried twice over: hue step and stroke width */
  .netmap .nmseg.b1 .top{stroke:var(--v1);stroke-width:4}
  .netmap .nmseg.b2 .top{stroke:var(--v2);stroke-width:7}
  .netmap .nmseg.b3 .top{stroke:var(--v3);stroke-width:10.5}
  .netmap .nmseg.b4 .top{stroke:var(--v4);stroke-width:14}
  .netmap .nmseg.b5 .top{stroke:var(--v5);stroke-width:18}
  .netmap .hit{stroke-width:26;stroke:transparent;fill:none}
  .netmap .dim .nmseg:not(.on) .base,.netmap .dim .nmseg:not(.on) .top{opacity:.18}
  .netmap .dim .lbl:not(.on){opacity:.28}

  .netmap .stn{fill:var(--surface);stroke:var(--ink-2);stroke-width:2.4}
  .netmap .stn.g-good{stroke:var(--g-good)} .netmap .stn.g-warn{stroke:var(--g-warn)}
  .netmap .stn.g-serious{stroke:var(--g-serious)} .netmap .stn.g-crit{stroke:var(--g-crit)}
  .netmap .stn.absent{stroke:var(--ink-3);stroke-dasharray:2.5 2.5}
  .netmap .grade{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;font-weight:700;
    fill:var(--ink);letter-spacing:.02em}
  .netmap .delta{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;font-weight:700;
    letter-spacing:.03em}
  .netmap .delta.up{fill:var(--g-serious)} .netmap .delta.dn{fill:var(--g-good)}
  .netmap .rd-lbl{font-family:Archivo,"Helvetica Neue",sans-serif;font-size:13.5px;font-weight:700;
    fill:var(--ink)}
  .netmap .rd-sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9px;fill:var(--ink-3);
    letter-spacing:.07em}
  .netmap .arw-head{fill:var(--context)}

  /* --- legend --- */
  .netmap .nmlegend{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:center;margin:14px 0 0;
    font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:9.5px;letter-spacing:.06em;
    text-transform:uppercase;color:var(--ink-3)}
  .netmap .nmlegend span{display:inline-flex;align-items:center;gap:6px}
  .netmap .nmkey{width:22px;border-radius:4px;display:inline-block}
  .netmap .nmkey.k1{background:var(--v1);height:3px} .netmap .nmkey.k2{background:var(--v2);height:5px}
  .netmap .nmkey.k3{background:var(--v3);height:7px} .netmap .nmkey.k4{background:var(--v4);height:9px}
  .netmap .nmkey.k5{background:var(--v5);height:12px}
  .netmap .nmkey.kh{background:var(--surface);border:2px solid var(--rule);height:7px}
  .netmap .nmkey.ko{background:var(--context);height:7px}
  .netmap .nmkey.kd{background:repeating-linear-gradient(90deg,var(--context) 0 3px,transparent 3px 8px);
    height:5px}
  .netmap .nmsep{width:1px;height:14px;background:var(--rule-soft);display:inline-block}

  @media print{
    .netmap figure{width:auto;max-width:none;margin-left:0;transform:none;
      border:1px solid #999;box-shadow:none;overflow:visible}
    .netmap .nmviews{display:none}
  }

/* ==========================================================================
   FACT DETAILS
   Figures from the county's documents are small buttons (.fact); tapping one
   opens the details box (.factpop). Both are made by app.js - without
   JavaScript the figures print as ordinary text.
   ========================================================================== */
  .fact{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
    letter-spacing:inherit;line-height:inherit;text-align:inherit;cursor:default}
  .has-facts .fact{cursor:pointer;text-decoration:underline dotted;text-decoration-color:var(--ink-3);
    text-decoration-thickness:1px;text-underline-offset:3px}
  .has-facts .fact:hover,.has-facts .fact[aria-expanded="true"]{text-decoration-color:var(--accent);color:var(--accent)}
  .has-facts .g .fact,.has-facts .v .fact{text-decoration:none}
  .has-facts .g .fact:hover,.has-facts .g .fact[aria-expanded="true"]{color:inherit}
  .fact:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}

  .factnote{display:none;font-size:.9rem;color:var(--ink-3);margin:-8px 0 24px}
  .has-facts .factnote{display:block}
  .factnote a{color:var(--accent)}

  .factpop{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;
    width:calc(100% - 32px);max-width:520px;max-height:70vh;overflow:auto;
    background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:10px;
    box-shadow:0 8px 28px rgba(0,0,0,.22);padding:16px 44px 14px 18px;font-size:.95rem;line-height:1.5}
  .factpop[hidden]{display:none}
  .factpop:focus{outline:none}
  .factpop p{margin:0 0 8px}
  .factpop .fv{font-family:Archivo,sans-serif;font-weight:700;font-size:1.15rem;margin-bottom:2px}
  .factpop .fs{color:var(--ink-2)}
  .factpop .fm{font-size:.85rem;color:var(--ink-3)}
  .factpop .fm a{color:var(--accent)}
  .factpop .fwas{font-size:.85rem;color:var(--ink-2)}
  .factpop .fck{display:flex;flex-wrap:wrap;gap:6px}
  .factpop .fn{font-size:.85rem;color:var(--ink-2);border-left:3px solid var(--rule);padding-left:10px}
  .factpop .fst{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
  .factpop .fa{margin:12px 0 0}
  .factpop .fd{font-family:Archivo,sans-serif;font-weight:600;color:var(--accent)}
  .factpop .x{position:absolute;top:6px;right:8px;width:32px;height:32px;border:0;background:none;
    color:var(--ink-3);font-size:22px;line-height:1;cursor:pointer;border-radius:6px}
  .factpop .x:hover{background:var(--band);color:var(--ink)}

  @media print{
    .has-facts .fact{text-decoration:none;color:inherit}
    .factpop,.factnote{display:none !important}
  }

/* Version line at the foot of the page - which commit is live, and when it was published. */
  .buildstamp{margin:0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3)}
  .buildstamp a{color:inherit}

/* ==========================================================================
   FIGURES AND SOURCES PAGE (facts/)
   ========================================================================== */
  .factspage header{padding-top:40px;margin-bottom:28px}
  .factspage .eyebrow a{color:inherit;text-decoration:none}
  .factspage .eyebrow a:hover{color:var(--accent)}
  .factspage h2{font-family:Archivo,sans-serif;font-weight:800;font-size:1.35rem;line-height:1.2;
    letter-spacing:-.01em;margin:44px 0 6px}
  .factspage h3{font-family:Archivo,sans-serif;font-weight:700;font-size:1.02rem;margin:30px 0 8px;
    padding-bottom:8px;border-bottom:2px solid var(--ink)}
  .fplan,.fcount{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
    letter-spacing:.08em;color:var(--ink-3);vertical-align:middle;margin-left:6px}

  .fsearch{position:sticky;top:0;z-index:5;background:var(--paper);padding:12px 0;border-bottom:1px solid var(--rule)}
  .fsearch label{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
  .fsearch input{width:100%;font:inherit;font-size:1rem;padding:9px 12px;border:1px solid var(--rule);
    border-radius:6px;background:var(--surface);color:var(--ink)}
  .fsearch input:focus{outline:2px solid var(--accent);outline-offset:1px}
  .fnone{margin:10px 0 0;color:var(--ink-3)}

  .flist,.slist{list-style:none;margin:0;padding:0}
  .flist li::before,.slist li::before{content:none}
  .fitem{padding:12px 0;border-bottom:1px solid var(--rule-soft);scroll-margin-top:96px}
  .fproject,.fgroup,.fsources{scroll-margin-top:96px}
  .fitem:target{background:var(--wash);box-shadow:-10px 0 0 var(--wash),10px 0 0 var(--wash)}
  .fhead{display:flex;gap:16px;align-items:baseline;justify-content:space-between}
  .fstat{font-size:.98rem;line-height:1.45}
  .fval{font-family:Archivo,sans-serif;font-weight:700;font-size:1rem;white-space:nowrap;text-align:right}
  .fmeta{margin:4px 0 0;font-size:.85rem;color:var(--ink-3);line-height:1.5}
  .fmeta .fdate{white-space:nowrap}
  .fmeta .vtag + .vtag{margin-left:5px}
  .fmeta a{color:var(--ink-2)}
  .fmeta .frep{margin-left:10px;font-family:Archivo,sans-serif;font-weight:600;color:var(--accent);white-space:nowrap}
  .fnote{margin:6px 0 0;font-size:.85rem;color:var(--ink-2);border-left:3px solid var(--rule);padding-left:10px}
  .fst{margin:4px 0 0;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--hot)}
  .fitem.is-superseded .fval{color:var(--ink-3)}

  .slist li{padding:10px 0;border-bottom:1px solid var(--rule-soft);font-size:.95rem;line-height:1.45}
  .slist a{color:var(--accent)}
  .smeta,.snote{display:block;font-size:.82rem;color:var(--ink-3)}
  /* Revised figures: a history under the figure, and "What's changed" at the top.
     Neutral colours on purpose - a figure going up or down is not good or bad. */
  .fhist{margin:8px 0 0;font-size:.88rem}
  .fhist summary{cursor:pointer;color:var(--ink-2);list-style:none;display:inline-flex;align-items:center;gap:8px}
  .fhist summary::-webkit-details-marker{display:none}
  .fhist summary::after{content:"\25B8";font-size:.8em;color:var(--ink-3)}
  .fhist[open] summary::after{content:"\25BE"}
  .fhist summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
  .fbadge{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px}
  .fversions{list-style:none;margin:10px 0 0 6px;padding:0 0 0 14px;border-left:2px solid var(--rule)}
  .fversions li{position:relative;padding:4px 0 8px;scroll-margin-top:96px}
  .fversions li::before{content:"";position:absolute;left:-19px;top:11px;width:8px;height:8px;border-radius:50%;
    background:var(--paper);border:2px solid var(--ink-3)}
  .fversions li.fvnow::before{background:var(--accent);border-color:var(--accent)}
  .fversions li:target{background:var(--wash)}
  .fvval{display:block;font-family:Archivo,sans-serif;font-weight:700;color:var(--ink-2)}
  .fvnow .fvval{color:var(--ink)}
  .fvmeta,.fvnote{display:block;font-size:.82rem;color:var(--ink-3);line-height:1.45}
  .fvnote{margin-top:2px;color:var(--ink-2)}
  .fvmeta a{color:var(--ink-2)}
  .fonly{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.92rem;color:var(--ink-2);cursor:pointer}
  .fonly input{width:auto;margin:0;accent-color:var(--accent)}
  .fsearch .fonly{display:flex;font-family:inherit;font-size:.92rem;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink-2);margin-bottom:0}

  .fchanges{margin-bottom:28px}
  .fchanges > p{font-size:.95rem;color:var(--ink-2)}
  .fchanges h3{font-size:.95rem;border-bottom-width:1px}
  .fchanges h3 a{color:var(--accent)}
  .clist{list-style:none;margin:0;padding:0}
  .clist li{padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:.92rem;line-height:1.45}
  .clist li::before{content:none}
  .clist a{color:var(--ink)}
  .cmove{display:block;font-family:Archivo,sans-serif}
  .cfrom{color:var(--ink-3)} .carrow{color:var(--accent);margin:0 2px}
  .cwas,.cnote{display:block;font-size:.8rem;color:var(--ink-3)}
  .cnote{color:var(--ink-2);border-left:3px solid var(--rule);padding-left:8px;margin-top:4px}
  .factpop .fall{display:inline-block;margin-left:14px;font-size:.85rem;color:var(--ink-3)}

  @media (max-width:560px){
    .fhead{flex-direction:column;gap:2px}
    .fval{text-align:left}
  }
  @media print{
    .fsearch,.frep{display:none !important}
    .fitem{page-break-inside:avoid}
  }

/* ==========================================================================
   PROJECT BAR - top of every page. Projects on the left as a segmented
   control (same look as the guide's reading-mode toggle); the site-wide pages
   (Timeline, All figures & sources) on the right.
   ========================================================================== */
  .projbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;
    padding:12px 0;border-bottom:1px solid var(--rule)}
  .pb-projects{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
  .pb-home{font-family:Archivo,sans-serif;font-weight:800;font-size:15px;letter-spacing:-.01em;color:var(--ink);text-decoration:none;margin-right:4px}
  .pb-home:hover,.pb-home[aria-current="page"]{color:var(--accent)}
  .pb-lab{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-3)}
  .pb-seg{display:inline-flex;border:1px solid var(--rule);background:var(--surface)}
  .pb-seg a{font-family:Archivo,sans-serif;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;padding:7px 14px}
  .pb-seg a + a{border-left:1px solid var(--rule)}
  .pb-seg a:hover{color:var(--accent)}
  .pb-seg a[aria-current="page"]{background:var(--accent);color:#fff}
  :root[data-theme="dark"] .pb-seg a[aria-current="page"]{color:#12161D}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pb-seg a[aria-current="page"]{color:#12161D} }
  .pb-site{display:flex;align-items:center;gap:18px;padding-left:20px;border-left:1px solid var(--rule)}
  .pb-site a{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
  .pb-site a:hover{color:var(--accent)}
  .pb-site a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
  .projbar a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  @media (max-width:560px){
    .pb-site{padding-left:0;border-left:0;width:100%;padding-top:8px;border-top:1px solid var(--rule-soft)}
  }
  .projbar + header{padding-top:28px}
  .cardtag{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 8px;margin-left:6px;vertical-align:middle}
  .notyet{color:var(--ink-2);font-style:italic}
  @media print{ .projbar{display:none} }

/* ==========================================================================
   TIMELINE PAGE (timeline/) and the generated "What's happened lately" box.
   Neutral styling on purpose: no colour says a change is good or bad.
   ========================================================================== */
  .updabout{color:var(--ink-3);font-size:.9em}
  .upd li a{color:inherit;text-decoration-color:var(--rule)}
  .upd .updmore{margin:12px 0 0;font-size:.92rem}

  .tlpage header{padding-top:28px}
  .tlfilters{position:sticky;top:0;z-index:5;background:var(--paper);padding:10px 16px;margin:0 -16px 8px;border-bottom:1px solid var(--rule)}
  .tlrow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
  .chip{font-family:Archivo,sans-serif;font-size:.85rem;border:1px solid var(--rule);background:var(--surface);color:var(--ink-2);
    border-radius:999px;padding:4px 12px;cursor:pointer}
  .chip.small{font-size:.78rem;padding:3px 10px}
  .chip[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);color:#fff}
  .chip[aria-pressed="true"]::before{content:"\2713\00a0"}
  .chip[aria-pressed="false"]{color:var(--ink-3);background:var(--surface)}
  .chip[aria-pressed="false"]:hover{border-color:var(--accent);color:var(--accent)}
  :root[data-theme="dark"] .chip[aria-pressed="true"]{color:#12161D}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .chip[aria-pressed="true"]{color:#12161D} }
  .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tlband h2{margin:26px 0 4px}
  .tlnote{font-size:.9rem;color:var(--ink-2);margin:0 0 8px}
  .tllist{list-style:none;margin:0;padding:0 0 0 18px;border-left:2px solid var(--rule)}
  .tllist > li::before{content:none}
  .tle{position:relative;padding:0;margin:0;scroll-margin-top:120px}
  /* Each kind of entry has its own dot shape (shown in its filter chip too), so
     kinds can be told apart without colour. The bigger moments (meetings,
     decisions, deadlines) get a bigger dot in the accent colour and a bold title. */
  .tle::after,.shp{content:"";box-sizing:border-box;display:inline-block;width:var(--d);height:var(--d);
    background:var(--ink-3);border-radius:50%}
  .tle{--d:11px}
  .tle.major{--d:15px}
  .tle::after{position:absolute;left:calc(-19px - var(--d) / 2);top:calc(21px - var(--d) / 2);box-shadow:0 0 0 3px var(--paper)}
  .tle.major::after{background:var(--accent)}
  .t-decision::after,.s-decision{border-radius:1px;transform:rotate(45deg) scale(.86)}
  .t-contract::after,.s-contract{border-radius:1px}
  .t-document::after,.s-document{border-radius:1px;background:var(--paper) !important;border:2px solid var(--ink-3)}
  .t-change-order::after,.s-change-order{background:var(--paper) !important;border:2px solid var(--ink-3)}
  .t-milestone::after,.s-milestone{border-radius:0;clip-path:polygon(50% 0,100% 100%,0 100%)}
  .t-milestone::after{box-shadow:none}
  .t-deadline::after,.s-deadline{border:3px solid var(--accent);background:var(--paper) !important;box-shadow:inset 0 0 0 2px var(--paper)}
  .t-deadline::after{background:var(--accent) !important;box-shadow:0 0 0 3px var(--paper),inset 0 0 0 2px var(--paper)}
  .s-deadline{background:currentColor !important}
  .t-planned::after,.s-planned{background:var(--paper) !important;border:2px dashed var(--ink-3)}
  .tlplanned .tllist{border-left-style:dashed}
  .shp{--d:9px;margin-right:6px;vertical-align:0;background:currentColor}
  .shp.s-decision{--d:8px}
  .chip .shp.s-document,.chip .shp.s-change-order,.chip .shp.s-planned{border-color:currentColor;background:transparent !important}
  .chip[aria-pressed="true"] .shp{border-color:currentColor}
  .chip.small[aria-pressed="true"]::before{content:none}
  .chip .shp.s-deadline{background:radial-gradient(currentColor 30%,transparent 38%) !important;border:2px solid currentColor;box-shadow:none}
  /* Project tags: each project has its own shade (add one when a project is added). */
  .pjtag{display:inline-block;margin-left:6px;padding:0 5px;border:1px solid currentColor;border-radius:3px;line-height:1.5;color:var(--ink-2)}
  .pj-rangeland{color:var(--accent)}
  .pj-sunlake{color:var(--pj2)}
  .tle.major .tltitle{font-weight:650}
  .tlmoved{display:block;margin-top:3px;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem;color:var(--ink-2)}
  .tlmoved s{color:var(--ink-3);text-decoration-thickness:1.5px}
  .tlmoved b{color:var(--ink);font-weight:600}
  .tle details{border-bottom:1px solid var(--rule-soft)}
  .tle summary{list-style:none;cursor:pointer;padding:9px 0;display:grid;grid-template-columns:7.5em 1fr;column-gap:12px;align-items:baseline}
  .tle summary::-webkit-details-marker{display:none}
  .tle summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .tldate{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.78rem;font-weight:600;color:var(--ink-2);grid-row:span 2}
  .tlmeta{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
  .tltype{color:var(--accent)}
  .tltitle{font-size:.98rem;line-height:1.4;color:var(--ink)}
  .tle details[open] .tltitle{font-weight:600}
  .tlbody{padding:0 0 12px 0;margin-left:calc(7.5em + 12px);font-size:.9rem;color:var(--ink-2)}
  .tlbody p{margin:0 0 6px}
  .tlabout{font-style:italic}
  .tlsrc,.tlfacts{font-size:.82rem;color:var(--ink-3)}
  .tlbody a{color:var(--accent)}
  .tlyear{font-family:Archivo,sans-serif;font-weight:800;font-size:1.05rem;color:var(--ink);padding:18px 0 4px;margin-left:-18px}
  .tltoday{display:flex;align-items:center;gap:10px;margin:22px 0 4px;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
  .tltoday::before,.tltoday::after{content:"";flex:1;height:2px;background:var(--accent)}
  .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  @media (max-width:560px){
    .tle summary{grid-template-columns:1fr}
    .tldate{grid-row:auto}
    .tlbody{margin-left:0}
  }
  @media print{ .tlfilters{display:none} .tle details{display:block} }

/* Jump links at the top of the Figures & sources page. */
  .fjump{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 24px;padding:12px 0;
    border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft)}
  .fjump .pb-lab{margin-right:2px}
  .fjump a{font-family:Archivo,sans-serif;font-size:.92rem;font-weight:600;color:var(--accent);text-decoration:none}
  .fjump a:hover{text-decoration:underline}
  .fjump .sep{width:1px;align-self:stretch;background:var(--rule)}

/* How a figure has been checked against its document (Figures page, the key,
   and the tap-for-details box). "Verified by a human" is filled; "Checked by
   AI" is outlined; "Not yet checked" is plain. */
  .vtag{display:inline-block;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
    letter-spacing:.04em;line-height:1.5;padding:0 6px;border-radius:3px;border:1px solid transparent;white-space:nowrap}
  .vtag .vd{font-weight:400}
  .vtag.human{background:var(--good);border-color:var(--good);color:#fff}
  .vtag.ai{border-color:var(--accent);color:var(--accent)}
  .vtag.none{border-color:var(--rule);color:var(--ink-3);border-style:dashed}
  :root[data-theme="dark"] .vtag.human{color:#12161D}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .vtag.human{color:#12161D} }
  .fkey{margin:0 0 20px;padding:12px 14px;background:var(--surface);border:1px solid var(--rule-soft)}
  .fkey .pb-lab{margin:0 0 6px}
  .fkey ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
  .fkey li{padding:0;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
  .fkey li::before{content:none}
  .fkey .vtag{margin-right:6px}
  .fkey .kcount{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.75rem;color:var(--ink-3);white-space:nowrap}

/* ==========================================================================
   PHONES
   Most visits are on phones. "Phone" here means a narrow screen, or a short
   one (a phone held sideways).
   ========================================================================== */

/* --- Figures and sources: each kind of figure is a fold-out box (closed at
       the start on phones, by the script on that page) --- */
  details.fgroup > summary{list-style:none;cursor:pointer}
  details.fgroup > summary::-webkit-details-marker{display:none}
  details.fgroup > summary h3{display:flex;align-items:baseline;gap:6px}
  details.fgroup > summary h3::after{content:"\2212";margin-left:auto;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-weight:600;color:var(--ink-3)}
  details.fgroup:not([open]) > summary h3::after{content:"+"}
  details.fgroup > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Share button (footer of every page) --- */
  .sharerow{margin:0 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .share{font-family:Archivo,sans-serif;font-size:.92rem;font-weight:600;color:var(--accent);background:var(--surface);
    border:1px solid var(--accent);border-radius:6px;padding:9px 16px;cursor:pointer;min-height:44px}
  .share:hover{background:var(--wash)}
  .share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .sharemsg{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--ink-3)}

/* --- Map: open-full-screen button, and the full-screen view itself --- */
  .netmap .nmopen{display:none}
  .netmap .nmfullbar{display:none}
  .netmap .nmviews .ts{display:none}

  @media (max-width:700px), (max-height:500px){
    /* the three views as one slim row, right above the map */
    .netmap .nmviews{flex-wrap:nowrap;margin-bottom:8px}
    .netmap .nmviews button{flex:1 1 0;padding:10px 6px;text-align:center;min-height:44px}
    .netmap .nmviews .s,.netmap .nmviews .tl{display:none}
    .netmap .nmviews .ts{display:inline}
    .netmap .nmviews .t{font-size:.86rem}
    /* the map fits the screen width (small) instead of being cut off */
    .netmap figure svg{min-width:0}
    .netmap figure{overflow:hidden}
    html.js-map .netmap figure svg{cursor:zoom-in}
    .netmap .nmopen:not([hidden]){display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
      min-height:48px;margin:0 0 8px;font-family:Archivo,sans-serif;font-size:.95rem;font-weight:700;
      color:#fff;background:var(--accent);border:0;border-radius:6px;cursor:pointer}
    .netmap .nmopen::before{content:"\2922";font-size:1.1em}
    :root[data-theme="dark"] .netmap .nmopen{color:#12161D}
  }
  @media (prefers-color-scheme: dark) and (max-width:700px){
    :root:not([data-theme="light"]) .netmap .nmopen{color:#12161D}
  }

  /* Full screen: the figure fills the screen, the three views sit pinned along
     the bottom, and a bar at the top has Close (and, held upright, a hint to
     turn the phone). The key and caption are below the map - scroll to them. */
  html.nm-lock,html.nm-lock body{overflow:hidden}
  .netmap.nm-full figure{position:fixed;inset:0 0 58px 0;z-index:100;margin:0;width:auto;max-width:none;
    transform:none;border:0;box-shadow:none;overflow:auto;padding:0 10px 10px;-webkit-overflow-scrolling:touch}
  .netmap.nm-full figure svg{min-width:0;width:100%;height:calc(100dvh - 58px - 52px);cursor:default}
  @media (orientation:portrait){ .netmap.nm-full figure svg{height:auto;margin-top:12px} }
  .netmap.nm-full .nmfullbar{display:flex;align-items:center;justify-content:space-between;gap:10px;
    position:sticky;top:0;z-index:1;background:var(--surface);padding:6px 0;min-height:52px}
  .netmap .nmrotate{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;color:var(--ink-3)}
  .netmap .nmrotate::before{content:"\21BB\00a0"}
  @media (orientation:landscape){ .netmap .nmrotate{visibility:hidden} }
  .netmap .nmclose{margin-left:auto;font-family:Archivo,sans-serif;font-size:.92rem;font-weight:700;min-height:44px;
    padding:8px 14px;border:1px solid var(--rule);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
  .netmap.nm-full .nmviews{position:fixed;left:0;right:0;bottom:0;z-index:101;margin:0;width:auto;max-width:none;
    transform:none;height:58px;flex-wrap:nowrap;border-width:1px 0 0}
  .netmap.nm-full .nmviews button{flex:1 1 0;padding:8px 6px;text-align:center}
  .netmap.nm-full .nmviews .s,.netmap.nm-full .nmviews .tl{display:none}
  .netmap.nm-full .nmviews .ts{display:inline}

/* --- Bigger touch areas on touch screens, without changing the look: the
       padding reaches past the text, so a near miss still counts --- */
  @media (pointer:coarse){
    .fact{padding:6px 2px;margin:-6px -2px}
    .fmeta a,.fvmeta a,.frep,.fjump a,.tlsrc a,.tlfacts a,.upd li a,.updmore a,.buildstamp a,
    .factnote a,.factpop .fall,.factpop .fd,.eyebrow a,.slist a{padding:8px 0;margin:-8px 0}
    .pb-seg a,.pb-site a{min-height:40px;display:inline-flex;align-items:center}
    .chip{min-height:36px}
  }

/* --- Narrow screens: a slimmer Reading mode bar, and on Figures and sources
       the Jump-to row stays pinned (the search box scrolls away) --- */
  @media (max-width:560px){
    .modebar{padding:7px 0 6px;margin-bottom:20px;gap:6px 10px}
    .modebar #modenote,.modebar .lab{display:none}
    .modebar .seg{width:100%}
    .modebar .seg button{flex:1 1 0;padding:9px 10px}
    .fsearch{position:static}
    .fjump{position:sticky;top:0;z-index:6;background:var(--paper);flex-wrap:nowrap;overflow-x:auto;
      white-space:nowrap;padding:10px 0;margin-bottom:16px;-webkit-overflow-scrolling:touch}
    .fjump .pb-lab{display:none}
  }
  @media print{ .sharerow,.nmopen,.nmfullbar{display:none !important} }

/* --- Claims: a small superscript "source" mark after a sourced statement.
       It opens the same details box as a figure. Patrick's own opinions carry
       no mark. --- */
  .fact.srcmark{border:0;background:none;padding:0 1px;margin:0;font:inherit;color:var(--accent);cursor:pointer;
    text-decoration:none;line-height:1}
  .fact.srcmark sup{font-family:Georgia,"Times New Roman",serif;font-size:.8em;font-weight:700;line-height:0}
  .fact.srcmark:hover sup,.fact.srcmark:focus-visible sup{text-decoration:underline}
  @media (pointer:coarse){ .fact.srcmark{padding:8px 3px;margin:-8px -1px} }

/* --- "Sources on this slide" (built by app.js from the slide's tappable items) --- */
  .slsrc{margin:12px 0 0;border-top:1px solid var(--rule-soft);padding-top:8px}
  .slsrc summary{cursor:pointer;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.04em;
    color:var(--ink-3);list-style:none;padding:6px 0}
  .slsrc summary::-webkit-details-marker{display:none}
  .slsrc summary::before{content:"+ ";color:var(--accent);font-weight:700}
  .slsrc[open] summary::before{content:"\2212 "}
  .slsrc ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
  .slsrc li{padding:0;font-size:.88rem;line-height:1.45;color:var(--ink-2)}
  .slsrc li::before{content:none}
  .slsrc .slsrc-item{display:inline;border:0;background:none;padding:0;font:inherit;color:var(--ink);text-align:left;
    cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px}
  .slsrc .slsrc-doc{display:block;font-size:.8rem;color:var(--ink-3)}
  @media print{ .slsrc{display:none} }
/* A figure worked out from facts (a sum or a count): dashed rather than dotted
   underline; tapping it opens the slide's source list. */
  .calc{border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;
    text-decoration:underline dashed;text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:var(--ink-3)}
  .calc:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Figures and sources: how much has been checked. One 100% bar, a 2px gap
       between states, the same colours as the tags; "not yet checked" is also
       hatched so the states differ without colour. Labels carry the numbers. --- */
  .ckbar{display:flex;gap:2px;height:14px;margin:4px 0 8px;background:var(--surface)}
  .ckseg{display:block;min-width:4px;flex-basis:0}
  .ckseg:first-child{border-radius:4px 0 0 4px} .ckseg:last-child{border-radius:0 4px 4px 0}
  .ckseg:only-child{border-radius:4px}
  .ck-human{background:var(--good)}
  .ck-ai{background:var(--accent)}
  .ck-none{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 1px var(--ink-3)}
  .cklabels{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 4px;font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:11px;color:var(--ink-2)}
  .ckl{display:inline-flex;align-items:center;gap:6px}
  .ckl i{display:inline-block;width:12px;height:12px;border-radius:3px}
  .ckl.ck-human,.ckl.ck-ai,.ckl.ck-none{background:none;box-shadow:none}
  .ckl.ck-human i{background:var(--good)} .ckl.ck-ai i{background:var(--accent)}
  .ckl.ck-none i{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 1px var(--ink-3)}
  .ckl b{color:var(--ink);font-weight:600}
  @media (forced-colors:active){ .ckseg,.ckl i{forced-color-adjust:none;border:1px solid CanvasText} }

/* --- Reader checks: the "Matches / Doesn't match" form in the details box --- */
  .rck{margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--rule-soft)}
  .rck-q{font-family:Archivo,sans-serif;font-weight:700;font-size:.92rem;margin:0 0 8px}
  .rck-row{display:flex;gap:8px}
  .rck-v{flex:1 1 0;min-height:44px;font-family:Archivo,sans-serif;font-weight:600;font-size:.92rem;cursor:pointer;
    border:1px solid var(--accent);border-radius:6px;background:var(--surface);color:var(--accent)}
  .rck-v[aria-pressed="true"]{background:var(--accent);color:#fff}
  :root[data-theme="dark"] .rck-v[aria-pressed="true"]{color:#12161D}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rck-v[aria-pressed="true"]{color:#12161D} }
  .rck-more{margin:10px 0 0;display:grid;gap:8px}
  .rck-more[hidden],.rck-f[hidden]{display:none}
  .rck-f{display:grid;gap:3px;font-size:.85rem;color:var(--ink-2)}
  .rck-f input,.rck-f textarea{font:inherit;font-size:1rem;padding:8px 10px;border:1px solid var(--rule);border-radius:6px;
    background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
  .rck-c{font-size:.85rem;color:var(--ink-2);display:flex;align-items:center;gap:6px}
  .rck-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
  .rck-send{justify-self:start;min-height:44px;padding:8px 22px;font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;
    border:0;border-radius:6px;background:var(--accent);color:#fff;cursor:pointer}
  .rck-send:disabled{opacity:.6;cursor:default}
  :root[data-theme="dark"] .rck-send{color:#12161D}
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .rck-send{color:#12161D} }
  .rck-note{font-size:.78rem;color:var(--ink-3);margin:0}
  .rck-status{font-size:.85rem;color:var(--ink-2);margin:6px 0 0}
  .rck-status:empty{display:none}
  .rck-done{font-size:.92rem;color:var(--ink);margin:0}
  .fmeta .frc{margin-left:10px;border:0;background:none;padding:0;font:inherit;font-family:Archivo,sans-serif;font-weight:600;
    color:var(--accent);cursor:pointer;text-decoration:none;white-space:nowrap}
  .factpop{max-height:80vh}

/* A claim's value is a quotation: it goes under its description and wraps. */
  .fitem.is-claim .fhead{display:block}
  .fitem.is-claim .fval{display:block;white-space:normal;text-align:left;font-family:inherit;font-weight:400;font-style:italic;margin-top:4px}

/* ==========================================================================
   HOME PAGE (src/index.njk): introduction, what the site is, coming up,
   a card per project, how figures are checked, how to get involved.
   ========================================================================== */
  .homepage h1{margin-bottom:10px}
  .hwhat{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2px;margin:6px 0 36px;
    background:var(--rule-soft);border:1px solid var(--rule-soft)}
  .hpoint{background:var(--surface);padding:14px 16px}
  .hpoint h2{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1rem;margin:0 0 4px;color:var(--ink)}
  .hpoint p{margin:0;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
  .hh{display:block;font-family:Archivo,sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.01em;margin:36px 0 12px}
  .homepage section{scroll-margin-top:20px}
  .hup{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
  .hup li{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--rule-soft);margin:0}
  .hup li::before{content:none}
  .hup .dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8rem;font-weight:700;color:var(--accent)}
  .hup a{color:var(--ink)}
  .homepage .pjtag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
  .hmore{margin:10px 0 0;font-size:.92rem}
  .hmore a,#checks a,#involved a{color:var(--accent)}
  .hcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
  .hcard{display:flex;flex-direction:column;gap:8px;padding:18px 18px 16px;background:var(--surface);border:1px solid var(--rule);
    box-shadow:var(--shadow);color:inherit;text-decoration:none;transition:border-color .12s}
  .hcard:hover{border-color:var(--accent)}
  .hcard:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .hc-name .pjtag{margin-left:0}
  .hc-title{font-family:Archivo,sans-serif;font-weight:800;font-size:1.15rem;line-height:1.25;color:var(--ink)}
  .hc-stage{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--accent)}
  .hc-about{font-size:.95rem;line-height:1.5;color:var(--ink-2)}
  .hc-rows{display:grid;gap:6px;border-top:1px solid var(--rule-soft);padding-top:10px;font-size:.88rem;line-height:1.45;color:var(--ink-2)}
  .hc-row{display:grid;grid-template-columns:4.6em 1fr;gap:8px}
  .hc-k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-3);padding-top:2px}
  .hc-go{margin-top:auto;padding-top:6px;font-family:Archivo,sans-serif;font-weight:700;font-size:.95rem;color:var(--accent)}
  #checks .fkey{margin-bottom:12px}
  #involved ul{margin:0}
  @media (max-width:560px){
    .hup li{grid-template-columns:1fr;gap:2px}
  }

/* Coming up: the project tag sits on the first line, level with the date, so
   readers can scan down the tags for the projects they follow. */
  .hup li{align-items:start}
  .hup .dt{line-height:18px}
  .hup-body{display:flex;flex-direction:column;gap:4px}
  .hup-tags{display:flex;flex-wrap:wrap;gap:4px;line-height:18px}
  .hup-tags .pjtag{margin-left:0;line-height:16px}
  @media (max-width:560px){
    .hup li{grid-template-columns:auto 1fr;column-gap:10px;row-gap:4px}
    .hup-body{display:contents}
    .hup-body > a{grid-column:1 / -1}
  }