:root{--bg:#F5F5F6;--panel:#FFFFFF;--panel-2:#F5F5F6;--line:#E2E2E6;
 --line-soft:#EDEDF0;--ink:#1A1A1F;--ink-2:#45454D;--ink-3:#6B6B75;
 --accent:#4A2CFF;--bar:#1C1C1C;--bar-2:#5A5A5A;
 --strip:linear-gradient(90deg,#4A2CFF 0 20%,#16C25C 20% 40%,#F0C800 40% 60%,
  #E63030 60% 80%,#E31FE6 80% 100%);
 --font:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.6 var(--font);
 -webkit-font-smoothing:antialiased}
/* Three cells: the wordmark left, the title in the centre of the window, and
   an empty right cell of the same width as the left, which keeps the title
   centred. */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
 gap:16px;padding:18px 20px 16px;
 background:linear-gradient(90deg,var(--bar) 55%,var(--bar-2));
 border-bottom:3px solid transparent;border-image:var(--strip) 1;color:#fff}
.topbar .brand{justify-self:start;display:inline-flex;align-items:center}
.topbar .brand img{height:14px;width:auto;display:block}
.topbar .masthead{text-align:center}
.topbar h1{margin:0;font-size:34px;line-height:1.15;font-weight:750;
 letter-spacing:.08em}
.topbar h1 a{color:#fff;text-decoration:none}
.topbar .tagline{margin:6px 0 0;font-style:italic;color:#C8C8CE;font-size:14px}
/* A phone: the wordmark on its own line, the title centred under it. */
@media (max-width:640px){
 .topbar{grid-template-columns:1fr;gap:12px;padding:12px 16px 14px}
 .topbar .right{display:none}
 .topbar h1{font-size:26px;letter-spacing:.06em}
 .topbar .tagline{font-size:13px}
}

/* The issue on the look of the fund's boards: the dark top bar from
   `lib/site.py`, the summary and each section a white card on the grey page,
   section titles in small grey capitals. The older names (--fg, --muted,
   --rule, --quote) are kept as aliases so the rules below read as before. */
:root{--fg:var(--ink);--muted:var(--ink-3);--rule:var(--line);--quote:var(--panel-2)}
.wrap{max-width:44rem;margin:0 auto;padding:24px 16px 64px}
.wrap>header{margin:0 0 12px}
.dek{color:var(--ink);font-size:18px;font-weight:650;margin:0;
 font-variant-numeric:tabular-nums}
.summary,.sec{background:var(--panel);border:1px solid var(--line);
 border-radius:8px;box-shadow:0 1px 2px rgba(20,20,30,.04)}
.summary{font-size:16px;line-height:1.6;color:var(--ink-2);margin:0 0 16px;
 padding:18px 22px}
.sec{padding:6px 24px 10px;margin:0 0 16px}
.sec>h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-3);margin:16px 0 0;padding:0;border:0}
.count{color:var(--ink-3);font-weight:400;font-size:.85em;letter-spacing:0}
/* The three issues of August 2026 before 2026-08-24 have no <section>: their
   headings and entries sit straight in `.wrap`. Each entry is its own card
   there. */
.wrap>h2{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink-3);margin:28px 0 8px;padding:0;border:0}
.wrap>article{background:var(--panel);border:1px solid var(--line);border-radius:8px;
 box-shadow:0 1px 2px rgba(20,20,30,.04);padding:16px 22px;margin:0 0 12px}
article{margin:18px 0;scroll-margin-top:1.5rem}
.sec>article+article,.sec>article+.stub{border-top:1px solid var(--line-soft);
 padding-top:18px}
/* A follower sits under the story it comments on: indented, ruled, and a shade
   quieter, so the anchor still reads as the headline of the group. */
article.follow{margin:10px 0 18px 1.5rem;padding:0 0 0 1rem;
 border-left:2px solid var(--line);border-top:0}
.sec>article+article.follow{border-top:0;padding-top:0}
article.follow h3{font-size:14.5px}
/* An anchor this entry used to be published under. No box, no space, and it
   scrolls to the same place the entry does. */
.alias{display:block;height:0;scroll-margin-top:1.5rem}
.arrow{color:var(--ink-3);font-weight:400}
.stub{margin:12px 0;color:var(--ink-3);font-size:13.5px}
.stub a{color:var(--ink);text-decoration:none}
.stub a:hover{color:var(--accent);text-decoration:underline}
.summary a{color:var(--ink-2);text-decoration:underline;
 text-decoration-color:var(--accent);text-underline-offset:2px}
.summary a:hover{color:var(--accent)}
h3{font-size:16px;line-height:1.4;margin:0 0 4px;font-weight:650}
h3 a{color:var(--ink);text-decoration:none}
h3 a:hover{color:var(--accent);text-decoration:underline}
/* The story's controls: the link icon, and on a phone the share icon. They sit
   in one `.ctl` group that never wraps apart, after the headline's last word.
   Hidden until the headline is hovered or a control has focus; a device with
   no hovering pointer shows them faintly all the time, because it has no other
   way to reveal them. */
h3 .ctl{white-space:nowrap;margin-left:.45rem}
h3 a.perma,h3 button.share{position:relative;color:var(--ink-3);
 font-weight:400;opacity:0;text-decoration:none;transition:opacity .12s;
 display:inline-flex;align-items:center;vertical-align:-.1em}
h3 button.share{background:none;border:0;padding:0;font:inherit;cursor:pointer;
 margin-left:.6rem}
h3 a.perma svg,h3 button.share svg{width:1em;height:1em}
h3:hover a.perma,h3 a.perma:focus-visible,
h3:hover button.share,h3 button.share:focus-visible{opacity:1}
h3 a.perma:hover,h3 button.share:hover{color:var(--accent);text-decoration:none}
h3 a.perma.done{opacity:1;color:var(--accent);font-size:.8rem}
@media (hover:none){h3 a.perma,h3 button.share{opacity:.55}}
/* A finger needs about 44px. The icon stays 1em; an invisible box around each
   control takes the tap, split at the midpoint between the two icons. */
/* With a hovering pointer the group takes no width, so it never pushes onto a
   line of its own under a headline that exactly fills its last line. */
@media (hover:hover){
 h3 .ctl{display:inline-block;width:0;margin-left:0}
 h3 .ctl a.perma{margin-left:.45rem}
}
@media (pointer:coarse){
 h3 button.share{margin-left:1.1rem}
 /* The headline's own text stays on top of the tap areas around the icons. */
 h3>a{position:relative;z-index:1}
 h3 a.perma::after,h3 button.share::after{content:"";position:absolute;
  top:50%;left:50%;width:calc(1em + 1.1rem);height:44px;
  transform:translate(-50%,-50%)}
}
.meta{color:var(--ink-3);font-size:12.5px;margin:0 0 8px}
.why{margin:0 0 10px;color:var(--ink-2)}
/* The featured episode. No rule and no inset: Marvin, 2026-08-25 -- the
   vertical bar means "these are their words", and nothing else. A long listen
   wearing the same bar as the quotes inside it made the whole entry read as
   quoted. It sits in the flow like every other entry and is marked by its
   headline and its length, which is what actually distinguishes it. */
article.long h3{font-size:17.5px}
.longread{margin:0 0 12px;color:var(--ink-2)}
.ask{color:var(--ink-3)}
.qmark{font-weight:600;font-size:.72rem;letter-spacing:.06em;color:var(--accent);
 margin-right:.3rem;vertical-align:.08em}
blockquote{margin:10px 0;padding:10px 14px;background:var(--panel-2);
 border-left:3px solid var(--accent);border-radius:0 6px 6px 0;color:var(--ink-2)}
blockquote p{margin:0 0 .35rem}
blockquote p:last-child{margin:0}
.ts{font-size:12px;color:var(--ink-3);text-decoration:none;font-variant-numeric:tabular-nums}
.credit{font-size:11.5px;color:var(--ink-3);font-style:italic}
.ts:hover{color:var(--accent)}
footer{margin-top:28px;color:var(--ink-3);font-size:12.5px;text-align:center}
footer a{color:var(--ink-3)}
a{color:var(--accent)}

/* The section rail.
 *
 * The `deals` quicklinks rail, on a page that is static rather than a SPA.
 * Same shape and same restraint: small, muted, and no colour except on the
 * section being read.
 *
 * It has two forms, and the narrow one is not "hidden". Marvin, 2026-08-25:
 * keep the column until the window truly cannot hold it, and when it cannot,
 * put the list between the summary and the first section -- which is where a
 * reader who has just finished the summary is deciding where to go. So:
 *
 *   under 44em   one wrapped line of links, inline, in the reading order
 *   44em and up  a column of its own, sticky, marking the section you are in
 *
 * The prose gives up width before the rail does. Above 60em the column is
 * 44rem and the layout is fixed; between 44em and 60em the wrap is narrower
 * than its max and the prose absorbs every pixel of that, down to about 30rem
 * at the breakpoint. That is the point of 44em: the first version cut the rail
 * at 1180px, which dropped it while there was still most of a column of room.
 *
 * `em` not `px` in the queries, because the widths either side of them are in
 * `rem`: at a larger root size both move together instead of the breakpoint
 * firing against a column that is no longer 704px wide. */
.toc{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:2px;margin:-4px 2px 14px}
.toc a{color:var(--muted);text-decoration:none;font-size:12px;line-height:1.6}
.toc a:hover{color:var(--fg)}
.toc a.on{color:var(--fg)}
.toc .n{opacity:.55;margin-left:4px;font-variant-numeric:tabular-nums}
/* Inline, a digit hint reads as a second number beside the count and there is
   rarely a keyboard at this width. The bindings still work; only the print of
   them goes. */
.toc kbd,.toc .keyhint{display:none}
@media (min-width:44em){
 .wrap.toc-on{display:grid;grid-template-columns:148px minmax(0,1fr);
  column-gap:22px;max-width:calc(44rem + 170px);align-items:start}
 /* Placed explicitly, all four of them, because the source order is the one
    the narrow form needs -- header, summary, rail, body -- and the column form
    wants the rail beside the other three rather than after the summary. */
 .wrap.toc-on>header{grid-column:2;grid-row:1}
 .wrap.toc-on>.summary{grid-column:2;grid-row:2}
 /* Across the summary's row and the body's: a sticky box can only travel
    inside its own grid area, and pinned to the summary's row alone it would
    scroll away with the summary. */
 .wrap.toc-on>.toc{grid-column:1;grid-row:2/4}
 .wrap.toc-on>.main{grid-column:2;grid-row:3}
 .toc{display:block;position:sticky;top:1.5rem;align-self:start;
  max-height:calc(100svh - 4rem);overflow-y:auto;margin:6px 0 0;
  border-left:1px solid var(--rule);padding-left:12px}
 /* The active marker sits on the rail's own rule rather than beside it, so
    nothing moves as it travels down. */
 .toc a{display:block;padding:3px 0;font-size:11.5px;line-height:1.35;
  border-left:2px solid transparent;margin-left:-13px;padding-left:11px}
 .toc a.on{border-left-color:var(--accent)}
 .toc .n{margin-left:5px}
 .toc kbd{display:inline;font:inherit;font-size:10px;opacity:.6;
  margin-right:5px;font-variant-numeric:tabular-nums}
 .toc .keyhint{display:block;margin-top:.9rem;font-size:10px;
  color:var(--muted);opacity:.7}
}
/* Room for the full-width column: the rail widens, and the prose is 44rem
   from here up however wide the window gets. */
@media (min-width:60em){
 .wrap.toc-on{grid-template-columns:168px minmax(0,1fr);column-gap:26px;
  max-width:calc(44rem + 194px)}
}
.sec{scroll-margin-top:1.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#keysheet{border:1px solid var(--line);border-radius:8px;background:var(--panel);
 color:var(--ink);box-shadow:0 8px 24px rgba(20,20,30,.12);padding:1.1rem 1.3rem;font-size:.88rem;max-width:22rem}
#keysheet::backdrop{background:rgba(0,0,0,.35)}
#keysheet h2{margin:0 0 .6rem;font-size:1rem;border:0;padding:0}
#keysheet table{border-collapse:collapse}
#keysheet td{padding:2px 10px 2px 0;vertical-align:top}
#keysheet kbd{font:inherit;color:var(--muted)}
#keysheet .sub{color:var(--muted);font-size:.78rem;margin:.7rem 0 0}