/* ── Colors: light by default, dark follows the system ───── */
:root{
  --bg:      #ffffff;
  --text:    #24292f;
  --title:   #111418;
  --muted:   #6b7280;
  --line:    #e8e8e6;
  --link:    #1f6feb;
  --code-bg: #f3f4f6;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:      #14161a;
    --text:    #c9d1d9;
    --title:   #e8eaed;
    --muted:   #8b949e;
    --line:    #262b33;
    --link:    #6ea8fe;
    --code-bg: #21262d;
  }
}

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

html{
  color-scheme:light dark;
  -webkit-text-size-adjust:100%;
}

body{
  max-width:44rem;                 /* ≈ 700px, a comfortable reading width */
  margin:0 auto;
  padding:0 1.5rem 2.5rem;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
              "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* Keep the footer at the bottom of the window on short pages */
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
}
body > main{ flex:1 0 auto; }

a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--link); outline-offset:3px; border-radius:3px; }

code{
  background:var(--code-bg); border-radius:4px;
  padding:.1em .35em; font-size:.88em;
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap:break-word;        /* long URLs and identifiers wrap instead of overflowing narrow screens */
}

/* ── Header ─────────────────────────────────────────────── */
.head{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.5rem 1.5rem;
  padding:2.75rem 0 0;
}
.head__name{ font-size:1.35rem; font-weight:700; color:var(--title); letter-spacing:-.01em; }
.head__name:hover{ color:var(--link); }

.head__nav{ display:flex; gap:1.25rem; }
.head__nav a,
.head__lang{ color:var(--muted); font-size:.95rem; }
.head__nav a:hover,
.head__lang:hover{ color:var(--link); }

.inline-link{ color:var(--link); }
.inline-link:hover{ text-decoration:underline; }

.tagline{
  color:var(--muted); font-size:.98rem;
  margin:.4rem 0 0; padding-bottom:2.25rem;
  border-bottom:1px solid var(--line);
}

/* ── Tagline + social icons ─────────────────────────────── */
.intro{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:.35rem 1.5rem;
  margin:.4rem 0 0; padding-bottom:2.25rem;
  border-bottom:1px solid var(--line);
}
.intro .tagline{ margin:0; padding:0; border:0; }

.social{ display:flex; gap:.9rem; flex:none; }
.social a{ display:block; color:var(--muted); line-height:0; }
.social a:hover{ color:var(--link); }
.social svg{ width:17px; height:17px; fill:currentColor; display:block; }

/* ── Post list ──────────────────────────────────────────── */
.posts{ list-style:none; margin:0; padding:0; }

.post{ padding:2.5rem 0; border-bottom:1px solid var(--line); }
.post:last-child{ border-bottom:0; }

.post__title{
  margin:0 0 .35rem;
  font-size:1.4rem; font-weight:600; line-height:1.35;
  letter-spacing:-.015em; color:var(--title);
}
/* Clickable titles use the link color so they read as links; underline on hover */
.post__title a{ color:var(--link); }
.post__title a:hover{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }

.post__meta{ margin:0 0 .7rem; font-size:.85rem; color:var(--muted); }

.post__summary{ margin:0; color:var(--text); }

/* ── Footer ─────────────────────────────────────────────── */
.foot{
  margin-top:3rem; padding-top:1.75rem;
  border-top:1px solid var(--line);
  font-size:.85rem; color:var(--muted);
}
/* The feed link would be invisible otherwise: a{color:inherit} makes it
   look like the text around it. A faint rule marks it without shouting. */
.foot a{ border-bottom:1px solid var(--line); }
.foot a:hover{ color:var(--link); border-bottom-color:var(--link); }

@media (max-width:600px){
  .head{ padding-top:2rem; }
  .post{ padding:2rem 0; }
  .post__title{ font-size:1.25rem; }
}

/* ── Series: the list of parts under a series ───────────── */
.post__badge{
  margin-left:.55rem; padding:.1rem .45rem;
  border:1px solid var(--line); border-radius:3px;
  font-size:.76rem; color:var(--muted); white-space:nowrap;
}
.post__badge:first-child{ margin-left:0; }   /* no left margin when there is no date before it */

.parts{ list-style:none; margin:.9rem 0 0; padding:0; border-left:2px solid var(--line); }
.parts li{ counter-increment:part; }
.parts{ counter-reset:part; }
.parts a{
  display:flex; align-items:baseline; gap:.6rem;
  padding:.34rem 0 .34rem .9rem;
  font-size:.94rem; color:var(--muted);
}
.parts a::before{
  content:counter(part); flex:none;
  font-variant-numeric:tabular-nums; font-size:.8rem; opacity:.65;
}
.parts a span{ color:var(--link); }            /* part titles are links, so they get the link color; the number and reading time stay grey */
.parts a:hover span{ text-decoration:underline; text-underline-offset:.2em; text-decoration-thickness:1px; }
.parts a em{ margin-left:auto; font-style:normal; font-size:.8rem; opacity:.6; white-space:nowrap; }