/* Type: the type every one of Jamie's sites shares, from the --jt- tokens in tokens.css (site/css/shared/, a
   byte-for-byte copy of thingelstad.com shared/tokens.css, vendored with its fonts by npm run sites:sync and
   linked before this file). Faces are named by role: Inter Tight for headings, Inter for reading text, controls
   and labels, a system mono for code. Sizes are the blog's scale, the --jt-size-* tokens: 19px body (18px on
   phones), nothing below 14px. No italics in the design: emphasis is the green or ink, and weight. Content
   text keeps its own emphasis. font-synthesis: none, so no face is ever faked bold or slanted. */
:root {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  font-weight: 400;
  color-scheme: light dark;
  line-height: var(--jt-line-height);

  --font-heading: var(--jt-font-heading);
  --font-body: var(--jt-font-body);
  --font-ui: var(--jt-font-body);
  --font-label: var(--jt-font-body);
  --font-code: var(--jt-font-mono);
  --weight-heading: var(--jt-weight-heading);

  /* The paper palette and the status colours, this site's own. */
  --ink: #1f1d1a;
  --paper: #fffcf5;
  --muted: #6f6a61;
  --line: #ebe6da;
  --soft: #f6f1e4;
  --active: #178a52;
  --active-soft: #dcf4e4;
  --dormant: #a86a00;
  --dormant-soft: #ffeec4;
  --retired: #6a6c74;
  --retired-soft: #ebebe8;
  --abandoned: #b23c2a;
  --abandoned-soft: #fbe2dc;
  --archived: #5a46c9;
  --archived-soft: #e9e4ff;

  /* Smaller pieces of the palette: link underlines, the search box, the screenshot's shadow, and the stickers'
     lightness (each sticker brings its own --hue). */
  --underline: #c9ccd3;
  --field: #fff;
  --shadow: rgb(31 29 26 / 7%);
  --sticker-ground: 88%;
  --sticker-ink: 28%;
  --sticker-edge: 78%;

  /* Things I've built green, the --jt-xyz values in thingelstad.com's shared/tokens.css: the fill (the
     mark, sparklines, rules) and the text colour (links, type and the focus ring), 5.7:1 on --paper and
     5.2:1 on --soft. A thing page sets --accent to its story colour in its header; --accent-text stays. */
  --accent: #1d7348;
  --accent-text: #1d7348;

  /* Who made a commit, in /activity/ and a thing's Activity chart: three hues validated as a categorical set
     on --paper (the dataviz skill's validator, colourblind pairs included). The aqua is under 3:1 on paper,
     so every chart carries its numbers as text and a legend; text stays in the ink colours. */
  --who-me: #2a78d6;
  --who-agent: #eb6834;
  --who-others: #1baf7a;
  --story-mix: 0%;

  /* Frame: every site's 1120px (--jt-frame) with the shared gutters inside it, 24px (16px on phones), so the
     strip, header, content and footer share one left edge with the blog's. The reading column is the blog's
     720px measure. */
  --frame: var(--jt-frame);
  --gutter: var(--jt-gutter);
  --measure: var(--jt-measure);
}

/* Dark: the same paper, at night. It follows the reader's system setting; there is no switch. The ground is a
   warm near-black, the paper's own hue; text and status colours are lightened and their chips darkened, as
   the shared tokens do for the site colours (--jt-xyz-text #74d3a0 for links and the focus ring). Fills stay:
   the green mark keeps white on #1d7348. Contrast on --paper: ink 14.8:1, muted 7.2, green 10.0, every
   status 7.5 or more and 6.2 or more on its chip. The who hues were re-run through the dataviz validator on
   this ground and pass; the orange steps down to #e8652f to stay inside the dark lightness band. */
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #ece7dc;
    --paper: #171512;
    --muted: #a8a296;
    --line: #36322b;
    --soft: #221f1a;
    --active: #5fcf8e;
    --active-soft: #16301f;
    --dormant: #e6b04a;
    --dormant-soft: #352812;
    --retired: #a9abb3;
    --retired-soft: #2a2a2d;
    --abandoned: #f08b78;
    --abandoned-soft: #3b1b15;
    --archived: #aa9cff;
    --archived-soft: #26204a;
    --accent-text: #74d3a0;
    --who-agent: #e8652f;
    --underline: #57524a;
    --field: #0f0e0c;
    --shadow: rgb(0 0 0 / 35%);
    --sticker-ground: 22%;
    --sticker-ink: 82%;
    --sticker-edge: 34%;

    /* A thing's story colour is its own; lifted toward the ink so the darkest (mb's) still shows. */
    --story-mix: 25%;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: var(--jt-size-base);
}

code,
kbd,
pre,
samp {
  font-family: var(--font-code);
}

a {
  color: inherit;
  text-decoration: none;
}

a:not(.status):hover {
  color: var(--accent-text);
}

/* Elements shown by a script start hidden, and a class's display never overrides that. */
[hidden] {
  display: none !important;
}

a:focus-visible,
button:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--paper);
  padding: 8px 12px;
}

.skip:focus {
  left: 8px;
}

/* The sites strip: the strip that opens every one of Jamie's sites. Its values are the shared contract in
   thingelstad.com's AGENTS.md ("The sites strip"), identical everywhere; only the inner row follows this
   site's frame: the --frame column with the shared gutters. It names Inter itself, not a role, because its values
   are the contract, dark ones included (at the end of this file). */
.sites-strip {
  background: #f3f3f5;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    system-ui,
    sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

.sites-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  max-width: var(--frame);
  min-height: 40px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sites-strip__label {
  color: #5a5a66;
}

.sites-strip__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sites-strip a {
  color: #16161a;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.sites-strip a:hover {
  color: #16161a;
  text-decoration-thickness: 2px;
}

.sites-strip a:focus-visible {
  outline: 2px solid #16161a;
  outline-offset: 3px;
}

.sites-strip__item--current a {
  text-decoration: none;
}

.sites-strip__item--weekly a,
.sites-strip__item--weekly a:hover {
  color: #1a5eb6;
}

.sites-strip__item--another a,
.sites-strip__item--another a:hover {
  color: #b3123f;
}

.sites-strip__item--thingy a,
.sites-strip__item--thingy a:hover {
  color: #b5461a;
}

.sites-strip__item--xyz a,
.sites-strip__item--xyz a:hover {
  color: #1d7348;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 24px var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--jt-size-h3);
}

.mark {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 1.25rem;
  rotate: -4deg;
  transition: rotate 180ms ease;
}

.wordmark:hover .mark {
  rotate: 4deg;
}

.site-header nav {
  display: flex;
  gap: 4px;
}

.site-header nav a {
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--jt-size-ui);
  font-weight: 500;
}

.site-header nav a:hover {
  background: var(--soft);
  color: var(--ink);
}

.site-header nav a[aria-current='page'] {
  background: var(--ink);
  color: var(--paper);
}

.site-main {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 8px var(--gutter) 64px;
}

.site-footer {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 0 var(--gutter) 48px;
  color: var(--muted);
  font-size: var(--jt-size-small);
}

/* The rule above the footer spans the text column, like the dividers in the main column. */
.site-footer::before {
  content: '';
  display: block;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.site-footer a {
  color: var(--ink);
}

/* Jamie's h-card: the round photo beside the name, inside the sentence, without opening up the line. */
.site-footer .h-card {
  white-space: nowrap;
}

.site-footer .h-card .u-photo {
  width: 24px;
  height: 24px;
  margin: -4px 6px -4px 0;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

h1,
h2,
.wordmark {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--jt-tracking-heading);
}

h1 {
  font-size: var(--jt-size-h1);
  line-height: 1.05;
  margin: 8px 0 16px;
}

/* The green word in the front page's title: colour and a lighter weight mark it, never italics. */
h1 .accent {
  font-weight: 600;
  color: var(--accent-text);
}

h1 .dot {
  color: var(--dormant);
}

.with-sticker {
  display: flex;
  align-items: center;
  gap: 16px;
}

.with-sticker .sticker {
  --size: 60px;

  font-size: 1.5rem;
}

h2 {
  font-size: var(--jt-size-h2);
  line-height: 1.2;
  margin: 48px 0 14px;
}

.badge {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-family: var(--font-label);
  font-size: var(--jt-size-small);
  font-weight: 500;
  letter-spacing: normal;
  vertical-align: 5px;
}

.sticker {
  --size: 40px;

  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  flex: none;
  border-radius: 22%;
  background: hsl(var(--hue) 70% var(--sticker-ground));
  color: hsl(var(--hue) 55% var(--sticker-ink));
  box-shadow: inset 0 0 0 1.5px hsl(var(--hue) 50% var(--sticker-edge));
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.0625rem;
  letter-spacing: 0.02em;
  rotate: var(--tilt, 0deg);
  transition: rotate 180ms ease;
}

.lede {
  font-size: 1.25rem;
  max-width: var(--measure);
  margin: 0 0 12px;
}

.site-main p a:not(.tag, .status),
.site-main li a:not(.tag, .thing-title),
.site-main dd a:not(.tag) {
  text-decoration: underline;
  text-decoration-color: var(--underline);
  text-underline-offset: 3px;
}

.site-main a:hover {
  text-decoration-color: currentcolor;
}

.muted,
.count {
  color: var(--muted);
}

.count {
  font-family: var(--font-label);
  font-weight: 400;
  font-size: var(--jt-size-small);
  letter-spacing: normal;
  margin-left: 4px;
}

.crumbs {
  font-size: var(--jt-size-small);
  color: var(--muted);
  margin: 0;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--jt-size-label);
  margin: 16px 0 0;
}

.status {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--jt-size-label);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--chip, var(--soft));
  line-height: 1.5;
  vertical-align: middle;
}

.status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
  margin: 0 5px 1px 0;
}

.status-active {
  --chip: var(--active-soft);

  color: var(--active);
}

.status-dormant {
  --chip: var(--dormant-soft);

  color: var(--dormant);
}

.status-retired {
  --chip: var(--retired-soft);

  color: var(--retired);
}

.status-abandoned {
  --chip: var(--abandoned-soft);

  color: var(--abandoned);
}

.status-archived {
  --chip: var(--archived-soft);

  color: var(--archived);
}

.tag,
.role,
.kind {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--jt-size-label);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--soft);
  margin: 0 2px 4px 0;
}

.kind {
  text-transform: capitalize;
}

.thing-list,
.topic-list,
.source-list,
.connection-list,
.event-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.thing-row {
  --spark: var(--accent);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 8px 16px;
  padding: 14px 12px;
  margin: 0 -12px;
  border-top: 1px solid var(--line);
  border-radius: 14px;
  transition: background 160ms ease;
}

.thing-row:hover {
  background: var(--soft);
  border-top-color: transparent;
}

.thing-row:hover .sticker {
  rotate: 0deg;
}

.thing-row .sticker {
  margin-top: 2px;
}

.thing-row.is-active {
  --spark: var(--active);
}

.thing-row.is-dormant {
  --spark: var(--dormant);
}

.thing-row.is-retired {
  --spark: var(--retired);
}

.thing-row.is-abandoned {
  --spark: var(--abandoned);
}

.thing-row.is-archived {
  --spark: var(--archived);
}

.thing-title {
  font-weight: 600;
  margin-right: 8px;
}

.thing-summary {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.thing-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: var(--jt-size-meta);
  color: var(--muted);
  white-space: nowrap;
}

.sparkline .spark-on {
  fill: var(--spark, var(--accent));
}

.sparkline .spark-off {
  fill: var(--line);
}

.sparkline-views .spark-on {
  fill: var(--muted);
}

.views .sparkline {
  vertical-align: -3px;
  margin-left: 6px;
}

.screenshot {
  max-width: var(--measure);
  margin: 28px 0 8px;
}

.screenshot a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
  box-shadow:
    0 1px 2px var(--shadow),
    0 10px 28px var(--shadow);
}

.screenshot img {
  display: block;
  width: 100%;
  height: auto;
}

.screenshot figcaption {
  margin-top: 8px;
  font-size: var(--jt-size-meta);
  color: var(--muted);
}

.topic-cloud a,
.related .tag {
  margin-right: 8px;
}

.topic-list li {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.topic-list h2 {
  font-size: 1.625rem;
  margin: 0 0 6px;
}

.topic-list p {
  margin: 4px 0;
}

.thing-header {
  border-left: 5px solid color-mix(in oklab, var(--accent), var(--ink) var(--story-mix));
  border-radius: 3px;
  padding-left: 20px;
}

/* A thing's one-line introduction, under the lede: weight and the muted ink set it apart, not italics. */
.introduction {
  max-width: var(--measure);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 12px;
}

.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 20px;
  margin: 20px 0 0;
  font-size: 1.0625rem;
}

.facts dt {
  color: var(--muted);
}

.facts dd {
  margin: 0;
}

.story {
  max-width: var(--measure);
}

.story p {
  margin: 16px 0;
}

.build ul,
.evidence {
  padding-left: 20px;
  margin: 8px 0;
}

.evidence {
  font-size: 1.0625rem;
}

.source {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.source-head {
  margin: 0;
  font-weight: 500;
}

.source-description {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.activity {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--jt-size-small);
}

/* Activity (site/activity.njk, a thing's Activity section; collection/activity.ts draws the charts). */
.who-me {
  fill: var(--who-me);
  background: var(--who-me);
}

.who-agent {
  fill: var(--who-agent);
  background: var(--who-agent);
}

.who-others {
  fill: var(--who-others);
  background: var(--who-others);
}

.who-none {
  fill: var(--line);
}

.who-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--jt-size-label);
}

.who-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.who-key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.who-years {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.who-years li {
  display: grid;
  grid-template-columns: 56px minmax(0, 360px) minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
}

.who-year {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
}

.who-bar {
  display: block;
  max-width: 100%;
  height: auto;
}

.who-numbers {
  font-size: var(--jt-size-small);
  color: var(--muted);
}

.week {
  scroll-margin-top: 16px;
}

.week h3,
.activity-year h3,
.thing-activity h3 {
  font-size: var(--jt-size-h3);
  margin: 32px 0 4px;
}

.week h3 .badge {
  height: 26px;
  vertical-align: 2px;
}

.week:target h3 {
  color: var(--accent-text);
}

.activity-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.activity-entry {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 0;
}

.site-main .activity-head a.activity-thing {
  text-decoration: none;
}

.activity-thing {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.activity-thing .sticker {
  --size: 30px;

  font-size: var(--jt-size-label);
}

.activity-week {
  font-weight: 600;
}

.activity-head .muted {
  font-size: var(--jt-size-small);
}

.headlines {
  margin: 6px 0 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 1.0625rem;
}

.headlines li {
  margin: 2px 0;
  overflow-wrap: anywhere;
}

.activity-more {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: var(--jt-size-small);
}

.activity-tally {
  max-width: var(--measure);
  margin: 0;
}

.year-chart {
  margin: 16px 0;
}

.year-chart svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.year-chart figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 8px;
  font-size: var(--jt-size-small);
}

.connection-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.connection-list p {
  margin: 2px 0;
}

.connection-list .lineage > p:first-child::before {
  content: '↳ ';
  color: var(--muted);
}

.connection-diagram {
  --pele-bg: var(--paper);
  --pele-fg: var(--ink);
  --pele-muted: var(--muted);
  --pele-line: var(--muted);
  --pele-surface: var(--soft);
  --pele-surface-alt: var(--soft);
  --pele-border: var(--line);
  --pele-accent: var(--accent);
  --pele-radius: 6px;
  --pele-font: var(--font-ui);

  margin: 0 0 16px;
  overflow-x: auto;
}

.connection-diagram svg {
  display: block;
}

.diagram-narrow {
  display: none;
}

.connection-diagram .active rect {
  fill: var(--active-soft);
  stroke: var(--active);
}

.connection-diagram .dormant rect {
  fill: var(--dormant-soft);
  stroke: var(--dormant);
}

.connection-diagram .retired rect {
  fill: var(--retired-soft);
  stroke: var(--retired);
}

.connection-diagram .abandoned rect {
  fill: var(--abandoned-soft);
  stroke: var(--abandoned);
}

.connection-diagram .archived rect {
  fill: var(--archived-soft);
  stroke: var(--archived);
}

.connection-diagram .self rect {
  fill: var(--ink);
  stroke: var(--ink);
}

.connection-diagram .self .pele-label {
  fill: var(--paper);
}

.connection-diagram a:hover rect,
.connection-diagram a:focus-visible rect {
  stroke: var(--accent);
  stroke-width: 2;
}

.connection-diagram a:hover .pele-label {
  text-decoration: underline;
}

.event-list li {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 2px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.event-list time {
  color: var(--muted);
  font-size: var(--jt-size-meta);
  padding-top: 3px;
}

.event-list .kind {
  grid-column: 2;
  justify-self: start;
  margin: 0;
}

.event-list strong,
.event-list > li > a,
.event-list p {
  grid-column: 2;
  margin: 2px 0;
}

.event-list li:target {
  background: var(--soft);
  box-shadow: 0 0 0 12px var(--soft);
}

.year h2 {
  position: sticky;
  top: 0;
  background: var(--paper);
  padding: 8px 0;
  margin: 24px 0 0;
}

.thing-footer {
  margin-top: 40px;
  font-size: var(--jt-size-small);
}

.tl-years {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
}

.tl-year {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.tl-year.is-quiet {
  padding: 6px 0;
}

.tl-year-label {
  position: sticky;
  top: 0;
  align-self: start;
  margin: 0;
  font-size: var(--jt-size-h3);
  line-height: 1.3;
  background: var(--paper);
}

.tl-year.is-quiet .tl-year-label {
  font-size: 1.0625rem;
  color: var(--muted);
}

.tl-alive {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: var(--jt-size-label);
  min-height: 26px;
}

.alive {
  display: block;
  width: min(240px, 100%);
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}

.tl-things {
  columns: 360px;
  column-gap: 24px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.tl-things li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.tl-thing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.tl-things .thing-title {
  margin-right: 0;
}

.tl-things .dates {
  flex-basis: 100%;
  font-size: var(--jt-size-meta);
  line-height: 1.3;
  color: var(--muted);
}

.tl-ended {
  margin: 6px 0 0;
}

.lifespan {
  display: block;
  flex: none;
}

.ls-track {
  fill: var(--line);
}

.ls-bar,
.ls-retired {
  fill: var(--retired);
}

.ls-active {
  fill: var(--active);
}

.ls-dormant {
  fill: var(--dormant);
}

.ls-abandoned {
  fill: var(--abandoned);
}

.ls-archived {
  fill: var(--archived);
}

.ls-event {
  fill: var(--ink);
}

/* The front page's status legend leads to the search, filtered by that status. */
.legend a.status:hover {
  box-shadow: inset 0 0 0 1.5px currentcolor;
}

/* Search (site/search.njk, site/js/search.js): the box, the facets beside the list (folded above it on a
   narrow screen), and the list, which is the front page's rows narrowed and reordered. A chosen facet value
   is filled with ink, like the current page in the header. */
.search-intro h1 {
  margin-bottom: 12px;
}

.search-label {
  display: block;
  max-width: var(--measure);
  color: var(--muted);
}

.search-row {
  display: flex;
  gap: 12px;
  max-width: var(--measure);
  margin-top: 14px;
}

.search-row input {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.125rem;
  box-shadow: 3px 3px 0 var(--ink);
}

.search-row input:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 3px 3px 0 var(--accent-text);
}

.search-row input::placeholder {
  color: var(--muted);
}

.surprise {
  flex: none;
  padding: 0 18px;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--dormant-soft);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--jt-size-ui);
  font-weight: 600;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -1.5deg;
  cursor: pointer;
  transition: rotate 180ms ease;
}

.surprise:hover {
  rotate: 1.5deg;
}

.surprise:active {
  translate: 2px 2px;
  box-shadow: 1px 1px 0 var(--ink);
}

.search-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: 24px 48px;
  margin-top: 36px;
}

.search-results {
  grid-area: 1 / 1;
}

.facet-panel {
  grid-area: 1 / 2;
  padding: 18px 20px 20px;
  border-radius: 16px;
  background: var(--soft);
}

.facet-panel summary {
  display: none;
}

.facet {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}

.facet legend {
  margin-bottom: 8px;
  padding: 0;
  font-family: var(--font-label);
  font-size: var(--jt-size-small);
  font-weight: 600;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 10px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-label);
  font-size: var(--jt-size-label);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
}

/* A status chip keeps its status colour, as in the front page's legend. */
.chip:not(.status) {
  color: var(--ink);
}

.chip.status {
  border-color: transparent;
  background: var(--chip);
  font-weight: 600;
}

.chip .count {
  margin: 0;
  font-size: var(--jt-size-label);
}

.chip:hover:not(:disabled) {
  border-color: var(--ink);
}

.chip[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.chip[aria-pressed='true'] .count {
  color: var(--line);
}

/* A chosen status keeps its colour in the dot. */
.chip.status[aria-pressed='true']::before {
  background: var(--chip);
}

.chip:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Started: one bar per year, as tall as the things begun that year. The outline is all of them; the green
   fill is the ones the search would show, so the bars sink as the list narrows. */
.histogram {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  gap: 2px;
  height: 84px;
  margin-bottom: 30px;
}

.year {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.bar {
  position: relative;
  display: block;
  width: 100%;
  height: calc(var(--total) / var(--most) * 100%);
  min-height: 8px;
  padding: 0;
  border: 0;
  border-radius: 3px 3px 1px 1px;
  background: var(--line);
  cursor: pointer;
}

.bar.empty {
  height: 2px;
  min-height: 0;
  cursor: default;
}

.bar .fill {
  position: absolute;
  inset: auto 0 0;
  height: calc(var(--n) / var(--total) * 100%);
  border-radius: inherit;
  background: var(--accent);
  transition: height 200ms ease;
}

.bar:hover:not(:disabled) .fill,
.bar[aria-pressed='true'] .fill {
  background: var(--ink);
}

.bar[aria-pressed='true'] {
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 3.5px var(--ink);
}

.bar:disabled {
  cursor: default;
}

.tick {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 6px;
  color: var(--muted);
  font-family: var(--font-label);
  font-size: var(--jt-size-label);
  white-space: nowrap;
}

.facet-note {
  margin: 0;
  font-size: var(--jt-size-label);
}

.clear {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-text);
  font-family: var(--font-ui);
  font-size: var(--jt-size-small);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.search-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 6px;
}

.search-status {
  margin: 0;
  font-weight: 600;
}

.sort {
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: var(--jt-size-small);
}

.sort select {
  margin-left: 6px;
  padding: 4px 8px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--jt-size-small);
}

/* The passage that matched, in place of the summary and set like it, with the matched words marked. */
.search-excerpt {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1.0625rem;
}

.search-excerpt mark {
  padding: 0 2px;
  border-radius: 3px;
  background: var(--dormant-soft);
  color: var(--ink);
  font-weight: 600;
}

@media (width < 900px) {
  .search-layout {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 24px;
  }

  .search-results,
  .facet-panel {
    grid-area: auto;
  }

  .facet-panel {
    padding: 0;
    background: none;
  }

  .facet-panel summary {
    display: inline-flex;
    padding: 6px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: var(--jt-size-ui);
    font-weight: 600;
    cursor: pointer;
  }

  .facet-panel[open] summary {
    margin-bottom: 16px;
    background: var(--ink);
    color: var(--paper);
  }

  .facet-panel[open] {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
  }
}

@media (width <= 560px) {
  .tl-year {
    grid-template-columns: minmax(0, 1fr);
  }

  .tl-year-label {
    padding: 2px 0 6px;
    z-index: 1;
  }

  .tl-year.is-quiet {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .tl-year.is-quiet .tl-year-label {
    padding: 0;
  }
}

/* Phones: the sites strip is one row that scrolls sideways, without its label. */
@media (width <= 40rem) {
  .sites-strip__inner,
  .sites-strip__list {
    flex-wrap: nowrap;
    gap: 18px;
  }

  .sites-strip__inner {
    overflow-x: auto;
    white-space: nowrap;
  }

  .sites-strip__label {
    display: none;
  }
}

@media (width <= 720px) {
  .diagram-wide,
  .connection-diagram.wide-only {
    display: none;
  }

  .diagram-narrow {
    display: block;
  }

  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Under the wordmark, the first link's text lines up with it. */
  .site-header nav {
    margin-inline-start: -12px;
  }

  .thing-row {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .thing-row-meta {
    grid-column: 2;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    white-space: normal;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .facts dt {
    margin-top: 8px;
  }

  .event-list li {
    grid-template-columns: 1fr;
  }

  .who-years li {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .who-numbers {
    grid-column: 2;
  }

  .event-list .kind,
  .event-list strong,
  .event-list > li > a,
  .event-list p {
    grid-column: 1;
  }
}

/* Phones: the six links keep to one row, spread across it with less room around each. They fit at 17px from
   440px wide, 15px from 390px and 14px from 350px; narrower than that the row scrolls sideways like the sites
   strip. It never breaks onto a second line. */
@media (width <= 560px) {
  .site-header nav {
    align-self: stretch;
    justify-content: space-between;
    gap: 0;
    margin-inline: -4px;
  }

  .site-header nav a {
    padding-inline: 4px;
  }
}

@media (width < 440px) {
  .site-header nav {
    margin-inline: -3px;
  }

  .site-header nav a {
    padding-inline: 3px;
    font-size: 0.9375rem;
  }
}

@media (width < 390px) {
  .site-header nav a {
    font-size: var(--jt-size-label);
  }
}

@media (width < 365px) {
  .site-header nav {
    margin-inline: -2px;
  }

  .site-header nav a {
    padding-inline: 2px;
  }
}

@media (width < 350px) {
  .site-header nav {
    overflow-x: auto;
  }
}

/* The sites strip's dark values, from the contract in thingelstad.com's AGENTS.md: the --jt-*-text colours. */
@media (prefers-color-scheme: dark) {
  .sites-strip {
    background: #1e1e23;
  }

  .sites-strip__label {
    color: #9d9daa;
  }

  .sites-strip a,
  .sites-strip a:hover {
    color: #ececf0;
  }

  .sites-strip a:focus-visible {
    outline-color: #ececf0;
  }

  .sites-strip__item--weekly a,
  .sites-strip__item--weekly a:hover {
    color: #78acf2;
  }

  .sites-strip__item--another a,
  .sites-strip__item--another a:hover {
    color: #f58aa3;
  }

  .sites-strip__item--thingy a,
  .sites-strip__item--thingy a:hover {
    color: #f3a274;
  }

  .sites-strip__item--xyz a,
  .sites-strip__item--xyz a:hover {
    color: #74d3a0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sticker,
  .mark,
  .surprise,
  .bar .fill,
  .thing-row {
    transition: none;
  }
}