/* Denety insights library. Same vocabulary as the homepage.
   Mobile-first. Single-theme. Zero radius. */
:root{
  color-scheme:light;
  --ground:#ffffff; --tint:#f8f8f8; --sunk:#e6e6e6;
  --ink:#141414; --ink-2:#333333; --muted:#555555; --faint:#6e6e6e;
  --rule:#e3e3e3; --rule-2:#c8c8c8; --control-edge:#8a8a8a; --chip-border:#767676;
  /* Wise-like, mirrored from denety-src.html. The lime is 1.47:1 on white,
     so it is a FILL only and never carries type. Forest green is 13.93:1. */
  --brand-ink:#163300; --bright:#9FE870; --bright-edge:#4E9A2A; --on-bright:#163300;
  --r-pill:999px; --r-card:16px; --r-input:10px;
  --ease:cubic-bezier(.4,0,.2,1); --dur:160ms;
  --bounce:cubic-bezier(.34,1.56,.64,1); --dur-bounce:420ms; --dur-reveal:620ms;
  --shadow-hover:0 14px 34px rgba(22,51,0,.16);
  --t-display:clamp(34px,7vw,60px); --t-h2:clamp(24px,3.6vw,36px);
  --t-lead:clamp(17px,2vw,19px); --t-h3:20px; --t-body:17px; --t-ui:14px; --t-label:12px;
  --s1:8px; --s2:16px; --s2b:24px; --s3:32px; --s4:40px; --s5:64px;
  --gutter:clamp(20px,5.6vw,80px); --container:1430px; --measure:68ch; --header-h:57px;
}
@media (min-width:768px){ :root{ --s4:56px; --s5:80px } }
@media (min-width:1024px){ :root{ --s4:64px; --s5:104px; --header-h:65px } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px)}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:Archivo,"Segoe UI",Roboto,Arial,sans-serif;font-size:var(--t-body);
  line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-ink);outline-offset:3px;box-shadow:0 0 0 5px rgba(255,255,255,.9)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
h1{font-size:var(--t-display);line-height:1.04;font-weight:700}
h2{font-size:var(--t-h2);line-height:1.1}
h3{font-size:var(--t-h3);line-height:1.3;letter-spacing:-.012em}
p{margin:0 0 var(--s2);text-wrap:pretty}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%}
.narrow{max-width:none}
@media (min-width:1024px){ .narrow{max-width:calc(var(--measure) + 12ch)} }

.label{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.3;color:var(--muted);display:block}

/* Topic tag. The category was already on every article and every feed card, but
   as plain grey uppercase text it read as metadata rather than as a label you
   could act on. Boxed, it does the job the filter chips already do on the index:
   it names the topic and looks clickable, because it is. Borrowed from .catnav
   so there is one chip shape on the site rather than two. */
.kind{display:inline-flex;align-items:center;
  padding:5px 10px;border:1px solid var(--chip-border);
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.2;color:var(--ink-2);text-decoration:none;white-space:nowrap}
a.kind:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
/* The feed card's category is NOT the chip above, though it carried the same
   rule until 30 September 2026. On an article page .kind is a real anchor to
   the filtered feed. On a card the category is a <span> INSIDE the card's own
   link, so it can never be clicked on its own, yet it was drawn as a bordered
   button with a hover state that lit up its border. An affordance that lies.
   Here it is quiet text that names the topic and gets out of the way. */
.feed-item .cat{font-size:13px;color:var(--muted);white-space:nowrap}
.artmeta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;
  margin-bottom:var(--s2b)}
.artmeta .date{font-size:var(--t-label);letter-spacing:.06em;color:var(--faint)}
.lead{font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ground);color:var(--brand-ink);
  font:600 var(--t-ui)/1 Archivo,sans-serif;padding:14px 20px;border:2px solid var(--brand-ink);text-decoration:none}
.skip:focus{left:var(--gutter);top:8px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);
  border:1px solid var(--bright-edge);background:var(--bright);color:var(--on-bright);
  font:600 var(--t-ui)/1.2 Archivo,sans-serif;padding:.77rem 2rem;min-height:48px;
  text-decoration:none;border-radius:var(--r-pill);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),
             transform var(--dur-bounce) var(--bounce),
             box-shadow var(--dur-bounce) var(--bounce)}
.btn:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;
  transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-hover)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none;transition-duration:90ms}

/* Same reveal contract as the homepage: the class is added by JS only, so a
   no-JS reader gets the feed immediately rather than a blank column. */
.reveal{opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity var(--dur-reveal) var(--ease),
             transform var(--dur-reveal) var(--bounce);
  transition-delay:calc(var(--i,0) * 70ms)}
.reveal.in{opacity:1;transform:none}
.feed-item{transition:transform var(--dur-bounce) var(--bounce)}
.feed-item:hover{transform:translateY(-4px)}
/* The clap button and the topic chips live on ARTICLE and INDEX pages, not the
   homepage. The press feedback was written into the homepage stylesheet by
   mistake, where neither element exists, so it styled nothing and the clap
   button had no feedback at all. */
.clap,.catnav button{transition:transform var(--dur-bounce) var(--bounce)}
.clap:hover,.catnav button:hover{transform:translateY(-2px)}
.clap:active,.catnav button:active{transform:scale(.94);transition-duration:90ms}
.clap:disabled{transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important}
  .btn:hover,.feed-item:hover,.clap:hover,.catnav button:hover{transform:none!important;box-shadow:none!important}
}
.arrow{display:inline-flex;align-items:center;gap:var(--s1);font:600 var(--t-ui)/1.2 Archivo,sans-serif;
  color:var(--brand-ink);text-decoration:none;border-bottom:1px solid transparent;padding:6px 0;min-height:44px}
.arrow i{font-style:normal;transition:transform .15s ease;display:inline-block}
.arrow:hover{border-bottom-color:var(--brand-ink)}
.arrow:hover i{transform:translateX(4px)}

/* header */
.masthead{position:sticky;top:0;z-index:20;background:var(--ground);border-bottom:1px solid var(--rule)}
.masthead .container{display:flex;align-items:center;gap:var(--s2);min-height:calc(var(--header-h) - 1px)}
.wordmark{font:700 14px/1.2 Archivo,sans-serif;letter-spacing:.10em;text-transform:uppercase;text-decoration:none}
.wordmark span{color:var(--brand-ink)}
.masthead .arrow{margin-left:auto}
@media (min-width:1024px){ .wordmark{font-size:16px;letter-spacing:.14em} }

/* hero */
.libhero{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.libhero h1{margin:var(--s2) 0 var(--s2b)}
.statline{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s2b) var(--s3);margin-top:var(--s3);
  padding-top:var(--s2b);border-top:1px solid var(--rule)}
@media (min-width:560px){ .statline{grid-template-columns:repeat(4,minmax(0,1fr))} }
.statline div b{display:block;font:700 26px/1 Archivo,sans-serif;font-variant-numeric:tabular-nums}
.statline div span{display:block;font-size:var(--t-ui);color:var(--muted);margin-top:4px}

.notice{border-left:3px solid var(--bright);background:var(--tint);padding:var(--s2b);
  margin-top:var(--s3);max-width:var(--measure)}
.notice p{margin:0;font-size:var(--t-ui);color:var(--ink-2);line-height:1.6}
.notice b{color:var(--ink)}

/* category nav */
.catnav{display:flex;flex-wrap:wrap;gap:var(--s1);margin-bottom:var(--s4)}
.catnav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 var(--s2);
  border:1px solid var(--chip-border);text-decoration:none;font-size:var(--t-ui);font-weight:500;color:var(--ink-2)}
.catnav a:hover{border-color:var(--brand-ink);color:var(--brand-ink)}
.catnav a span{color:var(--faint);font-variant-numeric:tabular-nums;font-size:var(--t-label)}

/* toc */
.catsec{margin-bottom:var(--s4)}
.catsec h2{font-size:var(--t-h3);padding-bottom:var(--s1);border-bottom:1px solid var(--ink);margin-bottom:0}
.toc{list-style:none;margin:0;padding:0;counter-reset:tc}
.toc li{counter-increment:tc;border-bottom:1px solid var(--rule)}
.toc a{display:grid;grid-template-columns:1fr;gap:2px;padding:var(--s2) 0;text-decoration:none;min-height:44px}
.toc a:hover b{color:var(--brand-ink)}
.toc b{font-weight:600;font-size:var(--t-body);letter-spacing:-.012em;line-height:1.35}
.toc span{font-size:var(--t-label);color:var(--faint);letter-spacing:.04em}

/* articles */
.arts{border-top:1px solid var(--ink)}

/* Footer identity block. This was one run-on paragraph carrying three
   unrelated things: a positioning line, a postal address and an email. At the
   footer's line-height it wrapped mid-address and the underlined email landed
   in the middle of a sentence. Three elements, three jobs, tighter leading. */
.ftag{margin:0 0 10px;max-width:44ch;color:var(--muted);font-size:var(--t-ui)}
.faddr{font-style:normal;margin:0 0 10px;color:var(--muted);
  font-size:var(--t-ui);line-height:1.5}
.fmail{margin:0}
.fmail a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- article photography ---------------------------------------------
   Only the 12 articles whose subject is physically observable carry a photo.
   No caption and no credit by instruction: Pexels does not require attribution
   and provenance is recorded in terms.md instead, so the page stays clean.
   Fixed 3:2 so a row of feed cards never jumps as images land. */
/* The standing sign-off. Set as furniture below a rule, not as a section: it
   is the same on all 49 articles and a reader should be able to skip it. */
.signoff{margin:var(--s4) 0 0;padding-top:var(--s2b);border-top:1px solid var(--rule);
  max-width:var(--measure)}
.signoff p{margin:0 0 8px;color:var(--muted);font-size:var(--t-ui)}
.signoff-links a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:3px}
.arthero{margin:0 0 var(--s4);border-radius:14px;overflow:hidden;background:var(--sunk)}
/* Two images, CSS picks one. No aspect-ratio and no object-fit on either: each
   carries its own correct width and height, so the browser computes the box from
   the file itself and nothing can crop it. A <picture> with a portrait <source>
   did not work, because the rendering <img> keeps its own width and height
   attributes and its intrinsic ratio stayed 3:2, which squeezed the tall cut
   into a wide box and sliced the top and bottom off whatever the CSS said. */
.arthero img{width:100%;height:auto;display:block}
.hero-tall{display:none}
@media (max-width:699px){
  .arthero .hero-wide{display:none}
  .arthero .hero-tall{display:block}
}
/* The feed card's own layout lives in FEED_CSS in build_pages.py, not here.
   It used to live in both, and because the page loads shell_css() FIRST and
   FEED_CSS second, FEED_CSS's `.feed-link{display:block}` silently beat the
   `display:flex` that used to sit here inside a min-width:720px query. The
   result shipped for weeks: on every card the picture stacked ABOVE the text
   at a fixed 240px, leaving two thirds of the row empty. It only became
   obvious on 30 September 2026 when all 78 articles gained an image, because
   before that only 12 cards had a picture to misplace.
   One rule, one file. Do not reintroduce a `.feed-link` or `.feed-pic` rule
   in this stylesheet. */

/* ---------- related reading -------------------------------------------------
   The sidebar only appears once there is genuinely room beside a 68ch reading
   column, so below 1180px it stacks under the article instead of squeezing the
   measure. Items carry data-slug and the Worker removes any whose publish date
   is still in the future, so this list follows the drip on its own. Eight are
   emitted, three are shown; nth-child counts what SURVIVES that removal. */
.related{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule)}
.rel-h{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2b)}
.rel-list{list-style:none;margin:0 0 var(--s2b);padding:0;display:grid;gap:var(--s3)}
.rel-item:nth-child(n+4){display:none}
.rel-link{display:flex;gap:var(--s2);align-items:flex-start;
  text-decoration:none;color:inherit}
.rel-pic{flex:0 0 96px;border-radius:8px;overflow:hidden;background:var(--sunk)}
.rel-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
.rel-body{flex:1 1 auto;min-width:0}
.rel-item b{font-size:15px;line-height:1.34;font-weight:600;color:var(--ink);
  display:block;text-wrap:pretty;margin-bottom:8px}
/* the topic chip sits under the title, matching the article tag elsewhere */
.rel-cat{display:inline-flex;align-items:center;padding:3px 8px;
  border:1px solid var(--chip-border);font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.2;
  color:var(--ink-2);white-space:nowrap}
.rel-link:hover b{text-decoration:underline;text-underline-offset:3px}
.rel-link:hover .rel-cat{border-color:var(--brand-ink);color:var(--brand-ink)}
.rel-all{margin:0}

@media (min-width:1180px){
  /* widen only this page's track, and only here, so the reading measure is
     unchanged and the sidebar gets its own column rather than stealing from it */
  .narrow{max-width:calc(var(--measure) + 12ch + 340px)}
  .arts{display:grid;grid-template-columns:minmax(0,1fr) 280px;
    column-gap:60px;align-items:start}
  .related{margin-top:0;padding-top:var(--s4);border-top:0;
    position:sticky;top:calc(var(--header-h) + 24px)}
}
.art{padding:var(--s5) 0;border-bottom:1px solid var(--rule)}
.artmeta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);align-items:baseline;margin-bottom:var(--s2)}
.artmeta .date{font-size:var(--t-label);color:var(--faint);letter-spacing:.04em}
.art > h2{margin-bottom:var(--s3);max-width:22ch}
.art h2,.art h3,.art h4,.art h5{max-width:var(--measure)}
.art h3{margin:var(--s3) 0 var(--s2);font-size:var(--t-h3)}
.art h4{margin:var(--s2b) 0 var(--s1);font-size:var(--t-body);font-weight:600}
.art h5{margin:var(--s2) 0 var(--s1);font-size:var(--t-ui);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.art p,.art ul,.art ol{max-width:var(--measure)}
.art ul,.art ol{margin:0 0 var(--s2);padding-left:1.3em}
.art li{margin-bottom:6px}
.art a{color:var(--brand-ink);text-underline-offset:3px}
.art code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;overflow-wrap:anywhere;word-break:break-word;
  background:var(--tint);padding:1px 5px;border:1px solid var(--rule)}
.art pre{background:var(--tint);border:1px solid var(--rule);padding:var(--s2);
  overflow-x:auto;font-size:13px;line-height:1.6;margin:0 0 var(--s2);max-width:var(--measure)}
.art pre code{background:none;border:0;padding:0}
.art blockquote{margin:0 0 var(--s2);padding-left:var(--s2);border-left:3px solid var(--bright);
  color:var(--ink-2);max-width:var(--measure)}
.art hr{border:0;border-top:1px solid var(--rule);margin:var(--s3) 0;max-width:var(--measure)}
.tw{overflow-x:auto;margin:0 0 var(--s2b);border:1px solid var(--rule);
  background:
    linear-gradient(to right,var(--ground) 30%,rgba(255,255,255,0)) left/28px 100% no-repeat local,
    linear-gradient(to left,var(--ground) 30%,rgba(255,255,255,0)) right/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(20,20,20,.18),rgba(20,20,20,0)) left/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(20,20,20,.18),rgba(20,20,20,0)) right/12px 100% no-repeat scroll}
.tw:focus-visible{outline:2px solid var(--brand-ink);outline-offset:2px}
.art table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--t-ui)}
.art th,.art td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.art th{background:var(--tint);font-weight:600;font-size:var(--t-label);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.art tbody tr:last-child td{border-bottom:0}
.srcs{margin-top:var(--s3);padding-top:var(--s2b);border-top:1px solid var(--rule);max-width:var(--measure)}
.srcs h3{font-size:var(--t-label);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 var(--s2)}
.srcs ol{margin:0;padding-left:1.3em;font-size:13px;line-height:1.7;color:var(--muted)}
.srcs a{color:var(--brand-ink)}
.srcs span{color:var(--faint)}
.backtop{margin:var(--s2b) 0 0}



/* ---------- routed views ---------- */
.art{display:block}
.art{border-bottom:0;padding-top:var(--s4)}
.artnav{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--ink)}
.artnav-back{margin:0 0 var(--s2b)}
.artnav-pair{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.artnav-link{display:block;background:var(--ground);padding:var(--s2b);text-decoration:none;min-height:44px}
.artnav-link span{display:block;font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.artnav-link b{font-weight:600;font-size:var(--t-body);letter-spacing:-.012em;line-height:1.35}
.artnav-link:hover{background:var(--tint)}
.artnav-link:hover b{color:var(--brand-ink)}
@media (min-width:700px){ .artnav-pair{grid-template-columns:1fr 1fr} }
.crumb{border-bottom:1px solid var(--rule);background:var(--ground)}
.crumb .container{display:flex;align-items:center;gap:var(--s2);min-height:48px;flex-wrap:wrap}
.crumb a{font-size:var(--t-ui);color:var(--brand-ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;min-height:44px}
.crumb a:hover{text-decoration:underline;text-underline-offset:3px}
.crumb span{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint)}

/* ---------- email wall ---------- */
[hidden]{display:none!important}
.wall{position:relative;max-width:var(--measure);margin:0 0 var(--s3);
  padding:var(--s3) var(--s2b) var(--s2b);border:1px solid var(--rule);background:var(--tint)}
.wall::before{content:"";position:absolute;left:-1px;right:-1px;top:-120px;height:120px;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,var(--ground) 88%);pointer-events:none}
.wall-kicker{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-ink);margin:0 0 var(--s1)}
.wall-lead{font-size:var(--t-body);line-height:1.55;color:var(--ink);margin:0 0 var(--s2b);max-width:56ch}
.wall-form{display:grid;gap:var(--s1)}
.wall-form label{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
/* type=text too: the first and last name fields added on 2 September 2026
   were never picked up by an email-only selector, so they shipped as bare
   browser default inputs next to a styled one. */
.wall-form input[type=email],
.wall-form input[type=text]{width:100%;max-width:34rem;border:1px solid var(--control-edge);
  border-radius:var(--r-input);background:var(--ground);color:var(--ink);
  font:400 16px/1.5 Archivo,sans-serif;padding:12px var(--s2);min-height:48px;
  transition:border-color var(--dur) var(--ease)}
.wall-form input[type=email]:focus-visible,
.wall-form input[type=text]:focus-visible{border-color:var(--brand-ink);
  outline:2px solid var(--brand-ink);outline-offset:2px}
.wall-form .btn{justify-self:start;margin-top:var(--s1)}
.wall-kicker{display:inline-block;font-size:var(--t-label);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;background:var(--bright);
  color:var(--on-bright);padding:5px 12px;margin:0 0 var(--s2)}
.wall-list{list-style:none;padding:0;margin:0 0 var(--s2b);display:grid;gap:10px}
.wall-list li{position:relative;padding-left:26px;font-size:var(--t-body);
  line-height:1.5;color:var(--ink-2)}
.wall-list li::before{content:"";position:absolute;left:2px;top:8px;width:10px;
  height:5px;border-left:2px solid var(--brand-ink);
  border-bottom:2px solid var(--brand-ink);transform:rotate(-45deg)}
.wall-note{font-size:13px;color:var(--muted);margin:var(--s1) 0 0;max-width:52ch;line-height:1.55}
.wall-msg{font-size:var(--t-ui);font-weight:600;color:var(--brand-ink);margin:var(--s1) 0 0;min-height:1px}
.wall-msg[data-err]{color:#a1170f}

.wall-lead{font-size:var(--t-lead);font-weight:600;line-height:1.4;letter-spacing:-.012em;
  color:var(--ink);margin:0 0 var(--s1);max-width:52ch}
.wall-sub{font-size:var(--t-ui);color:var(--muted);margin:0 0 var(--s2b);max-width:56ch;line-height:1.55}
.wall-alt{font-size:13px;color:var(--muted);margin:var(--s2) 0 0;padding-top:var(--s2);
  border-top:1px solid var(--rule);max-width:56ch;line-height:1.55}
.wall-alt a{color:var(--brand-ink)}
.wall p{max-width:56ch}
.wall .btn{margin-top:var(--s1)}
.unlocked-note{background:var(--tint);border-left:3px solid var(--bright);
  padding:var(--s2) var(--s2b);font-size:var(--t-ui);color:var(--ink);margin:0 0 var(--s3);
  max-width:var(--measure)}
.wall-demo{font-size:12px;color:var(--faint);margin:var(--s2) 0 0;padding-top:var(--s2);
  border-top:1px solid var(--rule);max-width:56ch;line-height:1.6}
.memberbar{position:sticky;top:var(--header-h);z-index:15;background:var(--brand-ink);color:#fff;
  font-size:13px;padding:8px var(--gutter);display:flex;gap:var(--s2);justify-content:space-between;
  align-items:center;flex-wrap:wrap}
.memberbar button{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;
  font:600 12px/1 Archivo,sans-serif;padding:7px 12px;border-radius:var(--r-pill);cursor:pointer;min-height:32px}
.memberbar button:hover{background:#fff;color:var(--brand-ink)}


.legalpage h3{margin:var(--s4) 0 var(--s2)}
.legalpage table{font-size:var(--t-ui)}
.legalpage .ph{background:#fdf6e3;border-bottom:1px dashed #8a6d2a;color:#6b5418;padding:1px 4px}


/* ---------- diagrams ---------- */
.fig{margin:var(--s3) 0;max-width:var(--measure)}
.fig svg{width:100%;height:auto;display:block;color:var(--ink);
  border:1px solid var(--rule);background:var(--ground);padding:var(--s2)}
.fig figcaption{font-size:13px;color:var(--muted);line-height:1.55;margin-top:var(--s1)}
.fig .accent{color:var(--brand-ink)}

/* Article diagrams, restyled to match the homepage ecosystem graphic.
   These are hand-authored SVGs that encode real regulatory logic (recordability
   gates, workflow stages, boundary tests), so NOTHING here changes geometry or
   text. It is purely presentation: the shapes were plain black line art using
   currentColor, and CSS overrides presentation attributes, so the palette can
   be applied without touching a single coordinate.

   Only the nine elements carrying marker-end are animated. Those are provably
   connectors. The other 39 lines are axes, dividers and brackets, and setting
   all of them moving beside body text would be noise rather than motion. */
.fig svg{color:var(--brand-ink);overflow:visible}
.fig svg rect{fill:#EAF9DD;stroke:var(--brand-ink);stroke-width:1.2;rx:8}
.fig svg polygon{fill:var(--bright);stroke:var(--brand-ink);stroke-width:1.2}
.fig svg text{fill:var(--brand-ink)}
.fig svg line{stroke:var(--brand-ink);opacity:.55}
.fig svg [marker-end]{stroke-dasharray:5 6;animation:figflow 2.8s linear infinite;opacity:.75}
.fig svg [marker-end]:nth-of-type(2){animation-delay:-.9s}
.fig svg [marker-end]:nth-of-type(3){animation-delay:-1.8s}
@keyframes figflow{to{stroke-dashoffset:-88}}

@media (prefers-reduced-motion:reduce){
  .fig svg [marker-end]{animation:none!important}
}

/* footer */
footer.site{background:var(--tint);border-top:1px solid var(--ink);padding:var(--s5) 0 var(--s3)}
footer.site .fh{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);margin:0 0 var(--s2)}
footer.site p{font-size:var(--t-ui);color:var(--muted);max-width:70ch}
footer.site a{color:var(--brand-ink)}
.legal{padding-top:var(--s2b);border-top:1px solid var(--rule);margin-top:var(--s3);
  font-size:13px;color:var(--muted)}

.feedwrap{padding:0 0 72px}
.feed{max-width:728px;margin:0 auto;padding:0 24px}
/* Topic nav. This was a single horizontal strip with overflow-x:auto AND the
   scrollbar hidden on both engines, so anything past the fold of the strip
   was unreachable unless you guessed it was there. That was survivable at 11
   topics and is not at 13: most of them sat off-screen with nothing to say
   so. It wraps now. Two rows on a laptop, a few on a phone, every topic
   visible and nothing hidden behind a gesture. */
.catnav{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:2px;
  padding:14px 0 10px;margin:0 0 8px;border-bottom:1px solid #f2f2f2}
.catnav button{flex:0 0 auto;font-size:14px;color:#6b6b6b;text-decoration:none;
  background:none;border:0;font-family:inherit;cursor:pointer;
  padding:0 0 8px;border-bottom:1px solid transparent;white-space:nowrap}
.catnav button:hover{color:#242424}
.catnav button.on{color:#242424;border-bottom-color:#242424}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- the feed card ---------------------------------------------------
   Sole owner of the card's layout. library-shell.html carried a second copy
   until 30 September 2026, and since this block loads last its
   `display:block` beat the shell's `display:flex`, so every picture stacked
   above its text at a fixed 240px with the rest of the row empty.

   Mobile first, because that is where most of this is read: picture full
   width above the words, nothing cropped to a thumbnail the size of a stamp.
   From 720px up the row becomes two columns, words left and picture right,
   both starting at the same top edge. The picture is a fixed width so a
   column of cards keeps one clean vertical line down the page rather than a
   ragged edge that follows each image. */
.feed-item{border-bottom:1px solid #f2f2f2}
.feed-link{display:flex;flex-direction:column;gap:16px;
  padding:26px 0 28px;text-decoration:none;color:inherit}
.feed-text{min-width:0}
.feed-pic{border-radius:10px;overflow:hidden;background:#f2f2f2}
.feed-pic img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block}
@media (min-width:720px){
  .feed-link{flex-direction:row;align-items:flex-start;gap:28px}
  .feed-text{flex:1 1 auto;order:1}
  .feed-pic{flex:0 0 232px;width:232px;order:2}
}
.byline{display:flex;align-items:center;gap:8px;font-size:13px;color:#242424;margin:0 0 9px}
.avatar{width:20px;height:20px;border-radius:50%;background:#014b3f;color:#fff;
  font-size:11px;font-weight:600;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.byline .dot,.feed-meta .dot{color:#6b6b6b}
.byline .cat{color:#6b6b6b}
.feed-item h2{font-size:21px;line-height:1.25;font-weight:700;color:#242424;
  margin:0 0 6px;letter-spacing:-.011em;text-wrap:balance}
.feed-link:hover h2{text-decoration:underline;text-underline-offset:2px}
.dek{font-size:15px;line-height:1.55;color:#6b6b6b;margin:0 0 13px;
  max-width:62ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.feed-meta{display:flex;align-items:center;gap:8px;font-size:13px;color:#6b6b6b}
.feed-meta .claps{display:inline-flex;align-items:center;gap:4px}
.feed-meta .claps svg{display:block;opacity:.75}
/* The clap control on an article. A button, because it does something. */
.clapbar{display:flex;align-items:center;gap:12px;margin:var(--s4) 0 0;
  padding:18px 0 0;border-top:1px solid #f2f2f2}
.clap{display:inline-flex;align-items:center;gap:8px;background:none;
  border:1px solid #e0e0e0;border-radius:999px;padding:8px 15px;cursor:pointer;
  font:inherit;font-size:14px;color:#242424;line-height:1;
  transition:border-color .15s,transform .1s}
.clap:hover:not(:disabled){border-color:#242424}
.clap:active:not(:disabled){transform:scale(.96)}
.clap:disabled{cursor:default;opacity:.55}
.clap svg{display:block}
.clap.on{border-color:#014b3f;color:#014b3f}
.clapbar .note{font-size:13px;color:#6b6b6b}
@media (prefers-reduced-motion:reduce){.clap{transition:none}
  .clap:active:not(:disabled){transform:none}}
.feed-item[hidden]{display:none}
/* Phone. The old block shrank the headline to 17px and the standfirst to
   14px, which made the one view most of this is read in the hardest to read.
   A card on a phone has the whole screen width, so it can afford the type.
   The gutter widens rather than the words getting smaller. */
@media (max-width:600px){
  .feed{padding:0 22px}
  .feed-link{padding:22px 0 24px;gap:14px}
  .feed-item h2{font-size:20px;line-height:1.3}
  .dek{font-size:15px;line-height:1.6;-webkit-line-clamp:3}
  .byline,.feed-meta{font-size:13px}
  .byline{flex-wrap:wrap;row-gap:4px}
}