/* ---------- Theme tokens (light/dark) ---------- */
:root {
    --bg: #ffffff;
    --fg: #111111;
    --muted: #666666;
    --link: #0b57d0;
    --rule: #e6e6ea;      /* header hairline */
    --maxw: 72ch;
    --rule-fade: 48px;      /* how far from each edge the line fades */
    --rule-thickness: 2px;  /* line thickness */
    --rule-top-gap: .15rem; /* gap between header row and top divider */
    --rule-bottom-gap: .35rem; /* gap between bottom divider and © */
    /* layout dials */
    --section-gap: 2rem;     /* space between sections (Intro ↔ Topics ↔ Latest) */
    --label-gap: .5rem;      /* space between label and its content */
    /* tag dials */
    --tag-font-size: 0.85rem; /* make smaller/larger here */
    --tag-row-gap: .5rem;     /* vertical space between tag rows */
    --tag-col-gap: 1rem;      /* horizontal space between tags */
  }
  :root.dark {
    --bg: #0e0f12;
    --fg: #e9eaee;
    --muted: #a1a1aa;
    --link: #8ab4f8;
    --rule: #2a2a30;
  }

  /* shared section spacing */
  .section:first-of-type > .label {
    margin-bottom: .2rem; /* tighter just for Intro */
  }
  .section { margin-top: var(--section-gap); }
  .section:first-of-type { margin-top: 0; } /* Intro at the top has no extra top gap */
  .section > .label { display: block; margin-bottom: var(--label-gap); }
  
  /* ---------- Fonts ---------- */
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
  
  /* ---------- Base ---------- */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  html { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
  body {
    line-height: 1.65;
    background: var(--bg);
    color: var(--fg);
  }
  
  .container { max-width: var(--maxw); margin: 2rem auto; padding: 0 1rem; }
  
  a { color: var(--link); text-decoration: none; transition: color 120ms ease; }
  a:hover { color: color-mix(in oklab, var(--link), #000 10%); }
  
  /* Headings & text */
  h1, h2, h3 { line-height: 1.25; margin: 1.5rem 0 .5rem; }
    /* Tighten the space between a section label and the next heading */
  .label + h1,
  .label + h2,
  .label + h3 {
    margin-top: .85rem;   /* dial this to taste */
  }
  p { margin: .9rem 0; }
  ul { padding-left: 1.2rem; }
  
  /* ---------- Header ---------- */
  .site-header, .site-footer {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem;
  }
  .site-footer {
    margin-top: 0.35rem;      /* small breathing room */
  }
  .brand { color: var(--fg); text-decoration: none; font-weight: 700; }
  
  /* Calm nav */
  .nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;   /* was 1rem; try 1.5–2rem for calmer spacing */
  }  
    .nav a {
      color: var(--fg);
      text-decoration: none;
      font-size: .85rem;   /* smaller */
      font-weight: 300;    /* no bold */
      opacity: .85;        /* calmer */
      transition: opacity 120ms ease, text-decoration-color 120ms ease;
    }
    .nav a:hover { opacity: 1; text-decoration: underline; }  
  
  /* Base divider with edge fade; width follows .container */
  .rule {
    height: var(--rule-thickness);
    background: var(--rule);
    /* fade toward edges inside the container */
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0,0,0,.35) var(--rule-fade),
      rgba(0,0,0,.35) calc(100% - var(--rule-fade)),
      transparent 100%
    );
            mask-image: linear-gradient(
      to right,
      transparent 0,
      rgba(0,0,0,.35) var(--rule-fade),
      rgba(0,0,0,.35) calc(100% - var(--rule-fade)),
      transparent 100%
    );
  }

  .rule--top    { margin-top: var(--rule-top-gap); }
  .rule--bottom { margin-top: 1rem; margin-bottom: var(--rule-bottom-gap); }

  /* tighten header/footer block spacing */
  .site-header { margin-bottom: 0; }
  .site-footer { margin-top: 0; }

  /* optional: if header/footer feel tall, trim their vertical padding */
  .site-header.container,
  .site-footer.container { padding-top: .25rem; padding-bottom: .25rem; }

  
  /* Small caps section labels (Intro, Topics, Latest) */
  .label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  
  /* Dates (mono, YYYY-MM) */
  .date {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px; color: var(--muted); width: 5.2rem; /* fits YYYY-MM */
  }
  
  /* Calm tag links (#topic) */
  .tags {
    display: flex; flex-wrap: wrap;
    row-gap: var(--tag-row-gap);
    column-gap: var(--tag-col-gap);
  }
  .tag {
    font-size: var(--tag-font-size);
    color: #6b7280;
    text-decoration: none;
  }
  .tag:hover { color: #1f2937; }
  .dark .tag { color: #9ca3af; }
  .dark .tag:hover { color: #e5e7eb; }
  
  /* Lists used on home/articles */
  .list {
    list-style: none;
    padding: 0;
    margin: .25rem 0 0;
  }
  .list li {
    padding: .15rem 0;      /* balanced spacing */
    margin: 0;
    border: 0;              /* remove dividers */
  }
  .list li + li {
    margin-top: .1rem;      /* gentle gap only */
  }
  .list .date {
    width: 5rem;
    color: var(--muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: .75rem;
    display: inline-block;
  }

  /* Links in lists: calm, smaller, consistent with tags */
  .list a {
    font-size: .95rem;        /* slightly smaller than body */
    font-weight: 400;         /* normal weight */
    color: var(--muted);      /* same tone as tags */
    text-decoration: none;
    transition: color .15s ease;
  }
  .list a:hover {
    color: var(--fg);         /* darken on hover for clarity */
    text-decoration: underline;
  }

  .row {
    display: flex; align-items: baseline; gap: .75rem;
    padding: .5rem 0; border-bottom: 1px solid color-mix(in oklab, var(--rule), transparent 30%);
  }
  .row:last-child { border-bottom: 0; }
  
  /* Footer */
  .site-footer p { color: var(--muted); font-size: .9rem; }

  /* Toggle (calm, with icon) */
  #theme-toggle {
    border: 1px solid var(--rule);
    background: transparent;
    color: var(--fg);
    width: 2.5rem;               /* track width */
    height: 1.5rem;              /* track height */
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    padding: 0;
    opacity: .85;
    transition: opacity 120ms ease, border-color 120ms ease;
    font-size: .65rem;
    line-height: 1;
  }
  #theme-toggle:hover { opacity: 1; }

  #theme-toggle .knob {
    position: absolute;
    top: 2px; left: 2px;         /* start x offset */
    width: 1.1rem; height: 1.1rem;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem;
    /* 👇 start position (explicit) + smooth motion */
    transform: translateX(0);
    transition: transform 180ms ease, background 180ms ease;
  }
  #theme-toggle .icon { pointer-events: none; color: var(--muted); width: 12px; height: 12px; }

  /* 👇 computed end position: trackWidth - knobWidth - 2px left - 2px right */
  .dark #theme-toggle .knob {
    background: #6b7280;
    transform: translateX(calc(2.5rem - 1.1rem - 4px));
  }
  .dark #theme-toggle .icon { color: var(--fg); }

  /* Icon swap: show sun in light, moon in dark */
  #theme-toggle .icon--sun { display: block; }
  #theme-toggle .icon--moon { display: none; }
  .dark #theme-toggle .icon--sun { display: none; }
  .dark #theme-toggle .icon--moon { display: block; }