/* bigishdata: the tables look.
   Monospace only for the site's name and for code. Colours are tokens, with a
   dark set that follows the reader's system. */

:root {
  --paper: #fbfbf9; --ink: #1b1b1b; --muted: #66665f; --rule: #dcdcd5; --accent: #2450b2;
  --code-bg: #f0f0ea; --plot-bg: #f3f5ef; --plot-grid: #dfe3d8; --bar: #b9b9b0;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --page: 64rem; --measure: 40rem; --gutter: 2.5rem; --margin: 15rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151619; --ink: #e4e4df; --muted: #9b9b93; --rule: #303238; --accent: #86a6ff;
    --code-bg: #1e2024; --plot-bg: #1b1d20; --plot-grid: #2c2f34; --bar: #55575c;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
}
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 16px; }
a { color: var(--accent); text-underline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

/* The bar */
.top { border-bottom: 1px solid var(--rule); padding: 1rem 0; margin-bottom: 2.5rem; }
.top .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; }
.top .name { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; }
.top .name span { color: var(--accent); }
.top nav { display: flex; gap: 1.4rem; }
.top nav a { font-size: 15px; color: var(--ink); text-decoration: none; }
.top nav a:hover { color: var(--accent); }

/* A post */
.post { counter-reset: sn; max-width: var(--measure); overflow-wrap: break-word; }
/* A long address or name in running text breaks rather than pushing the page sideways on a phone. */
.post :not(pre) > code, .post a { overflow-wrap: anywhere; }
.post h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 1.25rem; }
.post h2, .post h3, .post h4 {
  font-weight: 650; letter-spacing: -.005em; line-height: 1.3;
  border-top: 1px solid var(--rule); padding-top: .9rem; margin: 2.75rem 0 .8rem;
}
.post h2 { font-size: 1.4rem; }
.post h3 { font-size: 1.2rem; }
.post h4 { font-size: 1.05rem; border-top: 0; padding-top: 0; margin-top: 2rem; }
.post p, .post ul, .post ol { margin: 0 0 1.1rem; }
.post li { margin: .2rem 0; }
.post blockquote { margin: 1.5rem 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--rule); color: var(--muted); }
.post hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.post figure, .post p > img { margin: 2rem 0; }
.post figcaption { font-size: 13.5px; color: var(--muted); margin-top: .5rem; }
.post table:not(.posts) { border-collapse: collapse; font-size: 15px; margin: 1.5rem 0; display: block; overflow-x: auto; }
.post table:not(.posts) th, .post table:not(.posts) td { border-bottom: 1px solid var(--rule); padding: .35rem .9rem .35rem 0; text-align: left; font-variant-numeric: tabular-nums; }
.post table:not(.posts) th { border-bottom-color: var(--ink); font-size: 13px; color: var(--muted); }

/* The post's own table */
.facts { margin: 0 0 2rem; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font-size: 14.5px; }
.facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.facts dd { margin: 0; }
.subj {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink); border: 1px solid var(--rule); border-radius: 3px; padding: .05rem .4rem; line-height: 1.5;
}

/* Code */
code { font-family: var(--mono); font-size: .86em; }
pre { background: var(--code-bg); border-left: 3px solid var(--accent); padding: .9rem 1rem; margin: 1.5rem 0; overflow-x: auto; }
pre code { font-size: 14px; line-height: 1.5; }
:not(pre) > code { background: var(--code-bg); padding: .05rem .25rem; border-radius: 3px; }

/* Margin notes, made from footnotes by site.js. Wide screens: in the margin
   beside their line. Narrow: hidden until the number is tapped. */
.sn-ref { counter-increment: sn; cursor: pointer; }
.sn-ref::after {
  content: counter(sn); font-size: .68em; font-weight: 700; vertical-align: super;
  line-height: 0; color: var(--accent); padding: 0 1px 0 2px;
}
.sn-toggle { display: none; }
.sidenote { display: none; font-size: 13.5px; line-height: 1.45; color: var(--muted); border-left: 2px solid var(--rule); padding-left: .75rem; }
.sidenote::before { content: counter(sn) "  "; color: var(--accent); font-weight: 700; }
.sidenote p { display: inline; margin: 0; }
.sn-toggle:checked + .sidenote { display: block; margin: .8rem 0 .8rem 1rem; }
@media (min-width: 1100px) {
  .post { max-width: calc(var(--measure) + var(--gutter) + var(--margin)); padding-right: calc(var(--gutter) + var(--margin)); }
  .sn-ref { cursor: default; }
  .sidenote, .sn-toggle:checked + .sidenote {
    display: block; float: right; clear: right; width: var(--margin);
    margin: .3rem calc(-1 * (var(--gutter) + var(--margin))) 1rem 0;
  }
}
/* Footnotes that weren't moved (no script) stay readable at the bottom. */
.footnotes { font-size: 14px; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 3rem; padding-top: 1rem; }

/* Charts */
.chart, .interactive { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: .9rem 0; margin: 2rem 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart-title, .ix-title { font-weight: 600; font-size: 15px; margin-bottom: .5rem; }
.chart .source, .ix-source { font-size: 12.5px; color: var(--muted); margin-top: .5rem; }

/* The home page */
.home-latest { margin-bottom: 3rem; }
.home-latest .post-link { font-size: 14px; }
.more h2 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
table.posts { width: 100%; border-collapse: collapse; font-size: 15px; }
table.posts td { border-bottom: 1px solid var(--rule); padding: .5rem .75rem .5rem 0; vertical-align: baseline; }
table.posts .d { white-space: nowrap; color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
table.posts .t { width: 1%; padding-right: 0; }
table.posts a { color: var(--ink); text-decoration: none; }
table.posts a:hover { color: var(--accent); text-decoration: underline; }

/* Words that are Jack's to write, shown while a page waits for them */
.placeholder { display: inline-block; border: 1px dashed var(--accent); padding: .2rem .55rem; color: var(--muted); font-size: .95em; }

.foot { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 1.5rem 0 3rem; font-size: 14px; color: var(--muted); }
.foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot a { color: inherit; }

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .post h1 { font-size: 1.65rem; }
  .facts div { grid-template-columns: 6rem 1fr; gap: .75rem; }
}
.title-link { color: inherit; text-decoration: none; }
.title-link:hover { color: var(--accent); }

/* Interactive charts: controls and plot pieces any chart script can use */
.interactive { position: relative; }
.ix-sub { font-weight: 400; color: var(--muted); font-size: 13.5px; margin-left: .4rem; }
.ix-controls { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: center; margin: .7rem 0 .5rem; font-size: 13.5px; }
.ix-seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.ix-seg button { font: inherit; background: none; border: 0; padding: .25rem .65rem; cursor: pointer; color: var(--ink); }
.ix-seg button + button { border-left: 1px solid var(--rule); }
.ix-seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ix-k { display: inline-flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.ix-k input { width: 8rem; accent-color: var(--accent); }
.ix-plot { width: 100%; height: auto; display: block; background: var(--plot-bg); border-radius: 3px; }
.ix-grid { stroke: var(--plot-grid); }
.ix-tick { font-size: 11px; fill: var(--muted); }
.ix-flag line { stroke: var(--ink); stroke-width: 1.5; }
.ix-flag path { fill: #c0392b; }
.ix-flag circle { fill: var(--ink); }
.ix-pt { stroke: var(--paper); stroke-width: 1; cursor: pointer; transition: fill .2s; }
.ix-pt:hover { stroke: var(--ink); stroke-width: 1.5; }
.ix-center { stroke-width: 2.5; fill: none; pointer-events: none; }
.ix-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: 13px; margin-top: .6rem; }
.ix-legend i { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .35rem; vertical-align: -1px; }
.ix-tip { position: absolute; z-index: 2; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.4; padding: .4rem .6rem; border-radius: 4px; pointer-events: none; max-width: 17rem; }

/* Highlighting themes underline link-like tokens; in code that reads as a link that isn't one. */
pre span { text-decoration: none !important; }
/* Our own code background, not the highlighting theme's. */
.post pre.giallo { background: var(--code-bg); }
.more { max-width: var(--measure); }

/* Home page types (examples/home-N while choosing one) */
.variant-strip { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline; font-size: 13.5px; color: var(--muted); border: 1px dashed var(--accent); padding: .5rem .75rem; margin: -1rem 0 2rem; }
.variant-strip a { font-weight: 700; text-decoration: none; padding: 0 .35rem; border-radius: 3px; }
.variant-strip a[aria-current] { background: var(--accent); color: var(--paper); }
.hl-meta { font-size: 13px; color: var(--muted); display: flex; gap: .6rem; align-items: center; font-variant-numeric: tabular-nums; }
.home-list { max-width: var(--measure); }
.hl-item { border-top: 1px solid var(--rule); padding: 1.1rem 0 .4rem; }
.hl-item h2 { font-size: 1.3rem; line-height: 1.3; margin: .3rem 0 .4rem; }
.hl-item h2 a, .home-featured h2 a { color: var(--ink); text-decoration: none; }
.hl-item h2 a:hover, .home-featured h2 a:hover { color: var(--accent); }
.hl-item p { margin: 0 0 .6rem; color: var(--muted); font-size: 15.5px; }
.home-featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; }
.hf-lead img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; border-radius: 3px; margin-bottom: .9rem; }
.hf-lead h2 { font-size: 1.9rem; line-height: 1.2; margin: .4rem 0 .6rem; }
.hf-lead p { color: var(--muted); }
.hf-rest h3 { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem; }
.hf-row { display: grid; grid-template-columns: 4.5rem 1fr; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.hf-row img, .hf-noimg { width: 4.5rem; height: 3.2rem; object-fit: cover; border-radius: 2px; background: var(--code-bg); display: block; }
.hf-row b { display: block; font-weight: 600; font-size: 15px; line-height: 1.3; }
.hf-row:hover b { color: var(--accent); }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.75rem 1.5rem; }
.hc-card { color: var(--ink); text-decoration: none; }
.hc-img { aspect-ratio: 16 / 10; background: var(--code-bg); border-radius: 3px; overflow: hidden; margin-bottom: .6rem; }
.hc-img img { width: 100%; height: 100%; object-fit: cover; }
.hc-card h2 { font-size: 1.1rem; line-height: 1.3; margin: .3rem 0 0; }
.hc-card:hover h2 { color: var(--accent); }
.home-intro-table { max-width: var(--measure); }
.hit-intro { margin-bottom: 2rem; }
@media (max-width: 760px) { .home-featured { grid-template-columns: 1fr; } }
.home-intro { font-size: 1.05rem; margin-bottom: 1.25rem; }
.home-intro p { margin: 0 0 .8rem; }