/* client-side-pmo (2026-10-05): the operating handbook.
   Linked only from article-client-side-pmo.html. The article is set as a
   reference handbook page. Its fore-edge carries a printed thumb index: ten
   colored bleed tabs stepped down the edge, one per section, in three color
   groups. The tab for the section being read slides out from behind the page.
   Finished state (no JS, reduced motion): every tab is out, a full edge index. */

.hbk{
  --ink:#16150f; --ink2:#33312a; --mut:#6b6660; --hair:#d6d0c3; --hair2:#e4dfd3;
  --paper:#f7f5f0; --paper2:#efece4; --navy:#0e1330; --nv:#16304F;
  --red2:#A93A3A; --gold:#B8862F;
  --rail:168px; --peek:22px; --pl:clamp(16px,9vw,132px); --pr:clamp(20px,5vw,72px);
  background:var(--paper);
}
.hbk .hb-main ::selection{background:var(--nv);color:var(--paper);}
.hbk .hb-main a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;}
.hbk .art-rail{display:none !important;}
.hb-g1{--tc:#16304F;--tx:#f7f5f0;}
.hb-g2{--tc:#B8862F;--tx:#16150f;}
.hb-g3{--tc:#A93A3A;--tx:#f7f5f0;}

/* ---------- the book: page on the left, fore-edge on the right ---------- */
.hbk .hb-book{padding:0;
  background:linear-gradient(90deg,var(--paper) calc(50% + min(620px,50%) - var(--rail)),var(--paper2) 0);}
.hb-inner{width:min(1240px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) var(--rail);}
.hb-page{position:relative;min-width:0;padding:0 var(--pr) clamp(3rem,6vw,5rem) var(--pl);color:var(--ink2);
  box-shadow:1px 0 0 var(--hair),4px 0 10px -6px rgba(22,21,15,.18);background:var(--paper);z-index:1;}
.hb-page section{padding:0;}

/* ---------- title page ---------- */
.hb-title{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);column-gap:clamp(2rem,4vw,3.6rem);align-items:start;padding:clamp(2rem,5vw,3.4rem) 0 clamp(2.4rem,5vw,3.6rem);border-bottom:1px solid var(--ink);}
.hb-title .back-link{grid-column:1 / -1;justify-self:start;}
.hb-nw{white-space:nowrap;}
.hbk .hb-title .back-link{margin-bottom:2.4rem;}
.hb-kind{margin:0 0 1.1rem;font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--ink2);}
.hb-kind span{font-weight:500;color:var(--mut);}
.hbk .hb-title h1{margin:0;max-width:12ch;font-size:clamp(2.6rem,5.2vw,4.3rem);font-weight:500;line-height:1;letter-spacing:-.035em;color:var(--ink);}
.hbk .hb-title .dek{max-width:40ch;margin:1.6rem 0 0;font-size:clamp(1.18rem,2vw,1.42rem);line-height:1.45;color:var(--ink2);}
.hbk .hb-title .article-meta{display:flex;gap:1.4rem;margin-top:1.4rem;}
.hb-colophon{display:grid;grid-template-columns:1fr;gap:1rem;max-width:30rem;margin:2.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--hair);}
.hb-colophon dt{font-family:var(--sans);font-size:.82rem;font-weight:600;color:var(--ink);margin-bottom:.25rem;}
.hb-colophon dd{margin:0;font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--ink2);}

/* ---------- shared text ---------- */
.hb-prose{max-width:38rem;}
.hbk .hb-prose p{margin:0 0 1.15rem;font-size:1.14rem;line-height:1.66;color:var(--ink2);}
.hbk .hb-prose b{color:var(--ink);font-weight:600;}
.hb-lab{display:flex;align-items:center;gap:.55rem;margin:0 0 .45rem;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);}
.hb-lab::before{content:"";width:.62rem;height:.62rem;background:var(--tc,var(--nv));flex:none;}

.hb-front{padding:clamp(2.6rem,6vw,4.4rem) 0 0;}
.hb-principle{max-width:44rem;margin:0 0 clamp(2.4rem,5vw,3.4rem);}
.hbk .hb-principle .hb-big{margin:.3rem 0 .8rem;font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.14;letter-spacing:-.02em;color:var(--ink);font-weight:500;}
.hbk .hb-principle p{margin:0;font-size:1.14rem;line-height:1.6;max-width:38rem;}

/* figures */
.hb-fig{margin:2.2rem 0 2.4rem;max-width:44rem;}
.hb-wide{max-width:none;}
.hb-figt{display:block;margin:0 0 .9rem;padding-top:.7rem;border-top:1px solid var(--ink);font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink);}
.hb-figt span{display:block;font-weight:500;color:var(--mut);font-size:.86rem;margin-top:.1rem;}
.hb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* bars */
.hb-bar{display:grid;grid-template-columns:11.5rem minmax(0,1fr) 3.4rem;gap:1rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--hair2);}
.hb-bar .k{font-family:var(--sans);font-size:.92rem;color:var(--ink2);}
.hb-bar .t{display:block;height:14px;background:var(--paper2);}
.hb-bar .t i{display:block;height:100%;background:var(--nv);transform-origin:0 50%;}
.hb-bar-v .t i{background:var(--red2);}
.hb-bar b{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;}

/* contents: the thumb index key */
.hb-key{margin:.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--ink);}
.hbk .hb-key .hb-keyh{margin:0 0 .4rem;font-size:1.5rem;font-weight:500;}
.hb-keyg{margin:1.1rem 0 .3rem;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--mut);}
.hb-key ol{list-style:none;margin:0 calc(-1 * var(--pr)) 0 0;padding:0;}
.hb-key li{margin:0;border-top:1px solid var(--hair2);}
.hb-key a{display:grid;grid-template-columns:1.8rem minmax(0,1fr) 3.1rem;align-items:center;gap:.8rem;min-height:2.8rem;color:var(--ink);}
.hb-key .n{font-family:var(--sans);font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink2);}
.hb-key .t{font-family:var(--serif);font-size:1.02rem;line-height:1.3;padding:.4rem 0;}
.hb-key i{align-self:stretch;background:var(--tc);margin:3px 0;}
.hb-key a:hover .t{text-decoration:underline;text-decoration-color:var(--tc);text-underline-offset:4px;}

/* ---------- a section opener ---------- */
.hb-ch{padding-top:clamp(4rem,8vw,6.4rem) !important;scroll-margin-top:62px;}
.hb-open{position:relative;margin:0 0 2rem;padding:1rem 4.4rem 0 0;border-top:1px solid var(--ink);margin-right:calc(-1 * var(--pr));padding-right:calc(var(--pr) + 3.6rem);}
.hb-thumb{position:absolute;right:0;top:0;width:3.1rem;height:6.4rem;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.55rem;
  background:var(--tc);color:var(--tx);font-family:var(--sans);font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;}
.hb-run{margin:0 0 1rem;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink2);}
.hbk .hb-open h2{margin:0;max-width:22ch;font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:500;line-height:1.08;letter-spacing:-.028em;color:var(--ink);}
.hbk .hb-open .hb-sum{margin:1.1rem 0 0;max-width:36rem;font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.32rem);line-height:1.45;color:var(--ink2);}

/* lever and field notes */
.hb-lever{max-width:38rem;margin:2rem 0;padding:1rem 0;border-top:2px solid var(--tc);border-bottom:1px solid var(--hair);}
.hbk .hb-lever p:last-child{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.5;color:var(--ink);}
.hb-field{max-width:36rem;margin:2.2rem 0 0 clamp(0rem,4vw,2.6rem);}
.hbk .hb-field p:last-child{margin:0;font-family:var(--sans);font-size:.97rem;line-height:1.62;color:var(--ink2);}
.hbk .hb-field b{color:var(--ink);font-weight:600;}

/* definitions */
.hb-defs{margin:1.6rem 0 2rem;max-width:44rem;}
.hb-defs>div{display:grid;grid-template-columns:12rem minmax(0,1fr);gap:1.4rem;padding:1rem 0;border-top:1px solid var(--hair);}
.hb-defs>div:last-child{border-bottom:1px solid var(--hair);}
.hb-defs dt{font-family:var(--serif);font-size:1.2rem;font-weight:600;line-height:1.3;color:var(--ink);}
.hb-defs dt span{display:block;font-family:var(--sans);font-size:.82rem;font-weight:500;color:var(--mut);margin-top:.2rem;}
.hb-defs dd{margin:0;font-size:1.06rem;line-height:1.6;color:var(--ink2);}
.hb-defs-on dt{box-shadow:inset 0 -.42em 0 rgba(22,48,79,.14);justify-self:start;align-self:start;} /* QA 2026-10-05: align-self keeps the marker under the words instead of at the foot of the row */
.hb-defs-sm dt{font-size:1.06rem;}
.hb-defs-sm dd{font-size:1rem;}
.hb-types>div{grid-template-columns:13rem minmax(0,1fr);}

/* quote */
.hb-quote{max-width:40rem;margin:2.2rem 0 1.4rem;padding:0;}
.hbk .hb-quote p{margin:0;font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,1.85rem);line-height:1.3;letter-spacing:-.015em;color:var(--ink);}
.hb-quote cite{display:block;margin-top:.8rem;font-family:var(--sans);font-style:normal;font-size:.86rem;font-weight:500;color:var(--mut);}

/* hairline tables */
.hb-tablewrap{overflow-x:auto;}
.hb-tbl{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:.94rem;line-height:1.45;}
.hb-tbl th,.hb-tbl td{text-align:left;vertical-align:top;padding:.62rem .9rem .62rem 0;border-bottom:1px solid var(--hair2);}
.hb-tbl thead th{font-size:.84rem;font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);padding-top:0;}
.hb-tbl tbody th{font-weight:600;color:var(--ink);}
.hb-tbl td{color:var(--ink2);}
.hb-two tbody th{width:22%;}
.hb-two td:last-child{color:var(--ink);}
.hb-two thead th:last-child{color:var(--nv);}
.hb-cad{max-width:38rem;margin:0 0 2rem;}
.hb-cad th{width:12rem;}
.hb-spec td{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;}
.hb-spec th{font-weight:500 !important;color:var(--ink2) !important;}
.hb-trouble .hb-tbl td:first-child{width:50%;color:var(--ink);}
.hb-trouble tr.g th{padding-top:1.2rem;font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.08rem;color:var(--ink);border-bottom:1px solid var(--tc);}

/* phase strip */
.hb-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative;}
.hb-phases::before{content:"";position:absolute;left:0;right:0;top:1.85rem;height:2px;background:var(--tc);}
.hb-phases li{position:relative;padding:0 .9rem 0 0;}
.hb-phases b{display:block;font-family:var(--serif);font-size:1.12rem;font-weight:600;color:var(--ink);}
.hb-phases em{display:block;margin:.55rem 0 .6rem;padding-top:.7rem;font-family:var(--sans);font-style:normal;font-size:.84rem;font-weight:600;color:var(--nv);position:relative;}
.hb-phases em::before{content:"";position:absolute;left:0;top:-.28rem;width:.7rem;height:.7rem;background:var(--paper);border:2px solid var(--tc);}
.hb-phases span{display:block;font-family:var(--sans);font-size:.88rem;line-height:1.45;color:var(--ink2);}

/* duties of the office */
.hb-duties{list-style:none;margin:0;padding:0;counter-reset:d;}
.hb-duties li{display:grid;grid-template-columns:15rem minmax(0,1fr) 15rem;grid-template-areas:"h p w" "h p l";gap:.3rem 1.8rem;padding:1.1rem 0;border-bottom:1px solid var(--hair);}
.hbk .hb-duties h3{grid-area:h;margin:0;font-size:1.22rem;font-weight:600;line-height:1.25;color:var(--ink);}
.hbk .hb-duties p{margin:0;font-family:var(--sans);font-size:.94rem;line-height:1.5;color:var(--ink2);}
.hb-duties li>p:nth-of-type(1){grid-area:p;}
.hb-duties .wo{grid-area:w;}
.hb-duties .lv{grid-area:l;}
.hb-duties li>p.lv:nth-of-type(2){grid-area:w;}
.hb-duties .wo span,.hb-duties .lv span{display:block;font-weight:600;color:var(--ink);font-size:.84rem;}
.hb-duties .lv{color:var(--ink) !important;}

/* lists: warning signs, standards, checks */
.hb-warn{max-width:34rem;margin:0 0 1.6rem;padding:0;list-style:none;counter-reset:w;}
.hb-warn li{counter-increment:w;display:grid;grid-template-columns:2.2rem 1fr;padding:.55rem 0;border-bottom:1px solid var(--hair2);font-family:var(--sans);font-size:.98rem;color:var(--ink);}
.hb-warn li::before{content:counter(w);font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;}
.hb-std{list-style:none;margin:0;padding:0;}
.hb-std li{position:relative;padding:.7rem 0 .7rem 1.6rem;border-bottom:1px solid var(--hair2);font-size:1.06rem;line-height:1.58;color:var(--ink2);}
.hb-std li::before{content:"";position:absolute;left:0;top:1.28rem;width:.55rem;height:.55rem;background:var(--tc);}
.hb-std b{color:var(--ink);font-weight:600;}
.hb-note{margin:1rem 0 0;max-width:40rem;font-family:var(--sans);font-size:.94rem;line-height:1.6;color:var(--ink2);}

/* escalation ladder: rungs step down the page like the tabs on its edge */
.hb-ladder{list-style:none;margin:0;padding:0;}
.hb-ladder li{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;gap:1rem;align-items:baseline;margin-left:calc(var(--i) * 9%);padding:.8rem 0 .8rem .2rem;border-top:3px solid var(--tc);}
.hb-ladder li:last-child{border-bottom:1px solid var(--hair);}
.hb-ladder .r{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--ink2);font-variant-numeric:tabular-nums;}
.hb-ladder .w{font-family:var(--serif);font-size:1.16rem;color:var(--ink);line-height:1.3;}
.hb-ladder .c{font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--ink);text-align:right;}

/* integration seams */
.hb-map{position:relative;width:100%;aspect-ratio:640/300;margin:.4rem 0 1rem;}
.hb-map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.hb-map .arc{fill:none;stroke:var(--tc);stroke-width:2.4;}
.hb-map .tick path{stroke:var(--hair);stroke-width:1.4;stroke-dasharray:3 4;}
.hb-map .bar{fill:var(--nv);}
.hb-map .b2{fill:var(--red2);}
.hb-map .nd{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;}
.hb-map .lb{position:absolute;transform:translateX(-50%);font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--ink);white-space:nowrap;}
.hb-map .lb-bar{transform:none;}
.hb-map .lb i,.hb-map .num{display:inline-grid;place-items:center;width:1.45rem;height:1.45rem;background:var(--ink);color:var(--paper);font-style:normal;font-family:var(--sans);font-size:.76rem;font-weight:600;}
.hb-map .lb i{margin-right:.45rem;}
.hb-map .num{position:absolute;transform:translate(-50%,-50%);}
.hb-seamlist{margin:0;padding:0 0 0 1.6rem;max-width:40rem;}
.hb-seamlist li{padding:.35rem 0 .35rem .3rem;font-size:1.04rem;line-height:1.55;color:var(--ink2);}
.hb-seamlist li::marker{font-family:var(--sans);font-weight:600;color:var(--ink);}
.hb-seamlist b{color:var(--ink);font-weight:600;}

/* 90 days */
.hb-ruler{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;height:12px;margin:0 0 2.4rem;}
.hb-ruler i{background:var(--tc);}
.hb-ruler i:nth-child(1){opacity:.45;}
.hb-ruler i:nth-child(2){opacity:.72;}
.hb-ruler span{position:absolute;top:18px;transform:translateX(-50%);font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--ink2);font-variant-numeric:tabular-nums;}
.hb-ruler span:first-of-type{transform:none;}
.hb-ruler span:last-of-type{transform:translateX(-100%);}
.hb-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;}
.hbk .hb-cols h3{margin:0 0 .7rem;font-size:1.3rem;font-weight:500;line-height:1.2;color:var(--ink);}
.hb-cols h3 span{display:block;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink2);margin-bottom:.2rem;}
.hb-check{list-style:none;margin:0;padding:0;}
.hb-check li{position:relative;padding:.5rem 0 .5rem 1.6rem;border-top:1px solid var(--hair2);font-family:var(--sans);font-size:.92rem;line-height:1.5;color:var(--ink2);}
.hb-check li::before{content:"";position:absolute;left:0;top:.78rem;width:.72rem;height:.72rem;border:1.5px solid var(--ink2);}

/* nine blocks inside one loop */
.hb-loop{position:relative;padding:2.6rem 2.2rem;border:1.5px solid var(--tc);}
.hb-loop .lp{position:absolute;padding:0 .6rem;background:var(--paper);font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);line-height:1.6;}
.hb-loop .lp::after{content:"";display:inline-block;margin-left:.45rem;border:5px solid transparent;vertical-align:middle;}
.lp1::after{border-left-color:var(--tc) !important;border-right-width:0 !important;}
.lp2::after{border-top-color:var(--tc) !important;border-bottom-width:0 !important;}
.lp3::after{border-right-color:var(--tc) !important;border-left-width:0 !important;}
.lp4::after{border-bottom-color:var(--tc) !important;border-top-width:0 !important;}
.lp1{top:-.7rem;left:2rem;}
.lp2{top:-.7rem;right:2rem;}
.lp3{bottom:-.7rem;right:2rem;}
.lp4{bottom:-.7rem;left:2rem;}
.hb-grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;}
.hb-grid9>div{padding:1rem 1.2rem;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);}
.hb-grid9>div:nth-child(3n){border-right:0;}
.hb-grid9>div:nth-child(n+7){border-bottom:0;}
.hb-grid9 dt{font-family:var(--serif);font-size:1.08rem;font-weight:600;line-height:1.25;color:var(--ink);}
.hb-grid9 dd{margin:.3rem 0 0;font-family:var(--sans);font-size:.88rem;line-height:1.45;color:var(--ink2);}

/* charter check: the one framed object, a form */
.hb-form{max-width:32rem;padding:1.2rem 1.4rem 1.3rem;background:#fbfaf6;border:1px solid var(--ink2);}
.hb-form .hb-figt{border-top:0;padding-top:0;}
.hb-owners{list-style:none;margin:0;padding:0;counter-reset:o;}
.hb-owners li{counter-increment:o;display:grid;grid-template-columns:1.8rem 9.5rem minmax(0,1fr) auto;gap:.6rem;align-items:end;padding:.55rem 0;font-family:var(--sans);font-size:.94rem;color:var(--ink);}
.hb-owners li::before{content:counter(o);color:var(--mut);font-variant-numeric:tabular-nums;font-size:.86rem;}
.hb-owners i{border-bottom:1px dotted var(--ink2);height:1em;}
.hb-owners em{font-style:normal;font-size:.8rem;font-weight:600;color:var(--red2);}
.hb-owners li.gap span{font-weight:600;}

/* back matter */
.hb-back{margin-top:clamp(4rem,8vw,6rem);padding-top:1rem !important;border-top:3px double var(--ink);}
.hbk .hb-back h2{margin:0 0 1.4rem;font-size:clamp(1.9rem,3.6vw,2.85rem);font-weight:500;line-height:1.08;letter-spacing:-.028em;}
.hb-questions{max-width:38rem;margin:1.8rem 0;}
.hb-questions ol{margin:.4rem 0 0;padding:0;list-style:none;counter-reset:q;}
.hb-questions li{counter-increment:q;display:grid;grid-template-columns:2rem 1fr;padding:.75rem 0;border-top:1px solid var(--hair);font-family:var(--serif);font-size:1.2rem;line-height:1.45;color:var(--ink);}
.hb-questions li::before{content:counter(q);font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--ink2);padding-top:.2rem;}
.hbk .hb-refs{max-width:46rem;margin:2.6rem 0 0;padding-top:1rem;border-top:1px solid var(--hair);font-family:var(--sans);font-size:.84rem;line-height:1.6;color:var(--mut);}
.hb-refs b{color:var(--ink);}

/* ---------- the fore-edge: thumb index ---------- */
.hb-edge{position:relative;
  background:repeating-linear-gradient(90deg,rgba(22,21,15,.09) 0 1px,transparent 1px 3px) 0 0/9px 100% no-repeat;}
.hb-tabs{position:sticky;top:62px;height:calc(100vh - 62px);max-height:58rem;display:flex;flex-direction:column;gap:3px;padding:12px 0 18px;overflow:hidden;}
.hb-tab{flex:1 1 0;min-height:0;display:flex;align-items:center;justify-content:flex-end;background:var(--tc);color:var(--tx);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);}
.hb-tab .l{flex:1;min-width:0;padding:0 .4rem 0 .8rem;font-family:var(--serif);font-size:.98rem;line-height:1.15;}
.hb-tab .n{flex:none;width:var(--peek);text-align:center;font-family:var(--sans);font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;}
.hbk .hb-main .hb-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;}

/* ---------- motion: the current tab slides out as you read ---------- */
@media screen and (prefers-reduced-motion:no-preference){
  .hb-book.armed .hb-tab{transform:translateX(calc((1 - var(--p,0)) * (var(--peek) - 100%)));transition:transform .16s linear;will-change:transform;}
  .hb-book.armed .hb-tab .l{opacity:calc(var(--p,0) * 1.6 - .5);}
  .hb-book.armed .hb-tabs:hover .hb-tab,.hb-book.armed .hb-tab:focus-visible{transform:none;transition-duration:.25s;}
  .hb-book.armed .hb-tabs:hover .hb-tab .l,.hb-book.armed .hb-tab:focus-visible .l{opacity:1;}
}

/* ---------- narrower screens ---------- */
@media (max-width:1100px){
  .hbk{--rail:132px;}
  .hb-title{grid-template-columns:1fr;}
  .hb-key{margin-top:2.4rem;}
  .hbk .hb-title h1{max-width:none;}
  .hb-duties li{grid-template-columns:13rem minmax(0,1fr);grid-template-areas:"h p" "h w" "h l";}
}
@media (max-width:820px){
  .hb-cols{grid-template-columns:1fr;gap:1.6rem;}
  .hb-duties li{grid-template-columns:1fr;grid-template-areas:"h" "p" "w" "l";gap:.45rem;}
  .hb-grid9{grid-template-columns:1fr 1fr;}
  .hb-grid9>div,.hb-grid9>div:nth-child(3n),.hb-grid9>div:nth-child(n+7){border-right:0;border-bottom:1px solid var(--hair);}
  .hb-grid9>div:nth-child(odd){border-right:1px solid var(--hair);}
  .hb-grid9>div:last-child{border-bottom:0;border-right:0;}
}
@media (max-width:700px){
  .hbk{--rail:28px;--peek:8px;--pl:16px;--pr:12px;}
  .hbk .hb-book{background:linear-gradient(90deg,var(--paper) calc(100% - var(--rail)),var(--paper2) 0);}
  .hb-tab{justify-content:center;}
  .hb-tab .l{display:none;}
  .hb-tab .n{width:100%;font-size:.78rem;}
  .hb-book.armed .hb-tab .n{opacity:calc(var(--p,0) * 2 - .6);}
  .hb-edge{background-size:5px 100%;}
  .hb-colophon{grid-template-columns:1fr;gap:1rem;}
  .hb-bar{grid-template-columns:minmax(0,1fr) 3rem;gap:.3rem .8rem;}
  .hb-bar .k{grid-column:1 / -1;}
  .hb-key a{grid-template-columns:2rem minmax(0,1fr) 1.6rem;gap:.6rem;}
  .hb-key .t{font-size:1.06rem;}
  .hb-open{padding-right:calc(var(--pr) + 2.8rem);}
  .hb-thumb{width:2.3rem;height:5rem;font-size:.9rem;}
  .hb-defs>div,.hb-types>div{grid-template-columns:1fr;gap:.35rem;}
  .hb-phases{grid-template-columns:1fr;gap:0;padding-left:1.4rem;}
  .hb-phases::before{left:.32rem;right:auto;top:.5rem;bottom:.5rem;width:2px;height:auto;}
  .hb-phases li{padding:0 0 1rem;}
  .hb-phases em{position:static;margin:.15rem 0 .25rem;padding-top:0;}
  .hb-phases em::before{left:-1.4rem;top:-1.45rem;}
  .hb-two thead{display:none;}
  .hb-two,.hb-two tbody,.hb-two tr,.hb-two th,.hb-two td{display:block;width:auto !important;}
  .hb-two tr{padding:.7rem 0;border-bottom:1px solid var(--hair);}
  .hb-two th,.hb-two td{border:0;padding:.12rem 0;}
  .hb-two td::before{display:block;font-size:.8rem;font-weight:600;color:var(--mut);}
  .hb-two td:nth-of-type(1)::before{content:"The SI PMO";}
  .hb-two td:nth-of-type(2)::before{content:"The client-side PMO";color:var(--nv);}
  .hb-trouble thead{display:none;}
  .hb-trouble .hb-tbl,.hb-trouble tbody,.hb-trouble tr,.hb-trouble td,.hb-trouble th{display:block;width:auto !important;}
  .hb-trouble tr{padding:.6rem 0;border-bottom:1px solid var(--hair2);}
  .hb-trouble tr.g{border-bottom:0;}
  .hb-trouble td{border:0;padding:.1rem 0;}
  .hb-trouble td:last-child::before{content:"Fix: ";font-weight:600;color:var(--ink);}
  .hb-cad th,.hb-spec th{width:auto;}
  .hb-spec td{white-space:normal;}
  .hb-ladder li{grid-template-columns:1.6rem minmax(0,1fr);margin-left:calc(var(--i) * 1.1rem);}
  .hb-ladder .c{grid-column:2;text-align:left;}
  .hb-map .lb{font-size:.74rem;}
  .hb-map .lb i,.hb-map .num{width:1.2rem;height:1.2rem;font-size:.7rem;}
  .hb-loop{padding:2rem 1rem;}
  .lp1,.lp4{left:.8rem;} .lp2,.lp3{right:.8rem;}
  .hb-loop .lp{font-size:.78rem;padding:0 .35rem;}
  .hb-grid9{grid-template-columns:1fr;}
  .hb-grid9>div,.hb-grid9>div:nth-child(odd){border-right:0;padding:.8rem .2rem;}
  .hb-owners li{grid-template-columns:1.4rem 8.9rem minmax(0,1fr);} /* QA 2026-10-05: wide enough that "Human resources" stays on one line */
  .hb-owners em{grid-column:3 / -1;margin-top:-.35rem;}
  .hb-form{padding:1rem;}
  .hb-field{margin-left:0;}
  .hbk .hb-prose p{font-size:1.08rem;}
}

/* ---------- bands ---------- */
.hb-bandwrap{width:min(1240px,calc(100vw - 32px));margin:0 auto;}
.hbk .hb-kit{padding:clamp(2rem,4vw,3rem) 0 1rem;}
.hbk .hb-cta{padding:1rem 0 clamp(2.4rem,5vw,3.6rem);}

/* ---------- print: the page, its section thumbs, no edge rail ---------- */
@media print{
  .hbk .reveal{opacity:1 !important;transform:none !important;}
  .hbk,.hbk .hb-book,.hb-page{background:#fff !important;box-shadow:none !important;}
  .hb-inner{display:block;}
  .hb-edge{display:none !important;}
  .hb-page{padding:0 0 2rem;}
  .hb-key ol,.hb-open{margin-right:0;}
  .hb-ch{break-before:auto;}
  .hb-open,.hb-fig,.hb-field,.hb-lever{break-inside:avoid;}
  .hb-tab,.hb-thumb,.hb-key i,.hb-bar .t i,.hb-map .bar,.hb-ruler i{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}

/* ---------- restored images (2026-10-05) ---------- */
/* the operating model on a navy band that runs the full width of the page, edge to edge */
.hb-plate-dk{margin:clamp(2.6rem,5vw,3.6rem) calc(-1 * var(--pr)) 0 calc(-1 * var(--pl));padding:clamp(2.2rem,4.5vw,3.4rem) var(--pr) clamp(2rem,4vw,3rem) var(--pl);
  background:#16304F;display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:1.4rem clamp(1.6rem,3vw,2.6rem);align-items:end;}
.hb-plate-dk img{display:block;width:100%;height:auto;}
.hb-plate-dk .hb-figt{margin:0;color:#f7f5f0;border-top-color:rgba(247,245,240,.5);max-width:18rem;}
.hb-plate-dk .hb-figt span{color:rgba(247,245,240,.78);}
/* the escalation ladder as a wide plate, breaking out past the text column */
.hb-plate{max-width:780px;margin-top:2.8rem;}
.hb-plate img{display:block;width:100%;height:auto;margin-bottom:.9rem;}
.hb-plate .hb-figt{margin:0;}
@media (max-width:900px){
  .hb-plate-dk{grid-template-columns:minmax(0,1fr);}
  .hb-plate-dk .hb-figt{max-width:none;}
}
@media print{.hb-plate-dk{background:none;}.hb-plate-dk .hb-figt,.hb-plate-dk .hb-figt span{color:#16150f;}}

/* ---------- Color 2026-10-09: green leads (the client's side of the line),
   gold and navy carry the other two tab groups, red stays the accent for
   gaps and value lost. ---------- */
.hbk{--grn:#2E7D5B;--grd:#1F5E42;--grt:#F1F8F4;--gt:#FBF3E0;--redt:#FDF3F3;--red:#e5322d;}
.hb-g1{--tc:#2E7D5B;--tx:#fff;}
.hb-g3{--tc:#16304F;--tx:#f7f5f0;}
.hbk .hb-main ::selection{background:var(--grn);color:#fff;}

/* title page: green kind line and contents numerals */
.hb-kind{color:var(--grd);}
.hbk .hb-title{border-bottom-color:var(--grd);}

/* the first principle on a ruled green leaf, bleeding to the page edges */
.hb-principle{max-width:none;margin:0 calc(-1 * var(--pr)) clamp(2.4rem,5vw,3.4rem) calc(-1 * var(--pl));padding:clamp(1.8rem,4vw,2.8rem) var(--pr) clamp(1.8rem,4vw,2.6rem) var(--pl);
  background-color:var(--grt);
  background-image:repeating-linear-gradient(0deg,transparent 0 33px,rgba(46,125,91,.13) 33px 34px);
  border-bottom:2px solid var(--grn);}
.hb-principle .hb-lab{color:var(--grd);}
.hb-principle .hb-lab::before{background:var(--grn);}
.hbk .hb-principle .hb-big{max-width:24ch;font-size:clamp(1.9rem,3.8vw,2.85rem);color:var(--grd);}
.hbk .hb-principle p:last-child{max-width:38rem;color:var(--ink);}
.hb-front .hb-bar-v .t i{background:var(--red2);}
.hb-front .hb-bar-v b{color:var(--red2);}

/* the two PMOs: the client-side column carries the green */
.hb-two thead th:last-child{color:var(--grd);border-bottom:2px solid var(--grn);}
.hb-two td:last-child{background:var(--grt);padding-left:.9rem;}
.hb-defs-on dt{box-shadow:inset 0 -.42em 0 rgba(46,125,91,.22);color:var(--grd);}

/* escalation ladder: each rung a step hotter */
.hb-ladder li:nth-child(1){--tc:var(--grn);}
.hb-ladder li:nth-child(2){--tc:var(--gold);}
.hb-ladder li:nth-child(3){--tc:var(--red2);}
.hb-ladder li:nth-child(4){--tc:var(--red);}
.hb-ladder .r{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;background:var(--tc);color:#fff;font-size:.88rem;}
.hb-ladder li:nth-child(2) .r{color:var(--ink);}
.hb-ladder li:nth-child(4) .r{color:var(--ink);background:none;border:2px solid var(--red);}
.hb-ladder .c{color:var(--tc);}
.hb-ladder li:nth-child(2) .c{color:#8A6413;}
.hb-ladder li:nth-child(4) .c{color:var(--red2);}
.hb-ladder li{align-items:center;}

/* troubleshooting group heads in the section color */
.hb-trouble .g th{color:var(--grd);border-bottom:2px solid var(--grn);padding-top:1.3rem;}

/* first 90 days: a three-phase green ruler, light to dark */
.hb-ninety .hb-ruler i{background:var(--grn);opacity:1;}
.hb-ninety .hb-ruler i:nth-child(1){background:#a9d3be;}
.hb-ninety .hb-ruler i:nth-child(2){background:#5fa685;}
.hb-ninety .hb-ruler{height:14px;}
.hb-ninety .hb-cols h3 span{color:var(--grd);}
.hb-ninety .hb-cols > div{padding-top:.9rem;border-top:3px solid var(--grn);}
.hb-ninety .hb-cols > div:nth-child(1){border-top-color:#a9d3be;}
.hb-ninety .hb-cols > div:nth-child(2){border-top-color:#5fa685;}

/* PMO benchmarks: green figures, then high against low as paired bars */
.hb-kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--hair);}
.hb-kpi div{padding:.4rem 1.2rem 1.1rem;border-left:1px solid var(--hair);}
.hb-kpi div:first-child{padding-left:0;border-left:0;}
.hb-kpi b{display:block;font-family:var(--serif);font-size:clamp(2.6rem,4.6vw,3.5rem);font-weight:400;line-height:1;letter-spacing:-.03em;color:var(--grn);}
.hb-kpi span{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.86rem;line-height:1.4;color:var(--ink2);}
.hb-pair{margin-top:1.2rem;}
.hbk .hb-pair .hb-pk{margin:1rem 0 .35rem;font-family:var(--sans);font-size:.88rem;font-weight:600;color:var(--ink);}
.hb-pr{display:grid;grid-template-columns:10.5rem minmax(0,1fr) 5.2rem;gap:.9rem;align-items:center;padding:.3rem 0;}
.hb-pr span{font-family:var(--sans);font-size:.88rem;color:var(--ink2);}
.hb-pr i{display:block;height:14px;width:calc(100% * var(--w));background:var(--hair);}
.hb-pr.hb-hi i{background:var(--grn);}
.hb-pr b{font-family:var(--serif);font-size:1.3rem;font-weight:500;color:var(--ink2);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;}
.hb-pr.hb-hi b{color:var(--grd);}

/* charter check: the usual gaps tinted */
.hb-owners li.gap{background:var(--redt);margin:0 -.6rem;padding-left:.6rem;padding-right:.6rem;}

/* closing questions on a deep green leaf, page edge to page edge */
.hb-questions{max-width:none;margin:2.2rem calc(-1 * var(--pr)) 2rem calc(-1 * var(--pl));padding:clamp(1.8rem,4vw,2.6rem) var(--pr) clamp(1.6rem,3.5vw,2.2rem) var(--pl);background:var(--grd);
  background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.2px);background-size:16px 16px;}
.hb-questions .hb-lab{color:#fff;}
.hb-questions .hb-lab::before{background:#a9d3be;}
.hb-questions ol{max-width:40rem;}
.hb-questions li{color:#fff;border-top-color:rgba(255,255,255,.28);font-size:clamp(1.2rem,2vw,1.4rem);}
.hb-questions li::before{font-family:var(--serif);font-size:1.6rem;font-weight:400;color:#a9d3be;padding-top:0;line-height:1;}
.hb-questions ::selection{background:#fff;color:var(--grd);}

@media (max-width:760px){
  .hb-kpi{grid-template-columns:1fr;}
  .hb-kpi div{display:grid;grid-template-columns:5.6rem minmax(0,1fr);align-items:baseline;gap:.8rem;padding:.8rem 0;border-left:0;border-top:1px solid var(--hair2);}
  .hb-kpi div:first-child{border-top:0;}
  .hb-kpi b{font-size:2.4rem;}
  .hb-kpi span{margin-top:0;}
  .hb-pr{grid-template-columns:minmax(0,1fr) auto;row-gap:.25rem;}
  .hb-pr i{grid-column:1 / -1;grid-row:2;}
  .hb-two td:last-child{padding:.3rem .6rem;}
}
@media print{
  .hb-principle,.hb-questions,.hb-two td,.hb-pr i,.hb-ladder .r,.hb-owners li.gap,.hb-ninety .hb-cols > div{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
@media print{
  .hb-principle,.hb-questions{margin-left:0;margin-right:0;padding-left:0;padding-right:0;background:none !important;}
  .hb-questions{border-top:2px solid var(--grn);}
  .hb-questions .hb-lab,.hb-questions li{color:var(--ink);}
  .hb-questions li{border-top-color:var(--hair);}
  .hb-questions li::before{color:var(--grn);}
}

/* 2026-10-10 review (Dave): the contents swatches ran out to the page edge and looked
   like they should meet the edge tabs, but the tabs are spaced to the screen height,
   so they never lined up. The swatches now sit inside the contents column as small keys. */
.hb-key ol{margin-right:0;}
.hb-key a{grid-template-columns:1.8rem minmax(0,1fr) .6rem;}
.hb-key i{align-self:center;justify-self:end;width:.6rem;height:1.5rem;margin:0;}

/* QA 2026-10-10 (layout after the color pass)
   1. The page has no visible left edge (left of the sheet is the same paper), so the
      leaves that bleed "to the page edge" stopped dead in open paper on wide screens
      (250px short at 1740). On screen they now run on to the left edge of the window. */
@media screen{
  .hb-principle,.hb-plate-dk,.hb-questions{position:relative;}
  .hb-principle::before,.hb-plate-dk::before,.hb-questions::before{content:"";position:absolute;top:0;bottom:0;right:100%;width:50vw;background:inherit;pointer-events:none;}
  .hb-principle::before{bottom:-2px;border-bottom:inherit;}
/* 2. Each section's thumb block sat flush on the fore-edge, right beside the edge tabs,
      which are spaced to the screen height, so the two never lined up (the same fault as
      the contents swatches). On screen the thumb now hangs from the section rule at the
      end of the text column; print, which has no edge tabs, keeps it on the edge. */
  .hb-thumb{right:var(--pr);}
}
/* 3. The operating-model band was the same navy as tabs 8 to 10 and fused with them on
      the fore-edge. It takes the deep brand navy of the closing bands instead. */
.hb-plate-dk{background:#0e1330;}
/* 4. First 90 days: the ruler segments and the column rules under them were on different
      gaps (4px against 2rem), so each rule started and stopped short of its segment.
      Where the columns sit side by side the ruler now uses the column grid. */
@media (min-width:821px){
  .hb-ninety .hb-ruler{gap:2rem;}
  .hb-ninety .hb-ruler span:nth-of-type(2){left:calc((100% - 4rem) / 3 + 1rem) !important;}
  .hb-ninety .hb-ruler span:nth-of-type(3){left:calc((100% - 4rem) * 2 / 3 + 3rem) !important;}
}
/* 5. Phone phase line: each check square sat a line above its phase, the first one on
      top of the figure title. It now sits beside the phase name. */
@media (max-width:700px){
  .hb-phases em::before{top:.42rem;}
}