/* integerc.dev kit of parts, edition 2 (2026-11-04): Jost, type one step larger (l, 22:21Z).
   One grid, one type scale, five colors. The mark in k-head is the block logo at 32px (l, 2026-11-05). Every rule below serves a module named in kit/index.html.
   No radius, no shadow, no gradient, no ornament. Color marks function only:
   ink and paper for content, mute for secondary text, link for what can be followed, signal for a fault. */

/* ---- tokens ---- */
:root{
  color-scheme:light;
  --u:8px;                       /* the unit; every size below is a multiple */
  --paper:#ffffff;
  --ink:#000000;
  --mute:#4d4d4d;                /* 8.6:1 on paper */
  --link:#0000ee;
  --signal:#d0021b;              /* faults, failures, breaking changes; nothing else */
  --rule-heavy:4px;
  --rule-light:1px;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --measure:68ch;
  --cols:12;
  --gutter:calc(3 * var(--u));
  --side:calc(2 * var(--u));
  --max:1200px;
}
@media (min-width:760px){:root{--side:calc(4 * var(--u))}}

@font-face{font-family:"Jost";src:url(/fonts/jost-latin-variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/IBMPlexMono-latin-700.woff2) format("woff2");font-weight:700;font-display:swap}

/* ---- base: type scale 14 / 18 / 24 / 36 / 56; every line height a multiple of 4px ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/28px var(--sans)}
h1,h2,h3,h4{margin:0;font-weight:700}
h1{font-size:56px;line-height:64px;letter-spacing:-0.01em}
h2{font-size:36px;line-height:44px}
h3{font-size:24px;line-height:32px}
h4{font-size:18px;line-height:28px}
@media (max-width:759px){h1{font-size:36px;line-height:44px}h2{font-size:28px;line-height:36px}}
p,ul,ol,dl,pre,table,figure,blockquote,details{margin:0 0 calc(2 * var(--u))}
ul,ol{padding-left:calc(3 * var(--u))}
li+li{margin-top:var(--u)}
p,li{max-width:var(--measure);overflow-wrap:anywhere}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:var(--rule-light);text-underline-offset:3px;overflow-wrap:anywhere}
a:focus-visible{outline:2px solid var(--link);outline-offset:2px}
code,pre,kbd,samp{font-family:var(--mono);font-size:16px;line-height:24px;font-variant-numeric:tabular-nums}
code{overflow-wrap:anywhere}
pre code{overflow-wrap:normal}
figure svg{display:block;width:100%;height:auto;border:var(--rule-light) solid var(--ink);margin:0 0 var(--u)}
details{border-left:var(--rule-light) solid var(--ink);padding-left:calc(2 * var(--u))}
summary{font-weight:700;cursor:pointer}
blockquote{border-left:var(--rule-light) solid var(--ink);padding-left:calc(2 * var(--u));color:var(--mute)}
small,.k-small{font-size:14px;line-height:20px;color:var(--mute)}
.k-skip{position:absolute;left:-9999px}
.k-skip:focus{left:var(--side);top:var(--u);background:var(--paper);padding:var(--u)}

/* ---- the grid: 12 columns, one gutter, one max width ---- */
.k-page{max-width:var(--max);margin:0 auto;padding:0 var(--side)}
.k-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}
.k-grid>*{min-width:0}
.k-span-3{grid-column:span 3}.k-span-4{grid-column:span 4}.k-span-6{grid-column:span 6}
.k-span-8{grid-column:span 8}.k-span-9{grid-column:span 9}.k-span-12{grid-column:1 / -1}
@media (max-width:759px){.k-grid>*{grid-column:1 / -1}}

/* ---- k-head: wordmark and the site's sections ---- */
.k-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--u) calc(3 * var(--u));padding:calc(2 * var(--u)) 0;border-bottom:var(--rule-heavy) solid var(--ink)}
.k-head .k-mark img{display:block;height:32px;width:auto}
.k-head nav{display:flex;flex-wrap:wrap;gap:var(--u) calc(2 * var(--u))}
.k-head nav a{color:var(--ink);text-decoration:none}
.k-head nav a[aria-current="page"]{font-weight:700;text-decoration:underline;text-decoration-thickness:2px}

/* ---- k-answer: the page's one claim, first ---- */
.k-answer{padding:calc(6 * var(--u)) 0 calc(4 * var(--u))}
.k-answer h1{margin-bottom:calc(2 * var(--u))}
.k-answer .k-lede{font-size:24px;line-height:32px;max-width:var(--measure)}

/* ---- k-sec: a section; label in the left 3 columns, content in the right 9 ---- */
.k-sec{border-top:var(--rule-heavy) solid var(--ink);padding:calc(2 * var(--u)) 0 calc(4 * var(--u))}
.k-sec>.k-label{grid-column:span 3}
.k-sec>.k-body{grid-column:span 9}
.k-sec>.k-label h2,.k-sec>h2.k-label{font-size:24px;line-height:32px}
.k-body h3,.k-body h4{margin:calc(3 * var(--u)) 0 var(--u)}
.k-body>h3:first-child,.k-body>h4:first-child{margin-top:0}
@media (max-width:759px){.k-sec>.k-label,.k-sec>.k-body{grid-column:1 / -1}}

/* ---- k-record: published keys, mono, one per line, linked to the source ---- */
.k-record{font-family:var(--mono);font-size:16px;line-height:24px;border-left:var(--rule-heavy) solid var(--ink);padding:0 0 0 calc(2 * var(--u));margin:0 0 calc(2 * var(--u))}
.k-record div{display:grid;grid-template-columns:minmax(14ch,max-content) 1fr;column-gap:calc(2 * var(--u))}
.k-record dt{color:var(--mute)}
.k-record dd{margin:0;overflow-wrap:anywhere}
@media (max-width:759px){.k-record div{grid-template-columns:1fr}}

/* ---- k-code / k-out / k-fault: source, what it printed, how it stopped ---- */
.k-code,.k-out,.k-fault{border:var(--rule-light) solid var(--ink);padding:var(--u) calc(2 * var(--u));overflow-x:auto;white-space:pre}
.k-cap{display:block;font:400 14px/20px var(--mono);color:var(--mute);margin:0 0 var(--u)}
.k-out{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.k-out .k-cap{color:var(--paper)}
.k-fault{border-left:var(--rule-heavy) solid var(--signal)}
.k-fault .k-cap{color:var(--signal)}

/* ---- k-table: measured numbers ---- */
.k-table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.k-table th,.k-table td{text-align:left;vertical-align:top;padding:var(--u) calc(2 * var(--u)) var(--u) 0;border-bottom:var(--rule-light) solid var(--ink);overflow-wrap:anywhere}
.k-table thead th{border-bottom:var(--rule-heavy) solid var(--ink);font-weight:700}
.k-table td.k-num,.k-table th.k-num{text-align:right;font-family:var(--mono)}
.k-table .k-fail{color:var(--signal);font-weight:700}

/* ---- k-terms: a glossary; term, definition, source on one row ---- */
.k-letters{display:flex;flex-wrap:wrap;gap:var(--u) calc(2 * var(--u));font-family:var(--mono);margin:0 0 calc(3 * var(--u))}
.k-terms{margin:0}
.k-term{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);padding:calc(2 * var(--u)) 0;border-top:var(--rule-light) solid var(--ink)}
.k-term dt{grid-column:span 3;font-weight:700}
.k-term dd{margin:0}
.k-term .k-def{grid-column:span 6}
.k-term .k-src{grid-column:span 3;font:400 14px/28px var(--mono)}
.k-term:target{border-top:var(--rule-heavy) solid var(--ink)}
@media (max-width:759px){.k-term dt,.k-term .k-def,.k-term .k-src{grid-column:1 / -1}}

/* ---- k-index: where to go next; name and one line ---- */
.k-index{list-style:none;padding:0;margin:0}
.k-index li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gutter);padding:var(--u) 0;border-top:var(--rule-light) solid var(--ink);max-width:none}
.k-index li>a{font-weight:700}
@media (max-width:759px){.k-index li{grid-template-columns:1fr}}

/* ---- k-notice: a standing condition of the whole project ---- */
.k-notice{border:var(--rule-heavy) solid var(--ink);padding:calc(2 * var(--u));max-width:var(--measure)}

/* ---- k-foot: license, identity of the build behind the site ---- */
.k-foot{border-top:var(--rule-heavy) solid var(--ink);padding:calc(2 * var(--u)) 0 calc(6 * var(--u));font-size:14px;line-height:24px;color:var(--mute)}
.k-foot a{color:inherit}
.k-foot p{margin:0;max-width:none}