:root {
  --bg: #faf8f3;
  --fg: #1d1b16;
  --dim: #6f6a5e;
  --line: #e6e0d2;
  --card: #ffffff;
  --gold: #a8841a;
  --gold-soft: #f3e7bf;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121110;
    --fg: #ece8de;
    --dim: #9a9384;
    --line: #2a2723;
    --card: #1a1917;
    --gold: #d9b443;
    --gold-soft: #3a3016;
  }
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--fg); }
body { margin: 0; font: 17px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: inherit; }
.wrap { max-width: 44rem; margin: 0 auto; padding: 0 16px; }
.dim { color: var(--dim); }

.hero { padding-top: 5rem; padding-bottom: 2rem; }
.mark { font-weight: 700; letter-spacing: -.02em; color: var(--gold); margin: 0 0 2.5rem; }
.mark span { color: var(--dim); font-weight: 400; }
h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .75rem; }
.lede { font-size: 1.2rem; color: var(--dim); margin: 0 0 1.5rem; max-width: 34rem; }
.links { display: flex; gap: 1.25rem; }
.links a { text-decoration: none; border-bottom: 2px solid var(--gold-soft); }
.links a:hover { border-color: var(--gold); }

section { padding: 2rem 0; border-top: 1px solid var(--line); }
h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); margin: 0 0 1rem; }

section > p { margin: 0 0 .75rem; }

.stats { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 12px; }
.stats li { padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.stats strong { display: block; font-size: 1.6rem; letter-spacing: -.02em; color: var(--gold); line-height: 1.2; }
.stats span { font-size: .9rem; color: var(--dim); }

.cv { list-style: none; padding: 0; margin: 0; }
.cv li { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: .55rem 0; }
.cv li + li { border-top: 1px dashed var(--line); }
.cv .when { color: var(--dim); font-variant-numeric: tabular-nums; font-size: .9rem; padding-top: .1rem; }
.cv p { margin: .2rem 0 0; font-size: .92rem; color: var(--dim); }
@media (max-width: 30rem) {
  .cv li { grid-template-columns: 1fr; gap: .1rem; }
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 12px; margin-top: 1rem; }
.card { display: block; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; transition: border-color .15s, transform .15s; }
.card:hover { border-color: var(--gold); transform: translateY(-2px); }
.card h3 { margin: 0 0 .25rem; font-size: 1rem; }
.card p { margin: 0; font-size: .9rem; color: var(--dim); }

footer { padding-top: 2rem; padding-bottom: 3rem; font-size: .85rem; border-top: 1px solid var(--line); }

/* Topic pages */
.hero--article { padding-top: 3rem; }
.mark a { text-decoration: none; color: inherit; }
.crumb { color: var(--dim); font-weight: 400; }
.small { font-size: .9rem; }
.prose h3 { font-size: 1rem; margin: 1.25rem 0 .4rem; }
.prose ul, .prose ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.prose li { margin: .2rem 0; }
.prose a { text-decoration-color: var(--gold); text-underline-offset: 2px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 2rem; }

.prose .pairs, .prose .principles { list-style: none; padding: 0; }
.pairs li, .principles li { padding: .55rem 0; }
.pairs li + li, .principles li + li { border-top: 1px dashed var(--line); }
.pairs strong, .principles strong { display: block; }
.pairs span, .principles span { color: var(--dim); font-size: .95rem; }
.principles { counter-reset: p; }
.principles li { counter-increment: p; padding-left: 2.2rem; position: relative; }
.principles li::before { content: counter(p); position: absolute; left: 0; top: .5rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--gold-soft); color: var(--gold); font-size: .8rem; font-weight: 700; display: grid; place-items: center; }

.prose .tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { margin: 0; padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--line); font-size: .9rem; color: var(--dim); }
.tags--good li { border-color: var(--gold); color: var(--fg); background: var(--gold-soft); }

.pull { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; color: var(--gold); }

.diagram { margin: 1.5rem 0; }
.diagram svg { width: 100%; height: auto; display: block; }
.diagram figcaption { font-size: .85rem; color: var(--dim); margin-top: .5rem; }
.d-tribe { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 6 5; }
.d-box rect, rect.d-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
rect.d-launch { stroke: var(--gold); }
.d-label { fill: var(--dim); font-size: 13px; font-family: inherit; }
.d-title { fill: var(--fg); font-size: 15px; font-weight: 700; font-family: inherit; }
.d-sub { fill: var(--dim); font-size: 12px; font-family: inherit; }
.d-arrow { stroke: var(--gold); stroke-width: 2; fill: none; marker-end: none; }

/* Topic cards on the home page */
.topics { list-style: none; padding: 0; margin: 1rem 0 0; }
.topics li + li { border-top: 1px solid var(--line); }
.topics a { display: block; padding: .8rem 0; text-decoration: none; }
.topics a:hover strong { color: var(--gold); }
.topics span { display: block; color: var(--dim); font-size: .92rem; }