/* Written Before: pages-b.css (step 8 prototype, builder B, 2026-11-10; review round the same evening)
   Page rules for books/index.html, the two book pages, how-we-read.html, about.html, changelog.html, 404.html.
   Loaded after site.css on those pages only. Sizes only from the --fs-* scale in site.css, mono caps tracked
   var(--track), no Old Standard under 17. Container queries on .hp: max-width 1079px is the phone layout. */

/* --- builder B: shared page frame (title block, text sections, the number rail on How we read) --- */
.pg{padding-bottom:84px}
.pg.bp{padding-bottom:0}
.pg .ih{padding-top:26px;align-items:start;align-content:start}
.pg .ih > *{grid-column:3/10}
.pg h1{font:700 var(--fs-52)/1.06 var(--old);letter-spacing:-.014em;margin-top:12px;text-wrap:balance}
.pg .deck{font:400 var(--fs-20)/1.5 var(--sans);margin-top:12px;max-width:700px;text-wrap:pretty}
.pg .deck + .deck{margin-top:6px}
.pg .deck a,.tx a,.pg .side a,.ab .lt a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--grey)}
.pg .deck a:hover,.tx a:hover,.pg .side a:hover,.ab .lt a:hover{color:var(--red);text-decoration-color:currentColor}
.pg .ih > .side{grid-column:10/13;grid-row:2/span 6;margin-top:10px;border-top:1px solid var(--ink);padding-top:12px}
.side h2{font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--red);padding-bottom:10px}
.side p{font:400 var(--fs-14)/1.55 var(--sans);color:var(--grey)}
.side p + p{margin-top:10px}
.side p b{color:var(--ink);font-weight:600}
.side .o{font:400 var(--fs-17)/1.2 var(--old);color:var(--ink)}
/* on this page: the idea pages' list look; out of the row flow at 1440, so section 1 starts under the deck */
.pg .toc li{border-top:1px solid var(--hair);list-style:none}
.pg .toc li a{display:grid;grid-template-columns:28px 1fr;align-items:baseline;padding:6px 0;font:400 var(--fs-14)/1.35 var(--sans);text-decoration:none}
.pg .toc li a span{font:500 var(--fs-12)/1 var(--mono);color:var(--grey)}
.pg .toc li a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.pg .toc li b{font-weight:400}
.hw .ih{position:relative}
.hw .ih > .toc{grid-column:auto;grid-row:auto;position:absolute;top:48px;right:var(--pad);width:calc((100% - 2 * var(--pad) - 264px) / 4 + 48px);margin:0}
.hw .ih + .hs{margin-top:48px}

/* a text section: the number leads in the rail (as years do), the heading with its rule, the text, a side figure */
.hs{margin-top:60px;align-items:start;scroll-margin-top:12px}
.hs > .rn{grid-column:1/3;grid-row:1/span 3;justify-self:end;text-align:right;padding-top:13px}
.rn b{display:block;font:500 var(--fs-40)/1 var(--mono);letter-spacing:-.02em;color:var(--ink)}
.rn b small{font-size:var(--fs-23);letter-spacing:0}
.rn span{display:block;font:400 var(--fs-13)/1.45 var(--mono);color:var(--grey);margin:8px 0 0 auto;max-width:15em;text-wrap:balance}
.rn b + span + b{margin-top:16px}
.hs > .sh2{grid-column:3/10;grid-row:1}
.hs > .tx{grid-column:3/9;grid-row:2}
.hs > .fig{grid-column:10/13;grid-row:1/span 3}
.tx p{font:400 var(--fs-17)/1.6 var(--sans);margin-top:14px;max-width:640px;text-wrap:pretty}
.tx p:first-child{margin-top:16px}
.tx i{font-style:normal}
/* a label word inside our prose: its glyph, its colour, mono caps */
.lw{font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;white-space:nowrap}
.lw .gl{width:10px;height:10px;margin-right:5px;vertical-align:0}
.lw.c{color:var(--red)} .lw.x{color:var(--blue)}

/* three levels of evidence: one row each, the credit line as it reads on an idea page */
.lvt{list-style:none;margin-top:18px;border-top:1px solid var(--ink);max-width:640px}
.lvt li{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:14px 0 15px;border-bottom:1px solid var(--hair)}
.lvt .n{font:500 var(--fs-34)/1 var(--mono);letter-spacing:-.02em;text-align:right}
.lvt .k{font:500 var(--fs-13)/1.4 var(--mono);color:var(--ink)}
.lvt .d{font:400 var(--fs-17)/1.6 var(--sans);margin-top:5px}
.lvt .d .cl{font:400 var(--fs-13)/1.5 var(--mono);color:var(--grey);white-space:nowrap}
/* results of the summary test: a small collation */
.rst{list-style:none;margin-top:18px;border-top:1px solid var(--ink);max-width:640px}
.rst li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;align-items:baseline;padding:11px 0 12px;border-bottom:1px solid var(--hair);font:400 var(--fs-17)/1.5 var(--sans)}
.rst li b{font:500 var(--fs-15)/1 var(--mono);white-space:nowrap}
.rst li b small{font:400 var(--fs-13)/1 var(--mono);color:var(--grey);margin-left:4px}
/* side ledgers: the 74 candidate links; the counts carried from the homepage */
.ldg{border-top:1px solid var(--ink);padding-top:11px}
.ldg h3{font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--red);padding-bottom:9px}
.ldg ol{list-style:none}
.ldg li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:6px 0 7px;border-top:1px solid var(--hair);font:400 var(--fs-14)/1.4 var(--sans);color:var(--grey)}
.ldg li b{font:500 var(--fs-15)/1 var(--mono);color:var(--ink);text-align:right}
.ldg li.in{padding-left:18px;grid-template-columns:22px minmax(0,1fr)}
.ldg li.in b{font-size:var(--fs-13)}
.ldg li.t{border-top:1px solid var(--ink);color:var(--ink)}
.ldg li.t b{font-size:var(--fs-17)}
.ldg .nt{font:400 var(--fs-13)/1.5 var(--sans);color:var(--grey);margin-top:8px}
/* what we do not do */
.nots{list-style:none;margin-top:16px;border-top:1px solid var(--ink);max-width:640px}
.nots li{padding:11px 0 12px 26px;border-bottom:1px solid var(--hair);font:400 var(--fs-17)/1.6 var(--sans);position:relative;text-wrap:pretty}
.nots li::before{content:"";position:absolute;left:2px;top:23px;width:12px;border-top:1.5px solid var(--ink)}

@container hp (max-width:1079px){
  .pg .ih{display:block;padding-top:22px}
  .pg h1{font-size:var(--fs-34);line-height:1.08;margin-top:12px}
  .pg .deck{font-size:var(--fs-17);line-height:1.55}
  .pg .ih > .side{margin-top:24px}
  .hw .ih > .toc{position:static;width:auto;margin-top:24px}
  .hw .ih + .hs{margin-top:44px}
  /* the figure goes under its heading, not above the rule (type director 8) */
  .hs{display:flex;flex-direction:column;margin-top:44px}
  .hs > .sh2{order:-2;font-size:var(--fs-23);line-height:1.2}
  .hs > .rn{order:-1;justify-self:auto;align-self:flex-start;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;text-align:left;padding:14px 0 0}
  .rn b{font-size:var(--fs-29)}
  .rn b small{font-size:var(--fs-18)}
  .rn span{margin:0;max-width:none}
  .rn b + span + b{margin-top:8px}
  .tx p{font-size:var(--fs-17)}
  .hs > .fig{margin-top:26px}
  .lvt li{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
  .lvt .n{font-size:var(--fs-26)}
  .lvt .d .cl{white-space:normal}
  .rst li{font-size:var(--fs-15)}
  .rst li b{text-align:right}
  .rst li b small{display:block;margin:5px 0 0}
}

/* --- builder B: books/index.html, the A to Z --- */
.bx .ih > .lgd{grid-column:3/13;padding:22px 0 0;margin-top:0}
.bx .lgd .e b{color:var(--red)}
.bx .lgd .sq{display:inline-block;width:8px;height:8px;background:var(--red);margin-right:6px;vertical-align:0}
.azn{margin-top:30px;padding-top:12px;padding-bottom:12px;position:relative;align-items:baseline}
.azn::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:5px;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink)}
.azn p{grid-column:1/3;justify-self:end;font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--grey)}
.azn div{grid-column:3/13;display:flex;flex-wrap:wrap;gap:0 2px;margin-left:-10px}
.azn a{display:block;min-width:36px;padding:9px 10px 10px;text-align:center;font:500 var(--fs-17)/1 var(--mono);color:var(--ink)}
.azn a:hover{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.azl{padding:0 var(--pad)}
.az{border-top:1px solid var(--ink);align-items:start}
.az-l{grid-column:1/3;position:sticky;top:14px;align-self:start;font:700 var(--fs-40)/1 var(--old);letter-spacing:-.01em;padding-top:13px}
.az-r{grid-column:3/13;list-style:none}
.bk2{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:24px;align-items:baseline;padding:15px 0 16px;border-top:1px solid var(--hair);scroll-margin-top:12px}
.az-r > li:first-child{border-top:0}
.bt2{grid-column:1/5;min-width:0}
.ti{font:400 var(--fs-20)/1.3 var(--sans);letter-spacing:-.004em;color:var(--ink);text-wrap:pretty}
.ti.o{font:400 var(--fs-23)/1.22 var(--old);letter-spacing:0}
.ti a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.ti a:hover{color:var(--red)}
.bk2:target .ti span{background:var(--hl);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .14em;margin:0 -.14em}
.au{font:400 var(--fs-14)/1.45 var(--sans);color:var(--grey);margin-top:5px}
.au .y{font:400 var(--fs-13)/1 var(--mono);white-space:nowrap}
.aka{font:400 var(--fs-13)/1.45 var(--sans);color:var(--grey);margin-top:3px}
.bi2{grid-column:5/11;list-style:none;min-width:0}
/* each idea: its tag (the label with its name and its evidence), then the idea */
.bi2 li{display:grid;grid-template-columns:300px minmax(0,1fr);column-gap:20px;align-items:baseline;padding:3px 0 4px}
.bi2 li + li{margin-top:3px}
.bi2 .lab2{white-space:normal;line-height:1.35;padding-left:17px;text-indent:-17px}
.bi2 .lab2.e{color:var(--red)}
.bi2 .lab2 .sq,.bpr .lab2 .sq{display:inline-block;width:8px;height:8px;background:var(--red);margin:0 7px 0 1px;vertical-align:0}
.bi2 .i{font:400 var(--fs-15)/1.4 var(--sans)}
.bi2 .i a{text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em}
.bi2 .i a:hover{color:var(--red);text-decoration-color:currentColor}
.bk2.see{display:block;padding:10px 0 11px}
.bk2.see p{font:400 var(--fs-15)/1.45 var(--sans);color:var(--grey)}
.bk2.see p .st{color:var(--ink)}
.bk2.see a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em}
.bk2.see a:hover{color:var(--red);text-decoration-color:currentColor}

@container hp (max-width:1079px){
  .bx .lgd{gap:6px 16px}
  .azn{display:block;margin-top:26px;padding:12px var(--pad) 8px}
  .azn::before{left:var(--pad);right:var(--pad)}
  .azn p{justify-self:start;margin-bottom:4px}
  .azn div{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:0;margin-left:0}
  .azn a{min-width:0;padding:12px 0;text-align:left}
  .az{display:block}
  .az-l{position:static;font-size:var(--fs-29);padding:14px 0 4px}
  .bk2{display:block;padding:13px 0 14px}
  .az-r > li:first-child{border-top:1px solid var(--hair)}
  .ti{font-size:var(--fs-18)}
  .ti.o{font-size:var(--fs-20)}
  .bi2{margin-top:9px}
  .bi2 li{display:flex;flex-direction:column;padding:5px 0 6px}
  .bi2 .lab2{order:-1}
  .bi2 li + li{margin-top:2px;border-top:1px solid var(--hair)}
  .bi2 .i{margin-top:3px}
}

/* --- builder B: books/meditations.html, books/atomic-habits.html --- */
.bp h1{font-size:var(--fs-64);line-height:1.02;margin-top:16px}
.bp .by{font:600 var(--fs-20)/1.35 var(--sans);margin-top:14px}
.bp .by span{font:400 var(--fs-15)/1 var(--mono);color:var(--grey);margin-left:6px;white-space:nowrap}
.bp .ih > .rd-r{margin-top:14px}
.bp .side .get{font-size:var(--fs-15);color:var(--ink);line-height:1.55}
.bp .side .src{font:400 var(--fs-13)/1.5 var(--mono);color:var(--grey)}
.bpl{padding:0 var(--pad);margin-top:52px}
.bph > .sh2{grid-column:3/10}
.bpr{padding-top:36px;align-items:start;scroll-margin-top:12px}
/* the margin: the year on the earliest row only, the idea's number on the others (type director 6) */
.bpr-y{grid-column:1/3;justify-self:end;text-align:right;font:500 var(--fs-23)/1 var(--mono);color:var(--grey);white-space:nowrap;margin-top:1px;position:relative}
.bpr.e .bpr-y{color:var(--red)}
.bpr-y small{font-size:var(--fs-12)}
.bpr-y small:not(.i){display:block;margin-top:5px}
.bpr.e .bpr-y::after{content:"";position:absolute;right:-17px;top:7px;width:9px;height:9px;background:var(--red)}
.bpr-m{grid-column:3/10;min-width:0}
.bpr-n{font:400 var(--fs-23)/1.22 var(--old);letter-spacing:0;text-wrap:pretty}
.bpr-n a:hover{color:var(--red)}
.bpr .lab2{margin-top:9px;display:block;white-space:normal}
.bpr .lab2.e{color:var(--red)}
.bpr .why{margin-top:10px}
.bpr-s{font:400 var(--fs-17)/1.6 var(--sans);margin-top:10px;max-width:640px;text-wrap:pretty}
.bpr-s a,.pr .pc a{text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em}
.bpr-s a:hover,.pr .pc a:hover{color:var(--red);text-decoration-color:currentColor}
/* the two lines under each idea: the earliest source in its band, then this book's own line (the homepage stack in small) */
.pr{list-style:none;margin-top:14px;max-width:640px}
.pr li{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:18px;align-items:baseline;padding:12px 16px 14px 0}
.pr li.e{background:var(--band);border-top:2px solid var(--red)}
.pr li.solo{grid-template-columns:minmax(0,1fr);padding-left:18px}
.pr .py{font:500 var(--fs-15)/1.3 var(--mono);text-align:right;text-wrap:balance}
.pr li.e .py{color:var(--red)}
.pr .py small{font-size:var(--fs-13)}
.pr .pq{font:400 var(--fs-20)/1.42 var(--old);letter-spacing:0;text-wrap:pretty}
.pr .pq.new{font:400 var(--fs-17)/1.55 var(--sans)}
.pr .pc{font:400 var(--fs-14)/1.5 var(--sans);color:var(--grey);margin-top:6px}
.pr .pc .d{font-weight:600;color:var(--ink)}
.bpr > .cr2{grid-column:10/13;margin-top:4px}
.bpr:target .bpr-n a{background:var(--hl)}
.bp .made{margin-top:72px}
.bp .made .mt a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.bp .made .mt a:hover{color:var(--red)}

@container hp (max-width:1079px){
  .bp h1{font-size:var(--fs-40);line-height:1.04;margin-top:14px}
  .bp .by span{display:block;margin:6px 0 0}
  .bpl{margin-top:40px}
  .bph{display:block}
  .bph > .sh2{font-size:var(--fs-23);line-height:1.2}
  .bpr{padding-top:30px}
  .bpr-y{grid-column:1;font-size:var(--fs-18);white-space:normal;margin-top:3px}
  .bpr-y small:not(.i){margin-top:4px}
  .bpr.e .bpr-y::after{display:none}
  .bpr-m{grid-column:2}
  .bpr-n{font-size:var(--fs-20)}
  .pr li{display:block;padding:11px 12px 12px}
  .pr li.solo{padding-left:12px}
  .pr .py{text-align:left;margin-bottom:5px}
  .pr .pq{font-size:var(--fs-18)}
  .bpr > .cr2{grid-column:2;margin-top:14px;font-size:var(--fs-12);max-width:none}
}

/* --- builder B: about.html --- */
.ab .lt{grid-column:3/9}
.ab .lt p{font:400 var(--fs-18)/1.6 var(--sans);margin-top:18px;max-width:660px;text-wrap:pretty}
.ab .lt p.lead{font:400 var(--fs-20)/1.5 var(--sans);letter-spacing:-.005em;margin-top:28px}
.ab .lt b{font-weight:600}
.ab .lt .sig{margin-top:34px;padding-top:14px;border-top:1px solid var(--ink);max-width:660px;font:600 var(--fs-20)/1.2 var(--sans)}
.ab .rep{grid-column:10/13;grid-row:1;align-self:start;margin-top:118px;border-top:1px solid var(--ink);padding-top:16px}
.ab .rep svg{display:block;width:72px;height:72px}
.ab .rep .w{font:700 var(--fs-29)/1 var(--old);letter-spacing:-.01em;margin-top:16px}
/* gaps Alex must fill: a small note, the yellow only on its tag */
.todo{font:400 var(--fs-13)/1.5 var(--mono);color:var(--grey);border:1px dashed var(--grey);padding:2px 7px 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.todo b{font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--ink);background:var(--hl);padding:2px 6px 3px;margin-right:2px}
p.todo{display:block;padding:10px 12px 11px;max-width:660px}
.ab .lt p.todo{font:400 var(--fs-13)/1.5 var(--mono);margin-top:20px}
@container hp (max-width:1079px){
  .ab{display:flex;flex-direction:column}
  .ab .lt p{font-size:var(--fs-17)}
  .ab .lt p.lead{font-size:var(--fs-17);line-height:1.55;margin-top:22px}
  .ab .rep{order:-1;align-self:stretch;margin-top:24px;padding-top:14px;display:flex;align-items:center;gap:16px}
  .ab .rep svg{width:56px;height:56px}
  .ab .rep .w{margin-top:0;font-size:var(--fs-23)}
}

/* --- builder B: changelog.html --- */
.clg{padding:0 var(--pad);margin-top:44px}
.clt{width:100%;border-collapse:collapse;border-top:3px solid var(--ink)}
.clt thead th{font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);text-align:left;padding:12px 24px 11px 0;border-bottom:1px solid var(--ink)}
.clt td{vertical-align:baseline;padding:18px 24px 20px 0;border-bottom:1px solid var(--hair);font:400 var(--fs-15)/1.5 var(--sans)}
.clt th:last-child,.clt td:last-child{padding-right:0}
.clt .dt{width:196px;padding-right:48px;text-align:right;font:500 var(--fs-15)/1.35 var(--mono);white-space:nowrap}
.clt thead th.dt{text-align:right;font:500 var(--fs-12)/1 var(--mono)}
.clt .id{width:22%}
.clt .id a{font:400 var(--fs-23)/1.25 var(--old);letter-spacing:0;text-decoration:underline;text-decoration-color:var(--hair);text-decoration-thickness:1px;text-underline-offset:.2em}
.clt .id a:hover{color:var(--red);text-decoration-color:currentColor}
.clt .cbk{width:20%}
.clt .cbk b{font-weight:600}
.clt .lb{display:none}
@container hp (max-width:1079px){
  .clg{margin-top:34px}
  .clt thead{display:none}
  .clt,.clt tbody,.clt tr,.clt td{display:block;width:auto}
  .clt .dt,.clt .id,.clt .cbk{width:auto}
  .clt tr{padding:14px 0 16px;border-bottom:1px solid var(--hair)}
  .clt td{border:0;padding:0;margin-top:14px}
  .clt .dt{text-align:left;margin-top:0;padding:0;white-space:normal}
  .clt .lb{display:block;font:500 var(--fs-12)/1 var(--mono);letter-spacing:var(--track);text-transform:uppercase;color:var(--grey);margin-bottom:5px}
  .clt .id a{font-size:var(--fs-20)}
}

/* --- builder B: 404.html: the address sits in the rail like a year, and the line below it is the empty stretch --- */
.nf .ih{min-height:440px;position:relative;align-content:start}
.nf .nfr{grid-column:1/3;grid-row:2;justify-self:end;align-self:start;position:relative;margin-top:19px;height:100%}
.nf .nfr b{display:block;font:500 var(--fs-40)/1 var(--mono);letter-spacing:-.02em;color:var(--grey)}
.nf .nfr::before{content:"";position:absolute;left:calc(100% + 5px);top:20px;width:7px;border-top:1px solid var(--grey)}
.nf .nfr::after{content:"";position:absolute;left:calc(100% + 11.5px);top:20px;height:300px;border-left:1.5px dotted var(--ink);
  -webkit-mask-image:linear-gradient(#000 40%,transparent);mask-image:linear-gradient(#000 40%,transparent)}
.nf .deck{max-width:640px}
.nf .deck a{text-decoration-color:var(--ink)}
@container hp (max-width:1079px){
  .nf .ih{min-height:0;padding-bottom:40px}
  .nf .nfr{justify-self:start;margin:10px 0 2px;height:auto}
  .nf .nfr b{font-size:var(--fs-29)}
  .nf .nfr::before,.nf .nfr::after{display:none}
}