/* interchain.foundation. Paper and ink, with git's two colours: green for what the fork adds, red for what it drops.
   Space Grotesk (OFL, web/fonts) for headings and labels, the system's sans for text, its monospace for the diff.
   Light and dark follow the system unless the visitor picks one with the header's button (theme.js, app.js). */

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-v22-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk-v22-latin-ext.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --paper: #f5f3ee;
  --bg2: #fbfaf7;
  --ink: #16181b;
  --ink2: #565b62;
  --line: rgba(22, 24, 27, .16);
  --line2: rgba(22, 24, 27, .08);
  --green: #17804c;
  --green-soft: rgba(23, 128, 76, .10);
  --red: #b03a2e;
  --red-soft: rgba(176, 58, 46, .08);
  --up: #8a9097;
  --radius: 14px;
  --head: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sans: var(--head);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1113;
    --bg2: #16191c;
    --ink: #eceae4;
    --ink2: #a3a8af;
    --line: rgba(236, 234, 228, .16);
    --line2: rgba(236, 234, 228, .08);
    --green: #4cc38a;
    --green-soft: rgba(76, 195, 138, .12);
    --red: #f07a6c;
    --red-soft: rgba(240, 122, 108, .10);
    --up: #6f757c;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1113;
  --bg2: #16191c;
  --ink: #eceae4;
  --ink2: #a3a8af;
  --line: rgba(236, 234, 228, .16);
  --line2: rgba(236, 234, 228, .08);
  --green: #4cc38a;
  --green-soft: rgba(76, 195, 138, .12);
  --red: #f07a6c;
  --red-soft: rgba(240, 122, 108, .10);
  --up: #6f757c;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--text); overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--green-soft); }
.mono { font-family: var(--mono); }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 640px; }
.small { font-size: .88rem; color: var(--ink2); }
.fine { font-size: .9rem; color: var(--ink2); }
.kicker { font: 500 13px/1.3 var(--mono); letter-spacing: .02em; color: var(--green); margin-bottom: 14px; }

/* --- the bar across the top */
.interim { margin: 0; padding: 8px 16px; text-align: center; font: 500 14px/1.4 var(--sans); background: var(--ink); color: var(--paper); }
.top { border-bottom: 1px solid var(--line2); background: var(--paper); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.mark { flex: none; display: block; }
.mark .stem { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.mark .node { fill: var(--paper); stroke: currentColor; stroke-width: 2.4; }
.mark .tip { fill: var(--green); stroke: var(--green); stroke-width: 2.4; }
.wordmark { font: 600 19px/1 var(--head); letter-spacing: -.02em; white-space: nowrap; }
.wordmark .dot { color: var(--green); }
.nav { display: flex; align-items: center; gap: 22px; font: 500 15px/1 var(--sans); }
.nav a:not(.btn) { text-decoration: none; color: var(--ink2); }
.nav a:not(.btn):hover { color: var(--ink); }
.theme { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink2); cursor: pointer; display: inline-grid; place-items: center; }
.theme:hover { color: var(--ink); border-color: var(--ink2); }
.theme svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } .nav { gap: 12px; } }
@media (max-width: 420px) { .wordmark { font-size: 17px; } .mark { width: 24px; height: 24px; } .bar { gap: 10px; } }

/* --- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 16px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s; }
.btn:hover { background: var(--green); border-color: var(--green); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn.small { height: 36px; padding: 0 16px; font-size: 14px; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn:disabled { opacity: .55; cursor: wait; }

/* --- the hero */
.hero { padding: 72px 0 80px; border-bottom: 1px solid var(--line2); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(2.3rem, 4.4vw, 3.9rem); letter-spacing: -.035em; line-height: 1.04; } /* "Fork the foundation." on one line beside the graph */
.lede { font-size: clamp(1.05rem, 1.4vw, 1.22rem); color: var(--ink2); max-width: 34em; margin-top: 24px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.notice { margin-top: 28px; max-width: 36em; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--ink); border-radius: 0 10px 10px 0; background: var(--bg2); font-size: .95rem; color: var(--ink2); }
.notice b { color: var(--ink); }

/* The history as a commit graph: a rail with a dot per commit, the last two on two branches. */
.graph-card { margin: 0; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px 22px; }
.graph { list-style: none; margin: 0; padding: 0; font-family: var(--mono); }
.graph li { position: relative; padding: 0 0 22px 62px; min-height: 30px; }
.graph li::before { content: ""; position: absolute; left: 13px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink); z-index: 1; }
.graph li::after { content: ""; position: absolute; left: 19px; top: 12px; bottom: -12px; width: 2.5px; background: var(--ink); }
.graph .when { display: block; font-size: 12.5px; line-height: 1.2; color: var(--ink2); letter-spacing: .02em; }
.graph .what { display: block; margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.graph li.up::before { border-color: var(--up); }
.graph li.up::after { display: none; } /* the main line stops at upstream's dot; the line into it is the commit above's */
.graph li.up .what, .graph li.up .when { color: var(--ink2); }
.graph .branch { position: absolute; left: 20.25px; top: -16px; width: 28.75px; height: calc(100% + 27px); overflow: visible; z-index: 0; } /* from the main line to the fork's dot */
.graph .branch path { fill: none; stroke: var(--green); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.graph li.fork { padding-bottom: 0; }
.graph li.fork::before { left: 41px; background: var(--green); border-color: var(--green); width: 16px; height: 16px; top: 3px; box-shadow: 0 0 0 5px var(--green-soft); }
.graph li.fork::after { display: none; }
.graph li.fork { padding-left: 74px; }
.graph li.fork .when { color: var(--green); }
.graph-card figcaption { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line2); font: 500 12.5px/1.4 var(--mono); color: var(--ink2); }

/* --- sections */
.section { padding: 88px 0; border-bottom: 1px solid var(--line2); }
.section h2 { font-size: clamp(1.8rem, 3.4vw, 2.7rem); max-width: 18em; }
.section-head.wide { margin-bottom: 36px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.prose p + p { margin-top: 18px; }
.prose { font-size: 1.08rem; max-width: 38em; }
.prose b { font-family: var(--head); font-weight: 600; }

/* The diff: the changes as a unified diff, the kept lines plain, the dropped red, the added green. */
.diff { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg2); }
.diff-file { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink2); background: var(--paper); }
.diff-lines { list-style: none; margin: 0; padding: 8px 0; font-size: 15px; line-height: 1.55; }
.diff-lines li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); padding: 5px 20px 5px 8px; overflow-wrap: anywhere; }
.diff-lines .sign { text-align: center; user-select: none; color: var(--ink2); }
.diff-lines .del { background: var(--red-soft); color: var(--ink); }
.diff-lines .del .sign { color: var(--red); font-weight: 700; }
.diff-lines .add { background: var(--green-soft); }
.diff-lines .add .sign { color: var(--green); font-weight: 700; }
.diff-lines .ctx { color: var(--ink2); }
.diff-note { margin-top: 14px; max-width: 46em; }

/* Principles: six tiles joined by hairlines. */
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; counter-reset: tile; }
.tiles li { background: var(--bg2); padding: 28px 26px 30px; counter-increment: tile; }
.tiles li::before { content: "0" counter(tile); display: block; font: 500 13px/1 var(--mono); color: var(--green); margin-bottom: 16px; }
.tiles h3 { font-size: 1.35rem; margin-bottom: 10px; }
.tiles p { color: var(--ink2); }

/* --- the form */
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.join-text p:not(.kicker) { margin-top: 18px; color: var(--ink2); max-width: 30em; }
.join-text .count { color: var(--ink); }
.join-form { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 28px; }
form { display: flex; flex-direction: column; gap: 18px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
label { font: 500 14.5px/1.3 var(--sans); }
.opt { font-weight: 400; color: var(--ink2); font-size: 13px; margin-left: 4px; }
input[type="text"], input[type="email"], select, textarea { width: 100%; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font: 400 16px/1.4 var(--text); }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
textarea { resize: vertical; min-height: 110px; }
input::placeholder, textarea::placeholder { color: var(--ink2); opacity: .7; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.f.bad input, .f.bad select, .f.bad textarea { border-color: var(--red); }
.err { font-size: 14px; color: var(--red); min-height: 0; }
.err:empty { display: none; }
.form-error { padding: 10px 14px; border-radius: 10px; background: var(--red-soft); color: var(--red); font-weight: 500; }
.go-row { margin-top: 4px; }
.go { width: 100%; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.done h3 { font-size: 2rem; margin: 0 0 10px; }
.done p { color: var(--ink2); }
.done .cta { margin-top: 20px; }
.done:focus { outline: none; }

/* --- Plainly, and the footer */
.plainly .prose { font-size: 1rem; }
.foot { padding: 48px 0 64px; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font: 500 14px/1.4 var(--sans); }
.foot-links a { text-decoration: none; color: var(--ink2); }
.foot-links a:hover { color: var(--ink); }
.foot .small { max-width: 60em; }
.foot .small + .small { margin-top: 10px; }

/* --- narrow screens */
@media (max-width: 960px) {
  .hero-grid, .two-col, .join-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .hero { padding: 44px 0 56px; }
  .section { padding: 60px 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .two { grid-template-columns: minmax(0, 1fr); }
  .join-form { padding: 22px 18px; }
  .graph-card { padding: 24px 16px 18px; }
  .graph li { padding-left: 54px; }
  .graph li.fork { padding-left: 70px; }
  .diff-lines { font-size: 14px; }
  .diff-lines li { padding-right: 12px; padding-left: 4px; }
  .diff-file { padding: 12px 14px; font-size: 12px; }
  .cta .btn { flex: 1 1 auto; }
}

/* --- the quiet pages: messages, the admin sign-in and list, /here */
.message, .signin { padding: 64px 16px; }
.message h1, .signin h1 { font-size: 2.2rem; margin-bottom: 16px; }
.message p, .signin p { margin-top: 12px; color: var(--ink2); }
.message ul { color: var(--red); }
.status { font-weight: 500; color: var(--red); min-height: 1.5em; }
.status.info { color: var(--ink2); }
.hint { font-size: .95rem; }
.admin-who { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 10px; font: 500 14px/1 var(--mono); color: var(--ink2); margin: 0; }
.admin { padding: 36px 16px 64px; }
.admin-head h1 { font-size: 2rem; }
.admin-sub { margin-top: 8px; color: var(--ink2); font-size: .95rem; }
.admin .notice { border-left-color: var(--green); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 24px 0 0; }
.stats div { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.stats dt { font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.stats dd { margin: 8px 0 0; font: 500 1.6rem/1 var(--sans); font-variant-numeric: tabular-nums; }
.roots { margin-top: 28px; }
.roots h2 { font-size: 1.1rem; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: .9rem; }
.chip b { color: var(--green); }
.people { display: flex; flex-direction: column; gap: 14px; margin-top: 28px; }
.person { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.person-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: baseline; }
.person-head h2 { font-size: 1.15rem; font-family: var(--mono); font-weight: 500; letter-spacing: 0; word-break: break-all; }
.person-head .meta { font-size: .9rem; color: var(--ink2); }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.badge { font: 500 12px/1 var(--sans); letter-spacing: .04em; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink2); }
.badge.warn { border-color: var(--red); color: var(--red); }
.facts-list { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 14px 0 0; font-size: .95rem; }
.facts-list dt { color: var(--ink2); }
.facts-list dd { margin: 0; overflow-wrap: anywhere; }
.facts-list .note { white-space: pre-wrap; }
.actions { margin-top: 14px; }
.actions details summary { cursor: pointer; font: 500 14px/1 var(--sans); color: var(--ink2); }
.actions form { flex-direction: row; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.check { display: inline-flex; align-items: center; gap: 8px; font-weight: 400; }
.empty { margin-top: 28px; color: var(--ink2); }
.device { display: grid; grid-template-columns: minmax(0, 280px) 1fr; gap: 28px; align-items: start; margin-top: 28px; }
.device svg { width: 100%; height: auto; background: #fff; border-radius: 10px; padding: 10px; }
.device-how p + p { margin-top: 12px; }
.device-code { font: 500 2rem/1.2 var(--mono); letter-spacing: .06em; }
.device-form { flex-direction: row; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.device-input { flex: 1 1 200px; font-family: var(--mono); letter-spacing: .06em; }
@media (max-width: 640px) { .device { grid-template-columns: 1fr; } .facts-list { grid-template-columns: 1fr; gap: 2px; } .facts-list dt { margin-top: 8px; } }

.doc { padding: 48px 16px 72px; max-width: 1180px; }
.doc h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.doc .lede { max-width: 640px; margin-top: 18px; }
.here-page .facts { margin-top: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.here-page .fact { background: var(--bg2); padding: 22px 20px 18px; display: flex; flex-direction: column; }
.here-page .fact .big { font: 500 clamp(1.9rem, 3vw, 2.5rem)/1 var(--sans); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.here-page .fact .label { margin-top: 12px; color: var(--ink2); font-size: .95rem; }
@media (max-width: 960px) {
  .here-page .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .here-page .fact.signed { grid-column: 1 / -1; }
}
.here-page .card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-top: 16px; min-width: 0; }
.here-page .card h2 { font-size: 1.2rem; max-width: none; }
.here-page .sub { margin-top: 6px; color: var(--ink2); font-size: .9rem; }
.here-page .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.here-page .plot { position: relative; display: flex; height: 150px; margin: 34px 0 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--ink2); }
.here-page .plot small { position: absolute; top: -20px; left: 0; font: 500 12px/1 var(--sans); color: var(--ink2); }
.here-page .plot > span { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 1px; }
.here-page .plot i { position: relative; display: block; width: 100%; max-width: 24px; background: var(--green); border-radius: 3px 3px 0 0; font-style: normal; }
.here-page .plot i.n { min-height: 2px; }
.here-page .plot > span:hover i { background: var(--ink); }
.here-page .plot b { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 2; white-space: nowrap; font: 400 12.5px/1.4 var(--text); padding: 5px 9px; border-radius: 8px; background: var(--bg2); border: 1px solid var(--line); color: var(--ink2); pointer-events: none; }
.here-page .plot b em { font-style: normal; font-weight: 600; color: var(--ink); }
.here-page .plot > span.r b { left: auto; right: 0; }
.here-page .plot > span:hover b { display: block; }
.here-page .axis { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; font: 500 12px/1.4 var(--sans); color: var(--ink2); }
.here-page details { margin-top: 14px; font-size: .95rem; }
.here-page summary { cursor: pointer; font: 500 14px/1.4 var(--sans); color: var(--ink2); }
.here-page .ranks { list-style: none; margin: 14px 0 0; padding: 0; }
.here-page .ranks li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 3.2em; gap: 10px; align-items: center; margin: 8px 0; font-size: .95rem; }
.here-page .ranks span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.here-page .ranks i { display: block; height: 8px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--green); }
.here-page .ranks b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.here-page .none { margin-top: 14px; color: var(--ink2); font-size: .95rem; }
.here-page .table-wrap { overflow-x: auto; margin-top: 12px; }
.here-page table { width: 100%; border-collapse: collapse; font-size: .95rem; font-variant-numeric: tabular-nums; }
.here-page th, .here-page td { padding: 7px 8px; text-align: right; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.here-page th:first-child, .here-page td:first-child { text-align: left; padding-left: 0; }
.here-page thead th { font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); border-bottom-color: var(--line); }
.here-page tbody th { font-weight: 400; white-space: normal; }
.here-page .fine { margin-top: 36px; max-width: 44em; }
@media (max-width: 640px) {
  .here-page .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .here-page .fact { padding: 16px 16px 14px; }
  .here-page .card { padding: 16px; }
  .here-page .cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .here-page .plot { height: 120px; }
  .here-page .plot > span { padding: 0 .5px; }
  .here-page .ranks li { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 2.6em; }
  .here-page table { font-size: .88rem; }
  .here-page th, .here-page td { padding: 6px 4px; }
}