/* The blog's index and articles: the user guide's look around a column to read. */
:root {
  --navy: #0b1f3a;
  --abyss: #06132a;
  --blue: #0066ff;
  --text: #1c2733;
  --muted: #5b6b7c;
  --line: #e2e8f0;
  --soft: #f5f8fc;
  --radius: 12px;
  color-scheme: light dark;
  --heading: var(--navy);
  --page: #fff;
  --surface: #fff;
}
/* The same pages, as the sea at night, when the browser prefers a dark scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    --blue: #3d8bff;
    --text: #d5dde7;
    --muted: #93a3b5;
    --line: #26374d;
    --soft: #0b1626;
    --heading: #eef3fa;
    --page: #081120;
    --surface: #12213a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
  color: var(--text);
  background: var(--page);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* The footer at the bottom of the screen, under a short article. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; width: 100%; }
a { color: var(--blue); }

/*
 * The type articles are read in: a book's serif, the system's own, no font to download. Not Charter, whose no-break
 * space is twice a space wide, opening a gap before each French colon.
 */
:root { --serif: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, Georgia, serif; }

/* Each topic's colour, on its tags, its dots on the timeline and its pill in the filter: deep enough for 4.5:1 on its tag's tint. */
.topic-routing { --topic: #5b4ee6; }
.topic-weather { --topic: #0057d9; }
.topic-sea { --topic: #00766a; }
.topic-boat { --topic: #9e5600; }
.topic-app { --topic: #b02a6e; }
@media (prefers-color-scheme: dark) {
  .topic-routing { --topic: #9d94ff; }
  .topic-weather { --topic: #5ea2ff; }
  .topic-sea { --topic: #3fd6c0; }
  .topic-boat { --topic: #ffb340; }
  .topic-app { --topic: #ff7ab8; }
}

/* The index and the topics' pages: a column wide enough for the latest article, then the timeline. */
main.blog-index { max-width: 880px; padding-bottom: 96px; }
.blog-intro { padding: 56px 0 8px; }
.eyebrow {
  margin: 0 0 12px; color: var(--blue); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
}
h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.1; letter-spacing: -0.03em; color: var(--heading); text-wrap: balance; }
.lead { margin: 12px 0 0; color: var(--muted); font-size: 1.1rem; max-width: 62ch; }
/* The way to follow the blog from a feed reader, under the introduction. */
.follow { margin: 16px 0 0; }
.feed { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; text-decoration: none; }
.feed:hover { text-decoration: underline; }
.feed svg { width: 16px; height: 16px; flex: none; }
time { color: var(--muted); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* A topic's tag: its name on a wash of its colour. */
.topic {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  line-height: 1.6; letter-spacing: 0.02em; color: var(--topic, var(--blue));
  background: color-mix(in srgb, var(--topic, var(--blue)) 12%, transparent);
}

/* The filter: the whole blog, then each topic and its count, the page's own pill filled. */
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.topics a {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); background: var(--surface); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.topics a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--topic, var(--heading)); }
.topics a:hover { border-color: var(--topic, var(--blue)); }
.topics a[aria-current="page"] { background: var(--heading); border-color: var(--heading); color: var(--page); }
.topics a[aria-current="page"]::before { background: var(--topic, var(--page)); }
.topics .count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.topics a[aria-current="page"] .count { color: inherit; opacity: 0.7; }

/* What every article shows above its title: its date, its number in the series and its topic. */
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.number { color: var(--muted); font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* The latest article, on its own: the landing page's night-blue band, a glow of its topic's colour. */
.listing { margin: 28px 0 0; }
.featured {
  position: relative; display: block; overflow: hidden; padding: 36px 40px; border-radius: 20px; color: #fff; text-decoration: none;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--topic, var(--blue)) 45%, transparent), transparent 60%),
    linear-gradient(160deg, var(--abyss), var(--navy));
  box-shadow: 0 18px 40px -24px rgba(6, 19, 42, 0.6);
  transition: transform 0.2s, box-shadow 0.2s;
}
.featured:hover { transform: translateY(-2px); box-shadow: 0 24px 48px -24px rgba(6, 19, 42, 0.7); }
/* On the night-blue page, an edge keeps it from melting into the background. */
@media (prefers-color-scheme: dark) {
  .featured { border: 1px solid #22385a; }
}
.featured-label {
  display: inline-block; margin-bottom: 16px; color: #8fc4ff; font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.featured time, .featured .number { color: #b4c6dd; }
.featured .topic { color: #fff; background: color-mix(in srgb, var(--topic, var(--blue)) 55%, transparent); }
.featured h2 { margin: 14px 0 10px; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.featured p { margin: 0; max-width: 60ch; color: #c7d7ec; font-size: 1.08rem; }
.featured-cta { display: inline-block; margin-top: 24px; font-weight: 650; }
.featured-cta::after { content: '→'; display: inline-block; margin-left: 6px; transition: transform 0.2s; }
.featured:hover .featured-cta::after { transform: translateX(4px); }

/* The timeline: each month a heading that stays at the top while its articles scroll by, each article a dot on a line. */
.month { margin-top: 40px; }
.month h2 {
  position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0; background: var(--page);
  color: var(--heading); font-size: 0.8rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.timeline { position: relative; margin: 0; padding: 8px 0 0 32px; list-style: none; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.timeline li { position: relative; }
.timeline li::before {
  content: ''; position: absolute; left: -31px; top: 27px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--page); border: 3px solid var(--topic, var(--blue)); box-sizing: border-box;
}
.timeline a {
  display: block; margin: 4px 0; padding: 16px 20px; border-radius: var(--radius); color: var(--text); text-decoration: none;
  transition: background 0.15s;
}
.timeline a:hover { background: var(--soft); }
.timeline h3 { margin: 8px 0 6px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--heading); text-wrap: balance; }
.timeline a:hover h3 { color: var(--blue); }
.timeline p { margin: 0; color: var(--muted); }

/* An article: the way back above it, its text in a column to read, the series beside it, the articles around below. */
main.blog-post {
  max-width: 1080px; padding-bottom: 96px;
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; column-gap: 72px;
  grid-template-areas: "crumb crumb" "post series" "nav nav";
}
.breadcrumb { grid-area: crumb; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 40px 0 0; font-size: 0.9rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; font-weight: 500; }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb a + a::before { content: '/'; margin-right: 8px; color: var(--line); }
.post { grid-area: post; max-width: 680px; padding: 24px 0 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; }
.post-meta .topic { text-decoration: none; }
.post-meta .topic:hover { background: color-mix(in srgb, var(--topic) 22%, transparent); }
.rank { color: var(--muted); font-size: 0.85rem; }
.post h1 { margin-top: 16px; }
.post .lead { margin: 20px 0 0; font-family: var(--serif); font-size: 1.3rem; line-height: 1.55; color: var(--text); }
.post-body { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-body p { margin: 0 0 1.3em; font-family: var(--serif); font-size: 1.18rem; line-height: 1.75; hanging-punctuation: first; }
.post-body strong { font-weight: 700; color: var(--heading); }
.post-body figure { margin: 2em 0; }
/* A screenshot as wide as the column, a phone's no taller than the screen, centred. */
.post-body img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 80vh; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft);
}
.post-body figcaption { margin-top: 10px; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }
.sources { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.sources h2 {
  margin: 0 0 12px; color: var(--muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
}
.sources ol { margin: 0; padding-left: 1.4em; color: var(--muted); font-size: 0.92rem; line-height: 1.55; }
.sources li { margin: 0 0 6px; padding-left: 4px; }
.sources a { font-weight: 600; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.read-more { margin: 36px 0 0; }
.read-more a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft);
  color: var(--heading); font-weight: 650; text-decoration: none; transition: border-color 0.15s;
}
.read-more a::after { content: '→'; color: var(--blue); font-size: 1.2rem; transition: transform 0.2s; }
.read-more a:hover { border-color: var(--blue); }
.read-more a:hover::after { transform: translateX(4px); }

/* The series beside the article: the closest articles on a short timeline, the article itself marked, sticking while it is read. */
.series { grid-area: series; align-self: start; position: sticky; top: 24px; margin-top: 40px; }
.series h2 {
  margin: 0 0 12px; color: var(--muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
}
.series-list { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.series-list::before { content: ''; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--line); }
.series-list li { position: relative; padding: 8px 0; font-size: 0.9rem; line-height: 1.35; }
.series-list li::before {
  content: ''; position: absolute; left: -22px; top: 13px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--page); border: 2px solid var(--line); box-sizing: border-box;
}
.series-list time { display: block; font-size: 0.75rem; }
.series-list a { display: block; color: var(--text); text-decoration: none; }
.series-list a:hover span { color: var(--blue); }
.series-list li[aria-current="page"] { color: var(--heading); font-weight: 700; }
.series-list li[aria-current="page"]::before { background: var(--blue); border-color: var(--blue); }
.series-all { display: inline-block; margin-top: 12px; font-size: 0.88rem; font-weight: 600; text-decoration: none; }
.series-all::after { content: ' →'; }

/* The articles before and after: two cards side by side, the newer on the right. */
.post-nav { grid-area: nav; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.post-nav a {
  display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none; transition: border-color 0.15s;
}
.post-nav a:hover { border-color: var(--blue); }
.post-nav .next { grid-column: 2; text-align: right; }
.neighbour-label { color: var(--blue); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.post-nav .prev .neighbour-label::before { content: '← '; }
.post-nav .next .neighbour-label::after { content: ' →'; }
.neighbour-title { color: var(--heading); font-size: 1.05rem; font-weight: 650; line-height: 1.35; }
.post-nav a:hover .neighbour-title { color: var(--blue); }

/* The about page: an article of its own, its parts under headings, signed at its foot. */
main.about-page { max-width: 760px; padding-top: 48px; padding-bottom: 96px; }
.about .eyebrow { margin: 0; }
.about .post-body h2 { margin: 1.8em 0 0.5em; color: var(--heading); font-size: 1.4rem; line-height: 1.25; letter-spacing: -0.01em; }
.about .post-body h2:first-child { margin-top: 0; }
.about .signature { margin-top: 2em; font-style: italic; }

/* Under a laptop's width, the series follows the article rather than standing beside it. */
@media (max-width: 960px) {
  main.blog-post { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumb" "post" "series" "nav"; }
  .series { position: static; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .blog-intro { padding-top: 32px; }
  .featured { padding: 24px 20px; border-radius: 16px; }
  .timeline { padding-left: 24px; }
  .timeline::before { left: 5px; }
  .timeline li::before { left: -24px; }
  .timeline a { padding: 14px 12px; }
  .post-body p { font-size: 1.1rem; }
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next { grid-column: 1; text-align: left; }
}

/* No movement for those who asked their device for less. */
@media (prefers-reduced-motion: reduce) {
  .featured, .featured-cta::after, .read-more a::after { transition: none; }
  .featured:hover { transform: none; }
}