/* 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;
  /* The greys and rules lean towards the paper's warmth. */
  --color-text-secondary: #5e5a53;
  --color-text-tertiary: #6f6a61;
  --color-accent: #b02e2e;
  --color-accent-hover: #8f2424;
  --color-accent-soft: #f6e9e6;
  --color-on-accent: #fff;
  --color-border: #e6e3db;
  --color-rule: var(--color-border);
  --color-border-light: #efede7;
  --color-border-strong: #8a857b;
  --color-control-border: #d6d4cd;
  --color-tag-bg: #f2f1ec;
  --color-tag-text: #555;
  --color-chip-bg: #f4f2ec;
  --color-chip-border: #e3e0d8;
  --color-code-bg: #f3f2ed;
  --color-ok: #2f6b3a;
  --color-ok-soft: #e6f0e6;
  --color-wait: #8a5a00;
  --color-wait-soft: #f8eed8;

  /* The column's width: the spec's 42rem, where Logbook has 50rem. */
  --max-width: 42rem;
  /* The admin page's tables want more room than prose does. */
  --max-width-wide: calc(var(--max-width) * 1.5);

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

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.04);

  --transition: 0.15s ease;
}

/* Dark when the system is. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141413;
    --color-surface: #1c1c1a;
    --color-text: #d5d2cc;
    --color-text-secondary: #a39e94;
    --color-text-tertiary: #918b81;
    --color-accent: #e06c5f;
    --color-accent-hover: #ea8273;
    --color-accent-soft: #2e1d1a;
    /* White on the lighter dark-mode accent is 3.2:1; dark ink is 5.7:1. */
    --color-on-accent: #141413;
    --color-border: #2d2b27;
    /* The feed's rules, a step firmer than other borders on the dark page. */
    --color-rule: color-mix(in srgb, #2d2b27 88%, #d5d2cc);
    --color-border-light: #232321;
    --color-border-strong: #757471;
    --color-control-border: #4a4945;
    --color-tag-bg: #1f1f1d;
    --color-tag-text: #a19f97;
    --color-chip-bg: #252421;
    --color-chip-border: #35332e;
    --color-code-bg: #1c1c1a;
    --color-ok: #8fc79a;
    --color-ok-soft: #1a2a1d;
    --color-wait: #e3b55e;
    --color-wait-soft: #2c2415;
    --shadow-sm: none;
  }
}

/* On the dark page, the map's greys turn over and darken: its land a
   step off the page, about the dark border's grey, and its streets darker
   lines in it, so it is no lighter slab than the page around it. */
@media (prefers-color-scheme: dark) {
  .map img {
    filter: invert(0.93) contrast(1.1) brightness(0.7);
  }
}

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

html {
  /* Room for the scrollbar on every page, scrolling or not, so the column
     and its navigation stay put from page to page; on both edges, so the
     column stays centred. */
  scrollbar-gutter: stable both-edges;
  /* The rubric's red, once, along the top of every page. */
  border-top: 3px solid var(--color-accent);
  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;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--color-accent-soft);
  color: var(--color-text);
}

/* --- 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-xl) var(--space-lg) var(--space-xl);
  /* A short page keeps its footer at the bottom of the screen. */
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - 2 * var(--space-xl) - 3px);
}

body > main {
  flex: 1 0 auto;
}

/* --- Type --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--color-text);
  text-wrap: pretty;
  /* 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.125rem; letter-spacing: -0.025em; line-height: 1.15; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.0625rem; }

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

b, strong {
  font-weight: 600;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition), text-decoration-color var(--transition), background var(--transition), border-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: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

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

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

.e-content p,
.e-content ul,
.e-content ol,
.e-content pre,
.e-content blockquote,
.e-content table,
.e-content figure {
  margin-bottom: 1.25em;
}

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

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

/* A read, watch or listen's summary repeats its heading in a line, so it
   is set as the catalogue's, not as the review's. */
.work ~ .e-content > .p-summary {
  line-height: 1.5;
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border-strong);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

/* It joins the catalogue entry above it. */
.h-entry > :is(.work, .status):has(+ .e-content > .p-summary:first-child) {
  margin-bottom: 0;
}

/* The space before the summary is inside the rule, so it runs on unbroken. */
.h-entry > .status:has(+ .e-content > .p-summary:first-child),
.h-entry > .work:has(+ .e-content > .p-summary:first-child) > .byline {
  margin-bottom: 0;
  padding-bottom: var(--space-xs);
}

.h-entry > .status:has(+ .e-content > .p-summary:first-child) {
  border-left: 2px solid var(--color-border-strong);
}

/* A post without a heading or photos, such as a note or a reply, is its
   words alone, set a size larger. */
.h-entry:not(:has(h1)) > .e-content {
  font-size: 1.25rem;
  line-height: 1.65;
}

/* A list's bullets hang near the column's edge, as in a book. */
.e-content :is(ul, ol) {
  padding-left: 1.1em;
}

.e-content li {
  padding-left: 0.15em;
  /* Long items read as separate points, not one wall. */
  margin-bottom: 0.5em;
}

/* An article ends on a small mark in the rubric's red, as a magazine's
   piece does: after its last word, or under it when it ends on a quote,
   a picture or code. */
.h-entry:has(> .dateline) > .e-content > p:last-child:not(.p-summary)::after,
.h-entry:has(> .dateline) > .e-content > :is(ul, ol):last-child > li:last-child::after,
.h-entry:has(> .dateline) > .e-content:not(:has(> :is(p, ul, ol):last-child))::after {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.5em;
  vertical-align: 0.08em;
  background: var(--color-accent);
}

.h-entry:has(> .dateline) > .e-content:not(:has(> :is(p, ul, ol):last-child))::after {
  display: block;
  margin: var(--space-lg) 0 0;
}

/* A check-in that is photos or a map alone ends on the mark under its
   last, painted, since a mark inside the grid would take a cell of it;
   under a lone photo, centred as it is. */
.h-entry:has(> .dateline):not(:has(> .e-content)) > .photos,
.h-entry:has(> .dateline):not(:has(> .e-content, > .photos)) > .map {
  padding-bottom: calc(var(--space-lg) + 0.45rem);
  background: linear-gradient(var(--color-accent) 0 0) no-repeat left bottom / 0.45rem 0.45rem;
}

.h-entry:has(> .dateline):not(:has(> .e-content)) > .photos:not(:has(> img + img)) {
  background-position: center bottom;
}

/* Under a map alone, the mark sits on the credit's line, at its left. */
.h-entry:has(> .dateline):not(:has(> .e-content, > .photos)) > .map {
  padding-bottom: 0;
  background-position: left 0 bottom 0.4rem;
}

/* A list inside a list item sits close to it. */
.e-content li > :is(ul, ol) {
  margin: var(--space-xs) 0 0;
}

.e-content h2,
.e-content h3,
.e-content h4 {
  margin: 2em 0 0.6em;
}

.e-content h2 { font-size: 1.375rem; }
.e-content h3 { font-size: 1.125rem; }
.e-content h4 { font-size: 1rem; }

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

/* The line under a post with its date, set apart from the post by
   space alone. */
article > footer {
  margin-top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* Where the date heads the post, its footer holds only tags and copies,
   set off from the text by a hairline. */
.h-entry:has(> .dateline) > footer {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border-light);
}

/* Where responses follow, their rule closes the post instead. */
.h-entry:has(> .dateline) > footer:has(+ .responses) {
  padding-top: 0;
  border-top: 0;
}

/* A post's kind, as the rubric the feed shows, before its date. */
.dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
}

/* Above a title, it heads the post. */
.h-entry > .dateline {
  margin-bottom: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.h-entry > .dateline a:not(.post-kind) {
  color: inherit;
}

.h-entry > .dateline a:not(.post-kind):hover {
  color: var(--color-text);
}

article > footer a {
  color: inherit;
}

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

/* 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);
}

article > footer p:last-child {
  margin-bottom: 0;
}

/* A post's tags, each a small label. */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.tag {
  color: var(--color-text-secondary);
}

/* Its mark in the rubric's red. */
.tag-mark {
  color: var(--color-accent);
}

/* 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, .post-kind) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

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

:is(.work, .venue) > h1 {
  margin-bottom: var(--space-sm);
}

/* A work or venue's heading is the page's; its link is the place's
   page, in the heading's colour. */
.venue h1 {
  line-height: 1.3;
}

.venue h1 a {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-color: var(--color-control-border);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.14em;
  text-decoration-skip-ink: auto;
}

.venue h1 a:hover {
  color: var(--color-accent);
  text-decoration-color: currentColor;
}

/* 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.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  overflow-wrap: break-word;
}

.h-entry > .responds-to,
.h-entry > .status,
.work > .byline,
.venue > .address {
  margin-bottom: var(--space-lg);
}

/* What a work or venue is, and a read's progress and rating, sit as
   one catalogue entry under its heading, marked by a rule. */
.work > .byline,
.venue > .address,
.h-entry > .status {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-border-strong);
}

:is(.work:has(+ .status), .work:has(+ .e-content > .p-summary:first-child)) > .byline {
  margin-bottom: 0;
  padding-bottom: var(--space-xs);
}

/* What a like, repost, bookmark or reply responds to is marked by the
   accent, as a quote is, so the post's own words read as its. */
.h-entry > .responds-to {
  padding-left: var(--space-md);
  border-left: 2px solid var(--color-accent);
}

/* A like or repost with no words of its own is the line itself, as large
   as a title. */
.h-entry:not(:has(.e-content)) > .responds-to {
  padding-left: 0;
  border-left: 0;
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
}

/* Its date belongs to that one line, so it sits close under it. */
.h-entry:not(:has(.e-content)) > .responds-to {
  margin-bottom: 0;
}

.h-entry:not(:has(.e-content)) > footer {
  margin-top: var(--space-sm);
}

.h-entry:not(:has(.e-content)) > .responds-to a {
  color: var(--color-text);
  text-decoration-color: var(--color-accent);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.2em;
}

.h-entry:not(:has(.e-content)) > .responds-to a:hover {
  color: var(--color-accent);
}

/* Their links are underlined, as links in running text are. */
.responds-to a,
.byline a,
.address a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.responds-to a:hover,
.byline a:hover,
.address a:hover {
  text-decoration-color: currentColor;
}

/* 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-lg);
}

.photos img {
  display: block;
  width: 100%;
  height: auto;
  /* Printed plates, with the page's square corners. */
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  /* A dark photo keeps its edge on the dark page. */
  box-shadow: 0 0 0 1px var(--color-border);
}

/* One photo keeps its shape, but a tall one stops short of the screen's
   height, so the words under it show. */
.photos:not(:has(> img + img)) img {
  width: auto;
  justify-self: center;
  max-height: min(80vh, 44rem);
}

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

/* A mention's author shows with their face, small and round, before their
   name. */
.face {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.3125rem;
  vertical-align: -0.3em;
  border-radius: 50%;
  background: var(--color-code-bg);
  box-shadow: 0 0 0 1px var(--color-border);
}

/* An author without a face has their initial in its place, a small seal
   in the rubric's red, so the names still line up. */
span.face {
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  color: var(--color-accent);
  background: var(--color-accent-soft);
  box-shadow: none;
}

/* A check-in's map: a quiet strip of the streets around the venue, in
   the page's greys, with a pin in the rubric's red at its centre, where
   the venue is. It links to the place on OpenStreetMap. */
.map {
  margin: 0 0 var(--space-lg);
}

/* Its edge is on the link, not the image, so the dark page's filter
   leaves it alone. */
.map > a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--color-border);
}

.map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
  background: var(--color-code-bg);
}

.map > a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.875rem;
  height: 0.875rem;
  margin: -0.4375rem 0 0 -0.4375rem;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-bg), 0 1px 4px 3px rgb(0 0 0 / 0.15);
}

.map figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  text-align: right;
  color: var(--color-text-tertiary);
}

.map figcaption a {
  display: inline;
  color: inherit;
  text-decoration: none;
}

.map figcaption a:hover {
  text-decoration: underline;
}

/* A read, watch or listen shows its work's cover beside its heading, as
   a catalogue card does, and its review flows around it. */
.h-entry > .cover {
  float: right;
  width: 7rem;
  height: auto;
  margin: 0 0 var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--color-code-bg);
  box-shadow: 0 0 0 1px var(--color-border), var(--shadow-sm);
}

.h-entry:has(> .cover) {
  display: flow-root;
}

.h-entry > .cover ~ footer,
.h-entry > .cover ~ .responses {
  clear: both;
}

/* In a list, the cover is a small thumbnail at the entry's right. */
.h-feed > article:has(> .cover) {
  display: flow-root;
}

.h-feed > article > .cover ~ footer {
  clear: none;
}

.h-feed > article > .cover {
  width: 3rem;
  margin: 0.2rem 0 var(--space-xs) var(--space-md);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--color-border);
}

/* In a list, a post's photos are a preview under its words: one at the
   column's width, cut to 3:2, and several side by side, square, up to two
   rows of three. The post's page shows them whole. */
.h-feed > article > .photos {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: var(--space-sm) 0 0;
}

.h-feed > article > .photos:first-child {
  margin-top: 0;
}

.h-feed > article > .photos:not(:has(> img + img)) {
  grid-template-columns: minmax(0, 1fr);
}

.h-feed > article > .photos:has(> img + img):not(:has(> img + img + img)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.h-feed > article > .photos:not(:has(> img + img)) img {
  width: 100%;
  max-height: none;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A pair is a step lower than squares, so photos stay plates in the log
   and not posters. */
.h-feed > article > .photos:has(> img + img):not(:has(> img + img + img)) img {
  aspect-ratio: 4 / 3;
}

.h-feed > article > .photos > img:nth-child(n + 7) {
  display: none;
}

/* 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 card, with who wrote it and where,
   over what it says. */
.responses {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  /* Each kind's heading beside its names or replies. */
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  align-items: baseline;
}

.responses h2 {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

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

.responses > p {
  margin-bottom: 0;
  font-family: var(--font-heading);
  color: var(--color-text-secondary);
}

/* Likes and reposts are a list of names, in the text's colour, those
   with a page quietly underlined. */
.responses > p a {
  color: var(--color-text);
  text-decoration: none;
}

/* In a row of likes the faces are what the row shows, at the row's line
   height; a reply's byline keeps them smaller. */
.responses > p .face {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.4em;
}

.responses > p span.face {
  font-size: 0.75rem;
  line-height: 1.5rem;
}

.responses > p a .p-name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-control-border);
}

.responses > p a:hover {
  color: var(--color-accent);
}

.responses > p a:hover .p-name {
  text-decoration-color: currentColor;
}

.responses ol {
  display: grid;
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

/* A reply or mention is marked as quoted, as what a post responds to
   is. */
.responses li {
  margin-bottom: 0;
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--color-border-strong);
}

.responses .byline {
  margin-bottom: 0;
  font-size: 0.8125rem;
}

.responses li .byline:not(:last-child) {
  margin-bottom: var(--space-xs);
}

.responses .byline .p-author {
  font-weight: 600;
  color: var(--color-text);
}

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

.responses .byline a:hover .p-name,
.responses .byline a:not(.p-author):hover {
  text-decoration: underline;
}

/* Where a reply came from is the quietest part of it. */
.responses .byline a:not(.p-author) {
  color: var(--color-text-tertiary);
}

.responses .byline a:not(.p-author):hover {
  color: var(--color-accent);
}

.responses .p-content,
.responses li > .p-name,
.responses > :last-child {
  margin-bottom: 0;
}

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

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

li {
  margin-bottom: var(--space-xs);
  padding-left: 0.2em;
}

li::marker {
  color: var(--color-text-tertiary);
}

blockquote {
  margin: 0 0 var(--space-md);
  padding: 0.1em 0 0.1em 1.1em;
  border-left: 2px solid var(--color-accent);
  color: var(--color-text);
}

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

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

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-code-bg);
  border: 1px solid var(--color-border-light);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

pre {
  background: var(--color-code-bg);
  border: 1px solid var(--color-border);
  padding: var(--space-md) 1.25rem;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  margin-bottom: var(--space-md);
  font-size: 0.875rem;
  line-height: 1.65;
  tab-size: 4;
}

pre code {
  font-size: inherit;
  background: none;
  border: 0;
  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);
}

th {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* --- 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-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

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

.h-feed > article:first-of-type {
  padding-top: 0;
}

.h-feed > article:last-of-type:not(:has(~ .pagination)) {
  border-bottom: 0;
}

.h-feed > article h2 {
  margin-bottom: var(--space-xs);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* A line a post was given, such as "Finished reading …", is not a title
   the author wrote: it is set as a log's small lead-in, and the entry sits
   compact, so the author's own words lead the feed. */
.h-feed > article h2:not(.p-name) {
  font-size: 1rem;
  letter-spacing: 0;
  line-height: 1.5;
  /* Fills the first line, and keeps a rating off a line of its own. */
  text-wrap: pretty;
}

/* A step quieter where the author's own words follow, but darker than the
   date; alone, it is the entry. */
.h-feed > article h2:not(.p-name):has(+ .p-summary) a {
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-bg));
}

/* In a list of one kind, every entry has such a line, so it is the
   list's own heading, at the body's size. */
.h-feed.one-kind > article h2:not(.p-name) {
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}

.h-feed.one-kind > article h2:not(.p-name) a {
  color: var(--color-text);
}

.h-feed:not(.one-kind) > article:has(> h2:not(.p-name)) {
  padding-block: var(--space-md);
}

.h-feed:not(.one-kind) > article:first-of-type:has(> h2:not(.p-name)) {
  padding-top: 0;
}

/* What the author wrote under it, such as a review, in their own voice. */
.h-feed > article > h2:not(.p-name) + .p-summary {
  font-size: 1.0625rem;
  color: var(--color-text);
}

/* A post with no title is the author's words alone, a size larger. */
.h-feed > article > .p-summary:first-child {
  font-size: 1.1875rem;
  line-height: 1.6;
}

.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: 1.0625rem;
  line-height: 1.65;
  margin-bottom: 0;
  overflow-wrap: break-word;
}

/* Where a read's summary leads its content, the status line doesn't say
   again what the summary says: "Finished", and the rating where the
   summary ends on it. Parsers still read them. */
.h-entry > .status:has(+ .e-content > .p-summary:first-child) > :is(.p-progress, .p-read-status) {
  display: none;
}

.h-entry > .status:has(+ .e-content > .p-summary:first-child) > :is(.p-progress, .p-read-status) + *::before {
  content: none;
}

.h-entry > .status:has(+ .e-content > .p-summary:first-child):not(:has(> span:has(> .p-rating))) {
  display: none;
}

/* Where a read's summary ends on its rating, its status line doesn't say it
   again; parsers still read p-rating. */
.h-entry > .status:has(+ .e-content > .p-summary .rating) > span:has(> .p-rating) {
  display: none;
}

.h-entry > .status:has(+ .e-content > .p-summary .rating):not(:has(> :not(span:has(> .p-rating)))) {
  display: none;
}

/* A rating is the author's grade, marked in the rubric's red. */
.rating {
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

/* A lead-in's last words stay on one line with its rating. */
.kept {
  white-space: nowrap;
}

/* An article's title leads the feed, a step above the short posts. */
.h-feed > article:has(> footer .post-kind[href$="/articles/"]) > h2.p-name {
  margin-bottom: var(--space-sm);
  font-size: 1.5rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* Over the author's own words, the line a post was given steps back to
   the regular weight. */
.h-feed:not(.one-kind) > article h2:not(.p-name) {
  font-weight: 400;
}

.h-feed > article h2:not(.p-name):has(+ .p-summary) {
  margin-bottom: 0.375rem;
}

/* The whole entry opens its post: its date's link covers it, under the
   title's and the kind's own links. */
.h-feed > article {
  position: relative;
}

.h-feed > article > footer .u-url::after {
  content: "";
  position: absolute;
  inset: 0;
}

.h-feed > article > h2 a,
.h-feed > article > footer .post-kind {
  position: relative;
  z-index: 1;
}

.h-feed > article:hover > footer .u-url {
  color: var(--color-accent);
}

/* Focused, the date's link outlines the whole entry it opens. */
.h-feed > article > footer .u-url:focus-visible {
  outline: none;
}

.h-feed > article > footer .u-url:focus-visible::after {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* A post with a title shows the start of its content under it, quieter. */
.h-feed > article h2.p-name + .p-summary {
  font-size: 1.0625rem;
}

/* An article's excerpt is the start of a longer text: quieter, and cut
   after three lines. A named bookmark's note is the author's own words
   whole, as under any other lead-in. */
.h-feed > article:has(> footer .post-kind[href$="/articles/"]) > h2.p-name + .p-summary {
  color: color-mix(in srgb, var(--color-text) 78%, var(--color-bg));
}

.h-feed > article > footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: 0;
  border-top: 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

/* A feed's month heads its first entry. The entry's padding leaves the
   space above, so the heading takes the same space above itself. */
.h-feed > .month {
  margin: 0 0 var(--space-md);
  padding-top: var(--space-lg);
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.h-feed > .month:first-of-type {
  padding-top: 0;
}

.h-feed > .month + article {
  padding-top: 0;
}

/* Where a list's year begins, its first post opens with the year and what
   the year holds. On narrow screens it sits above the post. */
.year-mark {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-text-tertiary);
}

.year-mark .year {
  font-family: var(--font-mono);
  color: var(--color-text-secondary);
}

.year-mark .tally::before {
  content: "· ";
}

/* A post's kind, as a rubric in the accent, as old books marked their
   labels in red, linking to its list. */
.post-kind {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

article > footer .post-kind,
.h-entry .dateline .post-kind {
  color: var(--color-accent);
}

/* In a list of one kind, every post's kind is the list's own, which its
   heading already names. */
.h-feed.one-kind .post-kind {
  display: none;
}

article > footer .post-kind:hover,
.h-entry .dateline .post-kind:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 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: 0;
  padding-top: var(--space-sm);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

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

.pagination span {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* On the first page, the count starts the line, as a ledger's does. */
.pagination:not(:has([rel="prev"])) span {
  grid-column: 1;
  justify-self: start;
}

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

.pagination a {
  /* A target a thumb can hit. */
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-weight: 600;
  color: var(--color-accent);
}

.pagination a:hover {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 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-md);
  margin-bottom: var(--space-xl);
  /* A ledger's double rule. */
  border-bottom: 3px double color-mix(in srgb, var(--color-border-strong) 50%, var(--color-bg));
  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;
}

/* The author's photo beside the name and tagline, the same on every
   page. */
.site-id {
  display: flex;
  align-items: center;
  gap: 0.875rem;
}

.site-avatar {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--color-border);
}

.site-name {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text);
}

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

/* The name ends on the rubric's red square, the mark that ends each
   article: the author's stamp. */
.site-name::after {
  content: "";
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.08em;
  background: var(--color-accent);
}

.site-tagline {
  margin-bottom: 0;
  font-size: 0.875rem;
  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;
  padding-left: 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.9375rem;
  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.875rem;
  line-height: 1.8;
  color: var(--color-text-tertiary);
}

.site-footer p {
  margin-bottom: var(--space-xs);
}

.site-footer ul {
  column-gap: var(--space-lg);
  /* 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: 3px;
}

/* Every kind's list, on one line where the column has room, under a
   hairline of its own. */
.site-footer nav {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

/* The author's links and every kind's list share one ledger of six even
   columns, so both rows start at the same places, as a book's index. */
.site-footer > ul,
.site-footer nav ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--space-md);
}

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

/* 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.45em;
}

/* Under a post's responses, the footer follows a little closer. */
body:has(.responses) .site-footer,
body:has(.h-entry > .dateline) .site-footer {
  margin-top: var(--space-xl);
}

/* The home page's line on whose site it is. */
.site-intro {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: 1.3125rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--color-text);
  text-wrap: pretty;
}

/* Over the standfirst, the header sits as close as the standfirst sits
   over its rule. */
body:has(.site-intro) .site-header {
  margin-bottom: var(--space-lg);
}

/* --- Pages with a message: not found and gone --- */
main > h1:first-child {
  margin-bottom: var(--space-md);
}

/* --- 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.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

textarea {
  display: block;
  width: 100%;
  margin-bottom: var(--space-lg);
  padding: 0.75rem var(--space-md);
  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-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  resize: vertical;
  tab-size: 2;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* 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: 0 0.75rem;
  min-height: 2.5rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

textarea:hover,
input:hover {
  border-color: var(--color-border-strong);
}

textarea:focus,
input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

::placeholder {
  color: var(--color-text-tertiary);
  opacity: 1;
}

button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0 1.25rem;
  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-md);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

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

/* --- The admin page ---
   Wider than the public column, for its tables, with its navigation, to
   the posts and the mentions, over every page. */
body:has(> nav.admin) {
  max-width: var(--max-width-wide);
}

/* The edit form keeps the column prose has, under the same header. */
body:has(> nav.admin):not(:has(.posts, .mentions)) main {
  max-width: var(--max-width);
}

nav.admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 0.875rem;
}

/* The admin's name carries the public name's stamp. */
nav.admin::before {
  content: "Logg";
  padding-right: 0.36em;
  background: linear-gradient(var(--color-accent) 0 0) no-repeat right 0.04em bottom 0.3em / 0.28em 0.28em;
  margin-right: var(--space-md);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

nav.admin a {
  padding: var(--space-xs) 0.75rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--color-text-secondary);
}

nav.admin a:hover {
  color: var(--color-text);
  background: var(--color-chip-bg);
}

/* The current tab is marked as the public navigation marks its page. */
nav.admin a[aria-current] {
  color: var(--color-text);
  background: none;
  text-decoration: underline 2px var(--color-accent);
  text-underline-offset: 0.45em;
}

body:has(> nav.admin) main > h1 {
  margin-bottom: var(--space-sm);
  font-size: 1.75rem;
}

body:has(> nav.admin) main > h2 {
  margin: var(--space-2xl) 0 var(--space-sm);
}

body:has(> nav.admin) main > p:not(.refused) {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text-secondary);
}

body:has(> nav.admin) main > p + form {
  margin-top: var(--space-lg);
}

/* Its tables sit on a card, set in the interface's face. */
.posts,
.mentions {
  display: table;
  width: 100%;
  font-family: var(--font-heading);
  margin: var(--space-lg) 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.posts th,
.mentions th {
  background: var(--color-chip-bg);
}

.posts tbody tr:last-child td,
.mentions tbody tr:last-child td {
  border-bottom: 0;
}

.posts tbody tr:hover,
.mentions tbody tr:hover,
.posts tbody tr:focus-within,
.mentions tbody tr:focus-within {
  background: var(--color-chip-bg);
}

.posts td:first-child a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 3px;
}

.posts td:first-child a:hover {
  color: var(--color-accent);
}

/* Each post's kind in the rubric's red, as the public lists show it. */
.posts td:nth-child(2) {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* 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);
}

.posts td:last-child a {
  color: inherit;
  text-decoration: none;
}

.posts td:last-child a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 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;
  line-height: 1.55;
  overflow-wrap: break-word;
}

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

.mentions td a {
  color: var(--color-text);
  text-decoration: none;
}

.mentions td a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.mentions td:first-child > a:first-child {
  font-weight: 600;
}

/* A host is never split. */
.mentions td:first-child > a:last-of-type {
  white-space: nowrap;
}

/* Its author and source are links too, underlined quietly. */
.mentions td:first-child a,
.mentions td:nth-child(2) a,
.posts td:last-child a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--color-control-border);
}

.mentions td + td a {
  color: var(--color-text-secondary);
}

/* Every column after the first is as wide as what it holds, leaving the
   post or the mention the room. */
.posts :is(th, td) + :is(th, td),
.mentions :is(th, td) + :is(th, td) {
  width: 1%;
  white-space: nowrap;
}

.posts :is(th, td) + :is(th, td),
.mentions :is(th, td) + :is(th, td) {
  padding-left: var(--space-md);
}

.mentions td:nth-child(2) a {
  font-family: var(--font-mono);
}

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

/* A mention's status and Delete share a line, with Block under them. */
.mentions form[action$="/block"] {
  display: block;
  margin-top: 4px;
}

.mentions td:last-child > * {
  margin: 0 var(--space-xs) var(--space-xs) 0;
}

.mentions td:last-child button {
  white-space: nowrap;
}

/* Their buttons are quiet, outlined in the page's colours; approving is
   the one filled in the accent. */
.mentions button,
.blocked button {
  min-height: 1.75rem;
  margin: 0;
  padding: 0 0.6rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border-color: var(--color-control-border);
}

.mentions button:hover,
.blocked button:hover {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

/* Blocking a host is a quiet text button beside the others. */
.mentions form[action$="/block"] button {
  display: inline-flex;
  align-items: center;
  font-weight: 400;
  min-height: 24px;
  line-height: 1.4;
  padding: 0;
  color: var(--color-text-secondary);
  background: none;
  border-color: transparent;
  text-decoration: underline;
  text-decoration-color: var(--color-control-border);
  text-underline-offset: 3px;
}

/* Deleting is marked in the accent, as in the editor. */
.mentions form[action$="/delete"] button {
  color: var(--color-accent);
}

.mentions form[action$="/approve"] button {
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.mentions form[action$="/approve"] button:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* A mention's status, as a badge over its buttons. */
.state {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  margin: 0 var(--space-xs) 0 0;
  vertical-align: middle;
  padding: 0 0.55em;
  font-family: var(--font-heading);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.state.approved {
  color: var(--color-ok);
  background: var(--color-ok-soft);
}

.state.waiting {
  color: var(--color-wait);
  background: var(--color-wait-soft);
}

.blocked {
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}

.blocked li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border-light);
}

.blocked button {
  margin: 0;
}

/* The field and its button side by side. */
form.block {
  display: grid;
  grid-template-columns: minmax(0, 24rem) auto;
  justify-content: start;
  align-items: end;
  column-gap: var(--space-sm);
  margin-top: var(--space-lg);
}

form.block label {
  grid-column: 1 / -1;
}

form.block input {
  margin-bottom: 0;
}

/* The edit form: the content leads, the properties follow, smaller. */
#content {
  height: 16rem;
}

#properties {
  height: 12rem;
}

@supports (field-sizing: content) {
  #content,
  #properties {
    height: auto;
    field-sizing: content;
    min-height: 8lh;
    max-height: 30lh;
  }

  #properties {
    min-height: 6lh;
  }
}

/* Why an edit was refused. */
.refused {
  padding: 0.75rem var(--space-md);
  border: 1px solid var(--color-accent);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  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 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-family: var(--font-heading);
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

form.delete p {
  margin-bottom: 0;
}

form.delete button {
  flex-shrink: 0;
  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;
  border-radius: var(--radius-sm);
}

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

/* --- Wide screens ---
   Where the gutter has room, a feed entry's kind hangs in it, beside the
   entry, as a manuscript's rubric stands in the margin. */
@media (min-width: 64rem) {
  /* A work's cover hangs in the right margin, level with its lead-in, as
     the kind hangs in the left one. */
  .h-feed > article > .cover {
    position: absolute;
    left: calc(100% + var(--space-lg));
    top: calc(var(--space-lg) + 0.2rem);
    /* Short enough to end above the rule of an entry of two lines: a book
       or poster at 2:3, an album's sleeve square and whole. */
    width: 2.5rem;
    height: auto;
    max-height: 3.75rem;
    object-fit: contain;
    margin: 0;
  }

  .h-feed:not(.one-kind) > article:has(> h2:not(.p-name)) > .cover {
    top: calc(var(--space-md) + 0.2rem);
  }

  .h-feed > article:first-of-type > .cover,
  .h-feed:not(.one-kind) > article:first-of-type:has(> h2:not(.p-name)) > .cover {
    top: 0.2rem;
  }

  .h-feed > article > footer .post-kind {
    position: absolute;
    right: calc(100% + var(--space-lg));
    /* On the baseline of the entry's first line, measured: a note's
       text, a title, or a lead-in. */
    top: calc(var(--space-lg) + 0.5625rem);
    /* The margin gives it no width, so "Check-in" would break at its hyphen. */
    white-space: nowrap;
    text-align: right;
  }

  .h-feed:not(.one-kind) > article:has(> h2:not(.p-name)) > footer .post-kind {
    top: calc(var(--space-md) + 0.31rem);
  }

  /* A list's year hangs in the margin on the rule above its post, so it
     sits level with that rule and above the post's kind. A list's first
     post has the list's heading above it, whose rule sits a space above the
     post, so its year hangs on that rule. */
  .h-feed > article > .year-mark {
    position: absolute;
    right: calc(100% + var(--space-lg));
    top: -0.5625rem;
    margin: 0;
    text-align: right;
    white-space: nowrap;
  }

  .h-feed > article:first-of-type > .year-mark {
    top: calc(-1 * var(--space-lg) - 0.5625rem);
  }

  /* A post's responses hang their headings there too, so names and
     replies start at the column's edge. */
  .responses {
    grid-template-columns: 0 minmax(0, 1fr);
    column-gap: 0;
  }

  .responses h2 {
    justify-self: unsafe end;
    margin-right: var(--space-lg);
    white-space: nowrap;
    font-size: 0.75rem;
  }

  /* An entry of the same kind as the one above it hangs a ditto mark in
     place of its kind, so the margin marks where the kind changes. The
     word comes back on hover, and stays for screen readers. */
  .h-feed:not(.one-kind) > article.same-kind > footer .post-kind {
    color: transparent;
  }

  .h-feed:not(.one-kind) > article.same-kind > footer .post-kind::after {
    content: "\201D";
    position: absolute;
    top: 0.1em;
    right: 0;
    font: 1.375rem/1 var(--font-body);
    color: color-mix(in srgb, var(--color-accent) 60%, var(--color-bg));
  }

  .h-feed:not(.one-kind) > article.same-kind:is(:hover, :focus-within) > footer .post-kind {
    color: var(--color-accent);
  }

  .h-feed:not(.one-kind) > article.same-kind:is(:hover, :focus-within) > footer .post-kind::after {
    content: none;
  }

  /* An article's section heads hang a quiet section mark there. */
  .h-entry:has(> h1.p-name) > .e-content > h2 {
    position: relative;
  }

  .h-entry:has(> h1.p-name) > .e-content > h2::before {
    content: "§";
    position: absolute;
    right: calc(100% + var(--space-lg));
    font-size: 1rem;
    line-height: 1.7;
    font-weight: 400;
    color: color-mix(in srgb, var(--color-accent) 65%, var(--color-bg));
  }

  /* A post's own page hangs its kind there too, beside its date, whether
     the date heads the post or ends it. */
  .h-entry .dateline {
    position: relative;
  }

  .h-entry .dateline .post-kind {
    position: absolute;
    right: calc(100% + var(--space-lg));
    /* Out of the line, it would sit 2px above the date's baseline. */
    top: 0.125rem;
    white-space: nowrap;
  }

  /* A post dated in its footer hangs its kind where the post begins, as
     every other page and the feed do, so it never moves down the margin
     with the post's length. */
  .h-entry:has(> footer > .dateline) {
    position: relative;
  }

  .h-entry > footer > .dateline {
    position: static;
  }

  /* On the first line's baseline, measured; level with a photo's top. */
  .h-entry > footer > .dateline .post-kind {
    top: 0;
  }

  .h-entry:has(> .e-content:first-child) > footer > .dateline .post-kind {
    top: 0.6875rem;
  }

  .h-entry:has(> .responds-to:first-child) > footer > .dateline .post-kind {
    top: 0.1875rem;
  }

  /* A like or repost with no words of its own sets its line larger. */
  .h-entry:not(:has(.e-content)):has(> .responds-to:first-child) > footer > .dateline .post-kind {
    top: 0.625rem;
  }

  .h-feed > article:has(> h2.p-name) > footer .post-kind {
    top: calc(var(--space-lg) + 0.5rem);
  }

  .h-feed > article:first-of-type:has(> h2.p-name) > footer .post-kind {
    top: 0.5rem;
  }

  /* An article's larger title sits 3px lower. */
  .h-feed > article:has(> footer .post-kind[href$="/articles/"]):has(> h2.p-name) > footer .post-kind {
    top: calc(var(--space-lg) + 0.6875rem);
  }

  .h-feed > article:first-of-type:has(> footer .post-kind[href$="/articles/"]):has(> h2.p-name) > footer .post-kind {
    top: 0.6875rem;
  }

  /* An entry of photos alone hangs its kind beside the photos' top. */
  .h-feed > article:has(> .photos:first-child) > footer .post-kind {
    top: var(--space-lg);
  }

  .h-feed > article:first-of-type:has(> .photos:first-child) > footer .post-kind {
    top: 0;
  }

  .h-feed > article:first-of-type > footer .post-kind {
    top: 0.5625rem;
  }

  .h-feed:not(.one-kind) > article:first-of-type:has(> h2:not(.p-name)) > footer .post-kind {
    top: 0.31rem;
  }
}

/* --- Phones --- */
@media (max-width: 640px) {
  body {
    padding: var(--space-md);
    min-height: calc(100svh - 2 * var(--space-md) - 3px);
  }

  h1 {
    font-size: 1.75rem;
  }

  .e-content {
    font-size: 1.125rem;
  }

  .h-feed > article:has(> footer .post-kind[href$="/articles/"]) > h2.p-name {
    font-size: 1.3125rem;
  }

  .site-intro {
    font-size: 1.1875rem;
  }

  .h-entry > .cover {
    width: 5rem;
    margin-left: var(--space-md);
  }

  /* On a phone the strip would be a sliver: it shows less of the width,
     at 2:1. */
  .map img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }

  .site-avatar {
    width: 3rem;
    height: 3rem;
  }

  .site-name {
    font-size: 1.375rem;
  }

  /* The nav's tall targets leave room enough above the rule. */
  .site-header {
    padding-bottom: 0.125rem;
    margin-bottom: var(--space-lg);
  }

  /* The main navigation spans the column on one line, its first and last
     words flush with the column's edges, so none of it wraps on a phone. */
  .site-header > nav {
    flex: 1 0 100%;
  }

  .site-header ul {
    justify-content: space-between;
    column-gap: 0;
    margin-inline: -0.25rem;
  }

  /* A thumb's target, as on wider screens. */
  .site-header nav a {
    min-height: 2.75rem;
    padding-inline: 0.25rem;
    font-size: 0.875rem;
  }

  form.delete {
    flex-direction: column;
    align-items: flex-start;
  }

  .responses {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-xs);
  }

  .responses > :not(h2, :last-child) {
    margin-bottom: var(--space-md);
  }

  .site-footer > ul a,
  .site-footer nav a {
    display: inline-flex;
    align-items: center;
    width: 100%;
    min-height: 2rem;
  }

  /* Both in even rows of three, one row height. */
  .site-footer > ul,
  .site-footer nav ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-sm);
    row-gap: 0;
  }


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