:root {
  --bg: #fdfdfc;
  --ink: #1b1c1e;
  --muted: #5f6368;
  --faint: #96999f;
  --rule: #e6e5e1;
  --accent: #2f6feb;
  --chip: #f3f3f1;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Helvetica, Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0f12;
    --ink: #e9eaed;
    --muted: #969ba4;
    --faint: #666b74;
    --rule: #24262b;
    --accent: #6ea0ff;
    --chip: #191b1f;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 680px; margin: 0 auto; padding: 0 22px 80px; }


a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- nav ---------- */
/* The bar is chrome, not page content, so it gets its own container instead of sitting
   inside the page shell. It used to be a child of the shell, which meant it inherited
   whichever width that page happened to use — 680px under .wrap, 980px under .post-shell —
   and the brand and the badge visibly slid ~150px sideways as you navigated between them.
   980px because it is the wider of the two shells: on the home page and the posts the
   brand lands on the left rail and the badge on the article's right edge, and on the
   680px pages the bar reads as a header spanning the page rather than a broken column.
   The 22px side padding is the shells' padding, so the alignment is exact.  */
.topbar {
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 22px 44px;
}
/* .post-shell drops to 680px here — the bar comes with it, so it stays aligned */
@media (max-width: 900px) { .topbar { max-width: 680px; } }
nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}
nav .brand {
  font-weight: 600;
  color: var(--ink);
  margin-right: auto;
  letter-spacing: -.01em;
}
nav .brand:hover { text-decoration: none; color: var(--accent); }
nav a:not(.brand) { color: var(--muted); }
nav a:not(.brand):hover { color: var(--ink); text-decoration: none; }
nav a[aria-current="page"] { color: var(--ink); font-weight: 550; }
@media (max-width: 560px) {
  nav { gap: 8px 14px; font-size: 14px; flex-wrap: wrap; }
  /* on .topbar, not nav: the shorthand padding above would otherwise win on specificity */
  .topbar { padding-bottom: 30px; }
  /* margin-right:auto absorbs the free space on the first line and pushes the
     trailing links off-screen instead of wrapping them — give the brand its own row */
  nav .brand { margin-right: 0; flex: 0 0 100%; }
  /* and the badge gets its own row too — at 430px it lands past the right edge, where
     the overflow-x guard silently clips it instead of wrapping it */
  nav .hits { flex: 0 0 100%; margin-top: 2px; }
}

/* ---------- hero ---------- */
.avatar {
  width: 92px; height: 92px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--rule);
  background: var(--chip);
  margin-bottom: 24px;
}
h1 {
  font-size: 1.85rem;
  line-height: 1.2;
  letter-spacing: -.022em;
  font-weight: 620;
  margin: 0 0 10px;
}
.tagline {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--faint);
  margin: 0 0 34px;
  letter-spacing: -.005em;
}
.prose p { margin: 0 0 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { font-weight: 600; }

/* ---------- experience logos: one line, top right ---------- */
.logo-strip {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin: -10px 0 42px;
}
.logo-strip .badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* WorldQuant's mark is an orange frame with white text and a transparent centre —
   it is drawn for a dark backdrop and disappears on white. */
.logo-strip .badge.dark { background: #14161a; border-color: #2a2d33; }
.logo-strip .badge:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.logo-strip img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: transform .18s ease;
}
.logo-strip .badge:hover img { transform: scale(1.3); }
@media (max-width: 560px) {
  .logo-strip { justify-content: flex-start; flex-wrap: wrap; margin: 4px 0 30px; gap: 10px; }
  .logo-strip .badge { width: 52px; height: 52px; }
  .logo-strip img { width: 42px; height: 42px; }
}

/* ---------- sections ---------- */
section { margin-top: 56px; }
h2 {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 0 0 22px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
}
h3 { font-size: 1.02rem; font-weight: 600; margin: 0; letter-spacing: -.01em; }
h3 .at { color: var(--muted); font-weight: 450; }

/* ---------- work list ---------- */
.item { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.item:last-child { border-bottom: 0; }
.item-head {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 2px 14px;
}
.when {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  white-space: nowrap;
}
.item p { margin: 6px 0 0; color: var(--muted); }
.item ul { margin: 10px 0 0; padding-left: 1.05em; }
.item li { margin-bottom: 7px; color: var(--muted); }
.item li:last-child { margin-bottom: 0; }
.item li strong, .item p strong { color: var(--ink); font-weight: 560; }

.status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--faint);
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 1px 8px;
  white-space: nowrap;
  vertical-align: 1px;
}
.item p code, .prose code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 4px;
}

/* ---------- skills ---------- */
.skills dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 12px 18px; }
.skills dt {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding-top: 4px;
}
.skills dd { margin: 0; color: var(--muted); }
@media (max-width: 520px) {
  .skills dl { grid-template-columns: 1fr; gap: 2px 0; }
  .skills dd { margin-bottom: 14px; }
}

/* ---------- contact ---------- */
.contact-list { margin: 0; padding: 0; list-style: none; }
.contact-list li {
  display: flex; flex-wrap: wrap;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.contact-list li:last-child { border-bottom: 0; }
.contact-list .k {
  font-family: var(--mono);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint);
  width: 110px; flex: none;
  padding-top: 4px;
}
.note {
  margin-top: 40px;
  padding: 20px 22px;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 10px;
  font-size: 15px;
  color: var(--muted);
}
.note h2 { margin-top: 0; border: 0; padding: 0; margin-bottom: 12px; }
.note p:first-of-type { margin-top: 0; }
.note p:last-child { margin-bottom: 0; }
.note code { font-family: var(--mono); font-size: 13px; }

/* ---------- blog ---------- */
.posts { margin: 0; padding: 0; list-style: none; }
.posts li {
  display: flex; flex-wrap: wrap;
  align-items: baseline; justify-content: space-between;
  gap: 2px 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
.posts li:last-child { border-bottom: 0; }
.posts a { font-weight: 550; }
.empty { color: var(--faint); font-size: 15px; }

.post h2.post-h2 {
  font-family: var(--sans);
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--ink);
  border: 0;
  padding: 0;
  margin: 34px 0 12px;
}
.post pre {
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.55;
}
.post pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ---------- footer ---------- */
footer {
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--faint);
  display: flex; flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
}
footer a { color: var(--muted); }
/* visit counter — hits.sh. The count lives on their server and increments when this
   image is requested, so it needs no account, no cookies and no JavaScript, and it
   still counts the AI crawlers that never execute JS. Deliberately not lazy-loaded:
   the footer is below the fold, and a lazy image would only count people who scroll. */
nav .hits { display: flex; align-items: center; line-height: 0; }
nav .hits img { display: block; border-radius: 3px; opacity: .8; transition: opacity .15s ease; }
nav .hits:hover img { opacity: 1; }


/* ---------- certificates ---------- */
/* The two screenshots have different aspect ratios (4:3 certificate, 2:1 dashboard).
   Equal-ratio boxes with a white backdrop keep the tiles uniform and let each image
   show in full — cropping to a shared ratio would cut the leaderboard panel out of
   the dashboard, which is the whole point of that screenshot. */
.certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.certs a {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.certs a:hover { border-color: var(--accent); transform: translateY(-2px); text-decoration: none; }
.certs img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: 3px;
}

/* ---------- inline screenshots in posts ---------- */
/* Constrained and centred, so every inline image on the site sits at roughly the
   same size as the memes and the book cover rather than shouting at column width. */
.shot {
  margin: 26px auto;
  max-width: 440px;
}
/* screenshots that need room to be legible — a repo page, a dashboard */
.shot.wide { max-width: 100%; }
.shot a {
  display: block;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  transition: border-color .15s ease;
}
.shot a:hover { border-color: var(--accent); }
.shot img { width: 100%; height: auto; display: block; }
.shot figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.5;
  text-align: center;
}

.colophon {
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 12px;
  color: var(--faint);
}

/* ---------- logo alongside an item ---------- */
.item.with-logo {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
}
.item-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 4px;
  border: 1px solid var(--rule);
  border-radius: 9px;
  background: #fff;
  margin-top: 2px;
  transition: border-color .15s ease, transform .15s ease;
}
.item-logo:hover { border-color: var(--accent); transform: translateY(-1px); }
/* WorldQuant's mark is an orange frame with a transparent centre — needs a dark backdrop */
.item-logo.dark { background: #14161a; border-color: #2a2d33; }
.item-logo img { width: 100%; height: 100%; object-fit: contain; }
.item-body { min-width: 0; }
@media (max-width: 520px) {
  .item.with-logo { grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; }
  .item-logo { width: 38px; height: 38px; }
}

/* ---------- tech stack list (logo + text) ---------- */
.stack { list-style: none; padding: 0; margin: 18px 0; }
.stack li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 0 14px;
  align-items: start;
  margin: 0 0 16px;
}
.stack .tl {
  width: 34px; height: 34px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 4px;
  box-sizing: border-box;
}
@media (max-width: 560px) {
  .stack li { grid-template-columns: 28px minmax(0, 1fr); gap: 0 10px; }
  .stack .tl { width: 28px; height: 28px; }
}

/* home reuses the post shell, but its rail lists sections rather than walking you
   through an argument — so no step numbers */
.post-shell.home .toc ol { list-style: none; padding-left: 0; }

/* ---------- inline architecture diagrams ---------- */
.diagram { margin: 28px 0; }
.diagram svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--faint);   /* arrowheads inherit this via currentColor */
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 6px;
}
.diagram figcaption {
  margin-top: 9px;
  font-size: 13.5px;
  color: var(--faint);
  line-height: 1.5;
}
.diagram .b { fill: var(--bg); stroke: var(--rule); stroke-width: 1.2; }
.diagram .b.lead { stroke: var(--accent); stroke-width: 1.8; }
.diagram .b.accent { stroke: var(--accent); stroke-width: 1.5; }
.diagram .grp { fill: none; stroke: var(--rule); stroke-width: 1; stroke-dasharray: 4 4; }
.diagram .a {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.4;
  marker-end: url(#arrow);
}
.diagram .a.dash { stroke-dasharray: 4 3; }
.diagram .t {
  fill: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  text-anchor: middle;
  dominant-baseline: middle;
}
.diagram .t.bold { font-weight: 600; }
.diagram .t.sm { font-size: 10.5px; fill: var(--muted); }
.diagram .t.xs { font-size: 9.5px; fill: var(--faint); }
.diagram .t.em { font-style: italic; fill: var(--accent); }
.diagram .t.side { font-family: var(--mono); font-size: 9px; fill: var(--faint); }
.diagram .t.lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  fill: var(--faint);
}
/* CSS beats the text-anchor presentation attribute in SVG, so restore it here */
.diagram .t.lbl, .diagram .t.side { text-anchor: start; }
.diagram .t.verdict { text-anchor: end; }

/* diagram: pass / fail states */
:root { --good: #1a9c5b; --bad: #d93a3a; }
@media (prefers-color-scheme: dark) { :root { --good: #4ec98a; --bad: #ff6b6b; } }
.diagram .b.ok { stroke: var(--good); stroke-width: 1.6; }
.diagram .b.dead { stroke: var(--bad); stroke-width: 1.4; stroke-dasharray: 4 3; }
.diagram .grp.dead { stroke: var(--bad); }
.diagram .a.ok-line { stroke: var(--good); color: var(--good); stroke-width: 1.6; }
.diagram .a.bad-line { stroke: var(--bad); color: var(--bad); }
.diagram .t.good { fill: var(--good); }
.diagram .t.bad { fill: var(--bad); }
.diagram .t.verdict {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
}
.diagram .fade { opacity: .42; }
.diagram .rule { stroke: var(--rule); stroke-width: 1; }

/* ---------- stat strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin: 26px 0;
}
.stat-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--chip);
  padding: 14px 12px;
}
.stat-card.accent { border-color: var(--accent); }
.stat-card .n {
  display: block;
  font-size: 1.4rem;
  font-weight: 660;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.stat-card.accent .n { color: var(--accent); }
.stat-card .l {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--faint);
}

/* ---------- pull quote ---------- */
.pull {
  margin: 30px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--rule);
  font-size: 1.22rem;
  line-height: 1.5;
  letter-spacing: -.012em;
  font-weight: 550;
  color: var(--ink);
}
.pull.accent { border-left-color: var(--accent); }   /* accent the RULE, never the text */
/* a figure inside a list item: escape the list indent so it centres on the article,
   not on the bullet — otherwise it sits ~20px right of every other image on the page */
.post ul:not(.stack), .post ol { padding-left: 40px; }
li > .shot {
  max-width: none;
  width: calc(100% + 40px);
  margin: 18px 0 8px -40px;
}
li > .shot a { max-width: 440px; margin: 0 auto; }

/* ---------- terminal ---------- */
.term { margin: 26px 0; }
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--chip);
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.term-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); }
.term-bar .term-t {
  width: auto; height: auto; border-radius: 0; background: none;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.term pre {
  margin: 0;
  padding: 16px;
  background: var(--panel, var(--chip));
  border: 1px solid var(--rule);
  border-radius: 0 0 10px 10px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
}
.term code { font-family: var(--mono); background: none; border: 0; padding: 0; }
.term .c { color: var(--faint); }
.term .p { color: var(--accent); font-weight: 600; }
.term .s { color: var(--good, var(--muted)); }
.term figcaption {
  margin-top: 9px;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.5;
}

/* ---------- post hero ---------- */
.post-hero {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 4px;
}
.post-hero .hero-logo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  margin-top: 4px;
  transition: transform .15s ease;
}
.post-hero .hero-logo:hover { transform: translateY(-2px); text-decoration: none; }
.post-hero .hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.post-hero .hero-text { min-width: 0; }
.hero-kicker {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--brand, var(--accent));
  font-weight: 600;
}
.post-hero h1 { margin: 0 0 8px; }
.hero-sub {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}
/* a company can bring its own accent to the kicker without hijacking link colours */
.brand-phonepe { --brand: #7b3fbf; }
@media (prefers-color-scheme: dark) { .brand-phonepe { --brand: #a678e0; } }

/* ---------- tech chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 4px;
  padding: 0;
  list-style: none;
}
.chips li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--muted);
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 11px;
}
.chips li a { color: inherit; }
.chips li a:hover { color: var(--accent); }
.chips .ch-x { color: var(--faint); }
.chips li.ch-hi {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
@media (max-width: 520px) {
  .post-hero { gap: 12px; }
  .post-hero .hero-logo { width: 44px; height: 44px; }
}

.brand-citadel { --brand: #12386e; }
@media (prefers-color-scheme: dark) { .brand-citadel { --brand: #6f9fe0; } }
.brand-auquan { --brand: #444; }
@media (prefers-color-scheme: dark) { .brand-auquan { --brand: #b9b9b9; } }
.brand-worldquant { --brand: #d95c1f; }
@media (prefers-color-scheme: dark) { .brand-worldquant { --brand: #ff8c47; } }
/* WorldQuant's mark is drawn for a dark backdrop */
.post-hero .hero-logo.dark { background: #14161a; border-color: #2a2d33; }

/* ---------- table of contents ---------- */
.toc {
  display: block;          /* the global `nav { display:flex }` was catching this */
  align-items: initial;
  gap: 0;
  margin: 26px 0 30px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--chip);
}
.toc-t {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}
.toc ol {
  margin: 0;
  padding-left: 1.1em;
  font-size: 14.5px;
  line-height: 1.75;
}
.toc ol li { color: var(--faint); }
.toc ol a { color: var(--muted); }
.toc ol a:hover { color: var(--accent); }

/* home page: a horizontal jump bar rather than a boxed list */
.toc.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 44px 0 -12px;
  padding: 0;
  border: 0;
  background: none;
}
.toc.inline a {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--chip);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 13px;
}
.toc.inline a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

/* anchored headings shouldn't hide under the top of the viewport */
h2[id] { scroll-margin-top: 24px; }

/* ---------- post layout: index in a left rail ---------- */
.post-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px 80px;
  display: grid;
  grid-template-columns: 186px minmax(0, 1fr);
  gap: 0 46px;
}
.post-shell > .logo-strip,
.post-shell > footer { grid-column: 1 / -1; }
.post-shell > main { min-width: 0; }
.toc-rail {
  position: sticky;
  top: 26px;
  align-self: start;
  padding-top: 6px;
}
/* in the rail the index is a quiet list, not a boxed callout */
.toc-rail .toc {
  display: block;
  margin: 0;
  padding: 0 0 0 14px;
  background: none;
  border: 0;
  border-left: 2px solid var(--rule);
  border-radius: 0;
}
.toc-rail .toc ol {
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.45;
}
.toc-rail .toc ol li { margin-bottom: 9px; }
.toc-rail .toc ol li:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .post-shell { grid-template-columns: minmax(0, 1fr); max-width: 680px; }
  .toc-rail { position: static; padding-top: 0; }
  /* stacked above the article, so give it its box back */
  .toc-rail .toc {
    margin: 8px 0 26px;
    padding: 16px 18px;
    background: var(--chip);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0;
  }
  .toc-rail .toc ol { list-style: decimal; padding-left: 1.1em; font-size: 14.5px; line-height: 1.75; }
}



/* third-party GIFs are hotlinked from the platform that hosts them for sharing —
   self-hosting somebody else's film clip would be republishing it */
.gifcard {
  display: block;
  max-width: 400px;
  margin: 0 auto;
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 8px 26px rgba(0,0,0,.26);
}
.gifcard:hover { border-color: var(--accent); text-decoration: none; }
.gifcard img { width: 100%; height: auto; display: block; }

.meme { margin: 32px 0; }
.meme figcaption { margin: 14px auto 0; max-width: 52ch; font-size: 13.5px; line-height: 1.6; color: var(--faint); text-align: center; }

.sec-note {
  margin: -8px 0 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--faint);
  max-width: 58ch;
}

/* short looping clips — behave like a GIF, no JS */
.vid { margin: 26px 0; text-align: center; }
.vid figcaption {
  margin-top: 9px;
  font-size: 12.5px;
  color: var(--faint);
}
.vid video {
  max-width: 380px;
  width: 100%;
  height: auto;
  aspect-ratio: 540 / 382;   /* the clip, once its baked-in black bars are cropped off */
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,.26);
  display: inline-block;
}

/* book cover — hotlinked from the publisher */
.book { margin: 26px 0; text-align: center; }
.book a {
  display: inline-block;
  border-radius: 6px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.34);
  transition: transform .15s ease;
}
.book a:hover { transform: translateY(-3px); text-decoration: none; }
.book img { width: 190px; height: auto; display: block; }
.book figcaption {
  margin: 14px auto 0;
  max-width: 46ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--faint);
}
.gifcard img { max-width: 100%; }

/* a post can carry more than one logo — e.g. where the story started and where it ended */
.hero-logos { display: flex; gap: 8px; flex: none; }

/* an organisation referenced inside a post — logo, name, one line */
.org-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--chip);
  transition: border-color .15s ease, transform .15s ease;
}
.org-card:hover { border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }
.org-card img {
  flex: none;
  width: 46px; height: 46px;
  object-fit: contain;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--rule);
  padding: 3px;
}
.org-text { display: block; min-width: 0; }
.org-n { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.org-d { display: block; margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--muted); }

.post-h3 {
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 28px 0 10px;
}