@font-face{font-family:'Jost';src:url(/assets/jost.ee8c3d1516b7124d.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}@font-face{font-family:'Jost';src:url(/assets/jost-italic.82745215d0bbe1a7.woff2) format('woff2');font-weight:400 500;font-style:italic;font-display:swap}@font-face{font-family:'Literata';src:url(/assets/literata-castor.092c5587419c350b.woff2) format('woff2');font-weight:200 900;font-style:normal;font-display:swap}html{background:#FAF8F0}body{margin:0;background:#FAF8F0;color:#131517;font:18px/1.6 Georgia,serif}
.wrap{max-width:46em;margin:0 auto;padding:1em}a{color:#17628e;text-decoration:underline}
@supports not ((display:grid) and (--reading:1)){
img,svg{max-width:100%}.tool-icon{width:24px;height:24px}.mk{width:32px;height:32px}
.bar,.right,.bar-tools,.site-nav,.nav-row{position:static;display:block}.bar a,.nav-row a{display:inline-block;margin-right:1em}
.bar-tools{margin:1em 0}.site{font-size:1.1em}.site>svg{display:none}.nav-row{display:none}
.find-lens,.theme-toggle,.find-panel,.ct-toggle,.ct-close,.ct-due,.ct-scrim,.rail,.marks-wrap,.sig,.divider,.ast-in,.ghh-dot{display:none}
.find-link{display:block}.contents{position:static;visibility:visible;margin:2em 0}.ct-list{padding-left:1em}
.ct-list li{margin:.5em 0}.ct-dot,.ct-seg{display:none}.row,.proj,.piece{margin:1.5em 0}
.row .d{display:block}.sn{font-size:.9em}.footnotes{margin-top:2em;border-top:1px solid #999}
h1{font-size:2em;line-height:1.2}h2{font-size:1.5em;margin-top:1.5em}h3{font-size:1.2em}
.skip{display:block}.ft-left{margin-top:3em}.footer-nav a{margin-right:1em}input{max-width:95%;font:inherit}
pre{white-space:pre-wrap}a{overflow-wrap:break-word}.contact-links{padding:0;list-style:none}.contact-links svg{display:inline-block;vertical-align:middle;margin-right:.5em}
} @supports (display:grid) and (--reading:1){:root{--human:#C4552A;--machine:#00858F;--blue:#2D90CF;--between:#667D2F;--c-ink:#14130F;--c-paper:#FAF9F4;--c-link:color-mix(in oklab,#00858F 70%,transparent);
--paper:#FAF8F0;--ink:#000000;--ink-soft:#404040;--rule:#D7D6CD;--rule-strong:#BDBBB0;--star:#2D90CF;--starop:.55;--hover:#F1EEE3;
--display:#2D90CF;--link-line:color-mix(in oklab,#2D90CF 70%,transparent);--u:color-mix(in oklab,#000 32%,var(--paper));--uh:#2D90CF;--meet:color-mix(in oklab,#ABD3EC 70%,var(--paper));--sel:#ABD3EC;
--read:Commissioner,system-ui,sans-serif;--face:Commissioner,system-ui,sans-serif;--meta:'Martian Mono',ui-monospace,monospace;--nameplate:Literata,Georgia,serif;--essay:var(--nameplate);
--t-state:calc(.9s / 4);--t-move:calc(.9s / 2);--ease:cubic-bezier(.45,0,.55,1);--ease-out:cubic-bezier(.16,1,.3,1);
--page-pad:clamp(16px,3vw,43px);--page-max:68rem;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--paper:#131517;--ink:#ECEAE3;--ink-soft:#A9A79F;--rule:#2A2D31;--rule-strong:#3D4146;--star:#2D90CF;--starop:.75;--hover:#1B1E21;
--c-ink:#F2EFE7;--c-paper:#141311;--link-line:color-mix(in oklab,#2D90CF 82%,transparent);--c-link:color-mix(in oklab,#00858F 82%,transparent);--u:color-mix(in oklab,#ECEAE3 34%,var(--paper));--meet:color-mix(in oklab,#2D90CF 26%,var(--paper));--sel:color-mix(in oklab,#2D90CF 40%,var(--paper));color-scheme:dark}}
:root[data-theme=dark]{--paper:#131517;--ink:#ECEAE3;--ink-soft:#A9A79F;--rule:#2A2D31;--rule-strong:#3D4146;--star:#2D90CF;--starop:.75;--hover:#1B1E21;
--c-ink:#F2EFE7;--c-paper:#141311;--link-line:color-mix(in oklab,#2D90CF 82%,transparent);--c-link:color-mix(in oklab,#00858F 82%,transparent);--u:color-mix(in oklab,#ECEAE3 34%,var(--paper));--meet:color-mix(in oklab,#2D90CF 26%,var(--paper));--sel:color-mix(in oklab,#2D90CF 40%,var(--paper));color-scheme:dark}

@view-transition{navigation:auto}
html{background:var(--paper);scrollbar-color:var(--rule-strong) transparent}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.1rem/1.6 var(--face);-webkit-font-smoothing:antialiased}   /* B46 (12 Oct): was 1.06rem */
::selection{background:var(--sel);color:var(--ink)}
mark{background:var(--meet);color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
svg{display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:12px;z-index:9;background:var(--paper);padding:.4rem .7rem}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad) 0 max(var(--page-pad),calc(var(--pw) + 18px));position:relative;z-index:1}

/* links (P32, 9 Oct): abcastor.com's one link rule, colour aside (castor-site read.css, "THE ONE LINK RULE" and the TWIN).
   One rule everywhere: a text-decoration .14em under the baseline, max(1.5px,.055em) thick, skipping descenders.
   Links in sentences and tags keep their line at rest in --link-line and go to full blue under the pointer (a fade).
   Names, titles and the menu carry no line at rest on a pointer device; under the pointer a TWIN (the same words in
   transparent ink with the same underline) is revealed left to right in 225ms, so the arriving line still dodges
   the g. The current page keeps its line. On touch there is no draw: the press shows the whole line, it holds
   while the next page loads, then fades. A passive touchstart listener on window (INAPP_JS) lets Safari apply :active without holding any gesture (Round 9 A5). */
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:max(1.5px,.055em);text-underline-offset:.14em;text-decoration-color:var(--link-line);
 text-decoration-skip-ink:auto;transition:text-decoration-color var(--t-state) var(--ease-out),color .2s}
@media (hover:hover){a:is(:hover,:focus-visible){text-decoration-color:var(--uh)}}
a:focus-visible,button:focus-visible{outline:2px solid var(--uh);outline-offset:3px;border-radius:2px}
.draw{position:relative;display:inline-block;text-decoration-line:underline;text-decoration-thickness:max(1.5px,.055em);text-underline-offset:.14em;text-decoration-skip-ink:auto;text-decoration-color:transparent;transition:text-decoration-color var(--t-state) var(--ease-out)}
@media (hover:hover){
 .draw{text-decoration-line:none}
 .draw::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;color:transparent;pointer-events:none;white-space:inherit;text-decoration-line:underline;text-decoration-thickness:max(1.5px,.055em);text-underline-offset:.14em;text-decoration-skip-ink:auto;text-decoration-color:var(--uh);
  clip-path:inset(-.5em 100% -.5em 0);transition:clip-path var(--t-state) var(--ease-out)}
 a:is(:hover,:focus-visible) .draw::after,[aria-current] .draw::after{clip-path:inset(-.5em 0 -.5em 0)}
}
@media (hover:none){
 a{transition:text-decoration-color .35s var(--ease) .7s}
 a:active,a:active .draw{text-decoration-color:var(--uh);transition:none}
 .draw{transition:text-decoration-color .35s var(--ease) .7s}
 [aria-current] .draw{text-decoration-color:var(--uh)}
 a.castor:active{text-decoration-color:var(--machine)}
}
@media (prefers-reduced-motion:reduce){.draw::after{transition:none}}
a:has(.draw){text-decoration:none}
/* with Castor* (P27): the wordmark's face and the typed orange asterisk, which turns a quarter under the pointer as on abcastor.com */
.wc{white-space:nowrap}
/* Typed stars keep Castor's .88em letter box: the raised glyph swings down
   around that box, matching the live wordmark's 450ms quarter-turn. */
.castor .ast{display:inline-block;line-height:.88;transform-origin:50% 50%;transition:transform var(--t-move) var(--ease)}
.wc .castor:has(.cw){text-decoration:none}
@media (hover:hover){:is(.wc,.c-cof,.ghh-castor):hover .castor .ast,.castor:hover .ast{transform:rotate(90deg)}}
:is(.c-cof,.ghh-castor,.castor):is(:focus-visible,:active) .ast{transform:rotate(90deg)}

/* the bar: C's own, name at the left, words and Castor's two tools at the right */
.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;view-transition-name:bar}
.site{font-weight:600;font-size:1.3rem;letter-spacing:-.005em;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.55rem}
.mk{color:var(--blue);overflow:visible;flex:none;width:34px;height:34px;margin:-3px 0 -3px -2px}   /* B17 (11 Oct): a little bigger, 28 to 34px, the bar's height kept */

.right{display:flex;align-items:center;gap:1.3rem}
.site-nav{display:flex;gap:1.5rem}
.site-nav a{position:relative;font-size:.98rem;color:var(--ink-soft);padding:.3rem 0}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--ink)}
.site-nav a[aria-current] .draw::after{clip-path:inset(0 0 0 0)}
.bar-tools{display:flex;align-items:center;gap:6px}
html[data-resolved=light] .bar-tools{color:var(--blue);color-scheme:light}html[data-resolved=dark] .bar-tools{color:var(--blue);color-scheme:dark}
.bar-tools :is(.gh-link,.find-lens,.find-link,.theme-toggle){position:relative;width:24.4px;height:29.6px;display:flex;align-items:center;justify-content:center;color:inherit}
/* Round 9 B7: each tool's 44px hit area is centred on its icon and never reaches past the screen edge (the theme button's, set at left:0,
   ran 4px past a 390px phone and let the page slide sideways) */
.bar-tools :is(.gh-link,.find-lens,.find-link,.theme-toggle)::after{content:"";position:absolute;top:calc(50% - 22px);left:calc(50% - 22px);width:44px;height:44px}
.bar-tools .theme-toggle::after{left:auto;right:-4px}
.tool-icon{width:17px;height:17px}
.tool-icon .t-fill{fill:currentColor;stroke:none}
.gh-link{margin-right:2px}.gh-link .gh-icon,.gh-link .li-icon{width:16px;height:16px}.li-link{margin-right:4px}
.theme-toggle :is(.t-sun,.t-moon,.t-system){display:none}
html[data-theme-choice=light] .theme-toggle .t-sun,html[data-theme-choice=dark] .theme-toggle .t-moon,html[data-theme-choice=system] .theme-toggle .t-system{display:block}
html:not(.js) .theme-toggle{display:none}
.find{display:flex}
.find>.find-link,.find-key{display:none}
@supports not selector(:popover-open){.find-lens,.find-panel{display:none}.find>.find-link{display:flex}}
.rule{border-bottom:1px solid var(--rule)}

/* the search flap (Castor style.css, round fifty-two) */
.find-panel{position:fixed;inset:auto;margin:0;top:64px;overflow:auto;overscroll-behavior:contain;right:max(var(--page-pad),calc((100% - var(--page-max)) / 2 + var(--page-pad)));
 width:min(25rem,100% - 2 * var(--page-pad));padding:1rem;border:1px solid var(--rule);border-top:0;background:var(--paper);color:var(--ink);box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){.find-panel{clip-path:inset(0);transition:clip-path var(--t-state) var(--ease-out),display var(--t-state) allow-discrete,overlay var(--t-state) allow-discrete}
 @starting-style{.find-panel:popover-open{clip-path:inset(0 0 100%)}}}
.find-label,.find-go,.find-key,.find-head{font:500 .75rem var(--meta);letter-spacing:.07em;text-transform:uppercase}
.find-label{display:block;margin-bottom:.45rem;color:var(--ink-soft)}
.find-row{display:flex;align-items:baseline;gap:.8rem}
.find-field{all:unset;flex:1;min-width:0;border-bottom:1px solid var(--rule-strong);padding-bottom:.3rem;font:1.125rem/1.4 var(--read);color:var(--ink)}
.find-field:focus{border-color:var(--blue);box-shadow:0 1px 0 var(--blue)}
.find-field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:1.15rem;height:1.15rem;margin:0 0 0 .5rem;cursor:pointer;background:var(--ink-soft);
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 7.5l9 9m0-9-9 9' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.find-go{color:var(--ink)}.find-go:hover{text-decoration:underline 2px var(--blue);text-underline-offset:.25em}
@media (pointer:fine){.find-row:has(:placeholder-shown) .find-key:not(:empty){display:block;width:5em;margin-left:calc(-.8rem - 5em);text-align:right;color:var(--ink-soft);pointer-events:none}}
.find-hint{display:none;margin:.55rem 0 0;font:.8rem var(--face);color:var(--ink-soft)}
.find-in:has(.find-field:not(:placeholder-shown)) .find-hint{display:block}
.find-panel:has(.find-field:not(:placeholder-shown)) .find-start{display:none}
.find-start{display:grid;gap:.9rem;margin-top:1.1rem}
.find-head{margin:0 0 .35rem;color:var(--ink-soft)}
.find-start ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.find-start li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font:1rem/1.3 var(--read)}
.find-start li a{display:inline-block;position:relative;color:var(--ink)}
.fs-what{font:.72rem var(--meta);color:var(--ink-soft);white-space:nowrap}
.find-taglist{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:0;font:.8rem var(--face)}
.find-live ol{list-style:none;margin:.7rem -.5rem 0;padding:0}
.find-live li a{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;padding:.45rem .5rem;color:var(--ink);text-decoration:none}
.find-live [aria-selected=true] a{background:var(--meet)}
.fl-title{font:1rem/1.25 var(--read);position:relative}
.fl-tag{font:.72rem var(--face);color:var(--ink-soft)}
.fl-line{grid-column:1/-1;font:.82rem/1.35 var(--read);color:var(--ink-soft)}
.fl-all{display:inline-block;position:relative;margin-top:.5rem;font:.8rem var(--face);color:var(--ink-soft);text-decoration:none}
.fl-none{margin:.8rem 0 0;color:var(--ink-soft);font-size:.92rem}
.find-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.find-panel .find-in:has(.find-live) .find-hint{display:none}
.find-page{display:block;max-width:26rem;margin:0 0 2rem}

/* the field behind the first screen: it greets, then yields as reading starts (C's own) */
.field{position:absolute;inset:0 0 auto 0;height:min(100svh,920px);color:var(--star);opacity:var(--starop);pointer-events:none;z-index:0;overflow:hidden;
 -webkit-mask-image:linear-gradient(transparent 70px,#000 140px,#000 55%,transparent);mask-image:linear-gradient(transparent 70px,#000 140px,#000 55%,transparent)}
.field svg{width:120%;height:120%;animation:drift 40s cubic-bezier(.2,.6,.3,1) 1 forwards}
@keyframes drift{to{transform:translate(-8%,-6%)}}
.field.still svg{animation:none;width:100%;height:100%}
.field:has(.bluefield){display:none}
.on-blue .bar,.on-blue .hero{background:var(--blue);box-shadow:0 0 0 100vmax var(--blue);clip-path:inset(0 -100vmax)}
.on-blue .hero{margin-bottom:0}.on-blue .hero+.idx{border-top:0}
.on-blue .bar,.on-blue .hero{--ink:#0B1520;--ink-soft:#0B1520;--display:#0B1520;--u:#0B1520;--uh:#0B1520;color:#0B1520}
.on-blue .bar a,.on-blue .hero a{color:#0B1520}
.on-blue .bar-tools{color:#0B1520!important}
.field .dawn{position:absolute;inset:0;opacity:1.6;background:
 radial-gradient(48% 34% at 80% 58%,color-mix(in oklab,var(--human) 75%,transparent),transparent 72%),
 radial-gradient(52% 36% at 22% 66%,color-mix(in oklab,var(--blue) 85%,transparent),transparent 72%);
 -webkit-mask-image:none;animation:dawn 18s var(--ease-out) 1 forwards}
@keyframes dawn{from{transform:translateY(12%)}to{transform:none}}
@supports (animation-timeline:scroll()){.field{animation:yield linear both;animation-timeline:scroll(root);animation-range:0 70vh}@keyframes yield{to{opacity:0}}}

/* One reading line on every page: the article's square track and top-anchored blue fill. */
.rail{position:fixed;left:0;top:0;height:100vh;height:100lvh;width:var(--pw);background:var(--rule);z-index:10;pointer-events:none}
.rail-fill{position:absolute;inset:0;background:var(--blue);transform-origin:top;transform:scaleY(.02);will-change:transform}
@media (hover:hover){a.castor:hover{text-decoration-color:var(--machine)}}
/* the Castor banner (round 6): the LinkedIn banner's lockup, recoloured to the page, linked to abcastor.com */
.cb{display:block;height:auto}.cb-strip,.cb-bar,.cb-hero,.cb-divider{display:block;text-decoration:none;color:inherit}
.cb-strip{margin:0 calc(-1 * var(--page-pad));padding:.4rem 0 0;border-bottom:1px solid var(--rule)}.cb-strip .cb{width:100%;max-height:96px}
.cb-bar{position:absolute;left:50%;transform:translateX(-50%);top:.35rem}.cb-bar .cb{height:58px;width:auto}
.bar{position:relative}
.cb-hero{position:absolute;right:0;top:50%;transform:translateY(-55%);width:min(24vw,270px);border-radius:4px}
.cb-hero:focus-visible,.foot-lock:focus-visible{outline:2px solid var(--blue);outline-offset:6px}.cb-hero .cb{width:100%}
.hero.has-cb{position:relative}
.cb-divider{margin:0 calc(-1 * var(--page-pad));}.cb-divider .cb{width:100%;max-height:120px}.cb-divider+.idx{border-top:0}
.cb-strip:hover .cb,.cb-bar:hover .cb,.cb-hero:hover .cb,.cb-divider:hover .cb{filter:none}
@media (max-width:900px){.cb-hero{position:static;transform:none;width:min(70%,260px);margin:2rem 0 0}.cb-bar .cb{height:44px}}
@media (max-width:520px){.cb-bar{position:static;transform:none;grid-column:1/-1;grid-row:3;justify-self:center}.cb-strip .cb,.cb-divider .cb{max-height:none;width:180%;margin-left:-40%}}
/* Castor's own blocks: Castor's paper, ink, teal, terracotta and olive, never the site's blue */
.c-sig{margin:0 calc(-1 * var(--page-pad));padding:.45rem var(--page-pad);background:var(--c-paper);border-bottom:1px solid transparent;
 background-image:linear-gradient(90deg,var(--human) 0 50%,var(--machine) 50% 100%);background-size:100% 1.5px;background-position:bottom;background-repeat:no-repeat}
.c-sig-in{display:flex;align-items:center;gap:.5rem;color:var(--c-ink);text-decoration:none;font-size:.88rem}
.c-sig-in svg{width:16.3333px;height:16.3333px;margin:1.8333px;overflow:visible}.c-sig-in .castor{font-size:1.05rem}.c-sig-what{color:color-mix(in oklab,var(--c-ink) 70%,var(--c-paper))}
.c-sig-in:hover .castor{text-decoration-color:var(--machine)}
.c-cof{display:inline-flex;align-self:flex-start;align-items:center;gap:.6rem;margin-top:1.6rem;color:var(--c-ink);text-decoration:none;font-size:1.12rem}
.c-cof svg{width:31.0333px;height:31.0333px;margin:3.4833px;overflow:visible;flex:none}.c-cof .castor{font-size:1.5rem;text-decoration:none}
/* Round 9 B9: "Castor" carries Castor's line, terracotta then teal, with the olive point where the two meet, as abcastor.com's rule does; the point grows a little under the pointer */
/* B23 (11 Oct): the line sits closer to the word: its top .18em under the baseline (live before: .43em) */
.cw{position:relative;display:inline-block;line-height:1;padding-bottom:.3em;background:linear-gradient(90deg,var(--human) 0 50%,var(--machine) 50% 100%) left bottom/100% 2px no-repeat}
.cw::after{content:"";position:absolute;left:50%;bottom:1px;width:7px;height:7px;border-radius:50%;background:var(--between);box-shadow:0 0 0 2px var(--paper);transform:translate(-50%,50%);transition:transform var(--t-move) var(--ease-out)}
.wc .cw{background-size:100% .0833em}
.wc .cw::after{bottom:.0417em;width:.2917em;height:.2917em;box-shadow:0 0 0 .0833em var(--paper)}
/* B57 (12 Oct): under "Co-founder of Castor" the line sits lower, so the point clears the s */
.c-cof .cw{padding-bottom:.3em}
@media (hover:hover){:is(.c-cof,.wc):hover .cw::after{transform:translate(-50%,50%) scale(1.35)}}:is(.c-cof,.wc .castor):is(:focus,:active) .cw::after{transform:translate(-50%,50%) scale(1.35)}
.c-band{display:block;margin:3rem calc(-1 * var(--page-pad)) 0;padding:1.2rem 0;background:var(--c-paper);text-decoration:none}.c-band .cb{width:100%;max-height:130px}
.c-card{display:grid;grid-template-columns:240px 1fr;gap:1.6rem;align-items:center;margin:0 0 2.4rem;padding:1.4rem 1.6rem;background:var(--c-paper);color:var(--c-ink);border:1px solid color-mix(in oklab,var(--c-ink) 14%,var(--c-paper))}
.c-card p{margin:0 0 .6rem;color:var(--c-ink)}.c-card a{color:var(--c-ink);text-decoration-color:var(--c-link)}.c-card a:hover{text-decoration-color:var(--machine)}
.c-card-mark{display:block;text-decoration:none}.c-card-mark .cb{width:100%}
@media (max-width:640px){.c-card{grid-template-columns:1fr}.c-card-mark{max-width:220px}.c-sig-what{display:none}}
/* home */
/* Round 9 B10: the opening sits close under the tabs (was centred in 54% of the screen, which left a gap above it) */
.hero{display:flex;flex-direction:column;justify-content:flex-start;padding:1.5rem 0 3rem}
.hero h1{color:var(--display);font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.1;font-weight:400;letter-spacing:-.028em;margin:0;max-width:19ch;text-wrap:balance}
.hero .sub{font-size:clamp(1.05rem,1.6vw,1.22rem);color:var(--ink-soft);max-width:36em;margin:1.4rem 0 0;line-height:1.55}
.idx{border-top:1px solid var(--rule);padding:2rem 0 .6rem;display:grid;grid-template-columns:11rem 1fr;gap:1rem 2rem}
.idx>h2{font-size:.98rem;font-weight:600;margin:.55rem 0 0;color:var(--ink);letter-spacing:.005em}
.idx>h2 small{display:block;font-weight:400;color:var(--ink-soft);font-size:.9rem;margin-top:.3rem;line-height:1.45}
.rows{margin:0;padding:0;list-style:none}
.row{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .9rem;padding:.42rem 0;animation:rise .55s var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),9) * 55ms + 120ms)}
@keyframes rise{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.row .n{font-size:1.28rem;font-weight:500;letter-spacing:-.012em}
.row .n a{color:var(--ink);text-decoration:none;display:inline-block;position:relative;margin-right:.5em}
.row .d{color:var(--ink-soft);transition:color .35s ease}
.row:focus-within .d{color:var(--ink)}
@media (hover:hover){.row:hover .d{color:var(--ink)}}
.st{font-size:.8rem;color:var(--ink-soft);border:1px solid var(--rule);border-radius:99px;padding:.02rem .55rem;align-self:center}
/* label options (round 6): a, a hairline then plain words; b, the Castor dateline's small capitals; c, a sign then italic words */
.lbl-a .st{border:0;border-radius:0;padding:0 0 0 .7rem;border-left:1px solid var(--rule-strong);font-size:.94rem;line-height:1.1;color:var(--ink-soft);white-space:nowrap}
.lbl-b .st{border:0;border-radius:0;padding:0;font:500 .64rem var(--meta);letter-spacing:.08em;text-transform:uppercase}
.lbl-c .st{border:0;border-radius:0;padding:0;font-size:.9rem;font-style:italic;display:inline-flex;align-items:baseline;gap:.3em}
.lbl-c .st::before{font-style:normal;line-height:0}
.lbl-c .st[data-kind=castor]::before{content:"*";font:650 1.15em var(--nameplate);color:var(--human)}
.lbl-c .st[data-kind=mine]::before{content:"";width:.42em;height:.42em;border-radius:50%;border:1.5px solid var(--blue);align-self:center}
/* the asterisk turns in on the other side of the name, as Castor's beside its wordmark */
.ast-in{position:absolute;left:calc(100% + .22em);top:-.12em;font:600 1em var(--nameplate);color:var(--human);opacity:0;transform:rotate(-90deg) scale(.6);
 transition:opacity var(--t-state) ease,transform var(--t-move) var(--ease);pointer-events:none}
@media (hover:hover){a:is(:hover,:focus-visible)>.ast-in{opacity:1;transform:none}}
a[aria-current]>.ast-in{opacity:1;transform:none}
h3 a{position:relative}
/* Castor written the way abcastor.com writes its name: Literata 650 at the display optical size, the typed asterisk in terracotta, on the baseline, no gap */
.castor{white-space:nowrap;color:var(--c-ink);text-decoration-color:var(--c-link);font-family:var(--nameplate);font-weight:650;font-variation-settings:"opsz" 72;letter-spacing:-.012em;font-size:1.04em}
.castor .ast{display:inline-block;font-family:var(--nameplate);font-weight:650;font-variation-settings:"opsz" 72;color:var(--human);margin-left:0}
.on-blue .hero .castor .ast{color:#0B1520}
.elsewhere{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;padding-top:.6rem}
.elsewhere a{color:var(--ink)}

/* reading pages */
main.page{max-width:40rem;padding:2.8rem 0 2rem}
main.page h1{color:var(--display);font-size:clamp(2.2rem,5vw,3.3rem);font-weight:400;letter-spacing:-.028em;margin:0 0 .5rem;line-height:1.08}
.lede{color:var(--ink-soft);font-size:1.12rem;margin:0 0 2.4rem}
main.page h2{font-size:1.7rem;font-weight:450;letter-spacing:-.015em;margin:2.6rem 0 .9rem}
h3{font-size:1.3rem;font-weight:550;margin:0;letter-spacing:-.01em}
h3 a{color:var(--ink);text-decoration:none}
p{margin:0 0 1.05rem}
ul{list-style:none;margin:0;padding:0}
.meta{color:var(--ink-soft);font-size:.9rem;margin:.1rem 0 .35rem}
.muted{color:var(--ink-soft)}
.projects .proj{margin:0 0 1.9rem}
.projects .proj[hidden],section[hidden]{display:none}
.links li{margin:0 0 .6rem}
.now li{margin:0 0 1.4rem}.now h2{font-size:1.1rem!important;font-weight:600!important;margin:0 0 .15rem!important;letter-spacing:0!important}
.note{color:var(--ink-soft);font-size:.95rem}
.divider{text-align:center;font-family:var(--nameplate);color:var(--human);font-size:1.8rem;margin:2.6rem 0 .4rem}
/* tags: Castor's tag list, a filter here */
.tags{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:0 0 1.6rem;padding:.9rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font:.85rem var(--face)}
.tags .tl{color:var(--ink-soft);margin-right:.2rem}
.tags button{color:var(--ink-soft);text-decoration-line:underline;text-decoration-color:var(--u);text-underline-offset:var(--underline-offset);text-decoration-thickness:max(1.5px,.055em)}
.tags button:hover{color:var(--ink);text-decoration-color:var(--uh)}
.tags button[aria-pressed=true]{color:var(--ink);text-decoration-color:var(--uh);text-decoration-thickness:2px}
.tags button[aria-pressed=true]::after{display:none}
.tagline{margin:.4rem 0 0;font:.8rem var(--face);color:var(--ink-soft)}
.count{color:var(--ink-soft);font-size:.9rem;margin:-.8rem 0 1.6rem}.count:empty{display:none}
.para{display:block}
.sn{display:block;font-size:.88rem;line-height:1.5;color:var(--ink-soft);border-top:1px solid var(--rule);padding:.5rem 0 0;margin:-.4rem 0 1.3rem}
@media (min-width:1080px){main.about{max-width:62rem}main.about .para{display:grid;grid-template-columns:minmax(0,40rem) 16rem;gap:0 3rem;align-items:start}
 main.about .para>.sn{margin:.25rem 0 0;border-top:0;border-left:1px solid var(--rule);padding:0 0 0 1rem}main.about .divider{max-width:40rem}}
.results li{margin:0 0 1.1rem}.results a{color:var(--ink);font-size:1.15rem;text-decoration:none}.results p{margin:.1rem 0 0;color:var(--ink-soft)}

/* the Castor product footer signature (castor-identity master/footer/footer.html, COPY START..END, unchanged but for
   scoping its tokens): Chip stands on the line, "Castor*" beside him, "we give a dam*" under the line. Hover: the tail
   wags twice, the eye blinks once, and Castor's asterisk turns a quarter as on abcastor.com. */
/* B15 (11 Oct): Castor's standard signature, generated from the master (castor-identity master/footer/footer.html,
   COPY START..END and the sig--plain footer element, copied unchanged at build time by sig_master()). This site supplies the
   tokens the master asks for; the signature's words wear Castor's ink, as on every Castor page. */
.sig::before{transition:transform var(--t-move) var(--ease-out)}
@media (hover:hover){.sig:hover::before{transform:scale(1.35)}}
.sig:focus-within::before{transform:scale(1.35)}
.sig{--ink:var(--c-ink);--quiet:var(--ink-soft);--hand:"Castor Hand","Bradley Hand",cursive;--word:var(--nameplate)}
@font-face{font-family:"Castor Hand";font-weight:500;src:url(/assets/castor-hand.731e433b192ae63e.woff2) format("woff2");font-display:swap}
.ft-sig{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin-top:2.4rem;padding:0 0 3rem;color:var(--ink-soft);font-size:.9rem}
/* The signature owns the full-width line; the right column straddles it,
   with the name just above and the links beside the handwritten quip below. */
.ft-sig .sig{grid-area:1/1;margin:0}
.ft-left{grid-area:1/1;justify-self:end;align-self:end;display:grid;gap:1.6rem;max-width:calc(100% - 260px);margin-bottom:-2rem;text-align:right;line-height:1.3;z-index:1}
.footer-nav{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.3rem 1.4rem;font:500 .7rem var(--meta);letter-spacing:.07em;text-transform:uppercase}
.footer-nav a{color:var(--ink-soft)}
.footer-nav a:hover{color:var(--ink)}
@media (max-width:620px){.ft-left{grid-area:2/1;max-width:none;margin:3.3rem 0 0;gap:.65rem}.ft-sig{padding-bottom:1rem}}
/* footer: the Castor mark, turning as it does in the bar on abcastor.com */
footer:not(.sig):not(.ft-sig){position:relative;color:var(--ink-soft);font-size:.9rem;padding:2rem 0 3rem;margin-top:2.4rem;border-top:0;background:linear-gradient(90deg,var(--human) 0 50%,var(--machine) 50% 100%) top/100% 1.5px no-repeat;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
footer:not(.sig):not(.ft-sig)::before{content:"";position:absolute;left:50%;top:.75px;width:8px;height:8px;border-radius:50%;background:var(--between);box-shadow:0 0 0 2px var(--paper);transform:translate(-50%,-50%)}
.with{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink-soft);text-decoration:none;font:500 .75rem var(--meta);letter-spacing:.07em;text-transform:uppercase}
.with svg{width:22.8667px;height:22.8667px;margin:2.5667px;overflow:visible}
:is(.with,.foot-lock,.ghh-castor) svg>mask>path,:is(.with,.foot-lock,.ghh-castor) svg>mask~path:last-child{transform-box:view-box;transform-origin:12px 12px;transition:transform var(--t-move) var(--ease)}
@media (hover:hover){:is(.with,.foot-lock,.ghh-castor):hover svg>mask>path,:is(.with,.foot-lock,.ghh-castor):hover svg>mask~path:last-child{transform:rotate(90deg)}}
.with:focus-visible svg>mask>path,.with:focus-visible svg>mask~path:last-child{transform:rotate(90deg)}
.with:hover{color:var(--ink)}
.foot-line{margin:0;color:var(--ink-soft)}
.foot-cb{display:block;width:200px;text-decoration:none}.foot-cb .cb{width:100%}
.foot-lock{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:.55rem;align-items:center;text-decoration:none;color:var(--ink)}
.foot-lock svg{grid-row:1/3;width:32.6667px;height:32.6667px;margin:3.6667px;overflow:visible}
.foot-lock .castor{font-size:1.3rem;line-height:1}.foot-lock small{font:.86rem var(--face);color:var(--ink-soft);margin-top:.15rem}
.with .castor{font-size:1.15rem;text-transform:none;letter-spacing:-.012em;color:var(--ink);margin-left:-.25rem}

/* Works (P15, 8 Oct): the two GitHub homes, then each work as abcastor.com sets its pieces: what it is at the left, a hairline, the copy */
main.works{max-width:52rem}
main.works>.lede{max-width:40rem}
/* R8-6: no top line; the title's frame above already closes that edge, and a second rule 12px under it read as a line cutting the letters */
.ghh-pair{display:grid;grid-template-columns:1fr 1fr;margin:2rem 0 2.6rem;border-bottom:1px solid var(--rule)}
.ghh{position:relative;display:grid;gap:.55rem;align-content:start;padding:2.1rem 1.5rem 1.6rem;text-decoration:none;color:var(--ink)}
/* The card's lower rule rises; GitHub uses the same drawn, ink-skipping
   underline as the rest of the site. */
.ghh::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:8px;transform:scaleY(.25);transform-origin:bottom;transition:transform var(--t-move) var(--ease-out)}
@media (hover:hover){.ghh:hover::after{transform:none}}
.ghh:focus-visible::after,.ghh:active::after{transform:none}
/* Castor's card carries the olive point where its two colours meet, as Castor's own line does */
/* R8-6: the olive point sits on the bar's centre; as the bar rises (2px to 8px) the point stretches with it into an
   ellipse 6px taller, so it still covers the bar with the same margin above and below and leaves no gap */
/* B24 (11 Oct, his word: "instead of the dot stretching... it should just get bigger"): the point stays round and grows to
   cover the risen bar, riding up to the bar's new centre; its paper ring scales with it */
.ghh-castor::before{content:"";position:absolute;left:50%;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--between);box-shadow:0 0 0 2px var(--c-paper);transform:translate(-50%,50%);z-index:2;
 transition:bottom var(--t-move) var(--ease-out),transform var(--t-move) var(--ease-out)}
@media (hover:hover){.ghh-castor:hover::before{bottom:3px;transform:translate(-50%,50%) scale(1.6)}}
.ghh-castor:is(:focus-visible,:active)::before{bottom:3px;transform:translate(-50%,50%) scale(1.6)}
.ghh-who{display:flex;align-items:center;gap:.6rem;min-height:40px}
.ghh-at{display:inline-flex;align-items:center;gap:.5rem;font:500 .84rem var(--meta);letter-spacing:.01em}
.ghh-at .gh-icon{width:17px;height:17px;flex:none}
.ghh-line{color:var(--ink-soft);font-size:.98rem;line-height:1.45;max-width:24em}
/* Castor's half wears Castor: its paper and ink, the mark, the wordmark with the terracotta asterisk, the line in its two colours */
.ghh-castor{background:var(--c-paper);color:var(--c-ink);border-right:1px solid var(--rule)}
.ghh-castor::after{background:linear-gradient(90deg,var(--human) 0 50%,var(--machine) 50% 100%)}
.ghh-castor .ghh-line{color:color-mix(in oklab,var(--c-ink) 68%,var(--c-paper))}
.ghh-castor svg:not(.gh-icon){width:31.0333px;height:31.0333px;margin:3.4833px;overflow:visible}
.ghh-castor .castor{font-size:1.65rem;text-decoration:none;color:var(--c-ink)}
.ghh-castor .ghh-at{--uh:var(--machine)}
.ghh-mine .ghh-at{--uh:var(--blue)}
/* Mine carries the Skywritten e, the name in the site's face and the blue line. */
.ghh-mine::after{background:var(--blue)}
.ghh-ast{position:relative;display:inline-flex}
.ghh-ast svg{width:34px;height:34px;margin:0}
/* The tiny resting mark shares the line's centre and grows around that point. */
.ghh-dot{position:absolute;left:50%;bottom:0;width:12px;height:12px;display:grid;place-items:center;border-radius:50%;background:#fff;
 box-shadow:0 0 0 2px var(--paper);transform:translate(-50%,50%);z-index:2;transition:transform var(--t-move) var(--ease-out)}
.ghh-dot svg{width:9px;height:9px;color:var(--blue);overflow:visible}
@media (hover:hover){.ghh-mine:hover .ghh-dot{transform:translate(-50%,50%) scale(1.6)}}
.ghh-mine:is(:focus-visible,:active) .ghh-dot{transform:translate(-50%,50%) scale(1.6)}
.ghh-mine:has(.ghh-ast .go) .ghh-dot{transform:translate(-50%,50%) scale(1.6)}
.ghh-name{font-size:1.5rem;font-weight:600;letter-spacing:-.015em}
.projects .wk{display:grid;grid-template-columns:9.5rem 1px minmax(0,1fr);gap:0 1.6rem;margin:0;padding:1.5rem 0;border-top:1px solid var(--rule)}
.projects .wk:first-child{border-top:0;padding-top:.6rem}
.wk-side{margin:.35rem 0 0;align-self:start;display:grid;align-content:start;gap:.2rem;font:500 .7rem/1.35 var(--meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.wk-st{color:var(--blue)}
.wk-rule{background:var(--rule);align-self:stretch}
.wk-copy h3{font-size:1.42rem;font-weight:550;margin:0 0 .45rem}
.wk-copy>p{margin:0 0 .7rem;max-width:36em}
.wk-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;margin:0!important}
.wk-home{display:inline-flex;align-items:center;gap:.45rem;font:500 .8rem var(--meta);letter-spacing:.01em;color:var(--ink);text-decoration:none;align-self:center}
.wk-home .gh-icon{width:15px;height:15px;flex:none}
.wk-none{color:var(--ink-soft)}
.wk-foot .tagline{margin:0}
#castor .wk-home .draw{--uh:var(--machine)}
main.works section>h2{margin-top:2.8rem}
main.works .tags{margin-top:0}
/* Writing (P16, 8 Oct): the same rows, the date at the left */
.pieces{list-style:none;margin:0;padding:0}
.pc{display:grid;grid-template-columns:9.5rem 1px minmax(0,1fr);gap:0 1.6rem;padding:1.3rem 0;border-top:1px solid var(--rule);animation:rise .55s var(--ease-out) backwards;animation-delay:calc(min(var(--i,0),9) * 55ms + 80ms)}
.pc:first-child{border-top:0;padding-top:.4rem}
.pc-date{font:500 .72rem/1.9 var(--meta);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.pc-copy h3{font-size:1.35rem;font-weight:550;margin:0 0 .35rem}
.pc-copy p{margin:0;color:var(--ink-soft);max-width:36em}
.pc-tags{display:block;margin-top:.4rem;font:.8rem var(--face);color:var(--ink-soft)}
.pc-castor h2 .castor{font-size:1.05em;text-decoration:none}
.pc-castor .draw{--uh:var(--machine)}
.pc-castor .pc-copy a{color:var(--ink)}
/* the essay (S5 8 Oct, P17 P19 9 Oct): abcastor.com's article page, its mechanics copied, in this site's colours.
   Contents at the left (open on a wide screen, a panel on a phone): a dot per section and a segment between dots
   that fills while that section is read; the current entry in ink and bold, its dot filled and a quarter bigger,
   the passed dots filled. The word "Contents" under the title, and once it has scrolled away the same word arrives
   at the top of the Contents column (top left on a phone). Beside the column the rail: a quiet 2px wall whose
   blue fill grows with reading, .02 at the top, full at the article's end. Title in this site's blue. */
.essay-head,.essay-body section{scroll-margin-top:calc(var(--bar-h,64px) + 1.5rem)}
main.essay-page{max-width:none;padding-top:2.2rem}
.es-grid{display:grid;grid-template-columns:13rem minmax(0,39rem) minmax(0,1fr);column-gap:2.4rem;align-items:start}
.contents{grid-column:1;grid-row:1;position:sticky;top:3.6rem;max-height:calc(100dvh - 4.6rem);overflow:auto;overscroll-behavior:contain;visibility:hidden;scrollbar-width:thin;scrollbar-color:transparent transparent}
.contents:hover{scrollbar-color:color-mix(in oklab,var(--ink) 28%,transparent) transparent}
.ct-open .contents{visibility:visible}
@media (prefers-reduced-motion:no-preference){.ct-open .contents .ct-in{animation:ct-in var(--t-move) var(--ease-out) both}}
@keyframes ct-in{from{transform:translateX(-14px);opacity:0}to{transform:none;opacity:1}}
.ct-head{display:flex;justify-content:flex-end;margin:0 1.4rem 1.1rem 0}   /* B18 (11 Oct): Close keeps clear of the title's frame */
.ct-close{font:.8rem var(--face);color:var(--ink-soft)}
.ct-close:hover{color:var(--ink)}
.ct-list{list-style:none;margin:0;padding:0;position:relative}
.ct-row{position:relative;padding:.3rem .4rem .3rem 26px;min-height:34px;box-sizing:border-box;display:flex;align-items:center}
.ct-row.ct-l3{padding-left:42px}
.ct-row.ct-l3::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:1px;background:color-mix(in oklab,var(--ink-soft) 34%,transparent)}
.ct-row>a{color:var(--ink-soft);text-decoration:none;font:400 14.5px/1.3 var(--essay);font-variation-settings:"opsz" 14;transition:color .2s}
.ct-row.ct-l1>a{font-weight:500}
@media (hover:hover){.ct-row>a:hover{color:var(--ink)}}
.ct-row.now>a{color:var(--ink);font-weight:600}
.ct-seg{position:absolute;left:8.45px;top:50%;height:100%;width:2.1px;background:color-mix(in oklab,var(--ink-soft) 30%,transparent);pointer-events:none}
.ct-row:last-child .ct-seg{height:9px}
.ct-row:first-child::after{content:"";position:absolute;left:8.45px;top:calc(50% - 9px);height:9px;width:2.1px;background:var(--blue)}
.ct-seg>span{display:block;width:100%;height:100%;background:var(--blue);transform:scaleY(var(--p,0));transform-origin:top}
.ct-dot{position:absolute;z-index:2;left:9.5px;top:50%;width:var(--dot);height:var(--dot);translate:-50% -50%;border-radius:50%;background:var(--paper);border:1.4px solid var(--ink-soft);box-sizing:border-box;pointer-events:none;transition:background .2s,border-color .2s,scale .2s}
.ct-row.past .ct-dot{background:var(--blue);border-color:transparent}
.ct-row.now .ct-dot{background:var(--blue);border-color:var(--paper);scale:1.25;box-shadow:0 0 3px color-mix(in oklab,var(--blue) 40%,transparent)}
.ct-scrim{display:none}
.ct-toggle,.ct-due{font:500 .68rem var(--meta);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding:.3rem 0}
.ct-toggle:hover,.ct-due:hover{color:var(--ink)}
.ct-open .ct-toggle .draw,.ct-open .ct-due .draw{text-decoration-color:var(--uh)}
@media (hover:hover){.ct-open :is(.ct-toggle,.ct-due) .draw::after{clip-path:inset(-.5em .07em -.5em 0)}}
.ct-due{grid-column:1;grid-row:1;position:sticky;top:3.6rem;justify-self:start;z-index:3;opacity:var(--due,0);visibility:hidden}
.es-grid[style*="--due"] .ct-due{visibility:visible}
.es-col{grid-column:2;grid-row:1;min-width:0}
/* the rule under the standfirst belongs to the body, so the stars' frame (which stops 12px above the next element) ends cleanly above it */
.essay-head{margin:0;padding:0 0 1.6rem}
.essay-body{border-top:1px solid var(--rule);padding-top:2.2rem}
.essay-head h1{margin:0 0 1.35rem!important;font:600 clamp(2.6rem,6vw,4.6rem)/1.02 var(--essay)!important;font-variation-settings:"opsz" 72;letter-spacing:-.02em!important;color:var(--blue)!important;text-wrap:balance}
.es-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.1rem;margin:0 0 1rem;font:500 .7rem var(--meta);letter-spacing:.06em;color:var(--ink-soft)}
.tag-list{display:inline-flex;flex-wrap:wrap;gap:.2rem .7rem;font:400 .82rem var(--face);letter-spacing:0;text-transform:none}
.tag-list a{color:var(--ink-soft);text-decoration-color:var(--link-line)}
.tag-list a:hover,.tag-list a[aria-current]{color:var(--ink);text-decoration-color:var(--uh)}
.standfirst{font:400 1.55rem/1.32 var(--essay);font-variation-settings:"opsz" 36;color:var(--ink);margin:0;max-width:30em;text-wrap:balance}
.essay-body{font:400 1.25rem/1.62 var(--essay);font-variation-settings:"opsz" 14;hanging-punctuation:first}
.essay-body p{margin:0 0 1.3rem;text-wrap:pretty}
.essay-body>p:first-child::first-letter{float:left;font:600 3.55em/.82 var(--essay);font-variation-settings:"opsz" 72;color:var(--blue);margin:.06em .1em 0 0}
.essay-body strong{font-weight:650}
.essay-body .runin{scroll-margin-top:calc(var(--bar-h,64px) + 1.5rem)}
.essay-body .set-off{font:400 1.28rem/1.5 var(--essay);font-variation-settings:"opsz" 36;font-style:italic;text-align:center;text-wrap:balance;margin:2rem 0;padding:1.1rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.essay-body .set-off strong{font-weight:500}
.essay-body blockquote{margin:1.8rem 0;padding:0 0 0 1.3rem;border-left:1px solid var(--blue);font-style:italic;color:var(--ink)}
.essay-body blockquote p{margin:0}
/* B49 (12 Oct): an attributed quote; the name sits under the words, upright and small */
.essay-body blockquote .q-by{display:block;margin-top:.5rem;font-style:normal;font-size:.8em;color:var(--ink-soft)}
.essay-body blockquote.epigraph{margin-top:.4rem}
/* B50 (12 Oct): What the marks mean, as on abcastor.com's About the site: beside the article on a wide screen, under the title otherwise */
.marks-wrap{position:relative}
.marks{margin:1.6rem 0 2rem;border-top:1px solid var(--rule);padding-top:1rem}
.marks h2{font:500 .72rem/1.4 var(--meta)!important;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .3rem!important}
.marks ul{list-style:none;padding:0;margin:0}
.marks li{display:grid;grid-template-columns:4rem minmax(0,1fr);gap:.8rem;align-items:start;padding:.75rem 0;border-bottom:1px solid var(--rule)}
.marks li>svg{width:4rem;height:4rem;color:var(--blue)}
.marks .chip-k{color:var(--c-ink);overflow:visible}
/* Give the skywriting room for its plume without crowding the explanation. */
.marks .mark-e-row{position:relative;cursor:pointer}
.marks .mark-e-row>svg{overflow:visible}
.marks .mark-e-row:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
@media (max-width:74.999rem){.marks li{grid-template-columns:5rem minmax(0,1fr)}.marks li>svg{width:5rem;height:5rem}}
.marks .line-dot{transform-origin:16px 16px;transition:transform var(--t-move) var(--ease-out)}
@media (hover:hover){.marks li:hover .line-dot{transform:scale(1.35)}}
.marks{--star-dot:#004A48;--star-asterisk:#C4552A}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .marks{--star-dot:#63C9C2;--star-asterisk:#E0714A}}
:root[data-theme=dark] .marks{--star-dot:#63C9C2;--star-asterisk:#E0714A}
.marks p{margin:0;font:400 .84rem/1.45 var(--face);color:var(--ink-soft)}
.marks p strong{color:var(--ink);font-weight:500}
@media screen and (min-width:75rem){.marks{position:absolute;left:calc(100% + 1.6rem);top:2.6rem;width:clamp(13rem,calc((100vw - 75rem)/2 + 13rem),16rem);margin:0;border-top:1px solid var(--blue)}}
.essay-body h2{font:600 1.5rem/1.25 var(--essay)!important;margin:2.6rem 0 .8rem!important;scroll-margin-top:calc(var(--bar-h,64px) + 1.5rem)}
.essay-body h3{font:600 1.2rem var(--essay);margin:1.8rem 0 .5rem;scroll-margin-top:calc(var(--bar-h,64px) + 1.5rem)}
.essay-body ul,.essay-body ol{margin:0 0 1.3rem;padding-left:1.3rem}.essay-body ul{list-style:disc}.essay-body ol{list-style:decimal}
.essay-body li{margin:0 0 .4rem}
.essay-body img{max-width:100%;height:auto;margin:1rem 0}
/* side notes (Round 9 B12): abcastor.com's whole system (castor-site style.css 385-510, 620-652, smooth.js 167-264), in
   this site's blue. Each note exists once, in the Notes list at the foot of the body. On a wide screen, with scripts on
   and CSS anchor positioning, it is lifted beside the block that first cites it, quieter than the text at rest; the call
   and its note light each other under the pointer or keyboard, and a click pairs them on touch screens. On a phone the
   list stays at the foot and a tap on a number opens a copy of the note under its paragraph (a second tap closes it). */
:root{--ink-note:color-mix(in oklab,var(--ink) 56%,var(--paper))}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ink-note:color-mix(in oklab,var(--ink) 70%,var(--paper))}}
:root[data-theme=dark]{--ink-note:color-mix(in oklab,var(--ink) 70%,var(--paper))}
.essay-body{position:relative}
.sidenote-call{color:var(--blue);font:500 .68em var(--meta);vertical-align:super;line-height:0}
.sidenote-call a{color:inherit;text-decoration:none;padding:0 .1em}
.sidenote{overflow-wrap:anywhere}
.footnotes .sidenote{border-top:1px solid var(--blue);padding-top:.4rem;font:400 .8rem/1.5 var(--face);color:var(--note-color,var(--ink-note));transition:top var(--t-state) var(--ease)}
.sidenote a:not(.sidenote-n){color:inherit;transition:text-decoration-color var(--t-state) var(--ease)}
.sidenote-n{font:500 .85em var(--meta);color:var(--blue);text-decoration:none;margin-right:.45em}
.sidenote.is-paired{--note-color:var(--ink)}
.sidenote-call a.is-paired{background:color-mix(in oklab,var(--blue) 18%,var(--paper));box-shadow:0 0 0 3px color-mix(in oklab,var(--blue) 18%,var(--paper));border-radius:2px}
@media (hover:hover){
 .footnotes .sidenote{transition:top var(--t-state) var(--ease),color 150ms var(--ease)}
 .sidenote-call a{--note-wash-on:color-mix(in oklab,var(--blue) 18%,var(--paper));background:var(--note-wash,transparent);box-shadow:0 0 0 3px var(--note-wash,transparent);border-radius:2px;transition:background-color 150ms var(--ease),box-shadow 150ms var(--ease)}
}
.footnotes{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule);font:400 .82rem/1.5 var(--face);color:var(--ink-soft)}
.footnotes .footnotes-title{font:500 .68rem/1.4 var(--meta)!important;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .8rem!important}
.footnotes .footnote-backref{font-family:var(--meta);text-decoration:none;margin-left:.35em}
@media screen and (min-width:75rem) and (scripting:enabled){@supports (top:anchor(top)){
 .footnotes .sidenote{position:absolute;left:calc(100% + 2.4rem);top:var(--sidenote-top);width:13rem;margin:0}
 .sidenote.is-open{display:none}
 .footnotes{margin:0;padding:0;border:0}
 .footnotes .footnotes-title,.footnotes .footnote-backref{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 .footnotes .footnote-backref:focus-visible{position:static;width:auto;height:auto;margin:0 0 0 .35em;overflow:visible;clip-path:none;white-space:normal}
}}
@media (max-width:74.99rem){
 .footnotes .sidenote{position:relative;display:block;width:auto;margin:0 0 .6em;padding:0;border:0;transition:none}
 .footnotes .sidenote-n::after{content:"."}
 .sidenote.is-open{position:static;display:block;width:auto;margin:-.6rem 0 1.3rem;padding-left:.8rem;border-top:0;border-left:2px solid var(--blue);font:400 .84rem/1.45 var(--face);color:var(--ink-soft)}
 .sidenote.is-open .footnote-backref{display:none}
 .sidenote-call{cursor:pointer}
}
/* A4: on a touch screen the number keeps its look but takes a box about 30 by 36px, drawn inside the link so it can never widen the page */
@media (pointer:coarse){
 .sidenote-call a{position:relative;-webkit-tap-highlight-color:transparent}
 .sidenote-call a::after{content:"";position:absolute;left:-10px;right:-10px;top:-10px;bottom:-12px}
}
@media print{.footnotes{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule)}.footnotes .footnotes-title{position:static;width:auto;height:auto;clip-path:none}.footnotes .sidenote{position:static;display:block;width:auto}.sidenote.is-open{display:none}}
.essay-end{margin:3rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--rule);color:var(--ink-soft);font-size:.95rem}
.essay-end p{margin:0 0 .4rem}
@media (max-width:74.99rem){
 .es-grid{grid-template-columns:minmax(0,1fr)}
 .es-col{grid-column:1;max-width:40rem}
 .contents{position:fixed;z-index:39;left:0;top:0;bottom:0;width:min(21rem,76vw);max-height:none;padding:3.2rem 1.5rem 3rem;background:var(--paper);border-right:1px solid var(--rule);box-sizing:border-box}
 .contents .ct-head{display:none}
 .ct-open .ct-scrim{display:block;position:fixed;inset:0;z-index:38;background:transparent}
 .ct-due{position:fixed;left:max(calc(var(--pw) + 10px),env(safe-area-inset-left));top:8px;z-index:40;background:var(--paper);padding:.35rem .5rem;border-radius:2px;box-shadow:0 0 0 1px var(--rule)}
 .ct-open .ct-due{opacity:1!important;visibility:visible}
}
@media (max-width:40rem){
 .ghh-pair{grid-template-columns:1fr}.ghh-castor{border-right:0;border-bottom:1px solid var(--rule)}
 .ghh{padding:1.15rem 1rem 1.25rem}
 .projects .wk,.pc{grid-template-columns:1fr;gap:.35rem 0}.wk-rule{display:none}
 .wk-side{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:0}
 .essay-body{font-size:1.24rem}
 .standfirst{font-size:1.36rem}
 body{font-size:1.17rem}
}

@media (max-width:60rem){
 .idx{grid-template-columns:1fr;gap:.6rem}.idx>h2{margin:0}
 .row .d{flex-basis:100%}
 .hero{min-height:auto;padding:1.1rem 0 2.4rem}
}
@media (max-width:520px){
 .bar{display:grid;grid-template-columns:1fr auto;row-gap:.25rem}
 .right{display:contents}
 .bar-tools{grid-column:2;grid-row:1}
 .site-nav{grid-column:1/-1;grid-row:2;gap:1.4rem}
 .ast-in{display:none}
}
[data-inapp]{overscroll-behavior-y:none}
@keyframes inapp-curtain{to{translate:0 100000px}}
@supports (animation-timeline:scroll()){
 [data-inapp] body{position:relative}
 [data-inapp] body::before{content:"";position:absolute;left:0;right:0;top:-300px;height:300px;z-index:12;pointer-events:none;
  background:var(--paper);animation:inapp-curtain linear both;animation-timeline:scroll(root);animation-range:0px 100000px}
}
/* A5: the Contents word that arrives on a phone takes no taps while it is invisible (it sat on the top of the left edge) */
.ct-due{pointer-events:none}.es-grid.due .ct-due,.ct-open .ct-due{pointer-events:auto}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.row{opacity:1}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
@media (prefers-reduced-motion:no-preference){
 ::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
 html[data-kind=home] main{view-transition-name:main-home;view-transition-class:vt-main}
 html[data-kind=writing] main{view-transition-name:main-writing;view-transition-class:vt-main}
 html[data-kind=works] main{view-transition-name:main-works;view-transition-class:vt-main}
 html[data-kind=page] main{view-transition-name:main-page;view-transition-class:vt-main}
 html[data-kind=article] main{view-transition-name:main-article;view-transition-class:vt-main}
 ::view-transition-group(.vt-main),::view-transition-old(.vt-main),::view-transition-new(.vt-main){animation:none;mix-blend-mode:normal}
 ::view-transition-old(root),::view-transition-old(.vt-main){display:none}
 @keyframes vt-page-out{to{opacity:0}}
 ::view-transition-group(*){animation-duration:var(--t-move);animation-timing-function:var(--ease)}
 ::view-transition-group(.vt-title){animation-duration:460ms;animation-delay:45ms}
 ::view-transition-group(.vt-meta){animation-duration:420ms;animation-delay:85ms}
 html[data-kind=home]::view-transition-group(.vt-title),html[data-kind=writing]::view-transition-group(.vt-title){animation-duration:620ms;animation-delay:90ms}
 html[data-kind=home]::view-transition-group(.vt-meta),html[data-kind=writing]::view-transition-group(.vt-meta){animation-duration:580ms;animation-delay:130ms}
 ::view-transition-old(.vt-meta),::view-transition-new(.vt-meta){height:100%;object-fit:none;object-position:top left}
 ::view-transition-old(.vt-title){animation:vt-hand-off 460ms var(--ease) both}
 ::view-transition-new(.vt-title){animation:vt-take-up 460ms var(--ease) both}
 @keyframes vt-hand-off{0%,34%{opacity:1}100%{opacity:0}}
 @keyframes vt-take-up{0%,30%{opacity:0}100%{opacity:1}}
 ::view-transition-new(*):only-child{animation:none}
 /* B42 (12 Oct): the headline travels over clean paper: the rest of the article (its text, and the date and tags when
    they have no twin on the page you left) fades in as the title lands, so nothing is ever drawn under the flying title */
 @keyframes vt-arrive{0%,55%{opacity:0}100%{opacity:1}}
 html[data-kind=article]::view-transition-new(main-article){animation:vt-arrive 620ms var(--ease) both}
 html[data-kind=article]::view-transition-new(.vt-meta):only-child{animation:vt-arrive 620ms var(--ease) both}
 ::view-transition-group(bar){z-index:3;animation:none}::view-transition-old(bar){display:none}::view-transition-new(bar){animation:none}
 ::view-transition-group(line){z-index:5;animation-duration:520ms;animation-delay:25ms}
 html:focus-within{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:no-preference){html[data-kind=home]::view-transition-group(main-home),html[data-kind=home]::view-transition-group(main-writing),html[data-kind=home]::view-transition-group(main-works),html[data-kind=home]::view-transition-group(main-page),html[data-kind=writing]::view-transition-group(main-home),html[data-kind=writing]::view-transition-group(main-writing),html[data-kind=writing]::view-transition-group(main-works),html[data-kind=writing]::view-transition-group(main-page),html[data-kind=works]::view-transition-group(main-home),html[data-kind=works]::view-transition-group(main-writing),html[data-kind=works]::view-transition-group(main-works),html[data-kind=works]::view-transition-group(main-page),html[data-kind=works]::view-transition-group(main-article),html[data-kind=page]::view-transition-group(main-home),html[data-kind=page]::view-transition-group(main-writing),html[data-kind=page]::view-transition-group(main-works),html[data-kind=page]::view-transition-group(main-page),html[data-kind=page]::view-transition-group(main-article),html[data-kind=article]::view-transition-group(main-works),html[data-kind=article]::view-transition-group(main-page),html[data-kind=article]::view-transition-group(main-article){z-index:2}html[data-kind=home]::view-transition-old(main-home),html[data-kind=home]::view-transition-old(main-writing),html[data-kind=home]::view-transition-old(main-works),html[data-kind=home]::view-transition-old(main-page),html[data-kind=writing]::view-transition-old(main-home),html[data-kind=writing]::view-transition-old(main-writing),html[data-kind=writing]::view-transition-old(main-works),html[data-kind=writing]::view-transition-old(main-page),html[data-kind=works]::view-transition-old(main-home),html[data-kind=works]::view-transition-old(main-writing),html[data-kind=works]::view-transition-old(main-works),html[data-kind=works]::view-transition-old(main-page),html[data-kind=works]::view-transition-old(main-article),html[data-kind=page]::view-transition-old(main-home),html[data-kind=page]::view-transition-old(main-writing),html[data-kind=page]::view-transition-old(main-works),html[data-kind=page]::view-transition-old(main-page),html[data-kind=page]::view-transition-old(main-article),html[data-kind=article]::view-transition-old(main-works),html[data-kind=article]::view-transition-old(main-page),html[data-kind=article]::view-transition-old(main-article){animation:vt-page-out 320ms var(--ease) both;z-index:1;display:block}}
[data-vt=title]{view-transition-class:vt-title}[data-vt=meta]{view-transition-class:vt-meta}.vt-t{display:inline-block}
.rail-fill{view-transition-name:none}
html.theming-vt *{view-transition-name:none!important}
html.theming-vt::view-transition-group(root){animation-duration:320ms}
html.theming-vt::view-transition-old(root){animation:vt-theme-out 320ms var(--ease) both;mix-blend-mode:normal;display:block}
html.theming-vt::view-transition-new(root){animation:vt-theme-in 320ms var(--ease) both;mix-blend-mode:normal}
@keyframes vt-theme-out{from{opacity:1}to{opacity:0}}@keyframes vt-theme-in{from{opacity:0}to{opacity:1}}
:root{--link-wash:color-mix(in oklab,var(--blue) 12%,transparent);--link-wash-press:color-mix(in oklab,var(--blue) 22%,transparent)}
:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a){background-image:linear-gradient(var(--link-wash),var(--link-wash));background-repeat:no-repeat;background-size:0% 100%;border-radius:2px}
@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a){transition:background-size .42s var(--ease),text-decoration-color var(--t-state) var(--ease),color var(--t-state) var(--ease)}}
@media (hover:hover){:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a):is(:hover,:focus-visible){background-size:100% 100%}}
:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a):active{background-image:linear-gradient(var(--link-wash-press),var(--link-wash-press));background-size:100% 100%}
@media (hover:none) and (prefers-reduced-motion:no-preference){:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a){transition:background-size .35s var(--ease) .7s}:is(.essay-body p:not(.sidenote)>a[href],.essay-body li>a[href],.tag-list a):active{transition:background-size .14s var(--ease) 0s}}
.stars-frame{view-transition-name:sky}
@media (prefers-reduced-motion:no-preference){::view-transition-group(sky){z-index:1;animation-duration:560ms;animation-timing-function:var(--ease)}
 ::view-transition-old(sky),::view-transition-new(sky){height:100%;object-fit:cover;object-position:top}
 ::view-transition-old(sky){animation:vt-hand-off 560ms var(--ease) both}::view-transition-new(sky){animation:vt-take-up 560ms var(--ease) both}}
/* COPY START */
/* Chip stands ON the line: his drawing's ground (y 88 of 92) lands on the line's centre. "Castor" sits 8px
   beside him. The line is the website's (abcastor.com, under the name): terracotta, then teal, 2px, equal halves,
   the olive dot centred where they meet, ringed in the page's paper. Move the junction off-centre only if the
   centred dot would touch the words or feel crammed; document the surface and reason. The golden split was
   replaced on 14 October 2026. Words never take the teal; only the line does. Castor's asterisk is typed, not drawn: the Literata glyph at the word's own size and weight, in
   --human, on the word's baseline, exactly where typing "Castor*" puts it (16 September 2026). Under the line,
   bottom-left like a footnote, "we give a dam*": the words start 2px from Chip's left edge with their cap line
   10px under the rule's centre, and the drawn underline lives inside the words, 1px past each end, never under
   the asterisk. No arrow. Vertical geometry rides the browser's cap and baseline edges (text-box: trim-both
   cap alphabetic), the typed asterisk included. */
.sig{position:relative;display:flex;align-items:flex-end;margin:3rem 0 40px;padding:0 0 1px}
.sig::after{content:"";position:absolute;left:0;right:0;bottom:-.5px;height:2px;background:linear-gradient(90deg,var(--human) 0 50%,var(--machine) 50% 100%);pointer-events:none}
.sig::before{content:"";position:absolute;z-index:1;left:calc(50% - 4px);bottom:-3.5px;width:8px;height:8px;border-radius:50%;background:var(--between);box-shadow:0 0 0 2px var(--paper);pointer-events:none}
/* sig--plain: on a page that already opens with the two-colour line (abcastor.com, both founders' sites), the
   colours stay at the top and the signature stands on a plain line, 1px, in the olive of the website's own
   lines (11 October 2026: the off-centre split under a centred top line read as a near-miss). */
.sig--plain::after{bottom:0;height:1px;background:var(--between)}
.sig--plain::before{display:none}
.water{position:relative;z-index:1;top:2.26px;display:block;flex:0 0 auto;width:44px;height:40.48px}
.chip{display:block;width:100%;height:auto;overflow:visible;color:var(--ink)}  /* never crop the tail: at the low end of the wag it swings 2.5px below the drawing's own frame, and a browser clips an inline svg to its frame by default */
.c-tail{transform-box:view-box;transform-origin:37px 77px}
.c-eye{transform-box:fill-box;transform-origin:50% 50%}
.sig:hover .c-tail{animation:wag .9s var(--ease) .35s 2}
.sig:hover .c-eye{animation:blink .5s var(--ease) .7s 1}
@keyframes wag{0%,100%{transform:rotate(0)}30%{transform:rotate(18deg)}70%{transform:rotate(6deg)}}
@keyframes blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
.sig .words{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;padding-bottom:10px}
.sig .qt,.sig .wordmark{display:block;line-height:1;text-box:trim-both cap alphabetic}
.sig .quip{position:absolute;left:2px;top:calc(100% + 9.5px);display:flex;align-items:flex-start;font-family:var(--hand);font-weight:500;font-size:17px;color:var(--ink)}
.sig .qt{position:relative}
.sig .qt .ul{position:absolute;left:-1px;width:calc(100% + 2px);top:calc(100% + 4px);height:6px;color:var(--human);overflow:visible}  /* inside the words: 1px past each end, never under the asterisk. The width is explicit because an inline svg is a replaced element: left plus right never stretched it, and its 120:8 ratio at 6px tall held it at 90px whatever the words */
.sig .by{display:flex;align-items:flex-end;gap:6px}
.sig .lock{display:flex;align-items:baseline}
.sig a.lock{color:inherit;text-decoration:none}  /* the lockup is the way to the studio, on every product (16 September 2026) */
.sig .wordmark{font-family:var(--word);font-weight:560;font-variation-settings:'opsz' 72;letter-spacing:-.055em;font-size:30px;color:var(--ink)}
.sig .ast{display:block;flex:0 0 auto}
.sig .quip .ast{width:8.89px;height:8.89px;margin:-1.2px 0 0 .5px}  /* a typed asterisk's size in Rando Sans at 17px: a 7.04px span, its top on the ascender; six arms hold at 1x from a 6.8px span */
.sig .lock .ast{display:inline;font-family:var(--word);font-weight:560;font-variation-settings:'opsz' 72;font-size:30px;font-style:normal;line-height:1;color:var(--human);margin:0;text-box:trim-both cap alphabetic}  /* a typed asterisk, as everywhere on the site since 16 September 2026: the glyph, the word's size, on the baseline. It carries the word's own trim so both boxes are cap-to-baseline: without it the untrimmed glyph box hangs a descender below the baseline, and "by" and the line itself move with it */
.sig .ast svg{display:block;width:100%;height:100%}
.sig .ast .star{fill:var(--human)}
.sig .ast .key{fill:var(--paper);stroke:var(--paper)}
@media (prefers-reduced-motion:reduce){.sig:hover .c-tail,.sig:hover .c-eye{animation:none}}
/* COPY END */
.bar.slim{--bar-h:64px;position:sticky;top:0;z-index:30;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:1rem;
 height:var(--bar-h);padding:0;box-sizing:border-box}
:root{--bar-h:64px}
.bar.slim::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}
.bar.slim::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);box-shadow:0 0 0 100vmax var(--rule);
 clip-path:inset(0 var(--header-cut,50%));opacity:1}
/* Desktop elastic scrolling can displace sticky contents independently. Keep
   the thread on the viewport and grow one real line, without a clipped shadow.
   Retain bottom:0 for clients measuring the hairline relative to the bar. */
@media (width > 659px){
 .bar.slim::after{position:fixed;left:0;right:auto;top:calc(var(--bar-h) - 1px);bottom:0;width:100%;box-shadow:none;clip-path:none;
  transform:scaleX(var(--header-progress,0));transform-origin:50% 50%}
}
.bar.slim::before{opacity:var(--header-paper,0)}
.bar.slim .site,.bar.slim .right{flex:none;white-space:nowrap}
.bar.slim .bar-tools{position:relative}
.nav-row{display:none}
/* fading in place: visible things take their opacity at once and lose their visibility only when the fade has ended */
.bar.slim :is(.gh-link,.nm,.bar-ct){transition:opacity var(--t-state) var(--ease),visibility 0s}
.bar.slim .bar-ct{position:absolute;top:50%;translate:0 -50%;opacity:0;visibility:hidden;white-space:nowrap;padding:0;min-width:44px;height:44px;display:flex;align-items:center;z-index:1;
 transition:opacity var(--t-state) var(--ease),visibility 0s linear var(--t-state)}
/* the left line starts at the top edge of the hairline: drawn above the bar, its upper part clipped away */
.rail{top:calc(var(--bar-h) - 1px);height:calc(100lvh - var(--bar-h) + 1px);z-index:31;opacity:0;transition:opacity var(--t-state) var(--ease)}
html.scrolled .rail{opacity:1}
.contents{top:calc(var(--bar-h) + 1.2rem)}.ct-due{top:calc(var(--bar-h) + 1rem)}
@media (max-width:74.99rem){.contents{top:var(--bar-h)}.ct-due{top:calc(var(--bar-h) + 8px)}}
@media (max-width:659px){
 :root{--bar-h:54px}.bar.slim{--bar-h:54px}
 .bar.slim{gap:.75rem}
 .bar.slim .site{font-size:1.15rem}
 .bar.slim .site-nav{display:none}
 .bar.slim .right{display:flex}
 .nav-row{display:flex;gap:1.4rem;margin:-.2rem 0 .2rem}
 .nav-row a{position:relative;font-size:.98rem;color:var(--ink-soft);padding:.3rem 0}
 .nav-row a[aria-current]{color:var(--ink)}
 .nav-row a[aria-current] .draw::after{clip-path:inset(0 0 0 0)}
 html[data-kind=article] .ct-due{display:none}
 /* an article being read: Contents fades in where GitHub and LinkedIn stood, they fade out */
 html.reading .bar.slim .bar-ct{opacity:1;visibility:visible;transition:opacity var(--t-state) var(--ease),visibility 0s}
 /* Remove departing link hit areas immediately. The visible SVG descendant
    still finishes the same opacity fade, without covering Contents. */
 html.reading[data-kind=article] .bar.slim .gh-link{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-state) var(--ease),visibility 0s}
 .bar.slim .gh-link .tool-icon{visibility:visible}
 .bar.slim .bar-ct{right:69px}
}
@media (max-width:354px){.bar.slim .nm{display:none}}
@media (max-width:368px){html.reading[data-kind=article] .bar.slim .nm{opacity:0;visibility:hidden;transition:opacity var(--t-state) var(--ease),visibility 0s linear var(--t-state)}}
@supports (animation-timeline:scroll()){[data-inapp] body::before{top:-350px;height:350px}}
/* DOUBLE TAP LANDS ON THE WHOLE PAGE (phones). After a pinch, iOS WebKit's double tap fits the tapped
   text's nearest block box to the screen: scale = screen width / (1.1 x box width), never below 1.
   The reading column's boxes were 360px from x26 on a 402px screen: 1.0152, 6px of the line hidden.
   Here every reading block's box starts at the screen's left edge (a negative margin paid back as
   padding, so no text moves): the fit comes out under 1 and clamps to exactly 1, offset 0.
   Rules drawn as left/top/bottom borders become a background line at the text's edge, so they stay
   where they were. The meta row stops being a flex row of small boxes (each a tap target of its own). */
@media (max-width:45rem){
  :root{--bleed:max(var(--page-pad),calc(var(--pw) + 18px))}
  main.page,.es-grid,.es-col,.essay-head,.essay-head h1,.es-meta,.standfirst,
  .essay-body,.essay-body>:is(p,h2,h3,h4,h5,h6,figure,pre,table,.footnotes,.sidenote),
  .essay-body section>:is(p,h2,h3,h4,h5,h6),
  .essay-body blockquote>*,.footnotes-list>*,.footnotes .footnotes-title,.essay-end,.essay-end>*{
    margin-left:calc(-1 * var(--bleed))!important;padding-left:var(--bleed)!important}
  .essay-body ul,.essay-body ol{margin-left:calc(-1 * var(--bleed))!important;padding-left:calc(var(--bleed) + 1.3rem)!important}
  .essay-body li{margin-left:calc(-1 * (var(--bleed) + 1.3rem))!important;padding-left:calc(var(--bleed) + 1.3rem)!important}
  /* a quote keeps its own box and its left rule; its paragraphs bleed past it to the edge */
  .essay-body blockquote>*{margin-left:calc(-1 * (var(--bleed) + 1.3rem))!important;padding-left:calc(var(--bleed) + 1.3rem)!important}
  /* rules: from borders to 1px background lines over the text column only */
  .essay-body{border-top:0!important;padding-top:calc(2.2rem + 1px)!important;
    background:linear-gradient(var(--rule),var(--rule)) no-repeat var(--bleed) 0/calc(100% - var(--bleed)) 1px}
  .essay-body .set-off{border-top:0!important;border-bottom:0!important;padding-top:calc(1.1rem + 1px)!important;padding-bottom:calc(1.1rem + 1px)!important;
    background:linear-gradient(var(--rule),var(--rule)) no-repeat var(--bleed) 0/calc(100% - var(--bleed)) 1px,
               linear-gradient(var(--rule),var(--rule)) no-repeat var(--bleed) 100%/calc(100% - var(--bleed)) 1px}
  .footnotes{border-top:0!important;padding-top:calc(1.2rem + 1px)!important;
    background:linear-gradient(var(--rule),var(--rule)) no-repeat var(--bleed) 0/calc(100% - var(--bleed)) 1px}
  .essay-end{border-top:0!important;padding-top:calc(1.3rem + 1px)!important;
    background:linear-gradient(var(--rule),var(--rule)) no-repeat var(--bleed) 0/calc(100% - var(--bleed)) 1px}
  /* the note opened under its paragraph: its 2px blue rule stays at the text's edge */
  .essay-body .sidenote.is-open{border-left:0!important;padding-left:calc(var(--bleed) + 2px + .8rem)!important;
    background:linear-gradient(var(--blue),var(--blue)) no-repeat var(--bleed) 0/2px 100%}
  /* the meta row: inline text in one wide block; the tags start their own line, as the flex row put them on a phone */
  .es-meta{display:block!important}
  .es-meta>*{margin-right:1.1rem}
  .es-meta time{white-space:nowrap}
  .es-meta .tag-list{display:block!important;margin:.2rem 0 0 calc(-1 * var(--bleed))!important;padding-left:var(--bleed)!important}
  .tag-list a{margin-right:.7rem;white-space:nowrap}
  /* an animated-underline label inside the column is an inline-block: as inline text it belongs to its paragraph */
  .essay-body .draw,.essay-end .draw{display:inline!important}
  /* B35 (12 Oct): the title's page-turn span is an inline-block, so a double tap on the title fitted 334px (1.09), not the page */
  .essay-head h1 .vt-t{display:block!important;margin-left:calc(-1 * var(--bleed))!important;padding-left:var(--bleed)!important}
}
:root,:root[data-theme]{--head:Jost,'Futura','Century Gothic',system-ui,sans-serif;--face:Jost,'Futura','Century Gothic',system-ui,sans-serif;--read:var(--face);--essay:Jost,'Futura','Century Gothic',system-ui,sans-serif;--meta:Jost,'Futura','Century Gothic',system-ui,sans-serif}
.site,.hero h1,main.page h1,main.page h2,.idx>h2,.row .n,.wk-copy h3,.pc-copy h3,.now h2,.site-nav a{font-family:var(--head)}
.essay-head h1,.essay-body h2,.essay-body h3{font-family:var(--head)!important}
.idx>h2 small{font-family:var(--face)}
.hero h1{max-width:12.6em}
.footer-nav,.es-meta,.pc-date,.with,.wk-side,.ct-toggle,.ct-due,.find-label,.find-go,.find-key,.find-head,.lbl-b .st,.footnotes .footnotes-title,.fs-what,.wk-home,.ghh-at{font-weight:500;letter-spacing:.08em;font-variant-numeric:tabular-nums lining-nums}
.essay-body,.standfirst,.essay-body .set-off,.ct-row>a,.essay-head h1,.essay-body h2,.essay-body h3{font-variation-settings:normal}
.essay-body>p:first-child::first-letter{font-variation-settings:normal}
body{font-size:1.18rem}.essay-body{font-size:1.36rem}.standfirst{font-size:1.6rem}
@media (max-width:40rem){body{font-size:1.32rem}.essay-body{font-size:1.43rem}.standfirst{font-size:1.5rem}}

.site{font-weight:500;letter-spacing:.005em}
.hero h1,main.page h1{font-weight:400;letter-spacing:-.018em}
.row .n{font-weight:500;letter-spacing:0}
.idx>h2,main.page h2,.wk-copy h3,.pc-copy h3{font-weight:500}
.essay-head h1{font-weight:500!important;letter-spacing:-.02em!important}
.essay-body h2,.essay-body h3{font-weight:500!important}
.essay-body{line-height:1.6}
.essay-body>p:first-child::first-letter{font-weight:400}
.footer-nav{font-size:0.784rem}.es-meta{font-size:0.784rem}.pc-date{font-size:0.806rem}.with{font-size:0.840rem}.wk-side{font-size:0.784rem}.ct-toggle,.ct-due{font-size:0.762rem}.find-label,.find-go,.find-key,.find-head{font-size:0.840rem}.wk-home{font-size:0.896rem}.fs-what{font-size:0.806rem}.lbl-b .st{font-size:0.717rem}.ghh-at{font-size:0.941rem}.footnotes .footnotes-title{font-size:0.762rem}:root{--pw:6px;--frame-edge:14px}@media (max-width:768px){:root{--pw:8px;--frame-edge:16px}}
.fragment-anchor{scroll-margin-top:5rem}
.essay-body code{white-space:normal;overflow-wrap:anywhere}
.contact-links{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;list-style:none;padding:0;margin:1.2rem 0 2rem}
.contact-links a{display:inline-flex;align-items:center;gap:.55rem}.contact-links .tool-icon{width:20px;height:20px}
html:not(.js) .find-lens{display:none}html:not(.js) .find>.find-link{display:flex}
html:not(.js) .ct-toggle,html:not(.js) .ct-close,html:not(.js) .ct-due{display:none}
html:not(.js) .contents{visibility:visible;position:static;max-height:none;width:auto}
@media(max-width:75rem){html:not(.js) .contents{border:0;padding:1rem 0;grid-row:auto}}
}