/* River Locks — Tufte-style: paper, ET Book, data-ink first, one river blue, one delay rust. */
@font-face { font-family: "et-book"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff") format("woff"); }
@font-face { font-family: "et-book"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff") format("woff"); }
@font-face { font-family: "et-book"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("https://cdn.jsdelivr.net/gh/edwardtufte/tufte-css@gh-pages/et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff") format("woff"); }

:root {
  --paper: #fffff8; --ink: #111; --ink2: #4a4a44; --ink3: #8a8a80; --hair: #d8d6c8; --wash: #f3f2e6;
  --river: #2c6e8f; --river2: #a9c8d6; --rust: #b5451b; --rust2: #eab9a2; --land: #ecebdf;
  --serif: "et-book", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #151513; --ink: #e9e8df; --ink2: #b9b8ae; --ink3: #7d7c73; --hair: #34342f; --wash: #1d1d1a;
  --river: #78b3cf; --river2: #2e5567; --rust: #e2865c; --rust2: #6b3a24; --land: #22221f; color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #151513; --ink: #e9e8df; --ink2: #b9b8ae; --ink3: #7d7c73; --hair: #34342f; --wash: #1d1d1a;
  --river: #78b3cf; --river2: #2e5567; --rust: #e2865c; --rust2: #6b3a24; --land: #22221f; color-scheme: dark; }

html { font-size: 17px; }
body { background: var(--paper); color: var(--ink); font-family: var(--serif); line-height: 1.45; margin: 0; }
a { color: inherit; text-decoration-color: var(--hair); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--river); color: var(--river); }
:focus-visible { outline: 2px solid var(--river); outline-offset: 2px; }

.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 18px 64px; }
nav.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; border-bottom: 1px solid var(--hair); padding-bottom: 10px; }
nav.top .brand { font-size: 1.15rem; font-style: italic; text-decoration: none; margin-right: auto; }
nav.top a.on { color: var(--river); text-decoration: none; }
nav.top select { font: inherit; font-size: .9rem; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); padding: 3px 6px; max-width: 260px; }
.live { font-size: .8rem; color: var(--ink3); font-variant-numeric: tabular-nums; }
.live::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--river); margin-right: 6px; vertical-align: 1px; }
.live.stale::before { background: var(--rust); }

h1 { font-weight: 400; font-size: clamp(2rem, 4.6vw, 3.1rem); line-height: 1.05; margin: 34px 0 10px; letter-spacing: -.005em; text-wrap: balance; }
h2 { font-weight: 400; font-style: italic; font-size: 1.55rem; margin: 46px 0 6px; text-wrap: balance; }
h3 { font-weight: 400; font-style: italic; font-size: 1.15rem; margin: 0 0 4px; }
p { margin: 0 0 12px; }
.lede { font-size: 1.22rem; max-width: 46em; color: var(--ink2); }
.sub { color: var(--ink2); max-width: 46em; }
.small { font-size: .82rem; color: var(--ink3); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.kicker { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }

/* text + margin note layout */
.withnote { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 0 36px; align-items: start; }
.note { font-size: .82rem; color: var(--ink2); line-height: 1.4; border-left: 1px solid var(--hair); padding-left: 12px; }
.note b { color: var(--ink); font-weight: 400; font-style: italic; }
@media (max-width: 860px) { .withnote { grid-template-columns: minmax(0, 1fr); } .note { margin-top: 10px; } }

.figures { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 18px 0 6px; }
.figure .v { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.figure .l { font-size: .8rem; color: var(--ink3); margin-top: 4px; }

svg text { fill: var(--ink2); font-family: var(--serif); }
svg .axis path, svg .axis line { stroke: var(--hair); }
svg .axis text { font-size: 11px; fill: var(--ink3); font-variant-numeric: tabular-nums; }
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; max-width: 100%; height: auto; }

/* map */
.map svg .land { fill: var(--land); stroke: var(--paper); stroke-width: .8; }
.map svg .lock { stroke: var(--paper); stroke-width: .6; cursor: pointer; }
.map svg .lock:hover { stroke: var(--ink); stroke-width: 1.2; }
.tip { position: fixed; pointer-events: none; background: var(--paper); border: 1px solid var(--hair); padding: 6px 9px; font-size: .82rem; max-width: 260px; box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 10; }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 14px 0 8px; font-size: .9rem; }
.controls input, .controls select { font: inherit; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); padding: 4px 8px; }
.controls input { width: 200px; }
.controls label { color: var(--ink3); }

/* small-multiples table */
table.sm { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums lining-nums; }
table.sm th { font-weight: 400; font-size: .76rem; color: var(--ink3); text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--ink3); white-space: nowrap; cursor: pointer; }
table.sm th.r, table.sm td.r { text-align: right; }
table.sm td { padding: 3px 8px; border-bottom: 1px solid var(--wash); vertical-align: middle; white-space: nowrap; }
table.sm td.name { white-space: normal; min-width: 180px; }
table.sm td.name a { text-decoration: none; }
table.sm td.name .mi { color: var(--ink3); font-size: .78rem; }
table.sm tr.river td { border-bottom: 1px solid var(--hair); padding-top: 22px; font-style: italic; font-size: 1.05rem; }
table.sm tr.quiet td { color: var(--ink3); }
table.sm svg { display: block; }
.tablewrap { overflow-x: auto; }
.pending { display: inline-block; min-width: 1.6em; text-align: right; }
.hot { color: var(--rust); }
.tag { display: inline-block; font-size: .72rem; padding: 0 5px; border: 1px solid var(--rust); color: var(--rust); border-radius: 2px; margin-left: 4px; }

/* lock page */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 26px; margin: 12px 0 4px; font-size: .9rem; }
.facts div span { display: block; font-size: .74rem; color: var(--ink3); }
.lockgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; }
@media (max-width: 860px) { .lockgrid { grid-template-columns: minmax(0, 1fr); } }
.notes-box { white-space: pre-wrap; font-size: .85rem; color: var(--ink2); border-left: 1px solid var(--hair); padding-left: 12px; margin: 8px 0; }
.pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; font-size: .95rem; flex-wrap: wrap; }
table.plain { border-collapse: collapse; width: 100%; font-size: .88rem; font-variant-numeric: tabular-nums lining-nums; }
table.plain th { font-weight: 400; font-size: .74rem; color: var(--ink3); text-align: left; border-bottom: 1px solid var(--ink3); padding: 3px 6px; white-space: nowrap; }
table.plain td { padding: 3px 6px; border-bottom: 1px solid var(--wash); }
table.plain .r { text-align: right; }
.inbar { display: inline-block; height: 8px; background: var(--river2); vertical-align: middle; margin-right: 6px; }

/* top 10 */
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 30px 36px; margin-top: 12px; }
.multiple { min-width: 0; }
.multiple .meta { font-size: .82rem; color: var(--ink3); }

/* architecture */
.pipeline svg rect.stage { fill: var(--paper); stroke: var(--ink3); }
.pipeline svg rect.stage.live { stroke: var(--river); stroke-width: 1.5; }
.pipeline svg path.flow { stroke: var(--ink3); fill: none; marker-end: url(#arrow); }
.pipeline svg text.t { font-size: 14px; fill: var(--ink); }
.pipeline svg text.d { font-size: 11.5px; fill: var(--ink3); }
.ok { color: var(--river); }
.bad { color: var(--rust); }
footer { margin-top: 64px; border-top: 1px solid var(--hair); padding-top: 12px; font-size: .8rem; color: var(--ink3); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* documentation */
.doc section { scroll-margin-top: 16px; }
.toc { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; margin: 26px 0 0; padding: 10px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.toc a { text-decoration: none; color: var(--ink2); }
.toc a:hover { color: var(--river); }
pre.code { font: 12.5px/1.5 var(--mono); background: var(--wash); color: var(--ink); padding: 12px 14px; overflow-x: auto; white-space: pre; border-left: 2px solid var(--river2); }
code { font-family: var(--mono); font-size: .86em; }
ul.steps, ol.steps { max-width: 44em; padding-left: 1.2em; display: grid; gap: 8px; margin: 10px 0 16px; }
ul.steps b, ol.steps b { font-weight: 400; font-style: italic; }
ol.timeline { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 10px; max-width: 46em; border-left: 1px solid var(--hair); }
ol.timeline li { padding-left: 16px; position: relative; }
ol.timeline li::before { content: ""; position: absolute; left: -4px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--river); }
ol.timeline time { display: block; font-size: .78rem; color: var(--ink3); letter-spacing: .04em; }
#winlock { font: inherit; font-size: .95rem; background: var(--paper); color: var(--ink); border: 1px solid var(--hair); padding: 1px 4px; }

/* articles */
.post { max-width: 760px; }
.post .dek { font-size: 1.25rem; color: var(--ink2); margin: 0 0 8px; }
.post .byline { font-size: .82rem; color: var(--ink3); margin-bottom: 26px; }
.post p { font-size: 1.08rem; max-width: 36em; }
.post h2 { font-size: 1.35rem; margin-top: 36px; }
.post figure { margin: 22px 0 8px; overflow-x: auto; }
.post figcaption { font-size: .82rem; color: var(--ink2); max-width: 44em; margin: 4px 0 18px; }
.post table.plain { max-width: 640px; margin: 12px 0 18px; }
.post .sources { font-size: .82rem; color: var(--ink3); border-top: 1px solid var(--hair); padding-top: 10px; margin-top: 36px; }
ul.articles { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 10px; max-width: 46em; }
ul.articles li { display: grid; gap: 1px; }
ul.articles a { font-size: 1.12rem; text-decoration: none; }
dl.defs { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); gap: 8px 24px; max-width: 54em; margin: 10px 0 20px; }
dl.defs dt { font-style: italic; }
dl.defs dd { margin: 0; color: var(--ink2); }
@media (max-width: 640px) { dl.defs { grid-template-columns: minmax(0, 1fr); } dl.defs dd { margin-bottom: 8px; } }
ul.related { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
ul.related .small { margin-left: 6px; }