feat: 笔记独立窗口改为多标签，AI 多轮会话与 TXT/MD 阅读

笔记独立窗口从「一窗一条」改为单窗口多标签，与阅读器一致：标签集在主进程侧为权威，notes:tabsChanged 只能收窄不能新增，否则渲染层可以谎报持有某条笔记来越权读取。存活编辑器上限 3 并 LRU 回收，回收前序列化未保存内容。笔记没有自动保存，关标签与关窗都做二次确认，取消关闭必须回报主进程复位 closePending，否则窗口再也关不掉而看门狗仍会销毁未保存内容。 AI 助手支持多轮会话：会话独立落盘，先取历史再写提问，历史只发文本不重发图像，失败与取消都保留已流出的残片。新增 TXT/MD 内置阅读（转内存 EPUB 复用 epub 渲染管线），补上渲染层遗漏的可阅读格式白名单：主进程本就放行 txt/md，但渲染层另有两份白名单漏了，表现为卡片上没有「阅读」按钮。书库卡片封面改用 contain 完整显示，留白由同图模糊层垫底，修正不同比例封面被裁切程度不一导致的观感不一致；多选复选框去掉衬底色块，恢复原生外观。其余：PDF 画质档位与画布尺寸钳制、原子写入、笔记资源托管、 GitHub Pages 站点。
2026-08-04 16:19:06 +08:00
parent 522b0f74a5
commit 0fd7c59e08
68 changed files with 11721 additions and 301 deletions
@@ -0,0 +1,102 @@
+# 一次性资产生成脚本：把 docs/screenshots 与 icons/dist 的原图缩放并转码到 site/assets。
+# 站点本身零构建，这个脚本只在替换截图时手动重跑。
+param(
+  [string]$Repo = (Resolve-Path (Join-Path $PSScriptRoot '..\..')).Path
+)
+
+Add-Type -AssemblyName System.Drawing
+
+$outDir = $PSScriptRoot
+$srcShots = Join-Path $Repo 'docs\screenshots'
+$srcIcons = Join-Path $Repo 'icons\dist'
+
+function Save-Jpeg {
+  param([System.Drawing.Bitmap]$Bitmap, [string]$Path, [int]$Quality = 88)
+  $codec = [System.Drawing.Imaging.ImageCodecInfo]::GetImageEncoders() | Where-Object { $_.MimeType -eq 'image/jpeg' }
+  $params = New-Object System.Drawing.Imaging.EncoderParameters 1
+  $params.Param[0] = New-Object System.Drawing.Imaging.EncoderParameter ([System.Drawing.Imaging.Encoder]::Quality), ([int]$Quality)
+  $Bitmap.Save($Path, $codec, $params)
+  $params.Dispose()
+}
+
+function Resize-Shot {
+  param([string]$In, [string]$Out, [int]$MaxWidth = 1600, [int]$Quality = 88)
+  $src = [System.Drawing.Image]::FromFile($In)
+  try {
+    $scale = [Math]::Min(1.0, $MaxWidth / $src.Width)
+    $w = [int][Math]::Round($src.Width * $scale)
+    $h = [int][Math]::Round($src.Height * $scale)
+    $bmp = New-Object System.Drawing.Bitmap $w, $h
+    try {
+      $g = [System.Drawing.Graphics]::FromImage($bmp)
+      $g.InterpolationMode = [System.Drawing.Drawing2D.InterpolationMode]::HighQualityBicubic
+      $g.PixelOffsetMode = [System.Drawing.Drawing2D.PixelOffsetMode]::HighQuality
+      $g.SmoothingMode = [System.Drawing.Drawing2D.SmoothingMode]::HighQuality
+      $g.DrawImage($src, 0, 0, $w, $h)
+      $g.Dispose()
+      Save-Jpeg -Bitmap $bmp -Path $Out -Quality $Quality
+      "{0}`t{1}x{2}`t{3} KB" -f (Split-Path $Out -Leaf), $w, $h, [Math]::Round((Get-Item $Out).Length / 1KB)
+    } finally { $bmp.Dispose() }
+  } finally { $src.Dispose() }
+}
+
+$map = @(
+  @{ In = 'PeopleLib_bAecy2Izab.png'; Out = 'shot-library.jpg' }
+  @{ In = 'PeopleLib_34BtvLsqDE.png'; Out = 'shot-search.jpg' }
+  @{ In = 'PeopleLib_ScQMUA2D24.png'; Out = 'shot-reader.jpg' }
+  @{ In = 'PeopleLib_2N6zVpCFBA.png'; Out = 'shot-ai.jpg' }
+  @{ In = 'ai-send-confirmation.png'; Out = 'shot-ai-confirm.jpg' }
+  @{ In = 'pdf-annotations.png'; Out = 'shot-annotations.jpg' }
+)
+
+foreach ($m in $map) {
+  $in = Join-Path $srcShots $m.In
+  if (Test-Path $in) { Resize-Shot -In $in -Out (Join-Path $outDir $m.Out) }
+  else { Write-Warning "缺少源图 $in" }
+}
+
+foreach ($v in @('light', 'dark')) {
+  foreach ($size in @(32, 256, 512)) {
+    $in = Join-Path $srcIcons "$v\icon-$size.png"
+    if (Test-Path $in) { Copy-Item $in (Join-Path $outDir "icon-$v-$size.png") -Force }
+  }
+}
+
+# Open Graph 封面：深色底 + 应用图标 + 书库截图，1200x630。
+$og = New-Object System.Drawing.Bitmap 1200, 630
+try {
+  $g = [System.Drawing.Graphics]::FromImage($og)
+  $g.InterpolationMode = [System.Drawing.Drawing2D.InterpolationMode]::HighQualityBicubic
+  $g.SmoothingMode = [System.Drawing.Drawing2D.SmoothingMode]::HighQuality
+  $g.TextRenderingHint = [System.Drawing.Text.TextRenderingHint]::ClearTypeGridFit
+  $g.Clear([System.Drawing.ColorTranslator]::FromHtml('#12141a'))
+
+  $shot = Join-Path $outDir 'shot-library.jpg'
+  if (Test-Path $shot) {
+    $img = [System.Drawing.Image]::FromFile($shot)
+    try {
+      $targetW = 660
+      $scale = $targetW / $img.Width
+      $h = [int][Math]::Round($img.Height * $scale)
+      $g.DrawImage($img, 500, [int]((630 - $h) / 2), $targetW, $h)
+    } finally { $img.Dispose() }
+  }
+
+  $iconPath = Join-Path $outDir 'icon-dark-256.png'
+  if (Test-Path $iconPath) {
+    $icon = [System.Drawing.Image]::FromFile($iconPath)
+    try { $g.DrawImage($icon, 72, 132, 112, 112) } finally { $icon.Dispose() }
+  }
+
+  $white = New-Object System.Drawing.SolidBrush ([System.Drawing.ColorTranslator]::FromHtml('#f4f5f7'))
+  $muted = New-Object System.Drawing.SolidBrush ([System.Drawing.ColorTranslator]::FromHtml('#a8aeba'))
+  $fTitle = New-Object System.Drawing.Font 'Microsoft YaHei', 44, ([System.Drawing.FontStyle]::Bold)
+  $fSub = New-Object System.Drawing.Font 'Microsoft YaHei', 19
+  $fFoot = New-Object System.Drawing.Font 'Microsoft YaHei', 15
+  $g.DrawString('PeopleLib', $fTitle, $white, 68, 268)
+  $g.DrawString("多源文献检索`n本地书库与内置阅读器", $fSub, $muted, 72, 348)
+  $g.DrawString('reader.mesalogo.com', $fFoot, $muted, 72, 470)
+  $g.Dispose()
+  Save-Jpeg -Bitmap $og -Path (Join-Path $outDir 'og-cover.jpg') -Quality 86
+  "og-cover.jpg`t1200x630`t{0} KB" -f [Math]::Round((Get-Item (Join-Path $outDir 'og-cover.jpg')).Length / 1KB)
+} finally { $og.Dispose() }
@@ -0,0 +1,722 @@
+:root {
+  color-scheme: light dark;
+
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
+    "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans CJK SC",
+    sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
+    "DejaVu Sans Mono", monospace;
+
+  --bg: #fbfaf7;
+  --bg-elevated: #ffffff;
+  --bg-subtle: #f2f0eb;
+  --bg-code: #f0eee8;
+  --text: #1b1c20;
+  --text-muted: #55585f;
+  --text-faint: #6d7078;
+  --border: #ded9cf;
+  --border-strong: #c6c0b3;
+  --accent: #8a6110;
+  --accent-hover: #6d4b0b;
+  --accent-contrast: #ffffff;
+  --accent-soft: #f6eeda;
+  --focus: #1b5ea8;
+  --shadow: 0 1px 2px rgba(27, 28, 32, .05), 0 8px 24px rgba(27, 28, 32, .07);
+  --radius: 12px;
+  --measure: 68ch;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #12141a;
+    --bg-elevated: #1a1d24;
+    --bg-subtle: #1f232b;
+    --bg-code: #22262f;
+    --text: #f0f1f4;
+    --text-muted: #b3b8c4;
+    --text-faint: #9aa0ad;
+    --border: #2e333d;
+    --border-strong: #414753;
+    --accent: #e0b256;
+    --accent-hover: #f0c672;
+    --accent-contrast: #17181c;
+    --accent-soft: #2a2519;
+    --focus: #7ab6f0;
+    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .34);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: 17px;
+  line-height: 1.75;
+  text-rendering: optimizeLegibility;
+}
+
+h1, h2, h3, h4 {
+  line-height: 1.3;
+  font-weight: 650;
+  letter-spacing: .01em;
+  margin: 0 0 .6em;
+  text-wrap: balance;
+}
+
+h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
+h2 { font-size: clamp(1.45rem, 1.2rem + 1.1vw, 1.95rem); }
+h3 { font-size: 1.16rem; }
+
+p, ul, ol, dl, table, figure, pre {
+  margin: 0 0 1.1em;
+}
+
+a {
+  color: var(--accent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+a:hover { color: var(--accent-hover); }
+
+:focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
+code, kbd, samp, pre {
+  font-family: var(--font-mono);
+  font-size: .92em;
+}
+
+code:not(pre code) {
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: .1em .38em;
+  word-break: break-word;
+}
+
+pre {
+  background: var(--bg-code);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: .95rem 1.05rem;
+  overflow-x: auto;
+  line-height: 1.6;
+}
+
+kbd {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-strong);
+  border-bottom-width: 2px;
+  border-radius: 5px;
+  padding: .05em .4em;
+}
+
+img { max-width: 100%; height: auto; }
+
+hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: 2.5rem 0;
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 100;
+  background: var(--bg-elevated);
+  color: var(--text);
+  border: 1px solid var(--border-strong);
+  padding: .6rem 1rem;
+  border-radius: 0 0 var(--radius) 0;
+}
+
+.skip-link:focus {
+  left: 0;
+}
+
+.wrap {
+  width: 100%;
+  max-width: 1080px;
+  margin-inline: auto;
+  padding-inline: clamp(1rem, 4vw, 2rem);
+}
+
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: var(--bg);
+  background: color-mix(in srgb, var(--bg) 88%, transparent);
+  backdrop-filter: saturate(1.4) blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+
+@supports not (backdrop-filter: blur(2px)) {
+  .site-header { background: var(--bg); }
+}
+
+.site-header .wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: .5rem 1.5rem;
+  padding-block: .7rem;
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: .55rem;
+  font-weight: 700;
+  font-size: 1.06rem;
+  color: var(--text);
+  text-decoration: none;
+  letter-spacing: .01em;
+}
+
+.brand img {
+  width: 30px;
+  height: 30px;
+  border-radius: 7px;
+}
+
+.brand .brand-light { display: block; }
+.brand .brand-dark { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  .brand .brand-light { display: none; }
+  .brand .brand-dark { display: block; }
+}
+
+.site-nav {
+  margin-inline-start: auto;
+}
+
+.site-nav ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .2rem .35rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.site-nav a {
+  display: block;
+  padding: .35rem .68rem;
+  border-radius: 8px;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: .95rem;
+}
+
+.site-nav a:hover {
+  background: var(--bg-subtle);
+  color: var(--text);
+}
+
+.site-nav a[aria-current="page"] {
+  color: var(--text);
+  background: var(--bg-subtle);
+  font-weight: 600;
+}
+
+main { display: block; }
+
+section {
+  padding-block: clamp(2.6rem, 5vw, 4.4rem);
+}
+
+section + section {
+  border-top: 1px solid var(--border);
+}
+
+.section-head {
+  max-width: var(--measure);
+  margin-bottom: 2rem;
+}
+
+.section-head p {
+  color: var(--text-muted);
+  margin-bottom: 0;
+}
+
+.eyebrow {
+  display: block;
+  font-size: .8rem;
+  font-weight: 700;
+  letter-spacing: .16em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: .7rem;
+}
+
+.hero {
+  padding-block: clamp(2.6rem, 6vw, 5rem);
+}
+
+.hero-grid {
+  display: grid;
+  gap: clamp(2rem, 4vw, 3.2rem);
+  align-items: center;
+  grid-template-columns: minmax(0, 1fr);
+}
+
+@media (min-width: 900px) {
+  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
+}
+
+.hero p.lede {
+  font-size: 1.12rem;
+  color: var(--text-muted);
+  max-width: 46ch;
+}
+
+.hero h1 { margin-bottom: .5em; }
+
+.tagline {
+  display: inline-flex;
+  align-items: center;
+  gap: .5rem;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid var(--border-strong);
+  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
+  border-radius: 999px;
+  padding: .22rem .8rem;
+  font-size: .86rem;
+  font-weight: 600;
+  margin-bottom: 1.4rem;
+}
+
+.btn-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .7rem;
+  margin-bottom: 1rem;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: .45rem;
+  padding: .62rem 1.25rem;
+  border-radius: 10px;
+  border: 1px solid transparent;
+  font-size: 1rem;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
+}
+
+.btn-primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.btn-primary:hover {
+  background: var(--accent-hover);
+  color: var(--accent-contrast);
+}
+
+.btn-secondary {
+  background: var(--bg-elevated);
+  border-color: var(--border-strong);
+  color: var(--text);
+}
+
+.btn-secondary:hover {
+  background: var(--bg-subtle);
+  color: var(--text);
+  border-color: var(--text-faint);
+}
+
+.btn-row-center { justify-content: center; }
+
+.hint {
+  color: var(--text-faint);
+  font-size: .9rem;
+  margin: 0;
+}
+
+.shot {
+  margin: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+
+.shot img {
+  display: block;
+  width: 100%;
+  background: var(--bg-subtle);
+}
+
+.shot figcaption {
+  padding: .65rem .9rem;
+  font-size: .88rem;
+  color: var(--text-faint);
+  border-top: 1px solid var(--border);
+}
+
+.shot-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 220px;
+  padding: 1.5rem;
+  text-align: center;
+  color: var(--text-faint);
+  font-size: .92rem;
+  background:
+    repeating-linear-gradient(135deg,
+      var(--bg-subtle) 0 12px,
+      var(--bg-elevated) 12px 24px);
+}
+
+.grid {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
+}
+
+.card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem 1.35rem;
+}
+
+.card h3 {
+  margin-bottom: .45em;
+}
+
+.card p:last-child,
+.card ul:last-child {
+  margin-bottom: 0;
+}
+
+.card ul {
+  padding-inline-start: 1.15rem;
+  color: var(--text-muted);
+}
+
+.card .card-meta {
+  display: block;
+  font-size: .82rem;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: .5rem;
+  font-weight: 700;
+}
+
+.prose {
+  max-width: var(--measure);
+}
+
+.prose ul, .prose ol {
+  padding-inline-start: 1.3rem;
+}
+
+.prose li + li {
+  margin-top: .35em;
+}
+
+.prose li > strong:first-child {
+  color: var(--text);
+}
+
+.callout {
+  border: 1px solid var(--border-strong);
+  border-inline-start: 4px solid var(--accent);
+  border-radius: 0 var(--radius) var(--radius) 0;
+  background: var(--bg-elevated);
+  padding: 1rem 1.2rem;
+  margin: 0 0 1.4rem;
+}
+
+.callout > :last-child { margin-bottom: 0; }
+
+.callout h3 {
+  font-size: 1.02rem;
+  margin-bottom: .35em;
+}
+
+.table-scroll {
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0;
+  font-size: .96rem;
+}
+
+caption {
+  caption-side: top;
+  text-align: start;
+  padding: .8rem 1rem 0;
+  color: var(--text-faint);
+  font-size: .9rem;
+}
+
+th, td {
+  text-align: start;
+  padding: .62rem .9rem;
+  border-bottom: 1px solid var(--border);
+  vertical-align: top;
+}
+
+thead th {
+  background: var(--bg-subtle);
+  font-size: .88rem;
+  letter-spacing: .04em;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.yes { color: var(--accent); font-weight: 700; }
+.no { color: var(--text-faint); }
+
+.steps {
+  counter-reset: step;
+  list-style: none;
+  padding: 0;
+  max-width: var(--measure);
+}
+
+.steps > li {
+  counter-increment: step;
+  position: relative;
+  padding-inline-start: 2.6rem;
+  margin-bottom: 1.1rem;
+}
+
+.steps > li::before {
+  content: counter(step);
+  position: absolute;
+  inset-inline-start: 0;
+  top: .18em;
+  width: 1.8rem;
+  height: 1.8rem;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--accent-soft);
+  border: 1px solid var(--border-strong);
+  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
+  color: var(--accent);
+  font-size: .9rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.steps > li > :last-child { margin-bottom: 0; }
+
+.faq {
+  max-width: var(--measure);
+}
+
+.faq > h2 {
+  font-size: .84rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin: 2rem 0 .8rem;
+  padding-bottom: .4rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.faq > h2:first-child { margin-top: 0; }
+
+.faq details {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+  padding: 0 1.1rem;
+  margin-bottom: .7rem;
+}
+
+.faq summary {
+  cursor: pointer;
+  font-weight: 620;
+  padding: .85rem 0;
+  list-style: none;
+  display: flex;
+  gap: .6rem;
+  align-items: baseline;
+}
+
+.faq summary::-webkit-details-marker { display: none; }
+
+.faq summary::before {
+  content: "＋";
+  color: var(--accent);
+  font-weight: 700;
+  flex: none;
+}
+
+.faq details[open] summary::before { content: "－"; }
+
+.faq details[open] summary {
+  border-bottom: 1px solid var(--border);
+}
+
+.faq .faq-body {
+  padding: .9rem 0 .3rem 1.5rem;
+}
+
+.faq .faq-body > :last-child { margin-bottom: 0; }
+
+.gallery {
+  display: grid;
+  gap: 1.1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
+}
+
+.kv {
+  display: grid;
+  gap: .1rem 1.2rem;
+  margin: 0 0 1.2rem;
+}
+
+@media (min-width: 620px) {
+  .kv { grid-template-columns: max-content minmax(0, 1fr); }
+}
+
+.kv dt {
+  font-weight: 650;
+  color: var(--text);
+}
+
+.kv dd {
+  margin: 0 0 .55rem;
+  color: var(--text-muted);
+}
+
+.pill-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .45rem;
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.2rem;
+}
+
+.pill-list li {
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  border-radius: 999px;
+  padding: .2rem .78rem;
+  font-size: .9rem;
+  color: var(--text-muted);
+}
+
+.cta {
+  background: var(--bg-subtle);
+}
+
+.cta .wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1.2rem;
+}
+
+.cta h2 { margin-bottom: .25em; }
+.cta p { margin-bottom: 0; color: var(--text-muted); }
+.cta .btn-row { margin-bottom: 0; }
+
+.site-footer {
+  border-top: 1px solid var(--border);
+  background: var(--bg);
+  padding-block: 2.2rem;
+  color: var(--text-faint);
+  font-size: .92rem;
+}
+
+.site-footer .wrap {
+  display: grid;
+  gap: 1.4rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
+}
+
+.site-footer h2 {
+  font-size: .82rem;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  margin-bottom: .6rem;
+}
+
+.site-footer ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.site-footer li { margin-bottom: .3rem; }
+
+.site-footer .legal {
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--border);
+  padding-top: 1.2rem;
+  margin: 0;
+  max-width: var(--measure);
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.center { text-align: center; }
+
+.notfound {
+  min-height: 52vh;
+  display: grid;
+  place-content: center;
+  text-align: center;
+}