/* Publications catalogue — inspired by base.css (Segoe UI light weights, charcoal bars, gold accent). */

:root {
  --font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: #f5f4f0;
  --surface: #ffffff;
  --surface-2: #efede7;
  --ink: #222222;
  --ink-2: #4a4a4a;
  --muted: #74716a;
  --line: #e2dfd7;
  --bar: #333333;
  --bar-ink: #ffffff;
  --accent: #b88600;          /* darker than #daa000 for AA contrast on light ground */
  --accent-strong: #daa000;
  --accent-hover: #f9c846;
  --focus: #daa000;
  --mark: #fbe7a6;

  --t-article: #2c6e8f;
  --t-deck: #b4531d;
  --t-linkedin: #0a66c2;
  --t-script: #6c5a96;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.10);
  --gutter: clamp(16px, 4vw, 48px);
  --bar-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181818; --surface: #222222; --surface-2: #2b2b2b;
    --ink: #eeeeee; --ink-2: #c9c9c9; --muted: #9a978f; --line: #353535;
    --bar: #111111; --accent: #e8b41e; --mark: #5a4a12;
    --t-article: #6fb3d6; --t-deck: #ec9460; --t-linkedin: #5aa6f0; --t-script: #aa98d8;
    --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-hover: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  --bg: #181818; --surface: #222222; --surface-2: #2b2b2b;
  --ink: #eeeeee; --ink-2: #c9c9c9; --muted: #9a978f; --line: #353535;
  --bar: #111111; --accent: #e8b41e; --mark: #5a4a12;
  --t-article: #6fb3d6; --t-deck: #ec9460; --t-linkedin: #5aa6f0; --t-script: #aa98d8;
  --shadow: 0 1px 2px rgba(0,0,0,.4); --shadow-hover: 0 12px 32px rgba(0,0,0,.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--accent); }
a:hover { color: var(--accent-strong); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- Top bar & footer (from base.css navbar/footer) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bar); color: var(--bar-ink);
  height: var(--bar-h);
}
.navbar .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { color: var(--bar-ink); text-decoration: none; font-size: 1.25rem; font-weight: 300; letter-spacing: .01em; white-space: nowrap; }
.logo strong { font-weight: 600; }
.logo:hover { color: var(--accent-hover); }
.nav-links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--bar-ink); text-decoration: none; font-weight: 300; }
.nav-links a:hover, .nav-links a.active { color: var(--accent-hover); }
.theme-toggle {
  background: none; border: 1px solid rgba(255,255,255,.25); color: var(--bar-ink);
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
}
.theme-toggle:hover { border-color: var(--accent-hover); color: var(--accent-hover); }
@media (max-width: 560px) {
  .nav-links .hide-sm { display: none; }
  .logo { font-size: 1.05rem; }
}

.footer { background: var(--bar); color: #bdbdbd; padding-block: 40px; margin-top: 64px; text-align: center; font-size: .9rem; font-weight: 300; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { color: var(--accent-hover); }

/* ---------- Hero ---------- */
.hero { padding-block: 48px 8px; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 300; margin: 0 0 8px; line-height: 1.1; letter-spacing: -.01em; }
.hero p { margin: 0; color: var(--muted); font-size: 1.1rem; font-weight: 300; max-width: 60ch; }
.hero .stats { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--ink-2); font-size: .95rem; }
.hero .stats b { font-weight: 600; }

/* ---------- Toolbar ---------- */
.toolbar {
  position: sticky; top: var(--bar-h); z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
  margin-top: 24px;
}
.toolbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }

.search { position: relative; flex: 1 1 320px; min-width: 0; }
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%; height: 44px; padding: 0 76px 0 40px;
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.search kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font: 12px var(--mono); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: var(--surface-2);
}
.search .clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: var(--surface-2); color: var(--ink-2); border-radius: 999px; height: 28px; padding: 0 10px; cursor: pointer; font: inherit; font-size: .8rem;
}

.segmented { display: inline-flex; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px; overflow-x: auto; max-width: 100%; }
.segmented button {
  font: inherit; font-size: .9rem; border: 0; background: none; color: var(--ink-2);
  padding: 7px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
}
.segmented button .count { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.segmented button[aria-pressed="true"] { background: var(--bar); color: #fff; }
.segmented button[aria-pressed="true"] .count { color: #cfcfcf; }
.segmented button:not([aria-pressed="true"]):hover { background: var(--surface-2); }

.select {
  font: inherit; font-size: .9rem; height: 38px; padding: 0 30px 0 12px; color: var(--ink);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2374716a'/%3E%3C/svg%3E") no-repeat right 12px center;
  border: 1px solid var(--line); border-radius: 999px; appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 100%;
}
.icon-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); padding: 3px; }
.icon-toggle button { border: 0; background: none; color: var(--ink-2); width: 34px; height: 30px; border-radius: 999px; cursor: pointer; display: grid; place-items: center; }
.icon-toggle button[aria-pressed="true"] { background: var(--bar); color: #fff; }

/* Everything but the search field collapses behind a Filters button on every
   screen size; the panel starts closed and opens below the search row. */
.filters-toggle {
  font: inherit; font-size: .9rem; height: 44px; padding: 0 14px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.filters-toggle:hover { border-color: var(--accent-strong); }
.filters-toggle[aria-expanded="true"] { background: var(--bar); border-color: var(--bar); color: #fff; }
.badge-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--accent-strong); color: #1d1d1d;
  font-size: .72rem; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; width: 100%;
  /* Never taller than the screen: the panel scrolls, the page does not lock. */
  max-height: 60vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-top: 2px;
}
.filters[data-open="false"] { display: none; }

.tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1 0 100%; margin-top: 2px; }
.tagbar-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-right: 4px; }
.tag {
  font: inherit; font-size: .8rem; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 999px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 5px; text-decoration: none;
}
.tag:hover { border-color: var(--accent-strong); color: var(--ink); }
.tag .count { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.tag[aria-pressed="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #1d1d1d; }
.tag[aria-pressed="true"] .count { color: #4d3b00; }
.tag.is-dim { opacity: .45; }
.linklike { font: inherit; font-size: .8rem; background: none; border: 0; color: var(--accent); cursor: pointer; padding: 6px 4px; text-decoration: underline; text-underline-offset: 2px; }

.resultbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding-block: 18px 12px; color: var(--muted); font-size: .9rem; }
.resultbar b { color: var(--ink); font-weight: 600; }

/* On phones the toolbar is taller than the viewport once the tag bar wraps.
   Sticky positioning then pins it over the results for the whole scroll and
   its own overflow becomes unreachable, so here it scrolls away with the page. */
@media (max-width: 640px) {
  .toolbar { position: static; padding-block: 12px; margin-top: 16px; }
  .toolbar-row { gap: 10px; }

  .search { flex: 1 1 auto; }
  .search input { padding-right: 52px; }
  .search kbd { display: none; }

  .filters { gap: 10px; }
  .filters .segmented { width: 100%; }
  .filters .select { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .tagbar { margin-top: 0; }
}

/* A short viewport — a phone held sideways, a split screen — has no room for a
   sticky toolbar either, whatever its width, so it scrolls away there too. */
@media (max-height: 620px) {
  .toolbar { position: static; }
}

/* ---------- Cards grid (breakpoints from base-responsive.css) ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1250px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .grid { grid-template-columns: minmax(0, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }

.cover {
  position: relative; aspect-ratio: 16 / 8; max-width: 100%;
  background: #2e2e2e; color: #fff; overflow: hidden; display: block;
}
.cover::before { /* topic glow */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, hsl(var(--hue) 55% 42% / .75), transparent 60%),
    radial-gradient(80% 80% at 0% 100%, hsl(calc(var(--hue) + 40) 45% 30% / .6), transparent 65%);
}
.cover::after { /* fine stripes */
  content: ""; position: absolute; inset: 0; opacity: .08;
  background: repeating-linear-gradient(135deg, #fff 0 1px, transparent 1px 12px);
}
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.has-img::before { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.65)); z-index: 1; }
.cover.has-img::after { display: none; }
.cover-inner { position: absolute; inset: 0; z-index: 2; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.cover-series { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.cover-glyph { align-self: flex-end; display: flex; align-items: center; gap: 8px; font-size: .78rem; color: rgba(255,255,255,.9); }
.cover-glyph svg { width: 28px; height: 28px; opacity: .95; }
.cover-word { font-size: 1.6rem; font-weight: 300; line-height: 1.1; color: #fff; max-width: 90%; text-wrap: balance; }

.card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8rem; color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent);
  border-radius: 4px; padding: 3px 7px;
}
.meta-topic {
  position: relative; z-index: 2; font: inherit; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.meta-topic:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cover.has-img .cover-word { font-size: 1.35rem; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.reader-hero .eyebrow a { color: inherit; text-decoration: none; }
.reader-hero .eyebrow a:hover { color: var(--accent-hover); }
.badge.t-article, .t-article { --tc: var(--t-article); }
.badge.t-deck, .t-deck { --tc: var(--t-deck); }
.badge.t-linkedin, .t-linkedin { --tc: var(--t-linkedin); }
.badge.t-script, .t-script { --tc: var(--t-script); }

.card h2 { font-size: 1.12rem; font-weight: 600; line-height: 1.3; margin: 0; letter-spacing: -.005em; }
.card h2 a { color: var(--ink); text-decoration: none; }
.card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.card h2 a:hover { color: var(--accent); }
.card .summary { margin: 0; color: var(--ink-2); font-size: .92rem; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 4px; position: relative; z-index: 2; }
.card .tag { padding: 4px 8px; font-size: .74rem; }
.formats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-top: 1px solid var(--line); padding-top: 10px; font-size: .78rem; color: var(--muted); position: relative; z-index: 2; }
.formats a { text-decoration: none; }
.formats a.badge:hover { background: color-mix(in srgb, var(--tc) 22%, transparent); }
mark { background: var(--mark); color: inherit; border-radius: 2px; padding: 0 1px; }

/* ---------- List view ---------- */
.grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.grid.is-list .card { display: grid; grid-template-columns: 96px minmax(0, 1fr); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.grid.is-list .card:last-child { border-bottom: 0; }
.grid.is-list .card:hover { transform: none; background: var(--surface-2); box-shadow: none; }
.grid.is-list .cover { aspect-ratio: auto; height: 100%; min-height: 84px; }
.grid.is-list .cover-series, .grid.is-list .cover-word, .grid.is-list .cover-glyph span { display: none; }
.grid.is-list .cover-glyph { align-self: center; margin: auto; }
.grid.is-list .card-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta formats" "title formats" "summary summary" "tags tags"; gap: 4px 16px; padding: 12px 16px; }
.grid.is-list .meta { grid-area: meta; }
.grid.is-list h2 { grid-area: title; font-size: 1.02rem; }
.grid.is-list .summary { grid-area: summary; -webkit-line-clamp: 1; font-size: .88rem; }
.grid.is-list .tags { grid-area: tags; margin-top: 2px; }
.grid.is-list .formats { grid-area: formats; border: 0; padding: 0; align-self: start; justify-content: flex-end; }
@media (max-width: 640px) {
  .grid.is-list .card { grid-template-columns: 6px minmax(0, 1fr); }
  .grid.is-list .cover-glyph { display: none; }
  .grid.is-list .card-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "title" "summary" "tags" "formats"; }
  .grid.is-list .formats { justify-content: flex-start; }
}

/* ---------- Empty & loading states ---------- */
.state { text-align: center; padding: 64px 16px; color: var(--muted); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); }
.state h2 { color: var(--ink); font-weight: 300; font-size: 1.6rem; margin: 0 0 8px; }
.state p { margin: 0 auto 16px; max-width: 52ch; }
.btn {
  font: inherit; font-size: .9rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--bar); color: #fff; border: 0; border-radius: 999px; padding: 9px 16px;
}
.btn:hover { background: #000; color: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent-strong); color: var(--ink); }
.skeleton { height: 340px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border: 1px solid var(--line); }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Reader ---------- */
.reader-hero { background: #2e2e2e; color: #fff; position: relative; overflow: hidden; }
.reader-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 100% 0%, hsl(var(--hue, 40) 55% 40% / .7), transparent 60%); }
.reader-hero .wrap { position: relative; padding-block: 40px 36px; max-width: 1180px; }
.back { color: rgba(255,255,255,.8); text-decoration: none; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }
.back:hover { color: var(--accent-hover); }
.reader-hero .eyebrow { margin-top: 24px; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.reader-hero h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); font-weight: 300; line-height: 1.12; margin: 8px 0 14px; max-width: 26ch; text-wrap: balance; }
.reader-hero .lead { font-size: 1.1rem; font-weight: 300; color: rgba(255,255,255,.85); max-width: 64ch; margin: 0 0 18px; }
.reader-hero .meta { color: rgba(255,255,255,.75); }
.reader-hero .badge { --tc: #fff; background: rgba(255,255,255,.14); }
.reader-hero .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.reader-hero .tag { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
.reader-hero .tag:hover { border-color: var(--accent-hover); }
.reader-hero .formats { border-top-color: rgba(255,255,255,.18); margin-top: 18px; padding-top: 14px; color: rgba(255,255,255,.7); }
.reader-hero .formats .badge { color: #fff; }

.reader-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; max-width: 1180px; padding-block: 40px; }
@media (max-width: 1080px) { .reader-layout { grid-template-columns: minmax(0, 1fr); gap: 0; } .toc { display: none; } }
.toc { position: sticky; top: calc(var(--bar-h) + 24px); align-self: start; max-height: calc(100vh - var(--bar-h) - 48px); overflow: auto; font-size: .85rem; }
.toc h2 { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 600; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.toc li.lvl-3 a { padding-left: 26px; font-size: .8rem; color: var(--muted); }
.toc li a:hover { color: var(--ink); }
.toc li a.active { border-left-color: var(--accent-strong); color: var(--ink); }

.prose { max-width: 72ch; font-size: 1.08rem; line-height: 1.7; color: var(--ink); overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 300; line-height: 1.2; scroll-margin-top: calc(var(--bar-h) + 16px); }
.prose h1 { font-size: 2.2rem; margin: 2.4rem 0 1rem; }
.prose h2 { font-size: 1.85rem; margin: 2.6rem 0 .9rem; padding-top: .4rem; }
.prose h3 { font-size: 1.4rem; margin: 2rem 0 .6rem; font-weight: 400; }
.prose h4 { font-size: 1.12rem; margin: 1.6rem 0 .5rem; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin: 0 0 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin: .25rem 0; }
.prose li::marker { color: #b0ada5; }
.prose strong { font-weight: 600; }
.prose a { text-underline-offset: 2px; }
.prose img { display: block; margin: 1.6rem auto; border-radius: 8px; border: 1px solid var(--line); background: #fff; }
.prose blockquote { margin: 1.4rem 0; padding: .8rem 1.2rem; border-left: 3px solid var(--accent-strong); background: var(--surface); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4rem 0; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: .1em .35em; border-radius: 4px; }
.prose pre { background: #262626; color: #f1f1f1; padding: 1rem 1.2rem; border-radius: 8px; overflow-x: auto; font-size: .85rem; line-height: 1.55; margin: 1.3rem 0; }
.prose pre code { background: none; padding: 0; font-size: inherit; color: inherit; }
.table-wrap { overflow-x: auto; margin: 1.3rem 0; border: 1px solid var(--line); border-radius: 8px; }
.prose table { border-collapse: collapse; width: 100%; font-size: .92rem; line-height: 1.45; }
.prose th, .prose td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }

.more { max-width: 1180px; }
.more h2 { font-weight: 300; font-size: 1.6rem; margin: 0 0 16px; }