/* 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, the artifacts'
     frame (white in the dark too, because the files were made for white pages), and the stickers' lightness
     (each sticker brings its own --hue). */
  --underline: #c9ccd3;
  --field: #fff;
  --artifact-ground: #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%;

  /* The Years chart: one hue, the site's green, already-alive lighter and new darker. */
  --year-already: #3fb778;
  --year-new: #1d7348;

  /* 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;
    --year-already: #1b6f46;
    --year-new: #3aa96f;
    --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,
.sites-strip__all[aria-current] {
  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;
  white-space: nowrap;
  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 and Thingy's byline: the round photo and the small robot beside their names, inside the
   sentence, without opening up the line. */
.site-footer .h-card,
.site-footer .thingy-byline {
  white-space: nowrap;
}

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

.site-footer .thingy {
  border-radius: 0;
}

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, .permalink),
.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,
.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;
}

/* The picture's own link is the frame. A link inside the caption stays a link in a sentence. */
.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);
}

/* The front page's featured shelf (content/featured.yaml): the few things I want a visitor to see first. Each tile
   leads with the site's front page as the collector last captured it, cropped to its top, or the thing's sticker
   on its story colour when there is no capture. */
.feature {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feature-cover {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cover, var(--soft));
}

.feature-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.feature-mark {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 4rem;
  letter-spacing: var(--jt-tracking-heading);
  color: #fff;
}

.feature h3 {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  letter-spacing: var(--jt-tracking-heading);
  font-size: var(--jt-size-h3);
  margin: 14px 0 4px;
}

.site-main .feature h3 a,
.site-main .feature .feature-cover {
  color: var(--ink);
  text-decoration: none;
}

.site-main .feature h3 a:hover {
  text-decoration: underline;
}

.feature-summary {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: var(--jt-size-small);
}

.site-main .feature-visit {
  margin-top: auto;
  font-size: var(--jt-size-small);
  font-weight: 600;
  color: var(--accent-text);
  overflow-wrap: anywhere;
}

/* A thing's artifacts: cards in a grid, each image in a frame of one shape so a logo and a screenshot sit
   side by side. An image is shrunk to fit its frame and never enlarged past its own size. */
.artifact-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 28px 24px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.artifact {
  min-width: 0;
}

.artifact-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--artifact-ground);
}

.artifact-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.artifact-title {
  font-size: var(--jt-size-base);
  margin: 12px 0 4px;
}

/* Bundles: a thing's artifacts in named groups, each a heading, a line or two, and its own grid. */
.artifact-bundle {
  margin-top: 36px;
}

.artifact-bundle h3 {
  margin: 0 0 4px;
}

.artifact-bundle-caption {
  margin: 4px 0 0;
  max-width: 68ch;
}

.artifact-caption {
  margin: 4px 0;
  font-size: 1.0625rem;
}

.artifact-meta {
  margin: 4px 0;
  font-size: var(--jt-size-meta);
  overflow-wrap: anywhere;
}

/* Anchors (thing.njk): every section, bundle and artifact of a thing page has an address of its own, and its
   heading's # link is the way to copy it. The # stays quiet until its heading is hovered or it has focus, and
   is always shown where there is no hover, as on a phone. The section or artifact a link opens on is marked
   the way the history ledger marks its event: the heading in the green, an artifact on the soft ground. */
.permalink {
  margin-left: 0.1em;
  color: var(--muted);
  font-weight: 600;
  text-decoration: none;
  opacity: 0;
}

h2:hover > .permalink,
h3:hover > .permalink,
h4:hover > .permalink,
:target > h2 > .permalink,
:target > h3 > .permalink,
:target > h4 > .permalink,
.permalink:focus-visible {
  opacity: 1;
}

.permalink:hover {
  color: var(--accent-text);
}

@media (hover: none) {
  .permalink {
    opacity: 1;
  }
}

.thing-main > section[id],
.artifact-bundle,
.artifact {
  scroll-margin-top: 16px;
}

.thing-main > section:target > h2,
.artifact-bundle:target h3 {
  color: var(--accent-text);
}

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

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

.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;
}

/* A quotation from Jamie set as a block: his words, then a last line that names him and links the question or post
   it came from (docs/THINGY.md, "Quoting the interview"). */
.story blockquote {
  margin: 20px 0;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
}

.story blockquote p {
  margin: 8px 0;
}

.story blockquote p:last-child {
  font-size: var(--jt-size-small);
  color: var(--muted);
}

/* Stories (site/stories.njk, site/story.njk, story-card.njk): cards on the front page and the list, each a title,
   a span, a summary and its things in order; on a story's page the things are rows, then the story, then the
   events of those things. */
.story-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin: 12px 0 8px;
  padding: 0;
  list-style: none;
}

.story-card {
  padding: 18px 20px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--soft);
}

.story-card h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--jt-size-h3);
  font-weight: var(--weight-heading);
  letter-spacing: var(--jt-tracking-heading);
  line-height: 1.15;
}

.story-card p {
  margin: 8px 0;
}

.story-card .story-span {
  margin-top: 4px;
  font-size: var(--jt-size-small);
}

.story-cast {
  margin-bottom: 0;
}

.storyline .story-span {
  margin: -8px 0 0;
}

.cast-list {
  margin: 8px 0 0;
}

.story-body {
  margin-top: 32px;
}

/* Workshop Builder poses are versioned stills from the character home. They need no WebGL or JavaScript. */
.has-character {
  position: relative;
  min-height: 170px;
  padding-right: 190px;
}

.thingy-companion {
  position: absolute;
  top: -12px;
  right: 0;
  width: 170px;
}

.thingy-companion img {
  display: block;
  width: 100%;
  height: auto;
}

/* The kit: he is made for a light page, and on a very dark one his legs and shadow sink into it. So he stands on a
   pale plate in dark mode. */
@media (prefers-color-scheme: dark) {
  .thingy-companion {
    border-radius: 999px;
    background: radial-gradient(circle at 50% 54%, #efeadf 0 60%, transparent 61%);
  }
}

@media (width <= 40rem) {
  .has-character {
    min-height: 100px;
    padding-right: 96px;
  }

  .thingy-companion {
    top: 0;
    width: 88px;
  }

  .search-intro.has-character {
    padding-right: 0;
  }

  .search-intro.has-character .title {
    padding-right: 96px;
  }
}

/* The about page (site/about.njk): headings between the paragraphs, Thingy's tiles, and the status words as a
   list. */
.about h2 {
  clear: both;
  margin: 32px 0 8px;
}

.about-statuses {
  padding-left: 0;
  margin: 12px 0 16px;
  list-style: none;
}

.about-statuses li {
  margin: 6px 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-bar {
  display: block;
  max-width: 100%;
  height: auto;
}

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

.week 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);
}

.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);
  }
}

/* Phones: the sites strip is one row, without its label. The list scrolls sideways inside it, and All Things
   stays put at its right end, so it is never scrolled out of sight. */
@media (width <= 40rem) {
  .sites-strip__inner,
  .sites-strip__list {
    flex-wrap: nowrap;
    gap: 18px;
  }

  .sites-strip__inner {
    white-space: nowrap;
  }

  /* The padding, taken back by the margin, keeps the focus ring inside the scrolling box, where it is not cut off. */
  .sites-strip__list {
    flex: 1 1 auto;
    min-width: 0;
    margin: -6px;
    padding: 6px;
    overflow-x: auto;
  }

  .sites-strip__all {
    flex: none;
  }

  .sites-strip__label {
    display: none;
  }
}

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

  .diagram-narrow {
    display: block;
  }

  .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;
  }

  .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 410px and 14px from 360px; 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 < 410px) {
  .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 < 360px) {
  .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;
  }
}

/* Round 2: shelves, filters, Years and Artifacts. A shelf scrolls sideways by swipe, trackpad or keyboard; its
   arrows come with the script (site/js/enhance.js). */
.small {
  font-size: var(--jt-size-small);
  line-height: 1.5;
}

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

.label {
  color: var(--muted);
  font-size: var(--jt-size-label);
  font-weight: 600;
}

.note {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--soft);
  font-size: var(--jt-size-small);
  line-height: 1.5;
}

.more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-right: 8px;
  font-size: var(--jt-size-small);
}

.clamp,
.clamp-two {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.clamp-two {
  -webkit-line-clamp: 2;
}

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--jt-size-label);
}

.status-dot::before {
  width: 8px;
  height: 8px;
  border-radius: 9px;
  background: var(--retired);
  content: '';
}

.status-dot.is-active {
  color: var(--active);
  font-weight: 600;
}

.status-dot.is-active::before {
  background: var(--active);
}

.shelf {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
  scroll-margin-top: 16px;
}

.shelf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.shelf-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}

.shelf-title h2,
.shelf-title h3 {
  margin: 0;
}

.shelf-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shelf-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.shelf-arrow[hidden] {
  display: none;
}

.shelf-arrow:hover {
  background: var(--soft);
}

.shelf-track {
  display: grid;
  grid-auto-columns: min(var(--card), 82vw);
  grid-auto-flow: column;
  gap: 20px;
  padding: 2px 2px 12px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--line) transparent;
  scrollbar-width: thin;
}

.shelf-track > * {
  min-width: 0;
  scroll-snap-align: start;
}

/* A thing's card sits in its h-entry; the card's link fills the shelf's row. */
.shelf-entry {
  display: grid;
}

.shelf-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--soft);
  color: inherit;
  text-decoration: none;
}

.shelf-card.is-short {
  min-height: 110px;
}

.shelf-card .p-name {
  margin: 0;
  font-size: var(--jt-size-base);
}

.shelf-card:hover .p-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* /things/: the filters, then a line for each thing. */
.filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 2px solid var(--ink);
}

.filters[hidden] {
  display: none;
}

.filter-row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.filter-row .label {
  padding-top: 12px;
}

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

.filter-chips[hidden] {
  display: none;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--jt-size-label);
  font-weight: 500;
  cursor: pointer;
}

/* An event's kind is one lowercase word in the record; the others are titles and stay as written. */
[data-filter-axis='kind'] .filter-chip {
  text-transform: capitalize;
}

.filter-chip:hover {
  background: var(--soft);
}

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

.filter-chip .count {
  margin: 0;
  color: inherit;
  font-size: var(--jt-size-label);
  font-weight: 400;
}

.filter-status,
.filter-note {
  margin: 4px 0 0;
}

.things-group {
  margin-top: 28px;
  scroll-margin-top: 16px;
}

.things-group h2 {
  margin: 0 0 8px;
  font-size: var(--jt-size-h3);
}

.thing-lines {
  padding: 0;
  margin: 0;
  list-style: none;
}

.thing-line {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr) 92px 62px;
  gap: 4px 20px;
  align-items: baseline;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.thing-line[hidden],
.things-group[hidden] {
  display: none;
}

.thing-line-title {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.thing-line-title:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.thing-line-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thing-line-year {
  text-align: right;
}

.topics-list {
  margin-top: 48px;
}

.topics-list dt {
  margin-top: 14px;
  font-weight: 600;
  scroll-margin-top: 16px;
}

.topics-list dd {
  margin: 2px 0 0;
  font-size: var(--jt-size-small);
}

@media (width <= 40rem) {
  .filter-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .filter-row .label {
    padding-top: 0;
  }

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

  .thing-line-summary {
    grid-column: 1 / -1;
    grid-row: 2;
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .thing-line-year {
    display: none;
  }
}

/* /all/: every live thing as a link, in columns, as dense as a classifieds index (Jamie, 2026-11-10: "think
   Craigslist"). Each collection keeps to one column; its summary is the link's title. */
.all-title {
  margin: 8px 0 4px;
  font-size: var(--jt-size-h2);
}

.all-note {
  margin: 0 0 24px;
  font-size: var(--jt-size-small);
}

.all-columns {
  columns: 4 13rem;
  column-gap: 32px;
}

.all-group {
  margin: 0 0 20px;
  break-inside: avoid;
}

.all-group h2 {
  margin: 0 0 4px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  font-size: var(--jt-size-ui);
}

.all-group h2 a {
  color: inherit;
  text-decoration: none;
}

.all-group h2 a:hover {
  text-decoration: underline;
}

.all-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--jt-size-ui);
  line-height: 1.55;
}

.all-group li a {
  color: var(--accent-text);
}

/* /years/: a row a year. The numbers are always printed, so colour never carries them alone. */
.year-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 12px 0 0;
}

.key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--jt-size-label);
}

.key span {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.key-already,
.bar-already {
  background: var(--year-already);
}

.key-new,
.bar-new {
  background: var(--year-new);
}

.year-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 12px;
  margin-top: 16px;
  border-top: 2px solid var(--ink);
}

.year-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 220px;
  gap: 2px 16px;
  align-items: center;
  min-height: 44px;
  padding: 4px;
  border-radius: 6px;
  color: inherit;
  font-size: var(--jt-size-small);
  text-decoration: none;
  scroll-margin-top: 16px;
}

.year-row:hover,
.year-row:target {
  background: var(--soft);
}

.year-row-year {
  font-weight: 600;
}

.year-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 4px;
  height: 16px;
}

.year-bars span {
  display: block;
  height: 16px;
  border-radius: 2px;
}

.year-row-names {
  grid-column: 2 / -1;
  font-size: var(--jt-size-label);
}

@media (width <= 40rem) {
  .year-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .year-row-line,
  .year-row-names {
    grid-column: 2;
  }
}

/* /years/<year>/ */
.year-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 16px;
}

.year-number {
  margin: 0;
  font-size: 120px;
  line-height: 0.9;
  letter-spacing: -0.04em;
}

@media (width <= 40rem) {
  .year-number {
    font-size: 72px;
  }
}

.year-nav {
  display: flex;
  gap: 6px;
}

.year-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: inherit;
  font-size: var(--jt-size-label);
  font-weight: 500;
  text-decoration: none;
}

.year-chip:hover {
  background: var(--soft);
}

.year-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 48px;
  scroll-margin-top: 16px;
}

.year-section h2 {
  margin: 0;
}

.year-section .meta,
.year-section p {
  margin: 0;
}

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

.work-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.work-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: var(--soft);
}

.work-count {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}

.ledger {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ledger-event {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 16px;
}

.ledger-event[hidden] {
  display: none;
}

.ledger-event:target {
  background: var(--soft);
}

.ledger-event h3 {
  margin: 0 0 4px;
  font-size: var(--jt-size-base);
}

.ledger-event .small {
  margin: 0 0 6px;
}

.ledger-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: var(--jt-size-small);
  font-weight: 600;
}

.ledger-when .meta {
  font-weight: 400;
}

@media (width <= 40rem) {
  .ledger-event {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* /artifacts/ */
.pull-quote {
  margin: 8px 0 0;
  max-width: var(--measure);
  font-family: var(--font-heading);
  font-size: var(--jt-size-h3);
  font-weight: 700;
  line-height: 1.3;
}

.pull-quote a {
  display: block;
  margin-top: 8px;
  font-family: var(--font-ui);
  font-size: var(--jt-size-small);
  font-weight: 500;
}

.artifact-figure {
  display: block;
  color: inherit;
  text-decoration: none;
}

.artifact-figure figure {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.artifact-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--artifact-ground);
  object-fit: cover;
  object-position: top;
}

.artifact-figure figcaption {
  font-size: var(--jt-size-small);
  line-height: 1.45;
}

.artifact-figure b {
  display: block;
  font-weight: 600;
}

.artifact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
}

.artifact-grid .more {
  margin: 0;
}

/* Thingy speaking: his head, cropped from a Workshop still, and his words in his colour. The crop is a share of the
   still's square, so it holds for any size of frame. */
.thingy-says {
  color: var(--jt-thingy-text);
  font-weight: 600;
}

.thingy-head {
  display: block;
  overflow: hidden;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--soft);
}

.thingy-head img {
  display: block;
  width: 265%;
  max-width: none;
  height: auto;
  margin: -40% 0 0 -88%;
}

@media (prefers-color-scheme: dark) {
  .thingy-head {
    background: #efeadf;
  }
}

.thingy-box {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
}

.thingy-box > b {
  color: var(--jt-thingy-text);
  font-size: var(--jt-size-small);
  font-weight: 600;
}

.thingy-box > p {
  grid-column: 2;
  margin: 0;
}

.thingy-line {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.thingy-line p {
  margin: 0;
}

/* A line of Jamie's pulled out large, and who said it. */
.pull {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.25;
}

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

.pull a:hover {
  text-decoration: underline;
}

.who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  font-size: var(--jt-size-meta);
  font-weight: 600;
}

.who img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

/* The big session number, on /interviews/ and at the top of a session. */
.session-number {
  color: var(--ink);
  font-family: var(--font-heading);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-decoration: none;
}

/* /interviews/ (site/interviews.njk): each session a row, its number, its point, and a line of Jamie's. The newest
   row is the largest, under a heavy rule. */
.session-list {
  margin-top: 32px;
}

.session-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 320px;
  gap: 24px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
}

.session-card .session-number {
  font-size: 124px;
}

.session-card h2 {
  margin: 4px 0 10px;
  font-size: 30px;
  line-height: 1.15;
}

.session-card h2 a {
  color: inherit;
  text-decoration: none;
}

.session-card h2 a:hover {
  text-decoration: underline;
}

.session-card .thingy-says {
  font-size: var(--jt-size-base);
  line-height: 1.5;
}

.session-card .pull {
  font-size: 21px;
}

.session-card.is-latest {
  grid-template-columns: 210px minmax(0, 1fr) 320px;
  padding: 28px 0;
  border-top: 2px solid var(--ink);
}

.session-card.is-latest .session-number {
  color: var(--jt-thingy-text);
  font-size: 210px;
}

.session-card.is-latest h2 {
  font-size: 44px;
}

.session-card.is-latest .pull {
  font-size: 26px;
}

.session-card.is-latest .session-pull {
  padding-top: 26px;
}

/* The index by thing: a thing's name leads to its page, and each session number to the question. */
.interview-find {
  padding-top: 20px;
  margin-top: 16px;
  border-top: 2px solid var(--ink);
}

.interview-find h2,
.still-to-ask h2 {
  margin: 0;
  font-size: 22px;
}

.interview-index {
  padding: 0;
  margin: 16px 0 0;
  column-gap: 32px;
  columns: 3 240px;
  list-style: none;
}

.interview-index li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-top: 1px solid var(--line);
  break-inside: avoid;
  font-size: var(--jt-size-meta);
  line-height: 1.35;
}

.interview-index-sessions {
  display: flex;
  gap: 2px;
  white-space: nowrap;
}

.interview-index-sessions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  border-radius: 6px;
  color: var(--muted);
}

.interview-index-sessions a:hover {
  background: var(--soft);
}

.still-to-ask {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px 32px;
  padding-top: 20px;
  margin-top: 40px;
  border-top: 2px solid var(--ink);
}

.still-to-ask h2 {
  color: var(--jt-thingy-text);
}

.still-to-ask p {
  margin: 0 0 12px;
}

/* A session (site/interview.njk): the number, the title and Thingy's point, then a rail of the questions beside the
   transcript. On a phone the rail is a fold above the transcript. */
.session-top {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 170px;
  gap: 24px 32px;
  padding: 16px 0 28px;
}

.session-top .session-number {
  color: var(--jt-thingy-text);
  font-size: 220px;
}

.session-top h1 {
  margin: 4px 0 12px;
}

.session-top .thingy-companion {
  position: static;
  align-self: start;
}

.contents-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}

.toc {
  position: sticky;
  top: 16px;
  display: flex;
  overflow-y: auto;
  flex-direction: column;
  grid-column: span 3;
  gap: 2px;
  max-height: calc(100vh - 32px);
}

.toc .label {
  margin: 0 0 6px;
}

.toc-link {
  display: flex;
  gap: 10px;
  min-height: 36px;
  padding: 4px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--jt-size-meta);
  line-height: 1.3;
  text-decoration: none;
}

.toc-link:hover {
  background: var(--soft);
}

.toc-link.is-current {
  background: var(--soft);
  color: var(--accent-text);
  font-weight: 600;
}

.toc-link b {
  flex: none;
  min-width: 22px;
  font-weight: 600;
}

.toc-about {
  margin-top: 10px;
  color: var(--muted);
}

.toc .toc-about + .toc-link {
  color: var(--muted);
}

.toc-fold {
  display: none;
}

.session-main,
.thing-main {
  display: flex;
  flex-direction: column;
  grid-column: span 9;
  gap: 32px;
  min-width: 0;
  max-width: 780px;
}

.thing-main {
  max-width: none;
  gap: 44px;
}

.transcript {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.question {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 16px;
}

.question:first-child {
  padding-top: 0;
  border-top: 0;
}

.question h2 {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin: 0;
  font-size: 26px;
  line-height: 1.2;
}

.question-number {
  flex: none;
  min-width: 28px;
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
}

.question-number:hover {
  text-decoration: underline;
}

.turn {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.turn-face {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

.turn-words {
  min-width: 0;
}

.turn-words > :first-child {
  margin-top: 0;
}

.turn-words > :last-child {
  margin-bottom: 0;
}

.turn-words p {
  margin: 0 0 14px;
}

.turn-thingy .turn-words {
  font-size: var(--jt-size-base);
  font-weight: 600;
}

.turn-correction .turn-words {
  padding-left: 14px;
  border-left: 2px solid var(--jt-thingy-text);
  color: var(--muted);
}

.turn-words .turn-label {
  margin-bottom: 4px;
  color: var(--jt-thingy-text);
  font-size: var(--jt-size-small);
  font-weight: 600;
}

.question-things {
  padding-left: 42px;
  margin: 0;
}

.session-about {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.session-about h2 {
  margin: 0 0 8px;
  font-size: 22px;
}

.session-about ul {
  padding-left: 20px;
}

.session-others {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  align-items: center;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.session-others > a:not(.more) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink);
  text-decoration: none;
}

.session-others > a:not(.more) b {
  font-weight: 600;
}

.session-others > a:not(.more):hover b {
  text-decoration: underline;
}

.session-others .is-next {
  text-align: right;
}

/* About (site/about.njk): Thingy around the shop, a tile for each room. */
.around-the-shop {
  max-width: none;
  margin-top: 40px;
}

.around-the-shop h2 {
  margin: 0;
}

.shop-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 12px;
  padding: 0;
  margin: 16px 0 0;
  list-style: none;
}

.shop-tiles a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  padding: 8px 4px;
  border-radius: 12px;
  color: var(--ink);
  font-size: var(--jt-size-label);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}

.shop-tiles a:hover {
  background: var(--soft);
}

.shop-tiles img {
  display: block;
  width: 100%;
  max-width: 130px;
  height: auto;
}

@media (prefers-color-scheme: dark) {
  .shop-tiles img {
    border-radius: 999px;
    background: radial-gradient(circle at 50% 54%, #efeadf 0 60%, transparent 61%);
  }
}

@media (width <= 64rem) {
  .session-card,
  .session-card.is-latest {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .session-card .session-number {
    font-size: 96px;
  }

  .session-card.is-latest .session-number {
    font-size: 110px;
  }

  .session-card .session-pull,
  .session-card.is-latest .session-pull {
    grid-column: 2;
    padding-top: 0;
  }

  .session-top {
    grid-template-columns: 130px minmax(0, 1fr) 120px;
    gap: 16px 24px;
  }

  .session-top .session-number {
    font-size: 130px;
  }

  .session-top .thingy-companion {
    width: 100%;
  }
}

@media (width <= 48rem) {
  .session-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding-top: 12px;
  }

  .session-top .session-number {
    font-size: 96px;
  }

  .session-top .thingy-companion {
    display: none;
  }

  .contents-grid {
    display: block;
    padding-top: 0;
    border-top: 0;
  }

  .toc {
    display: none;
  }

  .toc-fold {
    display: block;
    margin-bottom: 24px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .toc-fold summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    cursor: pointer;
    font-size: var(--jt-size-meta);
    font-weight: 600;
  }

  .toc-fold .toc-link {
    min-height: 44px;
    padding-left: 0;
    align-items: center;
  }

  .session-main,
  .thing-main {
    max-width: none;
  }

  .question:first-child {
    padding-top: 0;
  }

  .turn {
    gap: 10px;
  }

  .question-things {
    padding-left: 38px;
  }

  .session-card,
  .session-card.is-latest {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 20px 0 24px;
  }

  .session-card .session-number {
    font-size: 72px;
  }

  .session-card.is-latest .session-number {
    font-size: 96px;
  }

  .session-card .session-pull,
  .session-card.is-latest .session-pull {
    grid-column: 1;
  }

  .session-card.is-latest h2 {
    font-size: 32px;
  }

  .still-to-ask {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The wordmark and the six links need about 780px on one line, a little more with Linux's font metrics. Below that the
   links go under the wordmark, and the first link's text lines up with it. */
@media (width <= 50rem) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .site-header nav {
    margin-inline-start: -12px;
  }
}

/* The front page: jumps to each shelf, the latest session, then the shelves, then every thing. */
.jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.jumps a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--jt-size-meta);
  font-weight: 500;
  text-decoration: none;
}

.jumps a:hover {
  background: var(--soft);
}

.session-band {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: start;
  margin-top: 48px;
  padding: 24px;
  border-radius: 14px;
  background: var(--soft);
}

.session-band .session-number {
  font-size: 96px;
  line-height: 0.9;
  color: var(--jt-thingy-text);
  text-decoration: none;
}

.session-band h2 {
  margin: 4px 0 10px;
  font-size: var(--jt-size-h2);
}

.session-band h2 a {
  color: inherit;
  text-decoration: none;
}

.session-band h2 a:hover {
  text-decoration: underline;
}

.word-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 236px;
  margin: 0;
  padding: 22px;
  border-radius: 14px;
  background: var(--jt-xyz-soft);
}

.word-card .pull {
  font-size: 24px;
}

.word-card .who {
  margin: 0;
}

.story-tile,
.lately-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: 12px;
  background: var(--soft);
  color: inherit;
  text-decoration: none;
}

.story-tile h3,
.lately-card h3 {
  margin: 0;
  font-size: var(--jt-size-h3);
}

.lately-card h3 {
  font-size: var(--jt-size-base);
}

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

.story-tile:hover h3,
.lately-card:hover h3 {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.lately-card .tag {
  align-self: flex-start;
  margin-top: auto;
}

.all-things {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.all-things-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.all-things-head h2 {
  margin: 0;
  font-size: 38px;
}

.all-things .shelf {
  margin-top: 32px;
}

.all-things .shelf-title h3 {
  font-size: 22px;
}

.topics-summary h3 {
  font-size: 22px;
}

/* A thing's page: the header, a line of Jamie's when it has one, then the contents rail beside the sections. */
.thing-status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin: 16px 0 0;
}

.thing-words {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}

.thing-words > div {
  grid-column: span 3;
}

.thing-words .label {
  margin: 0;
}

.thing-words .who {
  margin-top: 6px;
  font-weight: 500;
  color: var(--muted);
}

.thing-words .pull {
  grid-column: span 9;
  font-size: 34px;
}

.thing .contents-grid {
  margin-top: 40px;
  padding-top: 0;
  border-top: 0;
}

.toc-link span:first-child {
  flex: 1;
}

.toc-count {
  flex: none;
  color: var(--muted);
}

.toc-sub {
  min-height: 30px;
  padding-left: 24px;
  color: var(--muted);
}

.thing-main > :first-child {
  margin-top: 0;
}

.thing-main .story,
.thing-main .build ul,
.thing-main .connection-list,
.thing-main .event-list {
  max-width: 44rem;
}

.thing-main h2 {
  margin-top: 0;
}

.record .facts {
  max-width: 44rem;
  margin: 0;
}

.thing-lifespan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.artifact-bundle.shelf {
  margin-top: 32px;
}

.artifact-bundle .shelf-title h3 {
  font-size: 22px;
}

.artifact-bundle .shelf-title .meta {
  flex-basis: 100%;
  max-width: 68ch;
}

@media (width > 40rem) {
  .artifact-bundle .shelf-head {
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  .artifact-bundle .shelf-title {
    flex: 1;
    min-width: 0;
  }

  .artifact-bundle .shelf-controls {
    flex: none;
  }
}

.artifact-bundle .artifact-title {
  margin-top: 10px;
  font-size: var(--jt-size-small);
}

.artifact-bundle .artifact-caption {
  font-size: var(--jt-size-meta);
}

.artifact-list.is-narrow {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 186px), 1fr));
}

.thing-artifacts .artifact-bundle {
  margin-top: 44px;
}

.thing-artifacts .jumps {
  margin-top: 16px;
}

.thing-artifacts-back {
  margin-top: 44px;
}

@media (width <= 50rem) {
  .session-band {
    grid-template-columns: minmax(0, 1fr);
    padding: 20px;
  }

  .session-band .session-number {
    font-size: 64px;
  }

  .all-things-head h2 {
    font-size: var(--jt-size-h2);
  }

  .thing-words {
    display: block;
  }

  .thing-words .pull {
    margin-top: 12px;
    font-size: 26px;
  }

  .thing .contents-grid {
    margin-top: 0;
  }

  .thing .toc-fold {
    margin-top: 24px;
  }
}

/* On a phone the jumps are one row that scrolls sideways, like the sites strip. */
@media (width <= 40rem) {
  .jumps {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    white-space: nowrap;
  }

  .jumps a {
    flex: none;
  }
}

/* A long address, an archive's above all, breaks before it pushes the page sideways. */
.thing-status-line .more,
.thing-main {
  overflow-wrap: anywhere;
}