/* A short letter, not a brochure. One column of warm paper, a serif, and links. */
:root {
  --paper: #f4f5f3;
  --ink: #1c1e1d;
  --muted: #6c716e;
  --rule: #dfe2de;
  --accent: #b4532a;
  --accent-ink: #8f3f1e;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #141615; --ink: #e8eae7; --muted: #9a9f9b; --rule: #2a2d2b; --accent: #e08a62; --accent-ink: #f0a784; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #141615; --ink: #e8eae7; --muted: #9a9f9b; --rule: #2a2d2b; --accent: #e08a62; --accent-ink: #f0a784; color-scheme: dark; }

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding-block: clamp(3rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem);
  padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
  padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.1rem + .35vw, 1.3rem);
  line-height: 1.55;
  font-variation-settings: "opsz" 18;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 36rem; margin: 0 auto; }
/* Long notes get a wider column, and their charts sit inside it. */
body.long main, body.long .top, body.long .bottom { max-width: 42rem; }

h1 {
  margin: 0 0 1.4rem;
  font-size: clamp(2.3rem, 2rem + 2vw, 3.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 72;
  text-wrap: balance;
}
p { margin: 0 0 1.25em; text-wrap: pretty; }
a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
a:hover { color: var(--accent-ink); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.intro p:last-child { color: var(--muted); }
section { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); }
.name { font-weight: 500; }
span.name { color: var(--ink); }

.outro { margin-top: 2.6rem; padding-top: 2.2rem; border-top: 1px solid var(--rule); }
.outro p { margin-bottom: 0; }

/* Header and footer: the same narrow column, small type, links only. */
.top, .bottom { max-width: 36rem; margin: 0 auto; font-size: .92rem; }
.top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: clamp(3rem, 8vh, 5.5rem); }
.top .me { color: var(--ink); text-decoration: none; font-weight: 500; }
.top nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.top nav a, .bottom a { color: var(--muted); text-decoration: none; }
.top nav a:hover, .bottom a:hover { color: var(--accent-ink); text-decoration: underline; }
.theme { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -.3rem 0 -.3rem -.2rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer; align-self: center; }
.theme:hover { color: var(--accent-ink); }
.theme svg { transition: transform .5s cubic-bezier(.4, 0, .2, 1); }
.theme.is-dark svg { transform: rotate(180deg); }
.top nav { align-items: baseline; }
.bottom { margin-top: clamp(3rem, 8vh, 5.5rem); padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin-bottom: .6rem; }
.fine { margin: 0; color: var(--muted); }

/* Writing: the list of posts, and the posts themselves. */
.posts { margin: 0; padding: 0; list-style: none; }
.posts li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.posts li:last-child { border-bottom: 1px solid var(--rule); }
.posts time { color: var(--muted); font-size: .92em; font-variant-numeric: tabular-nums; }
.post h1 { margin-bottom: 2rem; }
.post h2 { margin: 2.2rem 0 .8rem; font-size: 1.35em; font-weight: 500; line-height: 1.2; font-variation-settings: "opsz" 36; }
.post .intro .fine { margin-bottom: .8rem; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .86em; background: color-mix(in srgb, var(--ink) 6%, transparent); padding: .1em .35em; border-radius: .3em; }
pre { margin: 1.4em 0; padding: 1rem 1.2rem; overflow-x: auto; border-radius: .5rem; background: color-mix(in srgb, var(--ink) 6%, transparent); line-height: 1.5; }
pre code { background: none; padding: 0; font-size: .82em; }
blockquote { margin: 1.4em 0; padding-left: 1.2rem; border-left: 2px solid var(--rule); color: var(--muted); font-style: italic; }
.top nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 560px) { .posts li { grid-template-columns: 1fr; gap: .1rem; } }
/* The notes page leads with its latest note, as one link card: the chart is its cover image,
   then the title and summary. The title link stretches over the whole card, so it is one click target. */
.feature { position: relative; margin: 0 0 3rem; padding: clamp(.7rem, 2vw, .9rem) clamp(.7rem, 2vw, .9rem) clamp(1.15rem, 3.5vw, 1.6rem); background: var(--card); border: 1px solid var(--card-rule); border-radius: 22px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.feature:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--card-rule)); box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--ink) 40%, transparent); transform: translateY(-2px); }
.feature-art { margin: 0 0 1.2rem; padding: clamp(.9rem, 3vw, 1.3rem) clamp(.9rem, 3vw, 1.3rem) .5rem; background: color-mix(in srgb, var(--accent) 6%, var(--paper)); border-radius: 15px; }
.feature-art .chart { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.feature-art .chart-head, .feature-art .chart-cap { display: none; }
.feature-art .chart-view { margin-top: 0; }
.feature-k, .feature-title, .feature-dek, .feature-more { margin-left: clamp(.45rem, 1.6vw, .8rem); margin-right: clamp(.45rem, 1.6vw, .8rem); }
.feature-k { margin-top: 0; margin-bottom: .75rem; font: 600 12.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.feature-title { margin-top: 0; margin-bottom: .6rem; font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem); font-weight: 400; line-height: 1.12; letter-spacing: -.015em; font-variation-settings: "opsz" 72; text-wrap: balance; }
.feature-title a { color: var(--ink); text-decoration: none; }
.feature-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature:hover .feature-title a { color: var(--accent-ink); }
.feature-dek { margin-top: 0; margin-bottom: 0; color: var(--muted); }
.feature-more { margin-top: 1rem; margin-bottom: 0; font: 500 14.5px/1 var(--sans); color: var(--accent); }
.feature-more span { display: inline-block; transition: transform .2s; }
.feature:hover .feature-more span { transform: translateX(3px); }
.posts-k { margin: 0 0 .6rem; font: 600 12.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }


/* Charts in notes, in the style of model-launch posts: a rounded card wider than the text,
   a bold sans title, an optional view toggle, shaped markers, one strong series against pale
   ones, mono ticks, leader-line callouts and an italic caption. Drawn by tools/charts.mjs;
   every value is also in the table under its chart. */
:root {
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --card: #ffffff; --card-rule: #e3e6e2;
  --hi: #b4532a; --lo: #ecd6c9; --alt: #d3d8d3; --s2: #2f64b0;
  --y1: #dca586; --y2: #d08055; --y3: #bd5e2c; --y4: #8f3d1b;
  --c-grid: #eef0ed; --c-rule: #9ba19d;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --card: #1a1d1b; --card-rule: #2a2e2c; --hi: #d4724a; --lo: #4a362c; --alt: #3a403c; --s2: #5b8fd6; --y1: #6e4430; --y2: #9a5a38; --y3: #c76c3f; --y4: #eba07a; --c-grid: #242826; --c-rule: #5f6662; }
}
:root[data-theme="dark"] { --card: #1a1d1b; --card-rule: #2a2e2c; --hi: #d4724a; --lo: #4a362c; --alt: #3a403c; --s2: #5b8fd6; --y1: #6e4430; --y2: #9a5a38; --y3: #c76c3f; --y4: #eba07a; --c-grid: #242826; --c-rule: #5f6662; }

.chart {
  margin: 2.6rem 0 2.8rem;
  padding: clamp(1rem, 2.6vw, 1.5rem) clamp(.9rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.3rem);
  background: var(--card); border: 1px solid var(--card-rule); border-radius: 22px;
  font-family: var(--sans);
}
.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.chart-title { margin: 0; font: 650 clamp(1.1rem, 2.3vw, 1.4rem)/1.25 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.chart-dl { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin: -.25rem -.4rem 0 0; border-radius: 50%; color: var(--muted); }
.chart-dl:hover { color: var(--ink); background: var(--c-grid); }
.chart-views { display: inline-flex; gap: .2rem; margin-top: .9rem; padding: .2rem; border: 1px solid var(--card-rule); border-radius: 999px; background: var(--paper); }
.chart-views button { padding: .38rem .9rem; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 13.5px/1.2 var(--sans); cursor: pointer; }
.chart-views button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--card-rule); }
.chart-view { margin-top: 1.1rem; }
.c-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.3rem; margin: 0 0 .8rem; padding: 0; list-style: none; font: 14px/1.4 var(--sans); color: var(--ink); }
.c-legend li { display: inline-flex; align-items: center; gap: .45rem; }
.c-icon { width: 15px; height: 15px; overflow: visible; }
.c { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.c-narrow { display: none; }
@media (max-width: 600px) { .c-wide { display: none; } .c-narrow { display: block; } }
.c-mk { stroke: var(--card); stroke-width: 1.5; }
.c-mk.c-dim { opacity: .4; }
.c-mk.c-open { fill: var(--card); stroke: var(--hi); stroke-width: 2.2; }
.c-mk.hi { fill: var(--hi); } .c-mk.lo { fill: var(--lo); } .c-mk.alt { fill: var(--alt); } .c-mk.s2 { fill: var(--s2); }
.c-mk.y1 { fill: var(--y1); } .c-mk.y2 { fill: var(--y2); } .c-mk.y3 { fill: var(--y3); } .c-mk.y4 { fill: var(--y4); }
.c-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.c-line.hi { stroke: var(--hi); } .c-line.lo { stroke: var(--lo); } .c-line.alt { stroke: var(--alt); } .c-line.s2 { stroke: var(--s2); }
.c-line.y1 { stroke: var(--y1); } .c-line.y2 { stroke: var(--y2); } .c-line.y3 { stroke: var(--y3); } .c-line.y4 { stroke: var(--y4); }
.c-grid { stroke: var(--c-grid); stroke-width: 1; }
.c-rule { stroke: var(--c-rule); stroke-width: 1; }
.c-tick { font: 12.5px var(--mono); fill: var(--muted); }
.c-narrow .c-tick { font-size: 10px; }
.c-axis-title { font-size: 13.5px; fill: var(--ink); }
.c-narrow .c-axis-title { font-size: 11px; }
.c-leader { stroke: var(--ink); stroke-width: 1; }
.c-call { font-size: 13.5px; fill: var(--muted); }
.c-call-strong { fill: var(--ink); font-weight: 600; }
.c-narrow .c-call { font-size: 11px; }
.c-tag { font-size: 13px; font-weight: 600; }
.c-narrow .c-tag { font-size: 10.5px; }
.hi-ink { fill: var(--hi); } .s2-ink { fill: var(--s2); } .lo-ink, .alt-ink { fill: var(--muted); }
.y1-ink { fill: var(--y1); } .y2-ink { fill: var(--y2); } .y3-ink { fill: var(--y3); } .y4-ink { fill: var(--y4); }
.c-line.c-dot { stroke-width: 2.6; stroke-dasharray: 0.1 6; }
.c-trend { stroke: var(--c-rule); stroke-width: 1.25; stroke-dasharray: 5 5; }
.c-trend-ink { fill: var(--muted); font-weight: 500; }
.c-halo { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; }
.c-value { font-size: 17px; font-weight: 650; fill: var(--ink); letter-spacing: -.01em; }
.c-narrow .c-value { font-size: 12.5px; }
.c-cat { font-size: 13.5px; font-weight: 550; fill: var(--ink); }
.c-narrow .c-cat { font-size: 10.5px; }
.c-when { font: 12px var(--mono); fill: var(--muted); }
.c-narrow .c-when { font-size: 9.5px; }
.c-group { font-size: 13px; font-weight: 600; fill: var(--muted); }
.c-narrow .c-group { font-size: 10.5px; }
.c-big { font-size: 46px; font-weight: 700; letter-spacing: -.04em; fill: var(--ink); }
.c-narrow .c-big { font-size: 28px; }
.c-big-sub { font-size: 15px; fill: var(--muted); }
.c-narrow .c-big-sub { font-size: 11.5px; }
.c-hit { fill: transparent; outline: none; }
.c-hit:focus-visible { stroke: var(--ink); stroke-width: 1.5; }
.chart-cap { margin: 1.2rem auto 0; max-width: 34rem; font: italic 400 1rem/1.5 var(--serif); color: var(--ink); text-align: center; text-wrap: pretty; }
.chart-source { margin: .7rem auto 0; max-width: 34rem; font: 12.5px/1.5 var(--sans); color: var(--muted); text-align: center; }
.chart-source a { color: inherit; }
.c-table { margin-top: 1rem; font: 13px/1.45 var(--sans); color: var(--muted); text-align: center; }
.c-table summary { display: inline-block; cursor: pointer; list-style: none; }
.c-table summary::-webkit-details-marker { display: none; }
.c-table summary::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); transition: transform .2s; }
.c-table[open] summary::after { transform: translateY(.05em) rotate(-135deg); }
.c-table summary:hover { color: var(--accent-ink); }
.c-scroll { overflow-x: auto; margin-top: .6rem; text-align: left; }
.c-table table { border-collapse: collapse; min-width: 100%; color: var(--ink); font-variant-numeric: tabular-nums; }
.c-table th, .c-table td { padding: .4rem .9rem .4rem 0; border-bottom: 1px solid var(--card-rule); text-align: left; white-space: nowrap; }
.c-table thead th { color: var(--muted); font-weight: 500; }
.c-table tbody th { font-weight: 500; }
.c-tip { position: absolute; z-index: 5; pointer-events: none; padding: .4rem .65rem; border-radius: .5rem; background: var(--ink); color: var(--paper); font: 500 13px/1.35 var(--sans); white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 8px)); transition: opacity .12s; }
.c-tip.on { opacity: 1; }

/* Long notes: the standfirst, side-by-side figures, a benchmark table, sources. */
.post .meta { margin: 0 0 1rem; font: 14px/1.4 var(--sans); color: var(--muted); }
.post .dek { margin: -.6rem 0 2.4rem; font-size: 1.22em; line-height: 1.42; color: var(--muted); text-wrap: pretty; }
.post h2 { scroll-margin-top: 1rem; }
.post .part { margin: 3.4rem 0 .4rem; font: 600 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.post .part + h2 { margin-top: .6rem; }
.figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 2.2rem; font-family: var(--sans); }
.figures > div { padding: 1.2rem 1.3rem 1.1rem; border: 1px solid var(--card-rule); border-radius: 16px; background: var(--card); }
.figures .when { display: block; font: 500 13px/1.3 var(--sans); color: var(--muted); }
.figures .num { display: block; margin: .45rem 0 .3rem; font: 650 clamp(1.7rem, 4.6vw, 2.4rem)/1.05 var(--sans); letter-spacing: -.035em; color: var(--ink); }
.figures .what { display: block; font: 14px/1.45 var(--sans); color: var(--muted); }
.figures .now .num { color: var(--hi); }
@media (max-width: 520px) { .figures { grid-template-columns: 1fr; } }
.bench { margin: 2.6rem 0 2.8rem; padding: clamp(1rem, 2.6vw, 1.5rem) clamp(.9rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.3rem); background: var(--card); border: 1px solid var(--card-rule); border-radius: 20px; font-family: var(--sans); }
.bench .c-scroll { margin-top: 0; }
.bench table { width: 100%; border-collapse: collapse; font: 14px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.bench th, .bench td { padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--card-rule); text-align: left; vertical-align: top; }
.bench thead th { font-weight: 600; color: var(--ink); vertical-align: bottom; }
.bench thead th small { display: block; font-weight: 400; color: var(--muted); }
.bench tbody th { font-weight: 600; color: var(--ink); min-width: 9rem; }
.bench tbody th small { display: block; margin-top: .15rem; font-weight: 400; color: var(--muted); }
.bench td { color: var(--muted); white-space: nowrap; }
.bench td.win { color: var(--ink); font-weight: 650; }
.bench tr:last-child th, .bench tr:last-child td { border-bottom: 0; }
.bench .price td { color: var(--ink); font-weight: 600; }
.bench .chart-title { margin-bottom: 1rem; }
.bench .col-hi { background: color-mix(in srgb, var(--hi) 9%, transparent); box-shadow: inset 1.5px 0 0 var(--hi), inset -1.5px 0 0 var(--hi); padding-left: .9rem; }
.bench thead .col-hi { box-shadow: inset 1.5px 0 0 var(--hi), inset -1.5px 0 0 var(--hi), inset 0 1.5px 0 var(--hi); border-radius: 10px 10px 0 0; }
.bench tbody tr:last-child .col-hi { box-shadow: inset 1.5px 0 0 var(--hi), inset -1.5px 0 0 var(--hi), inset 0 -1.5px 0 var(--hi); }
.bench td, .bench thead th + th { padding-left: .9rem; }
@media (max-width: 560px) { .bench table { font-size: 12.5px; } .bench tbody th { min-width: 0; width: 30%; } .bench th, .bench td { padding-right: .4rem; } .bench td, .bench thead th + th { padding-left: .45rem; white-space: normal; } }
.bench .chart-cap, .bench .chart-source { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sources { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); font: 14px/1.55 var(--sans); color: var(--muted); }
.sources summary { display: flex; align-items: baseline; gap: .1rem .7rem; flex-wrap: wrap; cursor: pointer; list-style: none; color: var(--ink); }
.sources summary::-webkit-details-marker { display: none; }
.sources summary span { font: 500 15px/1.4 var(--sans); }
.sources summary span::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.2em) rotate(45deg); transition: transform .2s; }
.sources[open] summary span::after { transform: translateY(.05em) rotate(-135deg); }
.sources summary small { font: 13px var(--sans); color: var(--muted); }
.sources summary:hover span { color: var(--accent-ink); }
.sources > p { margin-top: 1.2rem; }
.sources ol { padding-left: 1.2rem; }
.sources li { margin-bottom: .45rem; overflow-wrap: anywhere; }
.share { margin-top: 2.4rem; font-style: italic; color: var(--muted); }
sup a { text-decoration: none; font: 600 .62em var(--sans); padding: 0 .1em; }