/* Logg's one stylesheet: Logbook's fonts, colours, dark theme and type
   scale, on one quiet column. Logbook is the Astro site's design
   (src/styles/global.css). Its tokens and element styles are ported here;
   its layout is not. Public pages run no JavaScript, so there is no theme
   button: the theme is the system's. */

/* --- IBM Plex, from the site itself ---
   Only the faces Logbook uses: Serif 400, 400 italic and 600 for body
   text, Sans 400 and 600 for the interface, Mono 400 for dates and counts.
   Latin covers æ, ø, å and the umlauts; Latin Extended the rest of
   Europe's letters. The files are Fontsource 5.3.0's, under the SIL Open
   Font License 1.1 (fonts/OFL.txt). */
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-serif-latin-ext-400-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-serif-latin-400-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-serif-latin-ext-400-italic.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-serif-latin-400-italic.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-serif-latin-ext-600-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-serif-latin-600-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');
  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;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');
  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;
}

/* --- Fallback faces ---
   Until IBM Plex arrives, text is set in a local font scaled to Plex's
   width and line height, so paragraphs don't re-wrap when it swaps in.
   size-adjust matches the width; the overrides are Plex's ascent and
   descent (1025 and 275 per 1000) divided by it. The numbers fit only the
   one local font each names: Georgia, Arial and Courier New, then Noto,
   Roboto and Droid for Android, and DejaVu for Linux. A face whose local
   font is missing is skipped. Each covers what Plex's Latin file covers,
   so a character Plex lacks still comes from the system's fonts. Headings
   are Plex Sans 600, so each sans fallback has its bold matched too. */
@font-face {
  font-family: 'Plex Serif Fallback';
  src: local('Georgia');
  size-adjust: 106.1%;
  ascent-override: 96.6%;
  descent-override: 25.9%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Serif Fallback Noto';
  src: local('Noto Serif'), local('NotoSerif-Regular');
  size-adjust: 98.3%;
  ascent-override: 104.2%;
  descent-override: 28%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Serif Fallback DejaVu';
  src: local('DejaVu Serif'), local('DejaVuSerif');
  size-adjust: 91.6%;
  ascent-override: 111.9%;
  descent-override: 30%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback';
  src: local('Arial');
  size-adjust: 100.6%;
  ascent-override: 101.9%;
  descent-override: 27.3%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback';
  src: local('Arial Bold'), local('Arial-BoldMT');
  font-weight: 500 700;
  size-adjust: 97.3%;
  ascent-override: 105.3%;
  descent-override: 28.3%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback Roboto';
  src: local('Roboto'), local('Roboto-Regular');
  size-adjust: 101.4%;
  ascent-override: 101.1%;
  descent-override: 27.1%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback Roboto';
  src: local('Roboto Bold'), local('Roboto-Bold'), local('Roboto Medium'), local('Roboto-Medium');
  font-weight: 500 700;
  size-adjust: 103.6%;
  ascent-override: 98.9%;
  descent-override: 26.5%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback DejaVu';
  src: local('DejaVu Sans'), local('DejaVuSans');
  size-adjust: 88.7%;
  ascent-override: 115.5%;
  descent-override: 31%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Sans Fallback DejaVu';
  src: local('DejaVu Sans Bold'), local('DejaVuSans-Bold');
  font-weight: 500 700;
  size-adjust: 81.3%;
  ascent-override: 126%;
  descent-override: 33.8%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Mono Fallback';
  src: local('Courier New');
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Mono Fallback Droid';
  src: local('Droid Sans Mono'), local('DroidSansMono');
  size-adjust: 100%;
  ascent-override: 102.5%;
  descent-override: 27.5%;
  line-gap-override: 0%;
  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;
}

@font-face {
  font-family: 'Plex Mono Fallback DejaVu';
  src: local('DejaVu Sans Mono'), local('DejaVuSansMono');
  size-adjust: 99.7%;
  ascent-override: 102.9%;
  descent-override: 27.6%;
  line-gap-override: 0%;
  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;
}

/* --- Tokens --- */
:root {
  color-scheme: light dark;

  --font-body: 'IBM Plex Serif', 'Plex Serif Fallback', 'Plex Serif Fallback Noto', 'Plex Serif Fallback DejaVu', 'Charter', 'Bitstream Charter', Georgia, serif;
  --font-heading: 'IBM Plex Sans', 'Plex Sans Fallback', 'Plex Sans Fallback Roboto', 'Plex Sans Fallback DejaVu', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Plex Mono Fallback', 'Plex Mono Fallback Droid', 'Plex Mono Fallback DejaVu', 'JetBrains Mono', ui-monospace, monospace;

  --color-bg: #fafaf8;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary: #707070;
  --color-accent: #b02e2e;
  --color-accent-hover: #8f2424;
  --color-on-accent: #fff;
  --color-border: #e5e5e0;
  --color-border-light: #f0f0eb;
  --color-border-strong: #878683;
  --color-tag-bg: #f5f5f0;
  --color-tag-text: #555;
  --color-chip-bg: #f8f6f1;
  --color-chip-border: #e8e5de;
  --color-code-bg: #f5f5f0;

  /* The column's width: the spec's 42rem, where Logbook has 50rem. */
  --max-width: 42rem;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  --transition: 0.2s ease;
}

/* Dark when the system is. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141413;
    --color-surface: #1c1c1a;
    --color-text: #d5d2cc;
    --color-text-secondary: #9a9890;
    --color-text-tertiary: #8a8780;
    --color-accent: #e06c5f;
    --color-accent-hover: #ea8273;
    /* White on the lighter dark-mode accent is 3.2:1; dark ink is 5.7:1. */
    --color-on-accent: #141413;
    --color-border: #2a2a27;
    --color-border-light: #222220;
    --color-border-strong: #757471;
    --color-tag-bg: #1f1f1d;
    --color-tag-text: #9a9890;
    --color-chip-bg: #1a1a18;
    --color-chip-border: #2a2a27;
    --color-code-bg: #1f1f1d;
  }
}

/* --- Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
}

/* --- The column ---
   The body is the page's one column: --max-width of text, with the
   gutters outside it. */
body {
  box-sizing: content-box;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) var(--space-2xl);
}

/* --- Type --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--color-text);
  /* A long address, as in a repost's title, wraps instead of widening
     the page on a phone. */
  overflow-wrap: break-word;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }

p {
  margin-bottom: var(--space-md);
}

b, strong {
  font-weight: 600;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition);
}

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

/* A link in running text is underlined: beside the text around it the
   accent is under 3:1, and in dark mode no red reaches both 3:1 against
   the text and 4.5:1 against the page (WCAG 1.4.1). Links with a class
   stay plain. */
:where(main :is(p, li, dd, td, figcaption, blockquote)) a:where(:not([class])),
.e-content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

:where(main :is(p, li, dd, td, figcaption, blockquote)) a:where(:not([class])):hover,
.e-content a:hover {
  text-decoration-thickness: 2px;
}

/* A post's body. */
.e-content {
  font-size: 1.0625rem;
  line-height: 1.8;
  /* A long URL wraps instead of widening the page on a phone. */
  overflow-wrap: break-word;
}

/* Dates and counts are set in Mono. */
time {
  font-family: var(--font-mono);
}

/* The line under a post with its date. */
article > footer {
  margin-top: var(--space-md);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

article > footer a {
  color: inherit;
}

article > footer a:hover {
  color: var(--color-text-secondary);
}

/* The footer's lines: the date, the post's tags, the people it tags and
   its copies elsewhere. */
article > footer p {
  margin-bottom: var(--space-xs);
}

/* Links to people and copies share the footer's colour, so they are
   underlined. The date links to the post itself. */
article > footer a:not(.u-url) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- A post, by its kind --- */
.h-entry h1 {
  margin-bottom: var(--space-sm);
}

/* What a response responds to, a work's byline, a venue's address, and a
   read's progress and rating: one quiet line each. */
.responds-to,
.byline,
.address,
.status {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

/* Their links are underlined, as links in running text are. */
.responds-to a,
.byline a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* A byline's parts, and a read's progress and rating, are set apart by
   dots, outside any link. */
.byline > * + *::before,
.status > * + *::before {
  content: " · ";
  color: var(--color-border-strong);
}

/* Photos share the column in a grid: one fills it, more sit side by
   side, cropped to squares so that the rows stay even. */
.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.photos img {
  display: block;
  width: 100%;
}

.photos:has(> img + img) img {
  aspect-ratio: 1;
  object-fit: cover;
}

/* The mentions the author approved, under the post: below a line, each
   kind under a small heading, likes and reposts as a line of names, and
   each reply or mention on its own, with who wrote it and where, over
   what it says. */
.responses {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.responses h2 {
  margin: var(--space-md) 0 var(--space-sm);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.responses p,
.responses li {
  font-size: 0.9375rem;
  overflow-wrap: break-word;
}

.responses ol {
  list-style: none;
  padding: 0;
}

.responses li {
  margin-bottom: var(--space-md);
}

.responses .byline {
  margin-bottom: 0;
}

.responses .byline a {
  text-decoration: none;
}

.responses .p-content,
.responses .p-name {
  margin-bottom: 0;
}

.responses .p-name {
  font-weight: 600;
}

ul, ol {
  padding-left: 1.5em;
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: var(--space-xs);
}

blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--space-md);
}

img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-bg);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-code-bg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
}

pre code {
  background: none;
  padding: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) 0;
}

table {
  /* Scrolls sideways instead of overflowing the column. */
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-md);
  font-size: 0.9375rem;
}

th, td {
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

/* --- Lists ---
   The home page and each kind's list: one post under another, with its
   title or the start of its content, over a line with its kind and date. */
.h-feed > h1 {
  margin-bottom: var(--space-md);
}

.h-feed > article {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.h-feed > article h2 {
  margin-bottom: var(--space-xs);
}

.h-feed > article h2 a {
  color: var(--color-text);
}

.h-feed > article h2 a:hover {
  color: var(--color-accent);
}

.h-feed .p-summary {
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 0;
  overflow-wrap: break-word;
}

.h-feed > article > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* A post's kind, as a pill linking to its list. */
.post-kind {
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 9px;
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-full);
  background: var(--color-chip-bg);
  color: var(--color-text-secondary);
}

/* Newer posts on the left, older on the right, and where the page is
   between them, wherever a link is missing. */
.pagination {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.pagination [rel="prev"] {
  grid-column: 1;
  justify-self: start;
}

.pagination span {
  grid-column: 2;
}

.pagination [rel="next"] {
  grid-column: 3;
  justify-self: end;
}

.pagination a {
  /* A target a thumb can hit. */
  padding: var(--space-sm) 0;
}

/* --- The site's header and footer ---
   Ported from the archive's stylesheet, its .site-header, .site-nav and
   .site-footer rules, without the sticky header, the avatar and the
   theme button, and in the column: the site's name over its tagline,
   beside the main navigation, which wraps under them when the column is
   too narrow for both; and under the page, the licence, the feed, the
   author's profiles and every kind's list, small and quiet. Their lists
   of links flow in lines, like words. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding-bottom: var(--space-sm);
  margin-bottom: var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
}

/* The home page's heading: the name, looking as it does on every page. */
.site-header h1 {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.site-name {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.site-name:hover {
  color: var(--color-accent);
}

.site-tagline {
  margin-bottom: 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.site-header ul,
.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}

.site-header li,
.site-footer li {
  margin-bottom: 0;
}

.site-header ul {
  column-gap: var(--space-lg);
}

.site-header nav a {
  display: inline-flex;
  align-items: center;
  /* A target a thumb can hit. */
  min-height: 44px;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: var(--color-text-secondary);
}

.site-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  line-height: 1.8;
  text-align: center;
  color: var(--color-text-secondary);
}

.site-footer p {
  margin-bottom: 0;
}

.site-footer ul {
  justify-content: center;
  column-gap: var(--space-md);
  /* Lines tall enough for a thumb's target, 24px. */
  line-height: 2;
}

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

.site-header nav a:hover,
.site-footer a:hover {
  color: var(--color-text);
}

/* The licence is a link in running text, so it is underlined. */
.site-footer p a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Every kind's list, on one line where the column has room. */
.site-footer nav {
  margin-top: var(--space-xs);
  font-size: 0.75rem;
}

.site-footer nav ul {
  column-gap: var(--space-sm);
}

/* The link to the list the page is on: in the text's colour, and
   underlined, since in dark mode the two greys are too close to tell
   apart by colour alone. */
.site-header a[aria-current="page"],
.site-footer a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* --- Forms ---
   The admin page's: a label over each field, fields as wide as the
   column, and buttons in the accent. Browsers set fields and buttons in
   faces and colours of their own, so they are given the site's. */
label {
  display: block;
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

textarea {
  display: block;
  width: 100%;
  margin-bottom: var(--space-lg);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}

/* A one-line field, such as the host the mentions page blocks. */
input {
  display: block;
  width: 100%;
  max-width: 24rem;
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
}

button {
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

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

/* --- The admin page ---
   Its navigation, to the posts and the mentions, over every page. */
nav.admin {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.875rem;
}

nav.admin a {
  color: var(--color-text-secondary);
}

nav.admin a[aria-current="page"] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.4em;
}

/* Its list of posts keeps each one's kind and date on one line. */
.posts td + td {
  white-space: nowrap;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* Its list of mentions: what each says, then its post, when it came and
   its buttons, small, which sit side by side. */
.mentions td {
  vertical-align: top;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.mentions td + td {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.mentions form,
.blocked form {
  display: inline;
}

.mentions button,
.blocked button {
  margin: 0 var(--space-xs) var(--space-xs) 0;
  padding: var(--space-xs) var(--space-sm);
  font-size: 0.75rem;
}

.blocked {
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

/* Why an edit was refused. */
.refused {
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-accent);
  background: var(--color-code-bg);
  font-family: var(--font-heading);
  font-size: 0.875rem;
}

/* Deleting is set apart from saving, below a line, and its button is
   outlined rather than filled. */
form.delete {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

form.delete button {
  color: var(--color-accent);
  background: transparent;
}

form.delete button:hover {
  color: var(--color-on-accent);
  background: var(--color-accent);
}

/* --- Focus and motion --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* --- Phones --- */
@media (max-width: 640px) {
  body {
    padding: var(--space-md) var(--space-md) var(--space-xl);
  }

  h1 {
    font-size: 1.75rem;
  }

  /* The main navigation stays on one line on most phones. */
  .site-header ul {
    column-gap: var(--space-md);
  }
}