/* newsreader-vietnamese-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-vietnamese-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* newsreader-latin-ext-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* newsreader-latin-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* newsreader-vietnamese-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-vietnamese-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* newsreader-latin-ext-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* newsreader-latin-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(/static/fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* jetbrains-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* jetbrains-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* jetbrains-mono-greek-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* jetbrains-mono-vietnamese-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* jetbrains-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* jetbrains-mono-latin-wght-normal */
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/static/fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* instrument-serif-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2'), url(/static/fonts/instrument-serif-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* instrument-serif-latin-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/static/fonts/instrument-serif-latin-400-normal.woff2) format('woff2'), url(/static/fonts/instrument-serif-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* inter-cyrillic-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-cyrillic-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-cyrillic-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-greek-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-greek-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-vietnamese-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-opsz-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/static/fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
}

.icon a {
  background: none;
}

.back-links {
  margin-top: 1em;
  font-size: 0.7em;
  line-height: 1.2em;
}

/* Post blocks: shared by the site and the editor, so blocks look the same in both ---------- */
/* The design's fonts where the page has them (site.css), with fallbacks for the editor. */
.article-card,
.roundup,
.roundup-footer,
.data-table,
.media-block,
.document-block,
.comparison {
  --block-mono: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --block-quote: var(--quote-face, Georgia, 'Times New Roman', serif);
}

/* "highlight mine" and highlights in quotes */
mark {
  background-color: var(--highlight, #fdf0b5);
  color: inherit;
}

/* A correction keeps the original wording visible, struck through */
del.correction {
  color: var(--timestamp-color);
  text-decoration-thickness: 1px;
}

ins.correction {
  padding: 0 0.1em;
  background: var(--accent-color-purple-background);
  text-decoration: none;
}

.article-card,
.roundup {
  margin: 1.25em 0;
  padding: 0.8em 1em 0.75em;
  border-left: 3px solid var(--accent-color-purple);
  background-color: var(--note-background-color);
}

.article-card-meta {
  margin: 0;
  font-family: var(--block-mono);
  font-size: 0.66rem;
  color: var(--timestamp-color);
}

.article-card-outlet {
  color: var(--accent-color-purple);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-card-lock {
  vertical-align: -0.05em;
}

.article-card-title {
  margin: 0.25em 0 0.35em;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.3;
}

.article-card-title a {
  text-decoration: none;
}

/* A related article's summary, under its headline */
.article-card-summary {
  margin: 0 0 0.4em;
  font-size: 0.92em;
  line-height: 1.45;
}

.article-card-summary p {
  margin: 0 0 0.4em;
}

.article-card-summary > :last-child {
  margin-bottom: 0;
}

.article-card-title a:hover {
  text-decoration: underline;
}

/* Excerpts hang a large quote mark in the margin */
.article-card-excerpt {
  position: relative;
  margin: 0.5em 0;
  padding: 0 0 0 1.15em;
  border: none;
  font-size: 0.95em;
}

.article-card-excerpt p {
  margin: 0;
}

.article-card-excerpt::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.2em;
  color: var(--accent-color-purple);
  font-family: var(--block-quote);
  font-size: 1.9em;
  line-height: 1;
}

.article-card-footer,
.roundup-footer {
  margin: 0.4em 0 0;
  font-family: var(--block-mono);
  font-size: 0.66rem;
  color: var(--timestamp-color);
}

.article-card-gift {
  color: var(--accent-color-purple);
  font-weight: 600;
}

.roundup + .roundup-footer {
  margin: -0.75em 0 1.25em;
}

.roundup-item + .roundup-item {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid var(--hr-color);
}

.roundup-line {
  margin: 0;
}

.data-table {
  margin: 1.25em 0;
  overflow-x: auto;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.data-table th,
.data-table td {
  padding: 0.45em 0.5em;
  text-align: left;
  border-bottom: 1px solid var(--hr-color);
}

.data-table th {
  border-bottom: 1.5px solid var(--main-text-color);
  color: var(--timestamp-color);
  font-family: var(--block-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 0;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 0;
}

.data-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table td.numeric {
  font-family: var(--block-mono);
  font-size: 0.85em;
}

.data-table tr.total td {
  font-weight: 600;
  border-top: 1.5px solid var(--main-text-color);
}

.data-table figcaption,
.media-block figcaption {
  margin-top: 0.5em;
  font-family: var(--block-mono);
  font-size: 0.66rem;
  color: var(--timestamp-color);
}

.media-block {
  margin: 1.25em 0;
}

.media-block video,
.media-block audio {
  width: 100%;
}

/* Document excerpts: no box; the first page beside them, if there's an image of it */
.document-block {
  display: flex;
  gap: 1em;
  margin: 1.25em 0;
}

/* Documents in a row are divided by a thin rule */
.document-block + .document-block {
  padding-top: 1.25em;
  border-top: 1px solid var(--hr-color);
}

.document-thumbnail {
  flex: 0 0 4.5em;
  align-self: flex-start;
  background: none;
}

.document-thumbnail img {
  display: block;
  width: 100%;
  border: 1px solid var(--hr-color);
  box-shadow: 3px 3px 0 var(--accent-tint, #efedf8);
}

.document-main {
  flex: 1;
  min-width: 0;
}

.document-head,
.document-meta,
.document-from,
.document-notes {
  font-family: var(--block-mono);
  font-size: 0.7em;
  color: var(--timestamp-color);
}

.document-head {
  margin-bottom: 0.25em;
}

.document-meta {
  margin: 0;
}

.document-from {
  margin: 0.1em 0 0;
  font-size: 0.65em;
}

/* The date and senders/recipients that are entities stand out from the rest of the line:
   "Aug 5, 2026 → Howard Lutnick, Secretary of Commerce" */
.document-meta strong,
.document-from strong {
  font-weight: 600;
  color: var(--main-text-color);
}

.document-meta a.document-party,
.document-from a.document-party {
  color: var(--main-text-color);
  text-decoration-color: var(--hr-color);
}

.document-excerpt {
  margin: 0.6em 0;
  font-size: 0.95em;
}

.document-excerpt.numbered {
  display: grid;
  grid-template-columns: 2.5em 1fr;
}

.document-paragraph {
  color: var(--timestamp-color);
}

.document-notes {
  margin: 0;
}

/* "show full passage" on a card showing only its highlights (added by site.js) */
.document-passage-toggle {
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hr-color);
  text-underline-offset: 0.2em;
  cursor: pointer;
  background: none;
  border: 0;
}

.document-passage-toggle:hover {
  color: var(--timestamp-color-hover);
}

/* Social post cards and threads: no avatars or branding, just the structure */
.social-card {
  max-width: 34rem;
  margin: 1.25em 0;
  padding: 0.85em 1em;
  border: 1px solid var(--hr-color);
  border-radius: 10px;
  font-family: var(--sans-serif-fonts);
  font-size: 0.85em;
  line-height: 1.45;
}

.social-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25em 1em;
  margin: 0 0 0.4em;
}

/* Handles are quiet: grey, no underline */
.social-author a {
  color: var(--timestamp-color);
  text-decoration: none;
}

.social-network {
  align-self: flex-start;
  padding: 0.1em 0.5em;
  font-size: 0.72em;
  font-weight: 600;
  border-radius: 999px;
  background: var(--note-background-color);
  color: var(--timestamp-color);
}

.social-text {
  margin: 0.4em 0;
}

/* A post's paragraphs: a little space between, less than a blank line */
.social-card .social-text p {
  margin: 0 0 0.55em;
}

.social-card .social-text p:last-of-type {
  margin-bottom: 0;
}

/* Only part of the post: its last lines fade out */
.social-text-partial {
  position: relative;
  mask-image: linear-gradient(
    to bottom,
    #000 max(0px, calc(100% - 2.9em)),
    rgb(0 0 0 / 8%) 100%
  );
}

/* For screen readers only: the fade says it to everyone else */
.social-excerpt-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.social-text mark {
  background-color: var(--highlight, #fdf0b5);
  color: inherit;
}

.social-media {
  display: grid;
  gap: 4px;
  margin: 0.5em 0;
}

.social-media.count-2,
.social-media.count-3,
.social-media.count-4 {
  grid-template-columns: 1fr 1fr;
}

.social-media.count-3 > :first-child {
  grid-row: span 2;
}

.social-image,
.social-video {
  position: relative;
  display: block;
  background: none;
}

.social-image img,
.social-video video {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 32em;
  object-fit: cover;
  border-radius: 4px;
}

.social-duration {
  position: absolute;
  left: 0.5em;
  bottom: 0.5em;
  padding: 0 0.35em;
  font-size: 0.7em;
  font-weight: 700;
  color: #fff;
  background: rgb(0 0 0 / 65%);
  border-radius: 3px;
}

.social-card .social-media-missing {
  margin: 0;
  padding: 0.6em;
  font-size: 0.85em;
  color: var(--timestamp-color);
  border: 1px dashed var(--hr-color);
  border-radius: 4px;
}

.social-link-card {
  display: block;
  margin: 0.5em 0;
  padding: 0.5em 0.75em;
  border: 1px solid var(--hr-color);
  border-radius: 4px;
  background: none;
}

.social-link-domain {
  display: block;
  font-size: 0.8em;
  color: var(--timestamp-color);
}

.social-link-title {
  font-weight: 600;
}

.social-quoted {
  margin: 0.5em 0;
  padding: 0.5em 0.75em;
  border: 1px solid var(--hr-color);
  border-radius: 4px;
}

/* The card's paragraphs are scoped to .social-card so their margins win over the page's own
   paragraph margins (e.g. .entry-content p in site.css) */
.social-card .social-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1em;
  margin: 0.4em 0 0;
  font-size: 0.8em;
  color: var(--timestamp-color);
}

/* Links stay at the right even with no date beside them (threads date each post instead) */
.social-card .social-links {
  margin-left: auto;
}

/* A single post's footer: ruled off, its date and then its links, each on a line of its own */
.social-card:not(.social-thread) > .social-footer {
  flex-direction: column;
  gap: 0.15em;
  margin-top: 0.8em;
  padding-top: 0.6em;
  border-top: 1px solid var(--hr-color);
}

.social-card:not(.social-thread) > .social-footer .social-links {
  margin-left: 0;
  font-family: var(--block-mono);
}

/* Scoped to .social-card so it wins over the page's own list spacing (.entry-content ol) */
.social-card .social-thread-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each post hangs from a rail: a dot by its author, joined to the next post's; the last post's
   dot is filled in the accent color */
.social-thread-post {
  position: relative;
  padding-left: 1.4em;
}

.social-thread-post::before {
  position: absolute;
  top: 0.45em;
  left: 0;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--quote-rule, #c9c1ea);
  content: '';
}

.social-thread-post:last-child::before {
  background: var(--accent-color-purple);
}

.social-thread-post:not(:last-child)::after {
  position: absolute;
  top: 1.25em;
  bottom: -0.95em;
  left: calc(0.3em - 1px);
  width: 2px;
  background: var(--hr-color);
  content: '';
}

.social-thread-post + .social-thread-post {
  margin-top: 1.1em;
}

.social-card .social-thread-head {
  margin: 0 0 0.2em;
}

/* Handles and dates are quiet: grey, no underline */
.social-thread-head .social-author a,
.social-thread-head > a {
  color: var(--timestamp-color);
  text-decoration: none;
}

.social-thread-head,
.social-thread-head > a {
  color: var(--timestamp-color);
}

.social-thread-head strong {
  color: var(--main-text-color);
}

.social-card .social-replying {
  margin: 0 0 0.3em;
  font-size: 0.9em;
  color: var(--timestamp-color);
}

.social-replying a {
  color: var(--main-text-color);
  text-decoration-color: var(--hr-color);
}

/* A thread's header and footer run the card's full width, ruled off from its posts */
.social-thread > .social-head {
  align-items: center;
  margin: -0.85em -1em 0.9em;
  padding: 0.7em 1em;
  border-bottom: 1px solid var(--hr-color);
  color: var(--timestamp-color);
}

.social-thread > .social-footer {
  margin: 0.9em -1em -0.85em;
  padding: 0.6em 1em;
  border-top: 1px solid var(--hr-color);
  font-family: var(--block-mono);
}

.social-thread-count {
  font-size: 0.85em;
}

.social-thread .social-network {
  align-self: center;
  color: var(--main-text-color);
}

/* Comparisons */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  align-items: start;
  margin: 1.25em 0;
}

/* Both sides start right under their labels, level with each other. Scoped to .comparison so it
   wins over the page's own spacing for images and cards (e.g. .entry-content .media-wrapper). */
.comparison .comparison-side > :first-child:not(.comparison-label),
.comparison .comparison-side > .comparison-label + * {
  margin-top: 0;
}

.comparison-label {
  margin: 0 0 0.5em;
  font-family: var(--block-mono);
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--timestamp-color);
}

/* An image in a comparison always sits in a frame, with where it came from underneath. Its own
   "with border" still borders the image inside the frame; switch that off for just the frame. */
.comparison-side .media-wrapper > a {
  display: block;
  padding: 1em;
  border: 1px solid var(--hr-color);
  background: none;
}

@media screen and (max-width: 600px) {
  .comparison {
    grid-template-columns: 1fr;
  }
}

/* One Light and One Dark themes from https://github.com/PrismJS/prism-themes 
   MIT License: Copyright (c) 2015 PrismJS
*/

code[class*='language-'],
pre[class*='language-'] {
  background: hsl(230, 1%, 98%);
  color: hsl(230, 8%, 24%);
  font-family: SourceCode, Menlo, Consolas, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre-wrap;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Selection */
code[class*='language-']::-moz-selection,
code[class*='language-'] *::-moz-selection,
pre[class*='language-'] *::-moz-selection {
  background: hsl(230, 1%, 90%);
  color: inherit;
}

code[class*='language-']::selection,
code[class*='language-'] *::selection,
pre[class*='language-'] *::selection {
  background: hsl(230, 1%, 90%);
  color: inherit;
}

/* Code blocks */
pre[class*='language-'] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
  border-radius: 0.3em;
}

/* Inline code */
:not(pre) > code[class*='language-'] {
  padding: 0.2em 0.3em;
  border-radius: 0.3em;
  white-space: normal;
}

.token.comment,
.token.prolog,
.token.cdata {
  color: hsl(230, 4%, 64%);
}

.token.doctype,
.token.punctuation,
.token.entity {
  color: hsl(230, 8%, 24%);
}

.token.attr-name,
.token.class-name,
.token.boolean,
.token.constant,
.token.number,
.token.atrule {
  color: hsl(35, 99%, 36%);
}

.token.keyword {
  color: hsl(301, 63%, 40%);
}

.token.property,
.token.tag,
.token.symbol,
.token.deleted,
.token.important {
  color: hsl(5, 74%, 59%);
}

.token.selector,
.token.string,
.token.char,
.token.builtin,
.token.inserted,
.token.regex,
.token.attr-value,
.token.attr-value > .token.punctuation {
  color: hsl(119, 34%, 47%);
}

.token.variable,
.token.operator,
.token.function {
  color: hsl(221, 87%, 60%);
}

.token.url {
  color: hsl(198, 99%, 37%);
}

/* HTML overrides */
.token.attr-value > .token.punctuation.attr-equals,
.token.special-attr > .token.attr-value > .token.value.css {
  color: hsl(230, 8%, 24%);
}

/* CSS overrides */
.language-css .token.selector {
  color: hsl(5, 74%, 59%);
}

.language-css .token.property {
  color: hsl(230, 8%, 24%);
}

.language-css .token.function,
.language-css .token.url > .token.function {
  color: hsl(198, 99%, 37%);
}

.language-css .token.url > .token.string.url {
  color: hsl(119, 34%, 47%);
}

.language-css .token.important,
.language-css .token.atrule .token.rule {
  color: hsl(301, 63%, 40%);
}

/* JS overrides */
.language-javascript .token.operator {
  color: hsl(301, 63%, 40%);
}

.language-javascript
  .token.template-string
  > .token.interpolation
  > .token.interpolation-punctuation.punctuation {
  color: hsl(344, 84%, 43%);
}

/* JSON overrides */
.language-json .token.operator {
  color: hsl(230, 8%, 24%);
}

.language-json .token.null.keyword {
  color: hsl(35, 99%, 36%);
}

/* MD overrides */
.language-markdown .token.url,
.language-markdown .token.url > .token.operator,
.language-markdown .token.url-reference.url > .token.string {
  color: hsl(230, 8%, 24%);
}

.language-markdown .token.url > .token.content {
  color: hsl(221, 87%, 60%);
}

.language-markdown .token.url > .token.url,
.language-markdown .token.url-reference.url {
  color: hsl(198, 99%, 37%);
}

.language-markdown .token.blockquote.punctuation,
.language-markdown .token.hr.punctuation {
  color: hsl(230, 4%, 64%);
  font-style: italic;
}

.language-markdown .token.code-snippet {
  color: hsl(119, 34%, 47%);
}

.language-markdown .token.bold .token.content {
  color: hsl(35, 99%, 36%);
}

.language-markdown .token.italic .token.content {
  color: hsl(301, 63%, 40%);
}

.language-markdown .token.strike .token.content,
.language-markdown .token.strike .token.punctuation,
.language-markdown .token.list.punctuation,
.language-markdown .token.title.important > .token.punctuation {
  color: hsl(5, 74%, 59%);
}

/* General */
.token.bold {
  font-weight: bold;
}

.token.comment,
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}

.token.namespace {
  opacity: 0.8;
}

/* Plugin overrides */
/* Selectors should have higher specificity than those in the plugins' default stylesheets */

/* Show Invisibles plugin overrides */
.token.token.tab:not(:empty):before,
.token.token.cr:before,
.token.token.lf:before,
.token.token.space:before {
  color: hsla(230, 8%, 24%, 0.2);
}

/* Toolbar plugin overrides */
/* Space out all buttons and move them away from the right edge of the code block */
div.code-toolbar > .toolbar.toolbar > .toolbar-item {
  margin-right: 0.4em;
}

/* Styling the buttons */
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
  background: hsl(230, 1%, 90%);
  color: hsl(230, 6%, 44%);
  padding: 0.1em 0.4em;
  border-radius: 0.3em;
}

div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
  background: hsl(230, 1%, 78%); /* custom: darken(--syntax-bg, 20%) */
  color: hsl(230, 8%, 24%);
}

/* Line Highlight plugin overrides */
/* The highlighted line itself */
.line-highlight.line-highlight {
  background: hsla(230, 8%, 24%, 0.05);
}

/* Default line numbers in Line Highlight plugin */
.line-highlight.line-highlight:before,
.line-highlight.line-highlight[data-end]:after {
  background: hsl(230, 1%, 90%);
  color: hsl(230, 8%, 24%);
  padding: 0.1em 0.6em;
  border-radius: 0.3em;
  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
}

/* Hovering over a linkable line number (in the gutter area) */
/* Requires Line Numbers plugin as well */
pre[id].linkable-line-numbers.linkable-line-numbers
  span.line-numbers-rows
  > span:hover:before {
  background-color: hsla(230, 8%, 24%, 0.05);
}

/* Line Numbers and Command Line plugins overrides */
/* Line separating gutter from coding area */
.line-numbers.line-numbers .line-numbers-rows,
.command-line .command-line-prompt {
  border-right-color: hsla(230, 8%, 24%, 0.2);
}

/* Stuff in the gutter */
.line-numbers .line-numbers-rows > span:before,
.command-line .command-line-prompt > span:before {
  color: hsl(230, 1%, 62%);
}

/* Match Braces plugin overrides */
/* Note: Outline colour is inherited from the braces */
.rainbow-braces .token.token.punctuation.brace-level-1,
.rainbow-braces .token.token.punctuation.brace-level-5,
.rainbow-braces .token.token.punctuation.brace-level-9 {
  color: hsl(5, 74%, 59%);
}

.rainbow-braces .token.token.punctuation.brace-level-2,
.rainbow-braces .token.token.punctuation.brace-level-6,
.rainbow-braces .token.token.punctuation.brace-level-10 {
  color: hsl(119, 34%, 47%);
}

.rainbow-braces .token.token.punctuation.brace-level-3,
.rainbow-braces .token.token.punctuation.brace-level-7,
.rainbow-braces .token.token.punctuation.brace-level-11 {
  color: hsl(221, 87%, 60%);
}

.rainbow-braces .token.token.punctuation.brace-level-4,
.rainbow-braces .token.token.punctuation.brace-level-8,
.rainbow-braces .token.token.punctuation.brace-level-12 {
  color: hsl(301, 63%, 40%);
}

/* Diff Highlight plugin overrides */
/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
pre.diff-highlight > code .token.token.deleted:not(.prefix),
pre > code.diff-highlight .token.token.deleted:not(.prefix) {
  background-color: hsla(353, 100%, 66%, 0.15);
}

pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection {
  background-color: hsla(353, 95%, 66%, 0.25);
}

pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
  background-color: hsla(353, 95%, 66%, 0.25);
}

pre.diff-highlight > code .token.token.inserted:not(.prefix),
pre > code.diff-highlight .token.token.inserted:not(.prefix) {
  background-color: hsla(137, 100%, 55%, 0.15);
}

pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection {
  background-color: hsla(135, 73%, 55%, 0.25);
}

pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
  background-color: hsla(135, 73%, 55%, 0.25);
}

/* Previewers plugin overrides */
/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-light-ui */
/* Border around popup */
.prism-previewer.prism-previewer:before,
.prism-previewer-gradient.prism-previewer-gradient div {
  border-color: hsl(0, 0, 95%);
}

/* Angle and time should remain as circles and are hence not included */
.prism-previewer-color.prism-previewer-color:before,
.prism-previewer-gradient.prism-previewer-gradient div,
.prism-previewer-easing.prism-previewer-easing:before {
  border-radius: 0.3em;
}

/* Triangles pointing to the code */
.prism-previewer.prism-previewer:after {
  border-top-color: hsl(0, 0, 95%);
}

.prism-previewer-flipped.prism-previewer-flipped.after {
  border-bottom-color: hsl(0, 0, 95%);
}

/* Background colour within the popup */
.prism-previewer-angle.prism-previewer-angle:before,
.prism-previewer-time.prism-previewer-time:before,
.prism-previewer-easing.prism-previewer-easing {
  background: hsl(0, 0%, 100%);
}

/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
/* For time, this is the alternate colour */
.prism-previewer-angle.prism-previewer-angle circle,
.prism-previewer-time.prism-previewer-time circle {
  stroke: hsl(230, 8%, 24%);
  stroke-opacity: 1;
}

/* Stroke colours of the handle, direction point, and vector itself */
.prism-previewer-easing.prism-previewer-easing circle,
.prism-previewer-easing.prism-previewer-easing path,
.prism-previewer-easing.prism-previewer-easing line {
  stroke: hsl(230, 8%, 24%);
}

/* Fill colour of the handle */
.prism-previewer-easing.prism-previewer-easing circle {
  fill: transparent;
}

@media (prefers-color-scheme: dark) {
  code[class*='language-'],
  pre[class*='language-'] {
    background: hsl(220, 13%, 18%);
    color: hsl(220, 14%, 71%);
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
    font-family: SourceCode, Menlo, Consolas, monospace;
    direction: ltr;
    text-align: left;
    white-space: pre-wrap;
    word-spacing: normal;
    word-break: normal;
    line-height: 1.5;
    -moz-tab-size: 2;
    -o-tab-size: 2;
    tab-size: 2;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }

  /* Selection */
  code[class*='language-']::-moz-selection,
  code[class*='language-'] *::-moz-selection,
  pre[class*='language-'] *::-moz-selection {
    background: hsl(220, 13%, 28%);
    color: inherit;
    text-shadow: none;
  }

  code[class*='language-']::selection,
  code[class*='language-'] *::selection,
  pre[class*='language-'] *::selection {
    background: hsl(220, 13%, 28%);
    color: inherit;
    text-shadow: none;
  }

  /* Code blocks */
  pre[class*='language-'] {
    padding: 1em;
    margin: 0.5em 0;
    overflow: auto;
    border-radius: 0.3em;
  }

  /* Inline code */
  :not(pre) > code[class*='language-'] {
    padding: 0.2em 0.3em;
    border-radius: 0.3em;
    white-space: normal;
  }

  /* Print */
  @media print {
    code[class*='language-'],
    pre[class*='language-'] {
      text-shadow: none;
    }
  }

  .token.comment,
  .token.prolog,
  .token.cdata {
    color: hsl(220, 10%, 40%);
  }

  .token.doctype,
  .token.punctuation,
  .token.entity {
    color: hsl(220, 14%, 71%);
  }

  .token.attr-name,
  .token.class-name,
  .token.boolean,
  .token.constant,
  .token.number,
  .token.atrule {
    color: hsl(29, 54%, 61%);
  }

  .token.keyword {
    color: hsl(286, 60%, 67%);
  }

  .token.property,
  .token.tag,
  .token.symbol,
  .token.deleted,
  .token.important {
    color: hsl(355, 65%, 65%);
  }

  .token.selector,
  .token.string,
  .token.char,
  .token.builtin,
  .token.inserted,
  .token.regex,
  .token.attr-value,
  .token.attr-value > .token.punctuation {
    color: hsl(95, 38%, 62%);
  }

  .token.variable,
  .token.operator,
  .token.function {
    color: hsl(207, 82%, 66%);
  }

  .token.url {
    color: hsl(187, 47%, 55%);
  }

  /* HTML overrides */
  .token.attr-value > .token.punctuation.attr-equals,
  .token.special-attr > .token.attr-value > .token.value.css {
    color: hsl(220, 14%, 71%);
  }

  /* CSS overrides */
  .language-css .token.selector {
    color: hsl(355, 65%, 65%);
  }

  .language-css .token.property {
    color: hsl(220, 14%, 71%);
  }

  .language-css .token.function,
  .language-css .token.url > .token.function {
    color: hsl(187, 47%, 55%);
  }

  .language-css .token.url > .token.string.url {
    color: hsl(95, 38%, 62%);
  }

  .language-css .token.important,
  .language-css .token.atrule .token.rule {
    color: hsl(286, 60%, 67%);
  }

  /* JS overrides */
  .language-javascript .token.operator {
    color: hsl(286, 60%, 67%);
  }

  .language-javascript
    .token.template-string
    > .token.interpolation
    > .token.interpolation-punctuation.punctuation {
    color: hsl(5, 48%, 51%);
  }

  /* JSON overrides */
  .language-json .token.operator {
    color: hsl(220, 14%, 71%);
  }

  .language-json .token.null.keyword {
    color: hsl(29, 54%, 61%);
  }

  /* MD overrides */
  .language-markdown .token.url,
  .language-markdown .token.url > .token.operator,
  .language-markdown .token.url-reference.url > .token.string {
    color: hsl(220, 14%, 71%);
  }

  .language-markdown .token.url > .token.content {
    color: hsl(207, 82%, 66%);
  }

  .language-markdown .token.url > .token.url,
  .language-markdown .token.url-reference.url {
    color: hsl(187, 47%, 55%);
  }

  .language-markdown .token.blockquote.punctuation,
  .language-markdown .token.hr.punctuation {
    color: hsl(220, 10%, 40%);
    font-style: italic;
  }

  .language-markdown .token.code-snippet {
    color: hsl(95, 38%, 62%);
  }

  .language-markdown .token.bold .token.content {
    color: hsl(29, 54%, 61%);
  }

  .language-markdown .token.italic .token.content {
    color: hsl(286, 60%, 67%);
  }

  .language-markdown .token.strike .token.content,
  .language-markdown .token.strike .token.punctuation,
  .language-markdown .token.list.punctuation,
  .language-markdown .token.title.important > .token.punctuation {
    color: hsl(355, 65%, 65%);
  }

  /* General */
  .token.bold {
    font-weight: bold;
  }

  .token.comment,
  .token.italic {
    font-style: italic;
  }

  .token.entity {
    cursor: help;
  }

  .token.namespace {
    opacity: 0.8;
  }

  /* Plugin overrides */
  /* Selectors should have higher specificity than those in the plugins' default stylesheets */

  /* Show Invisibles plugin overrides */
  .token.token.tab:not(:empty):before,
  .token.token.cr:before,
  .token.token.lf:before,
  .token.token.space:before {
    color: hsla(220, 14%, 71%, 0.15);
    text-shadow: none;
  }

  /* Toolbar plugin overrides */
  /* Space out all buttons and move them away from the right edge of the code block */
  div.code-toolbar > .toolbar.toolbar > .toolbar-item {
    margin-right: 0.4em;
  }

  /* Styling the buttons */
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > button,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > a,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > span {
    background: hsl(220, 13%, 26%);
    color: hsl(220, 9%, 55%);
    padding: 0.1em 0.4em;
    border-radius: 0.3em;
  }

  div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover,
  div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus {
    background: hsl(220, 13%, 28%);
    color: hsl(220, 14%, 71%);
  }

  /* Line Highlight plugin overrides */
  /* The highlighted line itself */
  .line-highlight.line-highlight {
    background: hsla(220, 100%, 80%, 0.04);
  }

  /* Default line numbers in Line Highlight plugin */
  .line-highlight.line-highlight:before,
  .line-highlight.line-highlight[data-end]:after {
    background: hsl(220, 13%, 26%);
    color: hsl(220, 14%, 71%);
    padding: 0.1em 0.6em;
    border-radius: 0.3em;
    box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */
  }

  /* Hovering over a linkable line number (in the gutter area) */
  /* Requires Line Numbers plugin as well */
  pre[id].linkable-line-numbers.linkable-line-numbers
    span.line-numbers-rows
    > span:hover:before {
    background-color: hsla(220, 100%, 80%, 0.04);
  }

  /* Line Numbers and Command Line plugins overrides */
  /* Line separating gutter from coding area */
  .line-numbers.line-numbers .line-numbers-rows,
  .command-line .command-line-prompt {
    border-right-color: hsla(220, 14%, 71%, 0.15);
  }

  /* Stuff in the gutter */
  .line-numbers .line-numbers-rows > span:before,
  .command-line .command-line-prompt > span:before {
    color: hsl(220, 14%, 45%);
  }

  /* Match Braces plugin overrides */
  /* Note: Outline colour is inherited from the braces */
  .rainbow-braces .token.token.punctuation.brace-level-1,
  .rainbow-braces .token.token.punctuation.brace-level-5,
  .rainbow-braces .token.token.punctuation.brace-level-9 {
    color: hsl(355, 65%, 65%);
  }

  .rainbow-braces .token.token.punctuation.brace-level-2,
  .rainbow-braces .token.token.punctuation.brace-level-6,
  .rainbow-braces .token.token.punctuation.brace-level-10 {
    color: hsl(95, 38%, 62%);
  }

  .rainbow-braces .token.token.punctuation.brace-level-3,
  .rainbow-braces .token.token.punctuation.brace-level-7,
  .rainbow-braces .token.token.punctuation.brace-level-11 {
    color: hsl(207, 82%, 66%);
  }

  .rainbow-braces .token.token.punctuation.brace-level-4,
  .rainbow-braces .token.token.punctuation.brace-level-8,
  .rainbow-braces .token.token.punctuation.brace-level-12 {
    color: hsl(286, 60%, 67%);
  }

  /* Diff Highlight plugin overrides */
  /* Taken from https://github.com/atom/github/blob/master/styles/variables.less */
  pre.diff-highlight > code .token.token.deleted:not(.prefix),
  pre > code.diff-highlight .token.token.deleted:not(.prefix) {
    background-color: hsla(353, 100%, 66%, 0.15);
  }

  pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection,
  pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection,
  pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection,
  pre
    > code.diff-highlight
    .token.token.deleted:not(.prefix)
    *::-moz-selection {
    background-color: hsla(353, 95%, 66%, 0.25);
  }

  pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection,
  pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection,
  pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection,
  pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection {
    background-color: hsla(353, 95%, 66%, 0.25);
  }

  pre.diff-highlight > code .token.token.inserted:not(.prefix),
  pre > code.diff-highlight .token.token.inserted:not(.prefix) {
    background-color: hsla(137, 100%, 55%, 0.15);
  }

  pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection,
  pre.diff-highlight
    > code
    .token.token.inserted:not(.prefix)
    *::-moz-selection,
  pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection,
  pre
    > code.diff-highlight
    .token.token.inserted:not(.prefix)
    *::-moz-selection {
    background-color: hsla(135, 73%, 55%, 0.25);
  }

  pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection,
  pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection,
  pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection,
  pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection {
    background-color: hsla(135, 73%, 55%, 0.25);
  }

  /* Previewers plugin overrides */
  /* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */
  /* Border around popup */
  .prism-previewer.prism-previewer:before,
  .prism-previewer-gradient.prism-previewer-gradient div {
    border-color: hsl(224, 13%, 17%);
  }

  /* Angle and time should remain as circles and are hence not included */
  .prism-previewer-color.prism-previewer-color:before,
  .prism-previewer-gradient.prism-previewer-gradient div,
  .prism-previewer-easing.prism-previewer-easing:before {
    border-radius: 0.3em;
  }

  /* Triangles pointing to the code */
  .prism-previewer.prism-previewer:after {
    border-top-color: hsl(224, 13%, 17%);
  }

  .prism-previewer-flipped.prism-previewer-flipped.after {
    border-bottom-color: hsl(224, 13%, 17%);
  }

  /* Background colour within the popup */
  .prism-previewer-angle.prism-previewer-angle:before,
  .prism-previewer-time.prism-previewer-time:before,
  .prism-previewer-easing.prism-previewer-easing {
    background: hsl(219, 13%, 22%);
  }

  /* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */
  /* For time, this is the alternate colour */
  .prism-previewer-angle.prism-previewer-angle circle,
  .prism-previewer-time.prism-previewer-time circle {
    stroke: hsl(220, 14%, 71%);
    stroke-opacity: 1;
  }

  /* Stroke colours of the handle, direction point, and vector itself */
  .prism-previewer-easing.prism-previewer-easing circle,
  .prism-previewer-easing.prism-previewer-easing path,
  .prism-previewer-easing.prism-previewer-easing line {
    stroke: hsl(220, 14%, 71%);
  }

  /* Fill colour of the handle */
  .prism-previewer-easing.prism-previewer-easing circle {
    fill: transparent;
  }
}

/* Redesigned pages: homepage, feed, micro posts. See the Site plan tab of the redesign doc.
   Newsreader for text, JetBrains Mono for metadata and interface, Instrument Serif for large quotes,
   Inter only inside redrawn social posts. */

:root {
  --text: #1b1b1b;
  --text-muted: #6f6f6f;
  --text-faint: #8d8d8d;
  --bg: #ffffff;
  --rule: #e6e6e6;
  --rule-strong: #1b1b1b;
  --accent: #5948a4;
  --accent-strong: #4a3a93;
  --accent-tint: #efedf8;
  --accent-wash: #f6f5fa;
  --quote-rule: #c9c1ea;
  --link-underline: #b8b2d3;
  --highlight: #fdf0b5;
  --chip-border: #d9d9d9;

  --serif: 'Newsreader Variable', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
  --quote-face: 'Instrument Serif', 'Newsreader Variable', Georgia, serif;
  --social-face: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --main-width: 42rem;
  --meta-width: 16rem;
  --column-gap: 3.5rem;

  /* Names the shared block styles (feed-shared.css) use. */
  --hr-color: var(--rule);
  --timestamp-color: var(--text-muted);
  --timestamp-color-hover: var(--text);
  --note-background-color: var(--accent-wash);
  --main-text-color: var(--text);
  --accent-color-purple: var(--accent);
  --accent-color-purple-background: var(--accent-tint);
  --sans-serif-fonts: var(--social-face);
  --table-border-color: var(--rule);
  --image-border-color: var(--rule);
  --color-error: #c0392b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --text: #ededed;
    --text-muted: #a9a9a9;
    --text-faint: #8a8a8a;
    --bg: #161616;
    --rule: #333333;
    --rule-strong: #ededed;
    --accent: #b4abda;
    --accent-strong: #cbc4ea;
    --accent-tint: #2c2840;
    --accent-wash: #1f1d29;
    --quote-rule: #5b5185;
    --link-underline: #5b5185;
    --highlight: #5c4f12;
    --chip-border: #444444;
  }
}

:root[data-theme='dark'] {
  --text: #ededed;
  --text-muted: #a9a9a9;
  --text-faint: #8a8a8a;
  --bg: #161616;
  --rule: #333333;
  --rule-strong: #ededed;
  --accent: #b4abda;
  --accent-strong: #cbc4ea;
  --accent-tint: #2c2840;
  --accent-wash: #1f1d29;
  --quote-rule: #5b5185;
  --link-underline: #5b5185;
  --highlight: #5c4f12;
  --chip-border: #444444;
}

/* Base ----------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: 1.125rem;
  line-height: 1.5;
}

/* Text in the body color over a thick lavender underline that sits well below the baseline */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--link-underline);
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.22em;
}

a:hover {
  color: var(--accent);
  text-decoration-color: var(--accent-strong);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

img,
video {
  max-width: 100%;
}

mark {
  background: var(--highlight);
  color: inherit;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.skip-link:focus {
  left: 0.5rem;
  z-index: 10;
}

.site-page {
  max-width: 64rem;
  margin: 0 auto;
  padding: 1.25rem 1.5rem 4rem;
}

/* Header and nav ------------------------------------------------------------------------------- */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 2px solid var(--rule-strong);
}

.site-wordmark-small {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.site-header-home {
  display: block;
  padding-bottom: 1.5rem;
}

.site-header-home .site-nav {
  /* The homepage header holds the intro too, so the menu opens from the nav, not below the intro */
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.site-intro {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: end;
  margin-top: 0.5rem;
}

.site-wordmark {
  margin: 0 0 0.75rem;
  font-size: clamp(3rem, 9vw, 5.25rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
}

.site-wordmark a {
  text-decoration: none;
}

.site-intro p {
  max-width: 34rem;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.55;
}

.site-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 528 / 675;
  object-fit: cover;
}

.site-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  font-size: 1rem;
  text-decoration: none;
}

.site-nav a[aria-current='page'] {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.3em;
}

.site-menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border: 0;
  border-radius: 2px;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.7rem;
  cursor: pointer;
}

.site-menu {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(10rem, 1fr));
  gap: 1rem 2rem;
  width: min(40rem, 100%);
  margin-top: 0.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.08);
}

.site-menu[hidden] {
  display: none;
}

.site-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu li {
  font-size: 0.95rem;
  line-height: 1.6;
}

.site-menu .nav-header {
  margin-bottom: 0.25rem;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-menu a {
  text-decoration: none;
}

.site-menu a:hover {
  text-decoration: underline;
}

/* Page headings, filters, paging --------------------------------------------------------------- */

.page-title {
  margin: 1.75rem 0 0.25rem;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.page-subtitle {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.page-description {
  max-width: var(--main-width);
  margin: 0 0 1rem;
}

.feed-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.site-header-home + .site-main .feed-controls,
.site-header + .site-main > .feed-controls:first-child,
.site-header + .site-main > .visually-hidden + .feed-controls {
  margin-top: 0.4rem;
}

.feed-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--chip-border);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.4;
  text-decoration: none;
}

.chip[aria-current='page'] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--bg);
}

.chip[aria-current='page'] .site-icon {
  color: inherit;
}

.chip:hover:not([aria-current='page']) {
  border-color: var(--accent);
}

.feed-rss,
.pager a {
  font-family: var(--mono);
  font-size: 0.75rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  padding-top: 1.25rem;
}

.empty {
  color: var(--text-muted);
}

/* Entries -------------------------------------------------------------------------------------- */

.site-entry {
  display: grid;
  grid-template-columns: minmax(0, var(--main-width)) var(--meta-width);
  grid-template-areas:
    'main verb'
    'main rows';
  grid-template-rows: auto 1fr;
  column-gap: var(--column-gap);
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.entry-main {
  grid-area: main;
  min-width: 0;
}

.entry-verb {
  grid-area: verb;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
  margin: 0.2rem 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.4;
}

.entry-verb-word {
  font-weight: 600;
}

.entry-verb a {
  color: var(--accent);
}

/* On a post's own page the date is plain text, like the verb beside it */
.entry-verb-date {
  font-weight: 600;
  color: var(--text);
}

.site-icon {
  flex: none;
  color: var(--accent);
}

.entry-rows {
  grid-area: rows;
  align-self: start;
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
}

.entry-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.entry-rows dt {
  color: var(--text-faint);
}

.entry-rows dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.reading-group-extra .p-category,
.entry-rows .p-category {
  white-space: nowrap; /* "#us-politics" never breaks at its hyphen */
}

.entry-edit {
  color: var(--text-faint);
}

.entry-title {
  margin: 0 0 0.6rem;
  font-size: 1.65rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.entry-title a {
  text-decoration: none;
}

.entry-title a:hover {
  text-decoration: underline;
}

.entry-reply {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.6rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* Citation Needed: the issue's image beside a label, the headline and dek, and links to read it
   and subscribe */
.entry-cn {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.entry-cn:not(:has(.entry-cn-image)) {
  grid-template-columns: minmax(0, 1fr);
}

.entry-cn-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--accent-tint);
}

.entry-cn-label {
  margin: 0 0 0.35rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-cn .entry-dek {
  color: var(--text);
}

.entry-cn-links {
  margin: 0.8rem 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.entry-cn-links a {
  color: var(--text-muted);
}

.entry-cn-links a.entry-cn-read {
  color: var(--accent);
  font-weight: 600;
}

/* On a phone the image goes above */
@media (max-width: 34rem) {
  .entry-cn {
    grid-template-columns: minmax(0, 1fr);
  }

  .entry-cn-image {
    max-width: 14rem;
  }
}

.entry-dek {
  color: var(--text-muted);
  font-size: 1rem;
}

.entry-dek p {
  margin: 0;
}

/* Post content --------------------------------------------------------------------------------- */

.entry-content > :first-child {
  margin-top: 0;
}

/* Related articles, as cards after a post's own text, set apart from it */
.entry-content.entry-related {
  margin-top: 1.4rem;
}

.entry-content > :last-child {
  margin-bottom: 0;
}

.entry-content p {
  margin: 0 0 0.85em;
}

.entry-content h2,
.entry-content h3 {
  margin: 1.2em 0 0.4em;
  font-weight: 600;
  line-height: 1.2;
}

.entry-content ul,
.entry-content ol {
  margin: 0 0 0.85em;
  padding-left: 1.4em;
}

.entry-content code,
.entry-content kbd,
.entry-content samp {
  font-family: var(--mono);
  font-size: 0.85em;
}

.entry-content pre {
  overflow-x: auto;
  font-size: 0.85rem;
}

/* Quotes. An excerpt is a step smaller than your own words, with a light purple rule; words you
   highlighted in it are pulled out large, joined to the rest by a purple rule. A pull quote is
   large throughout. Quotes saved before that choice existed have no style class: in a post
   that's only quotes they're large, as they were. */
.entry-content .quote {
  margin: 1.1em 0;
}

/* Separate quotes are clearly separate */
.entry-content .quote + .quote {
  margin-top: 1.9em;
}

.entry-content blockquote {
  margin: 0;
  padding-left: 1em;
  border-left: 2px solid var(--quote-rule);
  font-size: 0.9em;
  line-height: 1.55;
}

.entry-content blockquote p {
  margin: 0 0 0.7em;
}

.entry-content blockquote p:last-child {
  margin-bottom: 0;
}

.entry-content .pull-quote,
.entry-content .quote-pull blockquote {
  font-family: var(--quote-face);
  font-size: 1.65rem;
  line-height: 1.25;
}

.entry-content .quote-pull blockquote {
  border-left: 3px solid var(--accent);
}

/* An excerpt with words pulled out: its rule is dark beside them and light beside the rest */
.entry-content .has-pull:not(.quote-pull) blockquote {
  padding-left: 1rem;
  border-left: 3px solid var(--quote-rule);
}

.entry-content .has-pull:not(.quote-pull) .pull-quote {
  position: relative;
}

.entry-content .has-pull:not(.quote-pull) .pull-quote::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1rem - 3px);
  width: 3px;
  background: var(--accent);
  content: '';
}

.entry-content .pull-quote {
  margin-bottom: 0.5em;
  font-size: calc(1.65rem / 0.9);
}

/* A pull quote is already large; highlighted words in it don't grow again */
.entry-content .quote-pull blockquote .pull-quote {
  font-size: inherit;
}

.entry-content .quote figcaption,
.entry-content .quote-context {
  margin: 0.4em 0 0 1.1em;
}

.entry-content .quote figcaption {
  font-family: var(--serif);
}

.entry-content .quote cite {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: normal;
}

/* An article card's excerpts hang their own quote mark instead of a rule (feed-shared.css) */
.entry-content .article-card-excerpt {
  margin: 0.6em 0;
  padding: 0 0 0 1.15em;
  border-left: 0;
  font-size: 0.95em;
}

.entry-content .quote-context {
  font-family: var(--mono);
  font-size: 0.62rem;
}

.entry-content .quote-context a {
  color: var(--accent);
}

/* Images: your own files, in a consistent frame, with captions and source lines underneath */
.entry-content .media-wrapper,
.entry-content .media-gallery {
  max-width: 100%;
  margin: 1.1em 0;
}

.entry-content .media-wrapper img,
.entry-content .media-wrapper video {
  display: block;
  width: 100%;
}

.entry-content .media-wrapper.vertical img {
  max-height: 40rem;
  object-fit: contain;
}

.entry-content .media-wrapper.bordered img {
  border: 1px solid var(--rule);
}

.entry-content .media-wrapper.backgrounded > a {
  display: block;
  padding: 1em;
  background: var(--accent-wash);
}

.entry-content iframe,
.entry-content video {
  max-width: 100%;
}

.entry-content .media-wrapper-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.entry-content .media-wrapper-gallery .media-wrapper {
  margin: 0;
}

.entry-content .media-wrapper-gallery img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--accent-wash);
}

.entry-content figcaption,
.entry-content .gallery-caption {
  margin: 0.4rem 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.5;
}

.entry-content .gallery-caption {
  font-size: 0.72rem;
}

.entry-content .media-source,
.entry-content .media-alt {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1.5;
}

.entry-content .media-alt {
  color: var(--text-faint);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .entry-content .invert-on-dark img {
    filter: invert(0.88) hue-rotate(180deg);
  }
}

:root[data-theme='dark'] .entry-content .invert-on-dark img {
  filter: invert(0.88) hue-rotate(180deg);
}

/* Your own video and audio files */
.entry-content .media-block video {
  display: block;
  background: #222;
}

.social-card,
.social-thread {
  font-family: var(--social-face);
}

/* Mentions: the name as written, linked to the entity's page (or its website), with a dotted
   underline to set it apart from other links */
a.mention-name {
  color: inherit;
  text-decoration-style: dotted;
}

.correction-note {
  margin-left: 0.1em;
  font-size: 0.75em;
  vertical-align: super;
  text-decoration: none;
}

/* "Read · Oct 28 · 3": a day's reading, one line per article, across the whole width */
.reading-group {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.25rem 1.5rem;
  margin: 1.25rem 0;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}

.reading-group + .site-entry {
  border-top: 1px solid var(--rule);
}

.reading-group-head {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0.2rem 0 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.reading-group-items {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.45;
}

.reading-group-items li + li {
  margin-top: 0.3rem;
}

.reading-group-items .p-name {
  text-decoration-color: var(--quote-rule);
}

.reading-group-extra {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
}

/* Books: cover, series, title in italics, then author, year and length */
.entry-book {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
}

.entry-book:not(:has(.entry-book-cover)) {
  grid-template-columns: minmax(0, 1fr);
}

.entry-book-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  background: var(--accent-wash);
}

.entry-book-series,
.entry-book-subtitle {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.entry-book-title {
  margin: 0.1rem 0 0.2rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

.entry-book-title a {
  text-decoration: none;
}

.entry-book-title a:hover {
  text-decoration: underline;
}

.entry-book-byline {
  margin: 0;
  font-size: 0.95rem;
}

/* Press: a line for coverage of you; cards for your own pieces, talks and appearances */
.press-line {
  margin: 0;
}

.press-line-author {
  color: var(--text-muted);
}

.press-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
}

.press-freelance {
  border: 1px solid var(--rule);
}

.press-freelance:has(.press-card-image) {
  grid-template-columns: 7rem minmax(0, 1fr);
}

.press-card-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--accent-wash);
}

.press-appearance {
  gap: 0.35rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-wash);
}

.press-card-meta,
.press-card-foot,
.press-links,
.press-upcoming-location {
  margin: 0;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.press-card-outlet {
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.press-card-title,
.press-talk-title {
  margin: 0.15rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}

.press-card-title a,
.press-talk-title a {
  text-decoration: none;
}

.press-card-title a:hover,
.press-talk-title a:hover {
  text-decoration: underline;
}

.press-audio {
  width: 100%;
}

.press-video {
  position: relative;
  margin-bottom: 0.6rem;
}

.press-video video {
  display: block;
  width: 100%;
  background: #222;
}

.press-duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  padding: 0.05rem 0.35rem;
  background: rgb(0 0 0 / 70%);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.66rem;
}

.press-upcoming {
  padding: 0.75rem 1rem;
  border: 1px dashed var(--chip-border);
}

.press-upcoming-label {
  margin: 0 0 0.2rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
}

.press-upcoming-title {
  margin: 0 0 0.2rem;
}

/* Press lines in the old markup (RSS and the tagger's preview) */
.entry-content .article .title {
  font-weight: 600;
}

.entry-content .article .byline,
.entry-content .article .details,
.entry-content .byline,
.entry-content .details {
  color: var(--text-muted);
  font-size: 0.95em;
}

/* "continue reading →" after the start of a long post in the feed */
.entry-continues {
  margin: 0.9rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.entry-continues a {
  color: var(--accent);
}

/* Updates and corrections below a post: an update with its own time; a correction in a box */
.entry-updates {
  margin-top: 1.25em;
  padding-top: 0.25em;
  border-top: 1px solid var(--rule);
}

.entry-update {
  margin-top: 0.9em;
}

.entry-update:target {
  outline: 2px solid var(--quote-rule);
  outline-offset: 0.4em;
}

.update-meta,
.update-time {
  margin: 0 0 0.25em;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.update-label {
  font-weight: 600;
}

.entry-update.correction {
  padding: 0.7em 1em;
  border-left: 3px solid var(--rule-strong);
  background: var(--accent-wash);
}

.entry-update.correction .update-meta {
  color: var(--text);
}

.update-headline {
  margin: 0.15em 0 0.35em;
  font-size: 1.1em;
  font-weight: 600;
}

/* A live post: "Live coverage · ended · Oct 29, 5:30–5:52 pm EDT" in a tinted strip, then its
   posts down a purple rail, each marked by an open circle at its time */
.live-coverage-head {
  margin: 0;
  padding: 0.5rem 0.8rem;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  background: var(--accent-tint);
}

.live-coverage-head strong {
  font-weight: 600;
}

.entry-live-dot {
  font-size: 0.6rem;
}

.live-timeline {
  margin: 0;
  padding: 1.1rem 0 0.4rem 1.4rem;
  list-style: none;
  border-left: 2px solid var(--accent);
}

.live-entry {
  position: relative;
}

.live-entry + .live-entry {
  margin-top: 1.5rem;
}

/* The circle sits centered on the rail, level with the time */
.live-entry::before {
  position: absolute;
  top: 0.1rem;
  left: calc(-1.4rem - 1px - 0.45rem);
  box-sizing: border-box;
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  content: '';
}

.live-skipped {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.live-skipped::before {
  border-style: dotted;
}

.live-skipped a {
  color: var(--accent);
}

/* "Followed up in Citation Needed" */
.followups {
  margin-top: 1.25rem;
  padding: 0.8rem 1rem 1rem;
  background: var(--accent-wash);
}

.followups-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
}

.followups-head i {
  font-family: var(--serif);
  font-size: 0.85rem;
}

.followups-issues {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.followup {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  text-decoration: none;
}

.followup:not(:has(img)) {
  grid-template-columns: minmax(0, 1fr);
}

.followup img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.followup-title {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.followup:hover .followup-title {
  text-decoration: underline;
}

.followup-dek {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.35;
}

/* A post's own page ----------------------------------------------------------------------------- */

.back-link {
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* The verb line sits over the post; the metadata column starts level with it. */
.site-entry-permalink {
  grid-template-areas:
    'verb rows'
    'main rows';
  grid-template-rows: auto 1fr;
  border-bottom: 0;
}

.site-entry-permalink .entry-verb {
  margin: 0 0 0.9rem;
}

.entry-tag {
  white-space: nowrap;
}

.entry-tag-count {
  margin-left: 0.15rem;
  color: var(--text-faint);
}

.post-page-after {
  display: grid;
  grid-template-columns: minmax(0, var(--main-width)) var(--meta-width);
  column-gap: var(--column-gap);
  padding-top: 1.75rem;
  border-top: 2px solid var(--rule-strong);
}

.post-page-main > section + section {
  margin-top: 2.25rem;
}

/* The thread box: every entry in the thread, oldest first */
.thread-box h2 {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.thread-box h2 a {
  text-decoration: none;
}

.thread-box h2 a:hover {
  text-decoration: underline;
}

.thread-box-count {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 400;
}

.thread-box-members {
  margin: 0;
  padding: 0;
  list-style: none;
}

.thread-box-members li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.2rem 0;
  font-size: 0.95rem;
}

.thread-box-month {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.68rem;
  line-height: 2;
}

.thread-box-members li.current .thread-box-month {
  color: var(--accent);
}

.thread-box-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thread-box-kind {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.66rem;
}

/* Responses */
.responses h2 {
  margin: 0 0 0.9rem;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.discuss-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.discuss-button {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--chip-border);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
}

.discuss-button:hover {
  border-color: var(--accent);
}

.response-people {
  margin: 0 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}

.responses-subhead {
  margin: 1.5rem 0 0.6rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.webmention-reply {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  font-size: 0.95rem;
}

.webmention-meta,
.webmention-source {
  margin: 0 0 0.3rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.66rem;
}

.webmention-meta .h-card {
  color: var(--text);
  font-weight: 600;
}

.webmention-title {
  margin: 0 0 0.25rem;
  font-weight: 600;
}

.webmention-excerpt p {
  margin: 0 0 0.5em;
}

.webmention-submit {
  margin-top: 1.5rem;
}

.webmention-submit label,
.webmention-note,
#submit-error,
#submit-success {
  font-family: var(--mono);
  font-size: 0.72rem;
}

.webmention-note {
  color: var(--text-muted);
}

#submit-error {
  color: var(--color-error);
}

.submit-box {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.submit-box input {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--chip-border);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.submit-box button {
  padding: 0 1.1rem;
  border: 0;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

/* Beside the responses: press that cited the post, sites linking to it, related entries */
.post-page-side section {
  margin-bottom: 1.5rem;
}

.side-heading {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
}

.post-page-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  line-height: 1.35;
}

.post-page-side li + li {
  margin-top: 0.4rem;
}

.side-note {
  display: block;
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
}

/* A note that follows on the same line, e.g. "Citation Needed" after a related issue's title */
.side-note-inline {
  display: inline;
  margin-left: 0.3em;
  white-space: nowrap;
}

.post-pager {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}

.post-pager a {
  display: flex;
  flex-direction: column;
  max-width: 45%;
  text-decoration: none;
}

.post-pager .pager-older {
  align-items: flex-end;
  text-align: right;
}

.pager-label {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.pager-title {
  font-family: var(--serif);
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Entity pages --------------------------------------------------------------------------------- */

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.4rem;
  margin: 0;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.breadcrumb li + li::before {
  content: '/';
  margin-right: 0.4rem;
  color: var(--text-faint);
}

.breadcrumb [aria-current='page'] {
  color: var(--text);
}

.entity-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--main-width)) var(--meta-width);
  column-gap: var(--column-gap);
  padding-top: 2rem;
}

.entity-type-label {
  margin: 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entity-name {
  margin: 0.1rem 0 0.6rem;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

.italic {
  font-style: italic;
}

.entity-formerly {
  margin: -0.3rem 0 0.6rem;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.75rem;
}

.entity-description {
  margin: 0 0 0.9rem;
  color: var(--text-muted);
  font-size: 1.15rem;
}

.entity-note {
  margin: 0 0 0.9rem;
}

.entity-callout {
  margin: 0.4rem 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
}

.entity-callout a {
  color: var(--accent);
}

.entity-section {
  margin-top: 2rem;
}

.entity-section-heading,
.entity-side-heading {
  margin: 0 0 0.6rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entity-section-heading a {
  text-decoration: none;
}

.entity-filters {
  margin-bottom: 0.9rem;
}

.entity-year {
  margin: 1.1rem 0 0;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.entity-entries,
.entity-threads,
.entity-side-links,
.entity-index-list,
.entity-type-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entity-entries {
  border-top: 1px solid var(--rule);
}

.entity-year + .entity-entries {
  border-top: 0;
}

.entity-entries li {
  display: grid;
  grid-template-columns: 6rem 1.2rem minmax(0, 1fr);
  align-items: baseline;
  gap: 0.25rem;
  padding: 0.35rem 0;
}

.entity-entry-date {
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.68rem;
}

.entity-entry-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration-color: var(--quote-rule);
}

.entity-threads li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}

.entity-threads li:first-child {
  border-top: 1px solid var(--rule);
}

.entity-thread-meta,
.entity-count,
.entity-side-note,
.entity-note-inline {
  color: var(--text-faint);
  font-family: var(--mono);
  font-size: 0.62rem;
}

.entity-rows {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.5;
}

.entity-row {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.entity-rows dt {
  min-width: 0;
  color: var(--text-faint);
  overflow-wrap: anywhere; /* A long label, like a site's domain, wraps in its column */
}

.entity-rows dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.entity-main .entity-rows {
  font-family: var(--serif);
  font-size: 1rem;
}

.entity-main .entity-rows dt {
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.9;
}

.entity-side section {
  margin-bottom: 1.6rem;
}

.entity-side-links li {
  margin-bottom: 0.25rem;
  line-height: 1.35;
}

.entity-edit {
  font-family: var(--mono);
  font-size: 0.7rem;
}

.entity-index-group {
  margin-top: 1.75rem;
}

.entity-index-list {
  columns: 2 14rem;
}

.entity-type-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--rule);
}

.entity-description,
.entity-type-list .entity-description {
  display: block;
}

.entity-type-list .entity-description {
  margin: 0.1rem 0 0;
  font-size: 0.9rem;
}

.entity-more {
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* Phones --------------------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .site-page {
    padding: 1rem 1rem 3rem;
  }

  .site-intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-top: 1rem;
  }

  .site-photo {
    display: none;
  }

  .site-header {
    flex-wrap: wrap;
  }

  .site-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feed-controls {
    align-items: flex-start;
  }

  .site-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'verb'
      'main'
      'rows';
    grid-template-rows: auto;
    padding: 1.4rem 0;
  }

  .entry-verb {
    margin-top: 0;
  }

  .entry-rows {
    margin-top: 0.9rem;
  }

  .entry-cn {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .reading-group {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-entry-permalink {
    grid-template-areas:
      'verb'
      'main'
      'rows';
  }

  .post-page-after {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .entity-layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2rem;
  }

  .entity-entries li {
    grid-template-columns: 4.5rem 1.2rem minmax(0, 1fr);
  }

  .thread-box-members li {
    grid-template-columns: 4.5rem minmax(0, 1fr);
  }
}

/* A post cut short in the feed: the top of the next block (text, an image, a card), cut off after
   a few lines and faded out, before "continue reading →" */
.entry-teaser {
  margin-top: 0.85em; /* The gap between paragraphs (.entry-content p) */
  max-height: 4.8em;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / 55%), transparent);
  user-select: none;
}

.entry-teaser > :first-child {
  margin-top: 0;
}