/* ====================================================================
   writing.css v2 — 文章板块重新设计
   
   设计原则（严格对齐 tokens.css）：
   · 温暖纸质质感 — 卡片有表面、有阴影、有呼吸感
   · 清晰的阅读节奏 — 更宽裕的留白、更克制的分割、更柔和的过渡
   · 衬线字体为主 — Playfair Display 标题 · Lora 正文 · DM Mono 元信息
   · 色彩：奶油纸 #f5ecd7 / 金棕描边 #c4a882 / 琥珀 #d9a441 / 鼠尾草绿 #7a8c68
   ==================================================================== */

/* ===== 1. Mini Reset（writing 页不引用 base.css，避免 overflow:hidden） ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; padding: 0; }
img { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent-amber);
  outline-offset: 2px;
}

/* ===== 2. Page ===== */
.wr-page {
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: 1.85;
  display: flex;
  flex-direction: column;
}

/* ===== 3. Topbar ===== */
.wr-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  background: color-mix(in srgb, var(--bg-page) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.wr-topbar__home {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--t-fast) var(--ease);
}
.wr-topbar__home:hover { color: var(--accent-coral); }

.wr-topbar__sep {
  color: var(--text-muted);
  font-family: var(--font-body);
  user-select: none;
}

.wr-topbar__section {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wr-topbar__spacer { flex: 1; }

.wr-count {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

/* ===== 4. Shell & Intro ===== */
.wr-shell {
  flex: 1;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-16) var(--sp-6) var(--sp-20);
}

.wr-intro {
  margin-bottom: var(--sp-12);
  position: relative;
}

.wr-intro__title {
  font-family: var(--font-display);
  font-size: var(--fs-64);
  line-height: 1.08;
  margin: 0 0 var(--sp-5);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.wr-intro__lede {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-22);
  line-height: 1.55;
  max-width: 52ch;
}

/* Subtle decorative rule beneath intro */
.wr-intro::after {
  content: '';
  display: block;
  width: 48px;
  height: 2px;
  margin-top: var(--sp-6);
  background: var(--accent-amber);
  border-radius: 1px;
}

/* ===== 5. Toolbar (search + count) ===== */
.wr-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.wr-search {
  flex: 1 1 260px;
  min-width: 180px;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.wr-search::placeholder {
  color: var(--text-muted);
  font-family: var(--font-label);
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
}

.wr-search:focus {
  outline: none;
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.15);
  background: var(--bg-surface);
}

/* ===== 6. Filters ===== */
.wr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
}

.wr-chip {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  padding: 6px var(--sp-4);
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
  user-select: none;
}

.wr-chip span {
  color: var(--text-muted);
  margin-left: 3px;
  font-size: var(--fs-10);
}

.wr-chip:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-primary);
}

.wr-chip.is-active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-page);
}
.wr-chip.is-active span {
  color: color-mix(in srgb, var(--bg-page) 70%, transparent);
}

/* ===== 7. Year Grouping ===== */
.wr-year {
  margin-bottom: var(--sp-16);
}

.wr-year__label {
  font-family: var(--font-label);
  font-size: var(--fs-14);
  letter-spacing: 0.2em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-3);
  border-left: 2px solid var(--accent-amber);
  text-transform: none;
}

.wr-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* ===== 8. Cards ===== */
.wr-card {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              transform var(--t-med) var(--ease);
}

.wr-card:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

.wr-card__link {
  display: flex;
  gap: var(--sp-5);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

/* Cover image */
.wr-card__cover {
  flex: 0 0 160px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-hover);
}

.wr-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}

.wr-card:hover .wr-card__cover img {
  transform: scale(1.05);
}

/* Card body */
.wr-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wr-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 var(--sp-2);
  color: var(--text-primary);
  transition: color var(--t-fast) var(--ease);
}

.wr-card:hover .wr-card__title {
  color: var(--accent-coral);
}

.wr-card__summary {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-16);
  line-height: 1.7;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.wr-card__meta {
  margin: 0;
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  letter-spacing: 0.04em;
  align-items: center;
}

.wr-card__meta time {
  color: var(--text-muted);
}

/* Tags row */
.wr-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.wr-card.has-cover .wr-card__tags {
  padding-left: calc(160px + var(--sp-5));
}

.wr-tag {
  font-family: var(--font-label);
  font-size: var(--fs-10);
  letter-spacing: 0.07em;
  padding: 3px var(--sp-3);
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}

.wr-tag:hover {
  color: var(--accent-coral);
  border-color: var(--accent-coral);
  background: color-mix(in srgb, var(--accent-coral) 6%, transparent);
}

.wr-tag.is-static {
  cursor: default;
}
.wr-tag.is-static:hover {
  color: var(--text-muted);
  border-color: var(--border-soft);
  background: transparent;
}

/* ===== 9. Article Reader ===== */

/* Back link — like a breadcrumb */
.wr-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-10);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
  padding: var(--sp-1) 0;
}

.wr-back::before {
  content: '←';
  font-size: var(--fs-14);
  transition: transform var(--t-fast) var(--ease);
}

.wr-back:hover {
  color: var(--accent-coral);
}

.wr-back:hover::before {
  transform: translateX(-2px);
}

/* Article header */
.wr-head {
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid var(--border-soft);
}

.wr-head__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1.18;
  font-weight: 700;
  margin: 0 0 var(--sp-5);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.wr-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.wr-badge {
  color: var(--accent-green);
  border: 1px solid var(--accent-green);
  border-radius: var(--r-sm);
  padding: 1px 7px;
  font-size: var(--fs-10);
  letter-spacing: 0.06em;
}

.wr-head__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
}

.wr-cat {
  font-family: var(--font-label);
  font-size: var(--fs-10);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-coral);
  padding: 2px var(--sp-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
}

/* Table of Contents */
.wr-toc {
  margin: 0 0 var(--sp-10);
  padding: var(--sp-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.wr-toc__label {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-label);
  font-size: var(--fs-10);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wr-toc ol {
  margin: 0;
  padding-left: var(--sp-6);
  font-size: var(--fs-16);
  line-height: 1.7;
}

.wr-toc li {
  margin-bottom: var(--sp-2);
}

.wr-toc li.lv-3 {
  padding-left: var(--sp-4);
  list-style: circle;
}

.wr-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}

.wr-toc a:hover {
  color: var(--accent-coral);
}

/* Article body */
.wr-body {
  max-width: 68ch;
  line-height: 1.85;
}

.wr-body h2,
.wr-body h3,
.wr-body h4 {
  font-family: var(--font-display);
  line-height: 1.3;
  font-weight: 600;
  scroll-margin-top: 100px;
}

.wr-body h2 {
  font-size: var(--fs-28);
  margin: var(--sp-12) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--border-soft);
}

.wr-body h3 {
  font-size: var(--fs-22);
  margin: var(--sp-10) 0 var(--sp-3);
}

.wr-body h4 {
  font-size: var(--fs-18);
  margin: var(--sp-8) 0 var(--sp-3);
}

.wr-body p {
  margin: 0 0 var(--sp-6);
}

.wr-body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: var(--accent-amber);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--t-fast) var(--ease);
}

.wr-body a:hover {
  color: var(--accent-coral);
  text-decoration-color: var(--accent-coral);
}

.wr-body strong {
  font-weight: 700;
  color: var(--text-primary);
}

.wr-body em {
  font-style: italic;
}

/* Lists */
.wr-body ul,
.wr-body ol {
  margin: 0 0 var(--sp-6);
  padding-left: var(--sp-6);
}

.wr-body ul { list-style: disc; }
.wr-body ol { list-style: decimal; }

.wr-body li {
  margin-bottom: var(--sp-2);
}

.wr-body li::marker {
  color: var(--text-muted);
}

/* Blockquote */
.wr-body blockquote {
  margin: var(--sp-8) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--accent-amber);
  background: color-mix(in srgb, var(--accent-amber) 5%, var(--bg-surface));
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-secondary);
  font-style: italic;
}

.wr-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rule */
.wr-body hr {
  margin: var(--sp-12) 0;
  border: none;
  height: 1px;
  background: var(--border-soft);
}

/* Inline code */
.wr-body code {
  font-family: var(--font-label);
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: var(--r-sm);
  color: var(--text-primary);
}

/* Code blocks */
.wr-body pre {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-5);
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  line-height: 1.6;
  font-size: var(--fs-14);
}

.wr-body pre code {
  padding: 0;
  background: none;
  font-size: inherit;
  border-radius: 0;
}

/* Images */
.post-figure {
  margin: var(--sp-10) 0;
  width: 100%;
}

.post-figure img,
.wr-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
}

.post-figure figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

/* Tables */
.post-table-wrap {
  overflow-x: auto;
  margin: 0 0 var(--sp-8);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
}

.wr-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-16);
}

.wr-body th,
.wr-body td {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border-soft);
  text-align: left;
}

.wr-body th {
  background: var(--bg-hover);
  font-weight: 600;
  font-family: var(--font-label);
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
}

/* ===== 10. Article Footer ===== */
.wr-foot {
  max-width: 68ch;
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--border);
}

.wr-foot__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
}

.wr-foot__origin {
  margin: 0 0 var(--sp-6);
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1.8;
}

.wr-foot__origin a {
  color: var(--accent-coral);
  text-decoration: none;
}

.wr-foot__origin a:hover {
  text-decoration: underline;
}

.wr-foot__permalink {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--accent-coral);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: opacity var(--t-fast) var(--ease);
}

.wr-foot__permalink:hover {
  text-decoration: underline;
}

/* Article navigation (prev/next) */
.wr-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.wr-nav__item {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  transition: all var(--t-fast) var(--ease);
  gap: var(--sp-2);
}

.wr-nav__item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}

.wr-nav__item.is-empty {
  background: none;
  border: none;
  box-shadow: none;
  transform: none;
  cursor: default;
}

.wr-nav__item small {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-10);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.wr-nav__item span {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ===== 11. Card Permalink ===== */
.wr-card__permalink {
  margin-left: auto;
  align-self: center;
  font-family: var(--font-label);
  font-size: var(--fs-10);
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  padding: 3px 8px;
  white-space: nowrap;
  transition: all var(--t-fast) var(--ease);
}

.wr-card__permalink:hover {
  color: var(--accent-coral);
  border-color: var(--accent-coral);
  background: color-mix(in srgb, var(--accent-coral) 5%, transparent);
}

/* ===== 12. Status States ===== */
.wr-status,
.wr-loading,
.wr-empty {
  padding: var(--sp-10) 0;
  color: var(--text-muted);
  font-size: var(--fs-16);
  text-align: center;
}

.wr-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: var(--sp-3);
  border: 2px solid var(--border-soft);
  border-top-color: var(--accent-amber);
  border-radius: 50%;
  animation: wr-spin 0.7s linear infinite;
  vertical-align: text-bottom;
}

@keyframes wr-spin {
  to { transform: rotate(360deg); }
}

.wr-status.is-error,
.wr-empty.is-error {
  color: var(--accent-coral);
}

.wr-empty code {
  font-family: var(--font-label);
  font-size: var(--fs-14);
  padding: 2px 6px;
  background: var(--bg-hover);
  border-radius: var(--r-sm);
}

/* ===== 13. Page Footer ===== */
.wr-foot-page {
  margin-top: auto;
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  border-top: 1px solid var(--border-soft);
}

.wr-foot-page__text {
  font-family: var(--font-label);
  font-size: var(--fs-12);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

.wr-foot-page__text a {
  color: var(--accent-coral);
  text-decoration: none;
}

.wr-foot-page__text a:hover {
  text-decoration: underline;
}

/* ===== 14. Responsive ===== */

/* Tablet (≤768px) */
@media (max-width: 768px) {
  .wr-shell {
    padding: var(--sp-12) var(--sp-5) var(--sp-16);
  }

  .wr-intro__title {
    font-size: var(--fs-48);
  }

  .wr-intro__lede {
    font-size: var(--fs-18);
  }

  .wr-card {
    padding: var(--sp-5);
  }

  .wr-card__cover {
    flex: 0 0 140px;
  }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  .wr-shell {
    padding: var(--sp-10) var(--sp-5) var(--sp-16);
  }

  .wr-intro {
    margin-bottom: var(--sp-10);
  }

  .wr-intro__title {
    font-size: var(--fs-36);
  }

  .wr-intro__lede {
    font-size: var(--fs-16);
  }

  /* Cards: vertical stacking */
  .wr-card__link {
    flex-direction: column;
    gap: var(--sp-4);
  }

  .wr-card__cover {
    flex: none;
    width: 100%;
    aspect-ratio: 2 / 1;
  }

  .wr-card.has-cover .wr-card__tags {
    padding-left: 0;
  }

  .wr-card__title {
    font-size: var(--fs-18);
  }

  /* Article */
  .wr-head__title {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  .wr-nav {
    grid-template-columns: 1fr;
  }

  .wr-body {
    max-width: 100%;
  }

  .wr-body h2 {
    font-size: var(--fs-22);
  }

  .wr-body h3 {
    font-size: var(--fs-18);
  }

  /* Filters: small chips */
  .wr-chip {
    font-size: var(--fs-10);
    padding: 5px var(--sp-3);
  }
}

/* Small mobile (≤480px) */
@media (max-width: 480px) {
  .wr-topbar {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
  }

  .wr-topbar__home {
    font-size: var(--fs-18);
  }

  .wr-intro__title {
    font-size: var(--fs-28);
  }

  .wr-card {
    padding: var(--sp-4);
    border-radius: var(--r-sm);
  }

  .wr-card__title {
    font-size: var(--fs-16);
  }

  .wr-toc {
    padding: var(--sp-4);
  }

  .wr-toc ol {
    font-size: var(--fs-14);
  }
}

/* ===== 15. Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .wr-card__cover img,
  .wr-nav__item,
  .wr-card,
  .wr-back::before {
    transition: none;
  }

  .wr-card:hover .wr-card__cover img {
    transform: none;
  }

  .wr-card:hover {
    transform: none;
  }

  .wr-nav__item:hover {
    transform: none;
  }

  .wr-back:hover::before {
    transform: none;
  }

  .wr-loading::before {
    animation: none;
  }
}

/* ===== 16. Print ===== */
@media print {
  .wr-topbar,
  .wr-filters,
  .wr-toolbar,
  .wr-nav,
  .wr-foot-page {
    display: none;
  }

  .wr-page {
    background: #fff;
    color: #000;
  }

  .wr-body {
    max-width: 100%;
  }

  .wr-body a {
    color: #000;
    text-decoration: underline;
  }
}