/* Direction B, "the notebook". Every selector is scoped under .dir-b, except the
   few that reach the site's own nav, footer and body; those go through
   body:has(.dir-b), so they apply only on a page that carries this direction.

   Light only (dark mode is out of this pass). The tokens are pinned to their
   light values from site.css so an OS in dark mode does not flip half of them. */

body:has(.dir-b){
  --ground:#F7F1E6; --surface:#EFE6D6; --text:#395145; --link:#474072;
  --meta:#5A6C5F; --meta2:#8A5A2B; --display:#474072;
  --hot:#C5346B; --hot-ink:#BB3166;
  --cairn:#3D6B86; --cairn-wash:rgba(61,107,134,.07);
  --rule:rgba(57,81,69,.20);
  background:var(--ground); color:var(--text);
}
/* The nav and footer wraps are 880px site-wide; on this page they line up with
   the notebook's own edges instead. */
body:has(.dir-b) nav .wrap,
body:has(.dir-b) footer .wrap{max-width:1320px; padding-left:48px; padding-right:48px}
body:has(.dir-b) .themetoggle{display:none} /* light only in this pass */

.dir-b{
  --gut:72px;          /* rail to reading */
  --numw:56px;         /* the margin column for page numbers */
  --step:27px;         /* one line of body text: 17px x 1.6 */
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --ease-pop:cubic-bezier(.34,1.45,.64,1);
}
.dir-b .b-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- the page grid ---------- */
.dir-b .b-page{max-width:1320px; margin:0 auto; padding:20px 48px calc(var(--step) * 4);
  display:grid; grid-template-columns:minmax(340px, 420px) minmax(0, 1fr); gap:0 var(--gut);
  align-items:start}

/* ---------- the rail ---------- */
.dir-b .b-rail{position:sticky; top:var(--rail-top, 24px)}
.dir-b .b-rail__in{display:flex; flex-direction:column; gap:10px}

/* the byline: under the headline, not above it, so the first line the eye
   crosses is the headline itself */
.dir-b .b-who{display:flex; align-items:center; gap:8px; margin:-6px 0 -2px;
  font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); line-height:1.2; color:var(--meta)}
.dir-b .b-who img{width:24px; height:24px; border-radius:50%; display:block;
  box-shadow:0 0 0 1px var(--rule)}
.dir-b .b-who b{font-weight:700; color:var(--display)}

.dir-b .b-h1{font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:32px;
  line-height:1.06; letter-spacing:var(--ls-tight); color:var(--display); margin:0; text-wrap:balance}

.dir-b .b-intro{margin:0; font-size:var(--t-body); line-height:1.45}
.dir-b .b-intro--rest{margin-top:4px}

/* the spectrum as contents: six segments, one per chapter, in order */
.dir-b .b-toc{border-bottom:0; padding-top:6px} /* it is a <nav>, so site.css's nav rule reaches it */
.dir-b .b-toc ol{list-style:none; margin:0; padding:0; display:flex; gap:3px; align-items:flex-end; height:16px}
.dir-b .b-toc li{flex:1; display:flex; align-items:flex-end; height:100%}
.dir-b .b-toc a{display:block; width:100%; height:6px; background:var(--hue); border-radius:2px;
  transform-origin:bottom; transition:height .22s var(--ease-out)}
.dir-b .b-toc a:hover, .dir-b .b-toc a:focus-visible, .dir-b .b-toc a.is-now{height:16px}
.dir-b .b-toc a:focus-visible{outline:2px solid var(--link); outline-offset:3px}
.dir-b .b-toc__now{margin:8px 0 0; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--meta); height:16px; overflow:hidden}
.dir-b .b-toc__n{font-weight:700; color:var(--text)}

/* the two actions */
.dir-b .b-actions{display:flex; flex-direction:column; gap:10px; margin-top:2px}
.dir-b .b-signup{margin:0}
.dir-b .b-signup label{display:block; font-family:"Archivo",system-ui,sans-serif; font-weight:700;
  font-size:var(--t-small); margin:0 0 4px}
.dir-b .b-signup__row{display:flex; gap:0}
.dir-b .b-signup input{flex:1; min-width:0; font:inherit; font-size:16px; color:var(--text);
  background:#FFFDF8; border:1px solid var(--meta); border-right:0; border-radius:2px 0 0 2px; padding:8px 12px}
.dir-b .b-signup input::placeholder{color:var(--meta); opacity:.8}
.dir-b .b-signup input:focus-visible{outline:2px solid var(--link); outline-offset:1px}
.dir-b .b-signup button{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:700;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text); background:transparent;
  border:1px solid var(--text); border-radius:0 2px 2px 0; padding:0 16px; cursor:pointer}
.dir-b .b-signup button:hover{background:var(--text); color:var(--ground)}
.dir-b .b-signup button:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.dir-b .b-signup__msg{margin:6px 0 0; font-size:var(--t-small); min-height:0}
.dir-b .b-signup__msg:empty{display:none}

.dir-b .b-call{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--hot);
  border-radius:3px; padding:8px 16px 14px}
.dir-b .b-call__what{margin:10px 0 0; font-size:var(--t-small); line-height:1.5}
.dir-b .b-call__row{display:flex; align-items:center; gap:14px}
.dir-b .b-call__price{margin:0; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); color:var(--meta); line-height:1.1}
.dir-b .b-call__price b{display:block; font-size:24px; color:var(--hot-ink); letter-spacing:var(--ls-tight)}
.dir-b .b-call__btn{flex:1; display:block; text-align:center; background:var(--hot); color:#FFFFFF; text-decoration:none;
  padding:10px 18px; border-radius:2px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small);
  font-weight:700; letter-spacing:var(--ls-caps); text-transform:uppercase}
.dir-b .b-call__btn:hover{filter:brightness(1.1)}
.dir-b .b-call__btn:focus-visible{outline:2px solid var(--link); outline-offset:3px}

/* ---------- the reading column ---------- */
.dir-b .b-read{counter-reset:note; min-width:0;
  background:linear-gradient(rgba(197,52,107,.32),rgba(197,52,107,.32)) no-repeat;
  background-size:1px 100%; background-position:calc(var(--numw) + 9px) 0}
.dir-b .b-read__head{padding-left:calc(var(--numw) + 20px); margin-bottom:calc(var(--step) * 2)}
.dir-b .b-eyebrow{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro); letter-spacing:.20em;
  text-transform:uppercase; color:var(--meta2); margin:0 0 10px}
.dir-b .b-read__head h2{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-h2); font-weight:700;
  letter-spacing:var(--ls-tight); line-height:1.15; margin:0 0 8px}
.dir-b .b-lede{margin:0; max-width:56ch; opacity:.9}

/* a chapter: a tab in the margin, a rule in the chapter's hue, then its notes */
.dir-b .b-ch{padding:0; margin:0 0 calc(var(--step) * 2); position:relative; scroll-margin-top:24px}
.dir-b .b-ch__head{position:relative; display:grid; grid-template-columns:var(--numw) minmax(0,1fr); gap:0 20px;
  align-items:end; padding-top:4px; margin-bottom:6px}
.dir-b .b-ch__tab{grid-column:1; grid-row:1; justify-self:start; align-self:end; width:40px; height:44px;
  display:flex; align-items:center; justify-content:center; background:var(--hue); color:var(--on);
  font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:20px;
  border-radius:8px 8px 0 0; position:relative; z-index:1}
.dir-b .b-ch__rule{position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--hue);
  transform-origin:left center}
.dir-b .b-ch__title{grid-column:2; grid-row:1; padding-bottom:10px}
.dir-b .b-ch__title h2{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-h2); font-weight:700;
  letter-spacing:var(--ls-tight); line-height:1.15; color:var(--ink); margin:0}
.dir-b .b-ch__title p{margin:2px 0 0; font-size:var(--t-small); color:var(--meta)}

/* a note: page number in the margin, title and dek on the measure */
.dir-b .b-n{display:grid; grid-template-columns:var(--numw) minmax(0,1fr); gap:0 20px;
  padding:20px 0 21px; border-bottom:1px solid var(--rule)}
.dir-b .b-n:not(.b-n--tool){counter-increment:note}
.dir-b .b-n__num{position:relative; width:48px; height:34px; display:flex; align-items:center; justify-content:center;
  margin-top:-3px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums}
.dir-b .b-n__count::before{content:counter(note, decimal-leading-zero)}
.dir-b .b-n__num svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.dir-b .b-n__num path{stroke:var(--hue); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1}
.dir-b .b-n__body{max-width:62ch}
.dir-b .b-n h3{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-lead); font-weight:500;
  line-height:1.3; margin:0 0 6px; text-wrap:pretty}
.dir-b .b-n h3 a{color:var(--text); text-decoration:none; background-image:linear-gradient(var(--hue),var(--hue));
  background-size:0 2px; background-repeat:no-repeat; background-position:0 100%}
.dir-b .b-n h3 a:hover{text-decoration:underline; text-decoration-color:var(--hue); text-underline-offset:4px; text-decoration-thickness:2px}
.dir-b .b-n h3 a:focus-visible{outline:2px solid var(--link); outline-offset:3px; border-radius:2px}
.dir-b .b-n p{margin:0; opacity:.85}
.dir-b .b-n p code{font-size:.88em; background:var(--surface); padding:.05em .35em; border-radius:3px}
.dir-b .b-unwritten{color:var(--meta)}

.dir-b .b-badge{display:inline-block; font-family:"Archivo",system-ui,sans-serif; text-transform:uppercase;
  border-radius:99px; border:1px solid var(--hot); color:var(--hot-ink); font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); padding:2px 8px; margin-left:10px; vertical-align:3px; font-weight:400}
.dir-b .b-badge--cairn{border-color:var(--cairn); color:var(--cairn)}

/* Counselors: one entry in the flow, marked as a tool rather than numbered */
.dir-b .b-n--tool .b-n__num span{font-size:var(--t-micro); letter-spacing:var(--ls-caps); text-transform:uppercase;
  color:var(--hot-ink); border:1px dashed var(--hot); border-radius:3px; padding:3px 5px; line-height:1}
.dir-b .b-n--tool h3{font-weight:700}
.dir-b .b-tiers{margin:14px 0 0; display:grid; gap:8px}
.dir-b .b-tiers > div{display:grid; grid-template-columns:128px minmax(0,1fr); gap:0 14px; align-items:baseline}
.dir-b .b-tiers dt{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--meta)}
.dir-b .b-tiers__call dt{color:var(--hot-ink)}
.dir-b .b-tiers dd{margin:0; font-size:var(--t-small); line-height:1.5; opacity:.9}
.dir-b .b-tiers dd a{font-weight:600; text-underline-offset:3px}

/* Cairn: a slip in the margin, in Cairn's faces and Cairn's colour. It starts
   past the page-number column and runs into the right margin, the one block on
   the page that crosses the reading measure. */
.dir-b .b-cairn{margin:22px 0 22px calc(var(--numw) + 20px + 72px); padding:18px 22px 16px;
  border-left:3px solid var(--cairn); background:linear-gradient(180deg, var(--cairn-wash), rgba(61,107,134,.025)), var(--ground);
  border-radius:0 3px 3px 0; position:relative}
.dir-b .b-cairn__eyebrow{font-family:"Marcellus",Georgia,serif; font-size:var(--t-lead); color:var(--cairn); margin:0 0 6px}
.dir-b .b-cairn__glyph{margin-right:4px}
.dir-b .b-cairn__lede{font-family:"Literata",Georgia,serif; font-size:15px; line-height:1.6; margin:0 0 14px;
  padding-bottom:14px; border-bottom:1px solid rgba(61,107,134,.22)}
.dir-b .b-cairn h3{font-family:"Marcellus",Georgia,serif; font-weight:400; font-size:var(--t-lead); line-height:1.3; margin:0 0 6px}
.dir-b .b-cairn h3 a{color:var(--cairn); text-decoration:none}
.dir-b .b-cairn h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.dir-b .b-cairn h3 a:focus-visible{outline:2px solid var(--cairn); outline-offset:3px}
.dir-b .b-cairn h3 .b-unwritten{color:var(--cairn); opacity:.8}
.dir-b .b-cairn p{font-family:"Literata",Georgia,serif; font-size:15px; line-height:1.6; margin:0}
.dir-b .b-cairn p.b-cairn__by{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--cairn); margin-top:10px}

/* ---------- phone-only action row and flow copies (hidden on wide screens) ---------- */
.dir-b .b-quick{display:none; gap:10px; margin:0}
.dir-b .b-quick a{flex:1 1 auto; display:flex; align-items:center; justify-content:center; white-space:nowrap;
  text-decoration:none; padding:12px 10px; border-radius:2px;
  font-family:"Archivo",system-ui,sans-serif; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.dir-b .b-quick__list{color:var(--text); border:1px solid var(--text)}
.dir-b .b-quick__call{color:#FFFFFF; background:var(--hot); border:1px solid var(--hot)}
.dir-b .b-quick a:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.dir-b .b-flow-actions{display:none; scroll-margin-top:16px}

/* ---------- start with these three: index cards laid on the page ----------
   Stacked, so every title starts on the same left edge as "Start with these
   three" and as every note title in the chapters below. Each card has its own
   margin, like the page: number and star on the left of the notebook's pink
   line. Lighter card stock and the chapter's hue as the top edge. The title is
   the only link; its ::after covers the card so the whole card still clicks. */
.dir-b .b-start{margin:0 0 calc(var(--step) * 2); padding:0} /* site.css pads every <section> 66px */
.dir-b .b-start > h2{padding-left:calc(var(--numw) + 20px); font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--t-h2); font-weight:700; letter-spacing:var(--ls-tight); line-height:1.15; margin:0 0 18px}
.dir-b .b-cards{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
.dir-b .b-card{position:relative; display:grid; grid-template-columns:var(--numw) minmax(0,1fr); gap:0 20px;
  padding:20px 22px 16px 0; background:#FFFDF8; border:1px solid var(--rule); border-radius:3px;
  background-image:linear-gradient(rgba(197,52,107,.32),rgba(197,52,107,.32)); background-repeat:no-repeat;
  background-size:1px 100%; background-position:calc(var(--numw) + 8px) 0;
  box-shadow:0 1px 0 rgba(57,81,69,.10), 0 10px 22px -16px rgba(57,81,69,.45); scroll-margin-top:24px}
.dir-b .b-card::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:5px;
  background:var(--hue); border-radius:3px 3px 0 0; transform-origin:top}
.dir-b .b-card__margin{display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:4px}
.dir-b .b-card__num{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:500;
  color:var(--ink); font-variant-numeric:tabular-nums}
.dir-b .b-card .b-star{width:20px; height:20px}
.dir-b .b-card h3{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-lead); font-weight:700;
  line-height:1.25; letter-spacing:var(--ls-tight); margin:0 0 6px; text-wrap:balance}
.dir-b .b-card__link{color:var(--text); text-decoration:none}
.dir-b .b-card__link::after{content:""; position:absolute; inset:0}
.dir-b .b-card__link:focus-visible{outline:none}
.dir-b .b-card:focus-within{outline:2px solid var(--link); outline-offset:2px}
.dir-b .b-card:hover .b-card__link{text-decoration:underline; text-decoration-color:var(--hue);
  text-decoration-thickness:2px; text-underline-offset:4px}
/* the dek's measure is capped at about 70 characters even on a wide card */
.dir-b .b-card p{margin:0; font-size:16px; line-height:1.5; opacity:.85; max-width:510px}
.dir-b .b-card p.b-card__tag{margin-top:10px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--meta); opacity:1}

/* the star, on the card and on the same note's short line in its chapter */
.dir-b .b-star path{fill:var(--hue); stroke:var(--ink); stroke-width:1.1; stroke-linejoin:round;
  stroke-dasharray:none; stroke-dashoffset:0}
.dir-b .b-n--starred .b-n__num .b-star{position:absolute; inset:auto; top:-5px; right:-3px; width:15px; height:15px}

/* ---------- the homepage's map into /notes/ (2026-10-19) ----------
   One row per chapter under the three cards: the chapter's tab in the margin
   column, its name and line on the measure, the whole row a link to that
   chapter on /notes/. Same margin column and pink line as the chapters, so it
   reads as the notebook's contents page, not a new component. */
.dir-b .b-map{margin:0 0 calc(var(--step) * 2); padding:0}
.dir-b .b-map > h2{padding-left:calc(var(--numw) + 20px); font-family:"Archivo",system-ui,sans-serif;
  font-size:var(--t-h2); font-weight:700; letter-spacing:var(--ls-tight); line-height:1.15; margin:0 0 10px}
.dir-b .b-map__list{list-style:none; margin:0; padding:0}
.dir-b .b-map__list a{display:grid; grid-template-columns:var(--numw) minmax(0,1fr); gap:0 20px; align-items:center;
  padding:12px 0 13px; border-bottom:1px solid var(--rule); color:var(--text); text-decoration:none}
.dir-b .b-map__tab{grid-row:1 / span 2; justify-self:start; width:32px; height:32px; display:flex; align-items:center;
  justify-content:center; background:var(--hue); color:var(--on); border-radius:6px 6px 0 0;
  font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:16px}
.dir-b .b-map__name{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-lead); font-weight:700;
  line-height:1.25; color:var(--ink)}
.dir-b .b-map__line{font-size:var(--t-small); color:var(--meta)}
.dir-b .b-map__list a:hover .b-map__name{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
.dir-b .b-map__list a:focus-visible{outline:2px solid var(--link); outline-offset:2px}
.dir-b .b-map__all{margin:18px 0 0; padding-left:calc(var(--numw) + 20px);
  font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:var(--t-small);
  letter-spacing:var(--ls-caps); text-transform:uppercase}
.dir-b .b-map__all a{color:var(--hot-ink); text-underline-offset:4px}

/* ---------- the homepage blocks under the three cards (2026-10-19) ----------
   Latest talk, what callers say, Counselors, the token spend, Cairn's pages.
   Every heading and body starts on the notebook's measure (past the margin
   column and the pink line), the same left edge as "Start with these three". */
.dir-b .b-talk, .dir-b .b-quotes, .dir-b .b-offer, .dir-b .b-proof, .dir-b .b-cairns{margin:0 0 calc(var(--step) * 2); padding:0}
.dir-b .b-talk > h2, .dir-b .b-quotes > h2, .dir-b .b-cairns > h2{padding-left:calc(var(--numw) + 20px);
  font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-h2); font-weight:700; letter-spacing:var(--ls-tight);
  line-height:1.15; margin:0 0 14px}
.dir-b .b-more-link{margin:12px 0 0; font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:var(--t-small);
  letter-spacing:var(--ls-caps); text-transform:uppercase}
.dir-b .b-more-link a{color:var(--hot-ink); text-underline-offset:4px}

/* the talk: one video, its title and summary, on the measure */
.dir-b .b-talk__body{padding-left:calc(var(--numw) + 20px); max-width:640px}
.dir-b .b-talk__facade, .dir-b .b-talk__player{position:relative; display:block; width:100%; aspect-ratio:16/9; border:0;
  border-radius:3px; overflow:hidden; background:#1c2420; cursor:pointer;
  box-shadow:0 1px 0 rgba(57,81,69,.10), 0 10px 22px -16px rgba(57,81,69,.45)}
.dir-b .b-talk__facade img{width:100%; height:100%; object-fit:cover; display:block}
.dir-b .b-talk__facade:focus-visible{outline:2px solid var(--link); outline-offset:3px}
.dir-b .b-talk__play{position:absolute; left:50%; top:50%; width:68px; height:48px; margin:-24px 0 0 -34px;
  background:var(--hot); border-radius:10px}
.dir-b .b-talk__play::after{content:""; position:absolute; left:27px; top:14px; border-style:solid;
  border-width:10px 0 10px 17px; border-color:transparent transparent transparent #FFFFFF}
.dir-b .b-talk__facade:hover .b-talk__play{filter:brightness(1.1)}
.dir-b .b-talk h3{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-lead); font-weight:700;
  line-height:1.25; margin:14px 0 2px}
.dir-b .b-talk__meta{margin:0 0 6px; font-size:var(--t-small); color:var(--meta)}
.dir-b .b-talk p{margin:0; opacity:.9}
.dir-b .b-talk p.b-talk__meta{opacity:1}

/* what callers say: three quotes, set apart from the notes, each with its name */
.dir-b .b-quote{margin:0 0 14px calc(var(--numw) + 20px); padding:16px 20px 14px; max-width:640px;
  background:#FFFDF8; border:1px solid var(--rule); border-radius:3px}
.dir-b .b-quote blockquote{margin:0}
.dir-b .b-quote blockquote p{margin:0; font-size:16px; line-height:1.55}
.dir-b .b-quote figcaption{margin-top:8px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small);
  font-weight:700; color:var(--display)}
.dir-b .b-quotes .b-more-link{padding-left:calc(var(--numw) + 20px)}

/* Counselors keeps its entry shape from the chapter list, rules above and below */
.dir-b .b-offer .b-n{border-top:1px solid var(--rule)}

/* the token spend: one big number, one line, one link */
.dir-b .b-proof{padding-left:calc(var(--numw) + 20px)}
.dir-b .b-proof__eyebrow{margin:0 0 4px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:.2em; text-transform:uppercase; color:var(--meta2); font-weight:700}
.dir-b .b-proof__big{margin:0; font-family:"Archivo",system-ui,sans-serif; font-weight:700; font-size:44px;
  line-height:1.05; letter-spacing:var(--ls-tight); color:var(--display); font-variant-numeric:tabular-nums}
.dir-b .b-proof__unit{font-size:var(--t-lead); font-weight:500; color:var(--text)}
.dir-b .b-proof__sub{margin:6px 0 0; font-size:var(--t-small)}
.dir-b .b-proof__sub b{color:var(--hot-ink)}

/* Cairn's pages: the Cairn slip, now on its own under its heading */
.dir-b .b-cairns .b-cairn{margin-top:0; margin-bottom:0}
.dir-b .b-cairns .b-cairn h3 + .b-cairn__dek{margin-bottom:12px}

/* ---------- /now/ (2026-10-19): one entry per project, a hue tab in the margin ---------- */
.dir-b .b-now__updated{margin:-4px 0 0; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--meta)}
.dir-b .b-now{padding:22px 0 23px}
.dir-b .b-now:first-child{border-top:1px solid var(--rule)}
.dir-b .b-now__tab{display:block; width:22px; height:22px; background:var(--hue); border-radius:4px 4px 0 0}
.dir-b p.b-now__doing{margin:0 0 2px; font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-micro);
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink); font-weight:700; opacity:1}
.dir-b .b-now h2{font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-h2); font-weight:700;
  letter-spacing:var(--ls-tight); line-height:1.15; margin:0 0 8px}
.dir-b .b-now h2 a{color:var(--text); text-decoration:none}
.dir-b .b-now h2 a:hover{text-decoration:underline; text-decoration-color:var(--hue); text-decoration-thickness:2px; text-underline-offset:4px}
.dir-b .b-now h2 a:focus-visible{outline:2px solid var(--link); outline-offset:3px}
.dir-b .b-now p a{color:var(--link)}

/* ---------- /notes/, the blog index: the chapters named in the rail ---------- */
.dir-b .b-index-toc{list-style:none; margin:2px 0 6px; padding:0; display:grid; gap:2px}
.dir-b .b-index-toc a{display:flex; align-items:center; gap:10px; padding:4px 0; color:var(--text); text-decoration:none;
  font-family:"Archivo",system-ui,sans-serif; font-size:var(--t-small); font-weight:500}
.dir-b .b-index-toc__n{width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center;
  border-radius:4px 4px 0 0; background:var(--hue); color:var(--on); font-size:12px; font-weight:700}
.dir-b .b-index-toc a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.dir-b .b-index-toc a:focus-visible{outline:2px solid var(--link); outline-offset:2px}

/* ---------- motion: opt-in, and only once the script says it can run ---------- */
@media (prefers-reduced-motion: no-preference){
  /* the tab rises out of its rule and the rule draws across, once per chapter */
  .dir-b.b-motion .b-ch__tab{transition:transform .5s var(--ease-pop) .12s}
  .dir-b.b-motion .b-ch__rule{transition:transform .6s var(--ease-out)}
  .dir-b.b-motion .b-ch:not(.is-in) .b-ch__tab{transform:translateY(46px) scaleY(.6)}
  .dir-b.b-motion .b-ch:not(.is-in) .b-ch__rule{transform:scaleX(0)}
  .dir-b.b-motion .b-ch__head{overflow:hidden}
  /* circling the page number, the way you would in a notebook */
  .dir-b .b-n__num path{transition:stroke-dashoffset .38s var(--ease-out)}
  .dir-b .b-n:hover .b-n__num path, .dir-b .b-n:focus-within .b-n__num path{stroke-dashoffset:0}
  .dir-b .b-toc__now span{display:inline-block}
  /* a card lifts its top edge and the star turns */
  .dir-b .b-card::before{transition:transform .22s var(--ease-out)}
  .dir-b .b-card:hover::before{transform:scaleY(1.7)}
  .dir-b .b-card .b-star{transition:transform .45s var(--ease-pop)}
  .dir-b .b-card:hover .b-star{transform:rotate(36deg) scale(1.12)}
  .dir-b .b-toc__now.is-swap span{animation:b-roll .32s var(--ease-out)}
  @keyframes b-roll{from{transform:translateY(100%); opacity:0} to{transform:none; opacity:1}}
}
@media (prefers-reduced-motion: reduce){
  .dir-b .b-n:hover .b-n__num path, .dir-b .b-n:focus-within .b-n__num path{stroke-dashoffset:0}
}

/* ---------- narrower screens: the rail becomes the top block ---------- */
@media (max-width:1100px){
  .dir-b .b-page{grid-template-columns:minmax(300px, 340px) minmax(0,1fr); --gut:48px}
  .dir-b .b-cairn{margin-left:calc(var(--numw) + 20px); margin-right:0}
}
@media (max-width:860px){
  body:has(.dir-b) nav .wrap, body:has(.dir-b) footer .wrap{padding-left:20px; padding-right:20px}
  .dir-b{--numw:36px}
  .dir-b .b-page{display:block; padding:28px 20px 54px}
  .dir-b .b-rail{position:static; margin-bottom:calc(var(--step) * 1.5); padding-bottom:calc(var(--step) * 1);
    border-bottom:1px solid var(--rule)}
  .dir-b .b-rail__in{gap:14px}
  .dir-b .b-h1{font-size:32px}
  .dir-b .b-toc, .dir-b .b-rail .b-actions{display:none}
  .dir-b .b-quick{display:flex}
  .dir-b .b-flow-actions{display:block; margin:0 0 calc(var(--step) * 2); padding:20px 0;
    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule)}
  .dir-b .b-flow-actions--end{margin:calc(var(--step) * 1) 0 0}
  .dir-b .b-card{gap:0 12px; padding:16px 16px 14px 0; background-position:calc(var(--numw) + 5px) 0}
  .dir-b .b-card h3{font-size:19px}
  .dir-b .b-start > h2{padding-left:0}
  .dir-b .b-read__head{padding-left:0}
  .dir-b .b-map > h2, .dir-b .b-map__all{padding-left:0}
  .dir-b .b-talk > h2, .dir-b .b-quotes > h2, .dir-b .b-cairns > h2, .dir-b .b-talk__body,
  .dir-b .b-proof, .dir-b .b-quotes .b-more-link{padding-left:0}
  .dir-b .b-quote{margin-left:0}
  .dir-b .b-proof__big{font-size:36px}
  .dir-b .b-map__list a{gap:0 12px}
  /* on phone the start cards and headings sit full width, so the margin line
     belongs to the chapters only */
  .dir-b .b-read{background:none}
  .dir-b .b-ch{background:linear-gradient(rgba(197,52,107,.32),rgba(197,52,107,.32)) no-repeat;
    background-size:1px 100%; background-position:calc(var(--numw) + 5px) 0}
  .dir-b .b-ch__head, .dir-b .b-n{gap:0 12px}
  .dir-b .b-ch__tab{width:32px; height:38px; font-size:17px}
  .dir-b .b-n__num{width:36px; font-size:12px}
  .dir-b .b-n h3{font-size:19px}
  .dir-b .b-cairn{margin:18px 0 18px calc(var(--numw) + 12px); padding:16px 16px 14px}
  .dir-b .b-tiers > div{grid-template-columns:1fr}
}