@font-face{font-family:'Jost';src:url(/assets/jost.a9fc0933b67a102a.woff2) format('woff2');font-weight:300 600;font-style:normal;font-display:swap}@font-face{font-family:'Jost';src:url(/assets/jost-italic.973f50f128c71b8d.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}
/* The reading rail adds asymmetric padding; the closing orbit stays on the viewport axis. */
.wrap>[data-castor-orbit]{translate:calc((var(--page-pad) - max(var(--page-pad),calc(var(--pw) + 18px))) / 2) 0}

/* 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{visibility:hidden}   /* round 41: its room is kept until the script shows it, so the bar never shifts (with EN/IT the 1300px bar has no slack left) */
.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:not(.essay) .bar,.on-blue:not(.essay) .hero{background:var(--blue);box-shadow:0 0 0 100vmax var(--blue);clip-path:inset(0 -100vmax)}
.on-blue:not(.essay) .hero{margin-bottom:0}.on-blue:not(.essay) .hero+.idx{border-top:0}
.on-blue:not(.essay) .bar,.on-blue:not(.essay) .hero{--ink:#0B1520;--ink-soft:#0B1520;--display:#0B1520;--u:#0B1520;--uh:#0B1520;color:#0B1520}
.on-blue:not(.essay) .bar a,.on-blue:not(.essay) .hero a{color:#0B1520}
.on-blue:not(.essay) .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:not(.essay) .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}
/* Round 42 (his ask, 27 Oct: let the box grow and shrink more between tabs): each section's opening box is about one
   lede line taller or shorter than the next. Writing: one line. Now: two (the date, then the place). Works: three. About:
   one, then open sky under it for the stars (an open gap, per round 39: closed under 40/56 px, open from 64/80 px). */
.lede .ln{display:block}
main.works:not(.writing)>.lede{max-width:22rem;text-wrap:balance}
main.about>.lede{padding-bottom:5.4rem;padding-bottom:3lh}
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}.now h2 a{position:relative}
.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.5648f80596d1ef85.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 .ft-ed{display:inline-flex;gap:inherit}   /* the two editions wrap together, never one alone */
.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. */
/* Round 33 (B130, his words: "it doesn't expand and contract with the line as the Castor green dot does"): the dot moves
   as Castor's olive point does. The risen line (8px from 1px below the card) has its centre 3px above the card's edge, so
   the dot rises 3px while it grows, in the same property, time and curve as the line: centred on the line at every frame.
   It follows the line's states only; the e's drawing no longer holds it open after the pointer has left. */
.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%) scale(1);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%,calc(50% - 3px)) scale(1.6)}}
.ghh-mine:is(:focus-visible,:active) .ghh-dot{transform:translate(-50%,calc(50% - 3px)) scale(1.6)}
/* A touch screen has no hover: a tap on the e plays its drawing, and the line and the dot rise and return together with it. */
@media (hover:none){.ghh-mine:has(.ghh-ast .go)::after{transform:none}.ghh-mine:has(.ghh-ast .go) .ghh-dot{transform:translate(-50%,calc(50% - 3px)) 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}
@media (min-width:75rem){.contents,.ct-due{margin-top:var(--ct-start,0px)}}
.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}
/* Direct loads rest blue. After a soft arrival, only the title's glyphs sweep
   from reading ink to blue, once the title reaches its final position. */
/* Expand the paint box beyond the tight display line, then cancel that space
   in layout. Background clipping must cover ascenders, accents and descenders. */
.essay-head h1 .vt-t{padding-block:.22em;margin-block:-.22em}
.title-wait .essay-head h1{color:var(--ink)!important}
.title-sweeping .essay-head h1 .vt-t{color:transparent;-webkit-text-fill-color:transparent;
 background:linear-gradient(90deg,var(--blue) 45%,var(--ink) 55%) 100% 0/240% 100% no-repeat;
 -webkit-background-clip:text;background-clip:text}
@media (prefers-reduced-motion:reduce){.title-wait .essay-head h1{color:var(--blue)!important}
 .title-sweeping .essay-head h1 .vt-t{background:none;color:var(--blue);-webkit-text-fill-color:var(--blue)}}
.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}
}
/* Phone opening: one group with the menu, without moving the fixed name bar. */
@media (max-width:659px){.hero{padding-top:.1rem}.hero h1{font-size:2.55rem}
 .hero .c-cof{margin-top:2.4rem}}
/* The chapter heading is the way in. Works owns three subordinate groups. */
main.home .idx{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.1rem 3rem;padding:2.75rem 0 1.4rem}
main.home .idx .sh{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;min-width:0}
main.home :is(.idx,.home-works) :is(h2,h3){margin:0;font:500 clamp(1.5rem,2.1vw,1.8rem)/1.15 var(--head);letter-spacing:-.012em;color:var(--ink)}
main.home .sh :is(h2,h3) a{color:inherit;text-decoration:none;position:relative;display:inline-flex;align-items:center;min-height:44px;transition:color var(--t-state) ease}
main.home .sh :is(h2,h3) a:focus-visible{outline:2px solid var(--blue);outline-offset:5px;border-radius:2px}
@media (hover:hover){main.home .sh :is(h2,h3) a:hover{color:var(--blue)}}
main.home .home-works{border-top:1px solid var(--rule);padding-top:2.75rem}
main.home .home-works>.sh{margin-bottom:1.4rem}
main.home .home-works>.idx:first-of-type{border-top:0;padding-top:0}
main.home .home-works .idx h3{font-size:clamp(1.3rem,1.8vw,1.5rem)}
main.home .idx :is(h2,h3) .castor{font-size:1.18em}
main.home .idx .sd{margin:0;font:400 .95rem/1.5 var(--face);color:var(--ink-soft);max-width:24rem}
main.home .row{padding:.45rem 0}
main.home .row .n{font-size:1.1rem}
main.home .row .d{font-size:.98rem;line-height:1.5}
main.home .row .st{font-size:.85rem}
main.home .hero{padding-bottom:clamp(4.75rem,7vw,6rem)}
main.home .hero .c-cof{margin-top:clamp(1rem,2vw,1.5rem)}
@media (min-width:660px){main.home .hero{padding-top:.5rem;padding-bottom:2rem}}
@media (min-width:600px) and (max-width:659px){main.home .hero{padding-top:.75rem;padding-bottom:5.5rem}}
/* R44-3 (31 Oct, his decision): "My ~~answers~~ best guesses / at the right* hard questions: ...", headline round 5 card 03
   (previews-1007/site/headline-r5/DESIGN.md, sections 4 and 6). One pen: the strike through "answers" and the line under
   "right" are the footer's own line (SIG_LINE_D), terracotta; his hand (Castor Hand, the Rando Sans subset) writes the
   correction in terracotta (never under 24px, which #C4552A needs) and "right" in ink. Layout: the home's own tuned
   rhythm, the title where round 36 put it and the three hero gaps closed and balanced as round 40 asks; the subtitle
   simply takes the old title-to-Castor gap. The spec's pick, L2 (a 68svh frame), failed check-stars-fit (about four times
   the stars: the gate's measurement overflowed, two figures did not complete); its fallback L1 (more air) would break
   round 36's title position or round 40's balanced gaps. With L3's clearing: plain paper behind the words and the Castor
   line, so no star or figure runs under them. The paper sits inside the words' own box and a wide
   blur fades it on every side: no edge to see against the sky's texture, and too little reach to fade the name, the
   menu or the frame's border (under 4% at each). */
main.home .hero{--hand:"Castor Hand","Bradley Hand",cursive}
main.home .hero .ht{position:relative;isolation:isolate;align-self:flex-start;max-width:100%}
main.home .hero .c-cof{position:relative;isolation:isolate}
/* The subtitle takes room from the sky. Tablet and small laptop: it fills most of a short frame (check-stars-fit, 768:
   2.3 whole figures a minute against 2.5), so an open band under the Castor line gives the room back (open, not in
   between: round 39's gap rule; round 40's balance applies from 1280). Narrow phones (under 400px): the band under the
   Castor line grows from 76 to 108px, so the sky's density stays within the gate's 20% of the desktop's (360: 0.74 of
   it, now 0.83). From 400px the band stays 76px: at 430 the deeper band overshot (1.23; main is already at 1.20 there).
   6.25 and 6.75rem pass at 360; 6.5rem cut one figure's hold short in WebKit: the figure fit is sensitive to geometry. */
@media (min-width:660px) and (max-width:1279px){main.home .hero{padding-bottom:5.5rem}}
@media (max-width:399px){main.home .hero{padding-bottom:6.75rem}}
main.home .hero :is(.ht,.c-cof)::before{content:"";position:absolute;z-index:-1;inset:1rem 1.5rem .25rem 1rem;border-radius:24px;background:var(--paper);
 filter:blur(14px);pointer-events:none}
main.home .hero .c-cof::before{inset:.25rem .5rem .25rem .75rem;filter:blur(10px)}
main.home .hero .sub{margin:clamp(.875rem,1.4vw,1.125rem) 0 0;text-wrap:pretty}
main.home .hero .r{white-space:nowrap}
main.home .hero .sub .ast{display:inline-block;font-family:var(--nameplate);font-weight:650;font-variation-settings:"opsz" 72;color:var(--human);line-height:.8;
 margin-left:.02em;transform-origin:50% 55%;transition:transform var(--t-move,.45s) var(--ease,ease)}
@media (hover:hover){main.home .hero .r:hover .ast{transform:rotate(90deg)}}
main.home .hero :is(.hx-ul,.hx-st){position:absolute;overflow:visible;pointer-events:none;color:var(--human)}
main.home .hero :is(.hx-ul,.hx-st) path{stroke-width:var(--w,2.4);stroke-dasharray:100;stroke-dashoffset:0;animation:hx-draw .6s var(--ease-out,cubic-bezier(.16,1,.3,1)) var(--d,.45s) both}
@keyframes hx-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){main.home .hero :is(.hx-ul,.hx-st) path{animation:none}}
html.hx-seen main.home .hero :is(.hx-ul,.hx-st) path{animation:none}
main.home .hero h1.struck{padding-top:.68em}
/* Round 45: the title's screen-reader words ("My best guesses", 1px type, clipped) lie inside the M's own ink, so no
   measuring of text, the sky's or a gate's, meets them in the open sky after "answers" where they used to lie. The
   offsets are in the title's em: --title-em is a registered length, so it reaches the 1px words already in pixels
   (a browser without @property places them at the title's top left corner, still nowhere near the sky). */
@property --title-em{syntax:'<length>';inherits:true;initial-value:0px}
main.home .hero h1.struck{--title-em:1em}
main.home .hero h1.struck>.vh{left:calc(var(--title-em) * .1);top:calc(var(--title-em) * 1.18)}
main.home .hero .was{position:relative;display:inline-block;color:color-mix(in oklab,var(--display) 62%,var(--paper))}
main.home .hero .was .hx-st{left:-.04em;width:calc(100% + .08em);top:.5em;height:.2em;--w:2.3}
main.home .hero .was .fix{position:absolute;left:.04em;bottom:calc(100% - .2em);font:500 max(24px,.5em)/1 var(--hand);letter-spacing:0;color:var(--human);
 white-space:nowrap;transform:rotate(-3deg);transform-origin:0 100%}
main.home .hero .rh{position:relative;display:inline-block;font:500 1.18em/1 var(--hand);color:var(--ink);letter-spacing:0}
main.home .hero .rh .hx-ul{left:-1px;width:calc(100% + 2px);top:calc(100% - .02em);height:.3em;--w:2.2}
/* R47 (his pick H3, round 45): "right" is a real button that looks exactly like the written word (keyboard, screen readers);
   each press writes the next hedge above it in the same hand and pen colour (24px at least, which terracotta needs), the
   press after the last clears it. The hedge never takes taps and is kept inside the stars frame by HEDGE_JS.
   R48: it sits 5 px lower (bottom 100% - .26em, was - .05em), mid-way in the gap between the title and "right", so
   hedges with tall letters clear the struck word's ink (r47's "probably" touched it by 4-7 px; gate check-hedges-r48). */
main.home .hero button.r{all:unset;position:relative;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
main.home .hero button.r::after{content:"";position:absolute;left:-4px;right:-4px;top:calc(50% - 22px);height:44px}
main.home .hero button.r:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:3px}
main.home .hero button.r[data-on] .ast{transform:rotate(90deg)}
main.home .hero .hedge{position:absolute;left:.1em;bottom:calc(100% - .26em);font:500 max(24px,.92em)/1.15 var(--hand);letter-spacing:0;color:var(--human);
 white-space:nowrap;pointer-events:none;transform:rotate(-4deg);transform-origin:0 100%;animation:hedge-write .5s cubic-bezier(.16,1,.3,1) both}
main.home .hero .hedge[hidden]{display:none}
@keyframes hedge-write{from{clip-path:inset(-20% 100% -20% -4%)}to{clip-path:inset(-20% -4% -20% -4%)}}
@media (prefers-reduced-motion:reduce){main.home .hero .hedge{animation:none}}
main.works>section,main.works .proj{scroll-margin-top:calc(var(--bar-h,64px) + 1.5rem)}
@media (max-width:768px){
 main.home .idx{grid-template-columns:1fr;gap:.6rem;padding:2.25rem 0 1rem}
 main.home :is(.idx,.home-works) h2{font-size:1.55rem}main.home .home-works .idx h3{font-size:1.35rem}main.home .row .n{font-size:1.06rem}main.home .row .d{font-size:.95rem}
 main.home .home-works{padding-top:2.25rem}
 main.home .idx .sh{display:flex}
}
@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-title-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}}
 /* Round 33 (B131): the leaving title's opacity is the arriving one's complement, so the plus-lighter pair never pales */
 @keyframes vt-title-off{0%,30%{opacity:1}100%{opacity:0}}
 ::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}
/* Round 33 (B133, his screenshot of 20 Oct, Chrome on a Mac): at the end of the page the rubber band moved the sticky bar
   with the page while the fixed line and rail stayed, so text showed above the line. Fixed boxes stay on the viewport
   through the bounce, so the bar is now fixed, in exactly the place the sticky bar held: its own static left edge, the
   column's width, the top; the column keeps the bar's height in its padding. Page content passes under it. */
.bar.slim{position:fixed;left:auto;right:auto;width:min(100% - var(--page-pad) - max(var(--page-pad),calc(var(--pw) + 18px)),var(--page-max))}
.wrap{padding-top:var(--bar-h)}
@media print{.bar.slim{position:absolute}}
.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,.lang-it,.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}
 /* R47 (his pick N2, round 45): the menu sits in the same place on every page (the home's used to sit 11 px lower and
    hop on a tab change), 7 px closer to the name than the other pages had it */
 .nav-row{display:flex;gap:1.4rem;margin:-.625rem 0 .2rem}
 /* R47: on the home the hero keeps today's height (the menu rose 18 px there: 11 to match the other pages, 7 closer);
    risen with it, the name-to-headline gap fell to 57.8 px, inside the 40-64 px band home-r39 rules out */
 html[data-kind=home] .nav-row{margin-bottom:1.325rem}
 .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 the name stood and the name fades out. Round 45 (his ask, 31 Oct: the
    EN/IT button on every page): every tool stays where it is, EN/IT, GitHub and LinkedIn included (until round 44
    Contents took their place and they faded); nothing moves, two words cross-fade in one place. */
 html.reading .bar.slim .bar-ct{opacity:1;visibility:visible;transition:opacity var(--t-state) var(--ease),visibility 0s}
 html.reading[data-kind=article] .bar.slim .nm{opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-state) var(--ease),visibility 0s linear var(--t-state)}
 /* the home link shrinks to the mark (the fading name overflows it, painted, untouchable), so no tap beside Contents
    leaves the article; a margin as wide as the name keeps every other item in its place (--site-w: the link's natural
    width, set by SLIM_JS) */
 html.reading[data-kind=article] .bar.slim .site{max-width:2.25rem;overflow:visible;margin-right:max(0px,calc(var(--site-w,2.25rem) - 2.25rem))}
 .bar.slim .bar-ct{left:41px;right:auto}
 /* R47 (his ask: "optimise the taps as much as possible"): taps.js gives every header and menu target the exact room
    nearest to it (within 22 px of what you see, split halfway where two meet) as its ::after, clipped to that shape;
    the target's own box takes no taps. While the bar is still transparent (top of the page) its empty paper passes taps
    through, so the menu's room can reach up under it; once scrolled, the paper takes them again. */
 /* and each target's own box hugs what you see (the margins take the difference, so nothing moves): the browsers' own
    touch adjustment measures a link by its box, so it now agrees with the zones (it overrode them by up to 7 px) */
 .bar.slim .bar-tools :is(.gh-link,.find-lens,.find-link,.theme-toggle){width:16px;height:16px;margin:6.8px 4.2px}
 .bar.slim .bar-tools .gh-link{margin-right:6.2px}.bar.slim .bar-tools .gh-link.li-link{margin-right:8.2px}
 .bar.slim .bar-tools .lang-it{width:15px;height:24px;margin:2.8px 4.7px}
 .nav-row a{padding-block:0;margin-block:.3rem}
 html:not(.tz) .nav-row a::after{content:"";position:absolute;inset:-.3rem 0}   /* without the script: the box it had */
 html.tz:not(.scrolled) .bar.slim{pointer-events:none}
 html.tz .bar.slim .site{position:relative}
 html.tz .nav-row{position:relative;z-index:1}   /* the menu's room below its words sits over the page's first lines */
 html.tz :is(.bar.slim .site,.bar.slim .bar-ct,.bar-tools .lang-it,.bar-tools .gh-link,.bar-tools .find-lens,.bar-tools .find-link,.bar-tools .theme-toggle,.nav-row a){pointer-events:none}
 html.tz :is(.bar.slim .site,.bar.slim .bar-ct,.bar-tools .lang-it,.bar-tools .gh-link,.bar-tools .find-lens,.bar-tools .find-link,.bar-tools .theme-toggle,.nav-row a)::after{
  content:"";position:absolute;inset:auto;left:var(--zx,0);top:var(--zy,0);width:var(--zw,0);height:var(--zh,0);clip-path:var(--zc,none);pointer-events:auto;opacity:0}
}
@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}
.bar-tools .lang-it{position:relative;width:24.4px;height:29.6px;padding:0;display:flex;align-items:center;justify-content:center;border:0;background:none;color:var(--ink);cursor:pointer;
 --verde:#008C45;--bianco:#F4F5F0;--rosso:#CD212A;--tri:linear-gradient(90deg,var(--verde) 33.4%,var(--bianco) 33.4% 66.6%,var(--rosso) 66.6%)}
.bar-tools .lang-it::after{content:"";position:absolute;top:calc(50% - 22px);left:calc(50% - 22px);width:44px;height:44px}
.lang-it__chip{display:grid;justify-items:center;font:600 9px/1 var(--meta);letter-spacing:.05em}
.lang-it__chip>span{transition:translate .32s cubic-bezier(.3,1.6,.5,1)}
.lang-it__flag{display:block;width:15px;height:1.6px;margin:2.2px 0;background:var(--tri);box-shadow:0 0 0 .5px color-mix(in oklab,var(--ink) 22%,transparent);
 transition:height .32s cubic-bezier(.3,1.6,.5,1),margin .32s cubic-bezier(.3,1.6,.5,1)}
.lang-it:is(:hover,:focus-visible) .lang-it__flag{height:10px;margin:-1.6px 0;animation:it-wave .9s ease-in-out infinite}
.lang-it:is(:hover,:focus-visible) .lang-it__chip>span:first-child{translate:0 -2.6px}
.lang-it:is(:hover,:focus-visible) .lang-it__chip>span:last-child{translate:0 2.6px}
@keyframes it-wave{0%,100%{transform:skewY(0)}25%{transform:skewY(-6deg)}75%{transform:skewY(6deg)}}
@media (prefers-reduced-motion:reduce){.lang-it:is(:hover,:focus-visible) .lang-it__flag{animation:none}}
.lang-it__name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar.slim .lang-it .lang-it__chip{visibility:visible}
/* the show's own styles travel with assets/show.js (injected on intent), out of the render-blocking stylesheet */
/* the note, in Italian: where the show ends and Zeb89 stays */
.it-note,.it-note *{box-sizing:border-box}
.it-note{--verde:#008C45;--bianco:#F4F5F0;--rosso:#CD212A;--tri:linear-gradient(90deg,var(--verde) 33.4%,var(--bianco) 33.4% 66.6%,var(--rosso) 66.6%);
 position:fixed;inset:auto;margin:0;top:64px;right:max(var(--page-pad),calc((100% - var(--page-max)) / 2 + var(--page-pad)));width:min(23rem,100% - 2 * var(--page-pad));box-sizing:border-box;
 padding:1.05rem 1.1rem .7rem;overflow:visible;border:1px solid var(--rule);border-radius:0 0 18px 18px;background:var(--paper);color:var(--ink);font:400 .98rem/1.45 var(--face);box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
.it-note::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--tri)}
.it-note p{margin:0 0 .5rem}
.it-note__h{margin:.25rem 0 .55rem!important;font:600 2rem/1 var(--head)!important;color:var(--blue)}
.it-note__credit{color:var(--ink-soft);font-size:.86rem;margin:-.35rem 0 .6rem!important;text-align:right}
.it-note__how{margin:0 0 .3rem;padding-left:1.1rem}.it-note__how li{margin-bottom:.3rem}
.it-note__row{display:flex;justify-content:space-between;align-items:center}
.it-note__row button{min-height:44px;padding:0 .2rem;border:0;background:none;color:var(--ink);font:500 .75rem var(--meta);letter-spacing:.07em;text-transform:uppercase;cursor:pointer}
.it-note__row .it-note__again{color:var(--blue)}
.it-note__clip{margin:0 0 .5rem;border-radius:10px;padding:3px;background:var(--tri)}
/* tapping him = Rivedi: a plain button over him, since WebKit sends no click for a tap on a bare video (Rivedi itself
   serves the keyboard and screen readers, so this one stays out of both) */
.it-note__clip{position:relative}.it-note__him{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;padding:0;background:none;cursor:pointer}
.it-note__clip video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:#000;cursor:pointer}
html:not(.js) :is(.it-note__clip,.it-note__again){display:none}
@media (prefers-reduced-motion:no-preference){.it-note:not(.arrive){transition:opacity var(--t-state) var(--ease-out),translate var(--t-state) var(--ease-out)}
 @starting-style{.it-note:not(.arrive):popover-open{opacity:0;translate:0 -8px}}}
/* arriving from the show: the video is already in place, so the card fades in behind it and its lines rise in turn */
.it-note.arrive{animation:it-note-bg .55s cubic-bezier(.2,.7,.2,1) both}
.it-note.arrive::before{animation:it-note-fade .55s both}
.it-note.arrive>:not(.it-note__clip){animation:it-note-in .5s cubic-bezier(.2,.7,.2,1) both}
.it-note.arrive>.it-note__h{animation-delay:.04s}.it-note.arrive>.it-note__credit{animation-delay:.1s}.it-note.arrive>p:not(.it-note__credit):not(.it-note__h){animation-delay:.16s}.it-note.arrive>ul{animation-delay:.22s}.it-note.arrive>.it-note__row{animation-delay:.28s}
@keyframes it-note-bg{from{background-color:transparent;border-color:transparent;box-shadow:0 18px 40px -20px rgba(0,0,0,0)}}
@keyframes it-note-fade{from{opacity:0}}
@keyframes it-note-in{from{opacity:0;translate:0 8px}}
/* a translated page: the drawn underline's twin (data-t) cannot follow a translator, so where Chrome marks the page
   translated the twin steps aside and the words take a plain underline */
:root:is(.translated-ltr,.translated-rtl) .draw::after{content:none}
:root:is(.translated-ltr,.translated-rtl) :is(a:hover,a:focus-visible,a[aria-current]) .draw{text-decoration:underline max(1.5px,.055em) var(--uh)}
@media print{.lang-it,.it-note{display:none}}
/* the hidden "Pieces tagged" before a tag (link text) sits at its link's corner, so the font swap cannot move the line */
.tag-list .vh{top:0;left:0}
: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}
.contact-copy{display:inline-flex;align-items:center;gap:.7rem}.cc-name{display:inline-flex;align-items:center;gap:.55rem}
.cc-go{font:500 .68rem var(--meta);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);padding:.3rem 0;min-height:44px;margin-block:-12px}
.cc-go:hover{color:var(--ink)}.cc-said{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;font-size:1px;line-height:1px}
html:not(.js) .cc-go{display:none}
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}}
}
/* One real sky, clipped by one real border. Never scale the canvas. */
html[data-soft-nav] { scroll-behavior:auto!important }
html[data-soft-nav] .stars-frame { view-transition-name:none; position:absolute; pointer-events:none; box-sizing:border-box; overflow:hidden; border:1px solid var(--rule-strong); border-radius:22px; z-index:0; contain:paint; }
html[data-soft-nav] .stars-frame canvas { position:absolute!important; width:100vw!important; height:100lvh!important; max-width:none; }
html[data-soft-nav] :is(.row,.proj,.pc) { animation:none }
html[data-soft-nav][data-swapping] .wrap { pointer-events:none }
@media(prefers-reduced-motion:reduce) { html[data-soft-nav] * { scroll-behavior:auto!important } }

/* Main is a programmatic reading target. Interactive descendants keep their rings. */
html[data-soft-nav] main:focus { outline:none }

.soft-shared { position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:20;view-transition-name:none }
.soft-shared * { pointer-events:none!important }
.soft-shared .draw::after { display:none }
/* Round 33 (B131): a travelling title keeps the colour it rests in (no forced blue); soft-nav.js orders the fade. */

.soft-shared[data-shared-kind=meta] { overflow:hidden }