/* Taste redesign · archive-first · variance 4 / motion 3 / density 6 */
:root {
  --taste-paper: oklch(98% 0.006 145);
  --taste-surface: oklch(99.2% 0.003 145);
  --taste-soft: oklch(95.5% 0.009 145);
  --taste-ink: oklch(20% 0.025 160);
  --taste-copy: oklch(39% 0.018 160);
  --taste-muted: oklch(52% 0.014 160);
  --taste-line: oklch(84% 0.012 145);
  --taste-green: oklch(39% 0.105 151);
  --taste-green-hover: oklch(46% 0.125 151);
  --taste-on-green: oklch(98% 0.006 145);
}
html, body { overflow-x: clip; }
body { background: var(--taste-paper); color: var(--taste-ink); }
.taste-scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2147482998;
  height: 3px;
  background: var(--taste-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
.page { width: min(1280px, calc(100% - 48px)); }
.topbar { border-bottom-color: var(--taste-line); }
.topnav a:hover { background: var(--taste-soft); color: var(--taste-green); }
.hero {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 24px 0 32px;
  border-bottom-color: var(--taste-line);
}
.hero .eyebrow, .evolution-flow-head .eyebrow { color: var(--taste-green); }
.eyebrow::before { background: var(--taste-green); }
h1 {
  margin-top: 8px;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(32px, 3.35vw, 48px);
  line-height: 1.08;
  white-space: nowrap;
}
.lead { max-width: 720px; margin-top: 12px; color: var(--taste-copy); font-size: 16px; }
.quick-actions { gap: 8px; }
.button { border-color: var(--taste-line); background: var(--taste-surface); color: var(--taste-ink); }
.button:hover { border-color: var(--taste-green); color: var(--taste-green); }
.button.primary { border-color: var(--taste-green); background: var(--taste-green); color: var(--taste-on-green); }
.button.primary:hover { border-color: var(--taste-green-hover); background: var(--taste-green-hover); color: var(--taste-on-green); }
.evolution-flow {
  margin-top: 24px;
  padding: 20px;
  border-color: var(--taste-line);
  background: var(--taste-surface);
}
.evolution-flow-head { align-items: end; }
.evolution-flow-head h2, .section-head h2 { font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
.evolution-flow-head h2 { white-space: nowrap; }
.evolution-flow-head p, .section-head p { color: var(--taste-muted); }
#pages {
  display: block;
  max-width: 1180px;
  margin: 40px auto 0;
}
.section-head {
  position: static;
  display: block;
  padding: 0;
  margin: 0 0 16px;
}
.section-head h2 { font-size: 26px; white-space: nowrap; }
.section-head p { margin-top: 6px; max-width: 68ch; }
.search-panel {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 0 20px;
  padding: 14px;
  border-color: var(--taste-line);
  background: var(--taste-surface);
  box-shadow: none;
  backdrop-filter: none;
}
.search-box { width: 100%; }
.search-label { color: var(--taste-green); }
.search-box input { border-color: var(--taste-line); background: var(--taste-paper); color: var(--taste-ink); }
.search-box input:hover { border-color: var(--taste-green); }
.search-tools { justify-content: flex-start; }
.search-tools button { border-color: var(--taste-line); background: var(--taste-paper); color: var(--taste-copy); }
.search-tools button:hover { border-color: var(--taste-green); background: var(--taste-soft); color: var(--taste-green); }
.search-result { margin-left: auto; color: var(--taste-muted); }
.evolution-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.evolution-card,
.evolution-card.is-query-target {
  position: relative;
  grid-column: auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  min-height: 300px;
  border-color: var(--taste-line);
  border-radius: 12px;
  background: var(--taste-surface);
  box-shadow: none;
}
.evolution-card:hover { border-color: var(--taste-green); box-shadow: 0 12px 30px oklch(20% 0.025 160 / .08); }
.evolution-card.is-query-target { border-color: var(--taste-green); background: var(--taste-surface); }
.evolution-card.is-query-target::before { background: var(--taste-green); color: var(--taste-on-green); }
.thumb { position: relative; aspect-ratio: auto; min-height: 300px; background: var(--taste-soft); }
.thumb img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.card-copy { padding: 24px; }
.meta { color: var(--taste-green); }
.meta span { background: var(--taste-soft); }
.evolution-card h2 {
  overflow: hidden;
  color: var(--taste-ink);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.evolution-card p { color: var(--taste-muted); }
.tags span { border-color: var(--taste-line); background: var(--taste-soft); color: var(--taste-copy); }
.note { border-color: var(--taste-line); background: var(--taste-soft); color: var(--taste-copy); }
.note, footer { grid-column: auto; }
.youyou-consult-float { background: var(--taste-ink) !important; }
@media (max-width: 860px) {
  .page { width: min(100% - 28px, 1280px); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .quick-actions { grid-column: 1; grid-row: auto; }
  .evolution-card, .evolution-card.is-query-target { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .thumb, .thumb img { min-height: 0; }
  .thumb { aspect-ratio: 16 / 9; }
  .card-copy { padding: 20px; }
}
@media (max-width: 640px) {
  .page { width: min(100% - 20px, 1280px); }
  .hero { padding: 20px 0 24px; }
  h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .lead { font-size: 15px; }
  .quick-actions { flex-direction: column; }
  .evolution-flow { padding: 12px; }
  .evolution-flow-head h2 { font-size: 22px; }
  #pages { margin-top: 32px; }
  .section-head h2 { font-size: 23px; }
  .search-panel { padding: 12px; }
  .search-result { margin-left: 0; }
  .evolution-card h2 { font-size: 19px; }
  .actions { flex-wrap: nowrap; }
  .actions .button { min-width: 0; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .taste-scroll-progress { display: none; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}