@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-wght-italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: block;
}

:root { --text: #222; --muted: #6b6862; --rule: #dedcd6; --bg: #fafaf7; color-scheme: light; }
:root[data-theme="dark"] { --text: #e6e6e6; --muted: #9a9a9a; --rule: #333; --bg: #111; color-scheme: dark; }

* { box-sizing: border-box; }

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

body {
  margin: 0 auto;
  max-width: 40rem;
  padding: 3rem 1.25rem 5rem;
  font: 400 1.15rem/1.6 "EB Garamond", Garamond, "Times New Roman", serif;
  font-kerning: normal;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

nav {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: 2rem;
  row-gap: 0.5rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
nav a { text-decoration: none; }
nav a:hover, nav a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }

.theme-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
  color: var(--text);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0 0.4rem;
  margin: 0 -0.4rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Icon drawn as an SVG mask so it doesn't depend on platform glyph fallback (iOS lacks ☾/☀ in EB Garamond) */
.theme-toggle::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  vertical-align: -0.08em;
  background-color: currentColor;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.18 19.97A9 9 0 1 1 16.18 4.03A8 8 0 1 0 16.18 19.97z'/%3E%3C/svg%3E");
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
:root[data-theme="dark"] .theme-toggle::before {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1.5v2.5M12 20v2.5M1.5 12h2.5M20 12h2.5M4.6 4.6l1.8 1.8M17.6 17.6l1.8 1.8M4.6 19.4l1.8-1.8M17.6 6.4l1.8-1.8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.theme-toggle:hover { color: var(--muted); }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--muted); }

h1 { font-size: 1.75rem; font-weight: 500; line-height: 1.25; margin: 0 0 0.25rem; }
h2 { font-size: 1.35rem; font-weight: 500; margin: 2.5rem 0 0.5rem; }
h3, h4 { font-size: 1.15rem; font-weight: 600; margin: 2rem 0 0.5rem; }

p, ul, ol, blockquote, figure, table, pre { margin: 0 0 1.1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.3rem; }

blockquote { margin-left: 0; padding-left: 1.25rem; border-left: 2px solid var(--rule); color: var(--muted); }
img { max-width: 100%; height: auto; display: block; margin: 1.5rem auto; }
figure { margin: 1.5rem 0; }
figcaption { font-size: 0.9rem; color: var(--muted); text-align: center; }
iframe { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8em; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--rule); vertical-align: top; }

.date { color: var(--muted); font-size: 0.95rem; font-style: italic; margin-bottom: 2rem; }

.post-list { list-style: none; padding: 0; }
.post-list li { display: flex; align-items: baseline; gap: 1.5rem; margin-bottom: 0.6rem; }
.post-list time { flex: 0 0 6.5rem; color: var(--muted); font-size: 0.95rem; font-variant-numeric: lining-nums tabular-nums; }

footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.95rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 1.5rem; }

@media (max-width: 30rem) {
  body { padding: 1.75rem 1.1rem 4rem; font-size: 1.05rem; line-height: 1.55; }
  nav { column-gap: 1rem; font-size: 1rem; letter-spacing: 0.01em; padding-bottom: 1.25rem; margin-bottom: 2rem; }
  nav a[aria-current] { text-underline-offset: 4px; }
  h1 { font-size: 1.55rem; }
  .post-list li { gap: 0.9rem; margin-bottom: 0.65rem; line-height: 1.35; }
  .post-list time { flex-basis: 5rem; font-size: 0.85rem; }
}


/* 信 home mark, inlined (same shape as favicon.svg) so it paints with the page */
nav > a:first-child::before {
  content: "";
  display: inline-block;
  width: 1.75em;
  height: 1.75em;
  margin-right: 1.6em;
  vertical-align: -0.5em;
  background-color: currentColor;
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 872 872'%3E%3Cpath fill-rule='evenodd' d='M458.2 787.3C445.5 752.7 436.1 688.4 432.4 612.4L431.7 598.4L440.6 597.2C524.4 585.6 598.8 579.6 687 577 C706 576.5 728.8 576 737.6 576 L753.7 576 L755.4 586.7C762.8 634.2 768.5 709.8 767.8 750.5L767.5 768.5L752.5 770.7C672.6 782.6 598.9 788.4 477.4 792.5L460.3 793.1L458.2 787.3ZM611 724.4C660.8 721.3 701.6 718.6 701.8 718.5C701.9 718.4 699.4 700.5 696.3 678.7L690.5 639 L687 639 C683 638.9 504.6 648.2 504.3 648.4C504 648.6 517 727 517.5 728.8C517.8 729.4 518.5 730 519.2 730 C519.9 730 561.2 727.5 611 724.4ZM187.7 624.8C170.6 555.2 156.9 485.4 146.9 417 C145.2 405.2 143.7 395.4 143.5 395.2C143.3 395 132.2 397.6 118.9 400.9C105.5 404.2 86.6 408.5 77 410.5C56.6 414.7 58.7 415.5 54 401.6C50.5 390.9 48.4 380.8 47.5 369 L46.8 360.5L51.7 358.1C130 319.8 214.5 293.1 294 281.5C316.8 278.2 318.3 278.2 320 281.8C325.7 294.1 330.2 313.5 330.4 326.8L330.5 336.2L315.5 341.6C296.9 348.3 246.9 365.2 225.4 372 L209.3 377 L211.1 384.8C229 459 244 543.6 253.5 623.5C254.9 635 256 645 256 645.6C256 648.6 217.7 656 202.2 656 L195.4 656 L187.7 624.8ZM597.5 519.3C585.1 518.7 558.9 516.9 542 515.5C532.4 514.7 514.8 513.3 503 512.5C480 510.8 455.5 508.2 432.6 505 C424.9 503.9 418.4 503 418.3 503 C416.3 503 421.9 449.7 424.6 442.6C424.9 441.8 426.9 441.5 430.3 441.7C433.2 441.9 448.6 442.7 464.5 443.5C525.5 446.8 656.7 457.4 658.5 459.2C658.9 459.5 657.5 470.7 654.5 491.9C653.7 497.6 652.1 506.3 650.9 511.1L648.8 520 L626.2 519.8C613.7 519.7 600.8 519.5 597.5 519.3ZM518.3 387 C509.5 386.6 498.4 385.7 493.6 385 L485.1 383.8L483.3 378.7C481.8 374.3 481.5 370.3 481.6 352.5C481.7 340.9 482.1 330.2 482.7 328.5C483.9 324.9 485.1 324.6 506 322.8C523.4 321.4 619.8 321.2 680.2 322.5L715.8 323.2L717.4 331.9C719.8 345.9 720.2 353.7 719 368 C718.4 375.4 717.8 381.5 717.6 381.7C716.9 382.4 681.5 385 659.5 385.9C626.7 387.3 538.1 388 518.3 387ZM729 260.9C610.1 258.5 495.6 251.2 369.6 238.3L352.7 236.5L353.3 219.5C353.7 210.2 354.4 199.3 355 195.5C356 188.3 359.1 171.7 359.5 171.2C359.9 170.7 512.7 177.7 549 180 C556.9 180.4 563.7 180.7 564.1 180.5C564.4 180.2 565 173.4 565.3 165.3C566.3 142.2 570.4 109.7 575 88.3L576.1 83.1L583.3 81.5C601 77.5 618.1 77.5 634.4 81.6L640.7 83.2L641.9 100.8C644.1 133.9 646 168.5 646 176.8C646 182.5 646.4 185.2 647.2 185.5C647.9 185.7 669.9 187.3 696 189 C736.7 191.7 785.8 195.2 816.9 197.6L825.3 198.3L824.7 209 C823.9 221.9 821.6 238.1 818.7 251.6L816.5 261.5L791 261.6C777 261.6 749.1 261.3 729 260.9Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}