/* CHROME, Oct 10, 2026: what every page on the site wears, issued documents included: the header, its menus,
   the day/night switch, page search, the announcement strip, breadcrumbs, reading progress, back to top, the
   sitemap footer, and the frame around an issued document. Nothing here styles a page's own content; class
   names are prefixed (sh-, sf-, sx-) so they cannot collide with an issue's. Page components live in site.css,
   which standing pages load and issued documents never do. */

:root{--r-sm:6px;--r-md:10px;--r-lg:16px;--shell:1180px;--read:760px;--gut:clamp(16px,4vw,32px);
  --f-sans:"IBM Plex Sans",system-ui,sans-serif;--f-serif:"IBM Plex Serif",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;--hdr:60px}

/* one scale, phone to television: the same layout drawn larger from across a room */
@media (min-width:1900px){html{zoom:1.18}}
@media (min-width:2500px){html{zoom:1.5}}
@media (min-width:3400px){html{zoom:2}}

/* ---------- header: solid, so nothing shows through it ---------- */
.sh{position:fixed;inset:0 0 auto;z-index:45;height:var(--hdr);background:var(--paper);border-bottom:1px solid var(--rule-soft)}
.sh-in{max-width:var(--shell);height:100%;margin:0 auto;padding:0 var(--gut);display:flex;align-items:center;gap:6px}
.sh a,.sh button{border-bottom:0!important;text-decoration:none!important;box-shadow:none;font-family:var(--f-sans)}
.sh-brand{display:flex;align-items:center;gap:9px;margin-right:14px;color:var(--ink);font:700 16px/1 var(--f-sans);letter-spacing:-.01em;white-space:nowrap}
.sh-brand svg{width:26px;height:26px}
.sh-nav{display:flex;align-items:center;gap:2px;height:100%}
.sh-item{position:relative;height:100%;display:flex;align-items:center}
.sh-top{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 11px;border:0;border-radius:8px;
  background:none;color:var(--ink-2);font:500 14px/1 var(--f-sans);cursor:pointer;white-space:nowrap}
.sh-top:hover,.sh-item.open .sh-top,.sh-item:focus-within .sh-top{color:var(--ink);background:var(--sunk)}
.sh .sh-top[aria-current="true"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--stamp)!important}
.sh-top .chev{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .15s}
.sh-item.open .chev{transform:rotate(180deg)}
/* a group's panel opens flush with the left edge of its label, and its text runs from the left */
.sh-panel{position:absolute;top:calc(100% - 6px);left:0;min-width:320px;display:none;padding:8px;text-align:left;
  background:var(--surface);border:1px solid var(--rule-soft);border-radius:var(--r-lg);box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
.sh-item:last-child .sh-panel{left:auto;right:0}
.sh-item.open .sh-panel{display:grid}
@media (hover:hover){.sh-item:hover .sh-panel{display:grid}.sh-item:hover .chev{transform:rotate(180deg)}}
.sh-panel a{display:grid;grid-template-columns:30px 1fr;align-items:start;gap:1px 10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-align:left}
.sh-panel a:hover,.sh-panel a:focus-visible{background:var(--sunk)}
.sh-panel .i{grid-row:1/3;width:30px;height:30px;border-radius:8px;background:var(--sunk);display:grid;place-items:center;color:var(--ink-2)}
.sh-panel a:hover .i{background:var(--paper)}
.sh-panel .i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh-panel b{font:600 14px/1.3 var(--f-sans);justify-self:start}
.sh-panel small{font:400 12.5px/1.4 var(--f-sans);color:var(--ink-3);justify-self:start}
.sh-panel .sep{grid-column:1/-1;height:1px;background:var(--rule-soft);margin:6px 4px}
.sh-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.sh-search,.sh-mode{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--rule-soft);
  border-radius:9px;background:var(--surface);color:var(--ink-3);font:400 13px/1 var(--f-sans);cursor:pointer}
.sh-search:hover,.sh-mode:hover{border-color:var(--rule);color:var(--ink-2)}
.sh-search svg,.sh-menu svg,.sh-mode svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sh-search kbd{font:500 10.5px/1 var(--f-mono);padding:3px 5px;border-radius:4px;background:var(--sunk);color:var(--ink-3)}
.sh-mode{padding:0;width:36px;justify-content:center}
.sh-mode .moon{display:none}[data-mode="night"] .sh-mode .sun{display:none}[data-mode="night"] .sh-mode .moon{display:block}
.sh-cta{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;white-space:nowrap;
  background:var(--ink);color:var(--paper)!important;font:600 13.5px/1 var(--f-sans)}
.sh-cta:hover{filter:brightness(1.15)}
.sh-menu{display:none;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--rule-soft);
  border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer}
@media (max-width:1180px){.sh-search span{display:none}}
@media (max-width:1060px){.sh-nav{display:none}.sh-menu{display:inline-flex}}
@media (max-width:560px){.sh-cta.sh-hide-s{display:none}.sh-search kbd{display:none}.sh-brand{margin-right:auto}}
@media (hover:none){.sh-search kbd{display:none}}
/* the floating day/night and playground pills are retired: the switch lives in the header, the playground in the footer */
body.has-sh #modeswitch,body.has-sh .modeswitch,body.has-sh .playlink{display:none!important}

/* the drawer, for phones and tablets: every page, its description under it, all from the left */
.sh-drawer{position:fixed;inset:var(--hdr) 0 0;z-index:44;display:none;overflow-y:auto;padding:12px var(--gut) 40px;background:var(--paper);text-align:left}
.sh-drawer.open{display:block}
.sh-drawer h4{margin:22px 4px 6px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}
.sh-drawer a{display:block;padding:12px 12px 11px;border-bottom:1px solid var(--rule-soft);color:var(--ink);text-decoration:none;font:500 16px/1.3 var(--f-sans);text-align:left}
.sh-drawer a small{display:block;margin-top:3px;color:var(--ink-3);font:400 13px/1.35 var(--f-sans);text-align:left}
.sh-drawer .sh-search{width:100%;height:44px;margin-top:6px}
.sh-drawer .sh-cta{display:flex;margin-top:22px;justify-content:center;height:46px;font-size:15px;border-bottom:0}
html.sh-lock{overflow:hidden}

body.has-sh{padding-top:var(--hdr)!important}
body.has-sh header.bar,body.has-sh .bar{display:none!important}
body.sh-post>nav:first-of-type,body.sh-post nav.top,body.sh-issue>nav:first-of-type{display:none!important}

/* announcement strip: one line; on a phone it scrolls sideways rather than taking three lines */
.sh-note{border-bottom:1px solid var(--rule-soft);background:var(--sunk);padding:9px var(--gut);text-align:center;
  font:500 12px/1.5 var(--f-mono);letter-spacing:.04em;color:var(--ink-2)}
.sh-note b{color:var(--stamp);font-weight:500;letter-spacing:.14em;text-transform:uppercase;margin-right:8px}
.sh-note a{color:var(--ink)}
@media (max-width:700px){.sh-note{white-space:nowrap;overflow-x:auto;text-align:left;scrollbar-width:none;font-size:11.5px;padding:8px var(--gut)}.sh-note::-webkit-scrollbar{display:none}}

/* skip link: the first thing a keyboard reaches */
.sx-skip{position:fixed;left:12px;top:-60px;z-index:70;padding:10px 14px;border-radius:8px;background:var(--ink);color:var(--paper);font:600 14px/1 var(--f-sans);text-decoration:none}
.sx-skip:focus{top:12px}

/* reading progress, under the header */
.sx-progress{position:fixed;left:0;top:var(--hdr);height:2px;width:0;z-index:46;background:var(--stamp);transition:width .08s linear}
/* back to top */
.sx-top{position:fixed;right:16px;bottom:16px;z-index:40;width:42px;height:42px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 8px 24px -12px rgba(0,0,0,.4)}
.sx-top.on{opacity:1;pointer-events:auto}
.sx-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* breadcrumbs above a page's title */
.sx-crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:clamp(22px,4vw,40px) 0 0;font:500 12.5px/1.4 var(--f-sans);color:var(--ink-3)}
.sx-crumbs a{color:var(--ink-2);text-decoration:none}.sx-crumbs a:hover{color:var(--ink);text-decoration:underline}
.sx-crumbs i{font-style:normal;color:var(--rule)}

/* cite this page */
.sx-cite{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--rule-soft);border-radius:999px;background:var(--surface);
  color:var(--ink-2);font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sx-cite:hover{border-color:var(--rule);color:var(--ink)}
.sx-cite svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ---------- the reader ask, at the end of every page ---------- */
.rs{max-width:var(--shell);margin:64px auto 0;padding:26px var(--gut) 24px;border-top:3px solid var(--stamp);background:var(--sunk);font-family:var(--f-sans)}
.rs p{text-transform:none;margin:0 0 12px;max-width:66ch;color:var(--ink-2);font-size:15px;line-height:1.6}
.rs a{color:var(--stamp)}
.rs .rs-eye{font:500 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--stamp);margin-bottom:12px}
.rs .rs-h{text-transform:none;border:0;padding:0;font:600 23px/1.2 "IBM Plex Serif",Georgia,serif;letter-spacing:-.01em;color:var(--ink);margin:0 0 12px;max-width:30ch;text-wrap:balance}
.rs .rs-btns{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px}
.rs .rs-b{display:inline-block;padding:11px 16px;border:1px solid var(--stamp);border-radius:4px;color:var(--stamp);text-decoration:none;
  font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.rs .rs-b.rs-main{background:var(--stamp);color:#fff}
.rs .rs-b:hover{transform:translateY(-1px)}
.rs .rs-fine{font:400 12px/1.65 var(--f-mono);color:var(--ink-3);margin:0}
.rs + .sf{margin-top:0}

/* ---------- the sitemap footer ---------- */
.sf{max-width:var(--shell);margin:64px auto 0;padding:32px var(--gut) 8px;border-top:1px solid var(--rule-soft);font-family:var(--f-sans)}
.sf-cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.sf h5{margin:0 0 10px;font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}
.sf ul{list-style:none;margin:0;padding:0}
.sf li{margin:0 0 8px}
.sf a{color:var(--ink-2);text-decoration:none;font-size:14px}.sf a:hover{color:var(--ink);text-decoration:underline}
.sf-bottom{display:flex;flex-wrap:wrap;gap:10px 18px;justify-content:space-between;align-items:center;margin-top:28px;padding-top:18px;border-top:1px solid var(--rule-soft);
  font:400 12px/1.5 var(--f-mono);color:var(--ink-3)}
.sf-bottom a{font-size:12px}
.sf-play{display:inline-flex;align-items:center;gap:8px}
.sf-play i{display:inline-block;width:8px;height:12px;border-radius:2px}
@media (max-width:860px){.sf-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the identity block every page carries, set as a quiet panel under the sitemap */
body.has-sh footer{max-width:var(--shell)!important;margin:20px auto 0!important;padding:18px var(--gut) 8px!important;border-top:0!important;
  font:400 12.5px/1.75 var(--f-mono)!important;color:var(--ink-3)!important}

/* ---------- an issued document, framed ---------- */
body.sh-issue{background:var(--paper)}
.sx-issue{max-width:820px;margin:28px auto 22px;padding:0 20px;font-family:var(--f-sans)}
.sx-issue .card{display:grid;grid-template-columns:1fr auto;gap:14px 20px;align-items:center;padding:18px 20px;border:1px solid var(--rule-soft);
  border-radius:var(--r-lg);background:var(--surface)}
.sx-issue .kind{font:500 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--stamp)}
.sx-issue .ttl{font:700 clamp(22px,3vw,30px)/1.15 var(--f-sans)!important;letter-spacing:-.02em!important;margin:6px 0 4px!important;color:var(--ink)!important;text-wrap:balance}
.sx-issue .meta{font:400 12.5px/1.5 var(--f-mono);color:var(--ink-3)}
.sx-issue .facts{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.sx-issue .facts div{padding:10px 12px;border-radius:10px;background:var(--sunk)}
.sx-issue .facts b{display:block;font:700 18px/1.1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.sx-issue .facts span{display:block;margin-top:4px;font:400 11.5px/1.35 var(--f-sans);color:var(--ink-3)}
.sx-issue .acts{display:flex;gap:8px;flex-wrap:wrap}
.sx-issue .acts a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:9px;border:1px solid var(--rule-soft);color:var(--ink);
  text-decoration:none;font:600 13.5px/1 var(--f-sans);background:var(--paper)}
.sx-issue .acts a.p{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sx-issue .note{grid-column:1/-1;font:400 12px/1.5 var(--f-sans);color:var(--ink-3)}
@media (max-width:640px){.sx-issue .card{grid-template-columns:1fr}.sx-issue .facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- page search ---------- */
.pal{position:fixed;inset:0;z-index:60;display:none;background:rgba(0,0,0,.45);padding:12vh 16px 0}
.pal.open{display:block}
.pal-box{max-width:560px;margin:0 auto;background:var(--surface);border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);font-family:var(--f-sans)}
.pal input{width:100%;border:0;border-bottom:1px solid var(--rule-soft);padding:14px 16px;background:transparent;color:var(--ink);font:400 15px/1.2 var(--f-sans);outline:none}
.pal ul{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
.pal li a{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:7px;color:var(--ink-2);text-decoration:none;font-size:14px}
.pal li a:hover,.pal li a.sel{background:var(--sunk);color:var(--ink)}
.pal li small{margin-left:auto;color:var(--ink-3);font:400 11px/1 var(--f-mono)}

/* focus that can be seen from a sofa: remote controls move focus with the arrow keys */
:focus-visible{outline:3px solid var(--stamp)!important;outline-offset:3px!important;border-radius:4px}
@media print{.sh,.sh-drawer,.sh-note,.sx-progress,.sx-top,.sx-skip,.sf,.otp,.otp-chips{display:none!important}body.has-sh{padding-top:0!important}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.sf-play i{box-shadow:inset 0 0 0 1px var(--rule)}

/* contrast: secondary text reaches 4.5:1 (WCAG AA) on every background in every day finish. Night already passes.
   Mixed toward each finish's own ink, so the tint stays; standing pages and the frame of an issue only. */
html[data-finish="moon"]:not([data-mode="night"]) body.rd,html[data-finish="moon"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="moon"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="moon"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="moon"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#526375}
html[data-finish="mars"]:not([data-mode="night"]) body.rd,html[data-finish="mars"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="mars"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="mars"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="mars"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#68575D}
html[data-finish="mercury"]:not([data-mode="night"]) body.rd,html[data-finish="mercury"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="mercury"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="mercury"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="mercury"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#51645A}
html[data-finish="jupiter"]:not([data-mode="night"]) body.rd,html[data-finish="jupiter"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="jupiter"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="jupiter"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="jupiter"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#5D5675}
html[data-finish="venus"]:not([data-mode="night"]) body.rd,html[data-finish="venus"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="venus"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="venus"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="venus"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#6A5C4F}
html[data-finish="saturn"]:not([data-mode="night"]) body.rd,html[data-finish="saturn"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="saturn"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="saturn"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="saturn"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#545F6C}
html[data-finish="sun"]:not([data-mode="night"]) body.rd,html[data-finish="sun"]:not([data-mode="night"]) body.sh-issue .sh,html[data-finish="sun"]:not([data-mode="night"]) body.sh-issue .sx-issue,html[data-finish="sun"]:not([data-mode="night"]) body.sh-issue .sf,html[data-finish="sun"]:not([data-mode="night"]) body.sh-issue footer{--ink-3:#6C6246}
.sh-note{background:var(--surface)}
/* Bench posts and essays follow the day's finish too (finish.css overrides a post's own tokens), so they take the same values */
html[data-finish="moon"]:not([data-mode="night"]) body.sh-post{--ink-3:#526375}
html[data-finish="mars"]:not([data-mode="night"]) body.sh-post{--ink-3:#68575D}
html[data-finish="mercury"]:not([data-mode="night"]) body.sh-post{--ink-3:#51645A}
html[data-finish="jupiter"]:not([data-mode="night"]) body.sh-post{--ink-3:#5D5675}
html[data-finish="venus"]:not([data-mode="night"]) body.sh-post{--ink-3:#6A5C4F}
html[data-finish="saturn"]:not([data-mode="night"]) body.sh-post{--ink-3:#545F6C}
html[data-finish="sun"]:not([data-mode="night"]) body.sh-post{--ink-3:#6C6246}
.sx-crumbs i{color:var(--ink-3)}
body.sh-post .spec{background:var(--surface)!important}

/* an issued document styles its own elements (header, nav, a, h1, footer); none of that may reach the site's frame */
header.sh{padding:0!important;margin:0!important;border:0!important;border-bottom:1px solid var(--rule-soft)!important;height:var(--hdr)!important;max-width:none!important;box-sizing:border-box}
.sh *,.sh-drawer *,.sf *,.sx-issue *{box-sizing:border-box}
.sh .sh-brand,.sh .sh-top,.sh .sh-cta{padding-top:0!important;padding-bottom:0!important}
.sh .sh-brand{display:flex!important;gap:9px!important}.sh .sh-cta{display:inline-flex!important}
.sh-panel a{display:grid!important;padding:9px 10px!important}
nav.sf{margin:64px auto 0!important;border-bottom:0!important}
/* "On this page" sits in the page's own layout column, so a scaled page (a television) cannot slide it over the text */
.otp-col{position:absolute;top:0;bottom:0;left:var(--gut);width:200px;display:none}
.otp-col .otp{position:sticky;top:calc(var(--hdr) + 56px);left:auto;display:block}
@media (min-width:1320px){.otp-col{display:block}body .otp:not(.otp-col .otp){display:none}}

/* phone: the header's own button is in the menu; at this width it ran off the right edge. The announcement wraps, so nothing hides off-screen. */
@media (max-width:560px){.sh .sh-cta.sh-hide-s{display:none!important}}
@media (max-width:700px){.sh-note{white-space:normal!important;overflow:visible!important;line-height:1.75}}

/* an issue's figures wear the same coloured stripe as every other figure tile; long values wrap */
.sx-issue .facts div{border-top:3px solid var(--v1,#0F766E)}.sx-issue .facts div:nth-child(4n+2){border-top-color:var(--v2,#1D4ED8)}
.sx-issue .facts div:nth-child(4n+3){border-top-color:var(--v3,#6D28D9)}.sx-issue .facts div:nth-child(4n){border-top-color:var(--v4,#A16207)}
.sx-issue .facts b{overflow-wrap:break-word;font-size:clamp(14px,3.9vw,18px)}

/* a note's heading: a level-2 heading in the outline, set at the size of a level-3 one */
h2.h3{font:600 17px/1.35 "IBM Plex Serif",Georgia,serif!important;margin:0 0 8px!important;letter-spacing:0!important}

/* the Colophon's finish cards show each finish by day: its secondary text gets the same AA-passing grey as the pages */
.half.swatch[data-finish="moon"]{--ink-3:#526375}.half.swatch[data-finish="mars"]{--ink-3:#68575D}.half.swatch[data-finish="mercury"]{--ink-3:#51645A}.half.swatch[data-finish="jupiter"]{--ink-3:#5D5675}.half.swatch[data-finish="venus"]{--ink-3:#6A5C4F}.half.swatch[data-finish="saturn"]{--ink-3:#545F6C}.half.swatch[data-finish="sun"]{--ink-3:#6C6246}
/* the mail provider's form keeps its own dark text, so it always sits on white, in day and night */
#eo-slot{background:#fff;color:#212529;border:1px solid var(--rule-soft);border-radius:var(--r-md,12px);padding:14px 16px 8px;margin:6px 0 14px}

/* the AI notice: one quiet line at the foot of the screen, always (as under an AI chat box); content scrolls clear of it */
.sx-ai{position:fixed;left:0;right:0;bottom:0;z-index:45;margin:0!important;padding:7px var(--gut,16px) calc(7px + env(safe-area-inset-bottom));
  text-align:center;font:500 12px/1.4 var(--f-sans,"IBM Plex Sans",system-ui,sans-serif)!important;letter-spacing:0!important;color:var(--ink-2)!important;
  background:var(--paper);border-top:1px solid var(--rule-soft);max-width:none!important}
.sx-ai a{color:var(--ink-2)!important;text-decoration:underline;text-underline-offset:2px;margin-left:4px;white-space:nowrap}
body.has-sh::after{content:"";display:block;height:44px}
.sx-top{bottom:58px!important}
.sx-ai .sx-pay a{color:var(--stamp)!important;font-weight:500}
@media (max-width:560px){.sx-ai{font-size:11px!important;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}body.has-sh::after{height:66px}}
@media print{.sx-ai{position:static;border:0;padding:12px 0 0}body.has-sh::after{display:none}}

/* one right edge, Oct 13, 2026: on an issued document and a post, every block in the reading column ends where the
   text ends. Each template keeps its own measure (--col); what changes is that nothing runs past it or stops short
   of it: the issue card above, the document's own blocks, the source and citation lines under it and the reader ask
   now share the text's two edges. The issued bytes are untouched; this frames them. */
body.sh-issue:has(#main>.cover),body.sh-post:has(#main>.article){--col:634px}
body:has(#main>h1.mast){--col:756px}
body.sh-issue:has(#main>.top){--col:808px}
body:has(#main>.cover) #main,body:has(#main>.article) #main{max-width:var(--col)}
body:is(.sh-issue,.sh-post) #main :is(div,p,ol,ul,li,figure,figcaption,dl,dd){max-width:none}
body:is(.sh-issue,.sh-post) #main :is(footer,.sf){max-width:none!important;padding-left:0!important;padding-right:0!important}
body:is(.sh-issue,.sh-post)>:is(p:not(.sx-ai),nav.social-row){max-width:var(--col)!important;padding-left:0!important;padding-right:0!important}
body:is(.sh-issue,.sh-post)>:is(section.sx-issue,section.dash){max-width:var(--col);padding-left:0;padding-right:0}
body:is(.sh-issue,.sh-post)>aside.rs,body:is(.sh-issue,.sh-post) #main aside.rs{max-width:var(--col)}
/* the reader ask's text runs the width of its panel, wherever the panel sits */
.rs p{max-width:none!important}
/* phone: an issue's cover line wraps instead of running past the right edge, and a Log table that is wider than the
   screen scrolls inside the column instead of pushing the whole page sideways */
@media (max-width:600px){body.sh-issue .cov-issue{flex-wrap:wrap;white-space:normal}}
@media (max-width:860px){body.sh-issue:has(#main>.top) #main>table{display:block;overflow-x:auto}}
@media (max-width:600px){body.sh-issue .crew-what{min-width:0;overflow-wrap:anywhere}}
/* a Log's title band is a panel: its edges sit on the column's edges, like every other panel's */
body.sh-issue:has(#main>.top) #main>.top{margin-left:0!important;margin-right:0!important}

/* The measuring grid (Oct 21, 2026, after aclide.com's): faint 16px graph paper behind every page,
   strongest at the top and fading out, so it reads as the instrument's ground, not as content.
   Drawn in the finish's own rule color, so it follows all seven finishes, day and night.
   It sits above the page colour and below everything else; cards with a surface colour cover it. */
body{isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  --grid:color-mix(in srgb,var(--rule) 30%,transparent);
  background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px),linear-gradient(to bottom,var(--grid) 1px,transparent 1px);
  background-size:16px 16px;background-position:center -1px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 35%,transparent 100%);
  mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 35%,transparent 100%)}
@media (max-width:640px){body::before{background-size:12px 12px}}
@media print{body::before{display:none}}