/* ==========================================================================
   后院计划 Lab — 主样式表
   组件与页面层。颜色只经 var(--*) 引用，Token 定义全部在 tokens.css。
   技术必需例外：HTML 的 <meta name="theme-color"> 无法引用 CSS 变量。
   目录：
     01 基础与重置        02 排版              03 布局
     04 导航              05 按钮与链接        06 生长状态系统
     07 首页 Hero         08 区块标题          09 项目卡
     10 后院日志 / Now     11 手记列表          12 能力三线
     13 试验场网格         14 关于              15 合作入口 / 页脚
     16 项目详情页        17 手记阅读视图       18 工具类
     19 响应式
   ========================================================================== */

/* ---------------------------------------------------------------- 01 基础 */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 纸张感：顶部一层极淡的植物绿晕染，避免规则纹理造成的摩尔纹 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(
    1120px 520px at 64% -12%,
    var(--leaf-2) 0%,
    transparent 72%
  );
  opacity: 0.75;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
}
ol, ul { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
hr {
  border: 0;
  border-top: 1px solid var(--line-3);
  margin: var(--sp-7) 0;
}
::selection { background-color: var(--leaf); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* ---------------------------------------------------------------- 02 排版 */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--line);
}
.eyebrow--bare::after { display: none; }

.display {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.h1 { font-size: var(--fs-h1); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.h2 { font-size: var(--fs-h2); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.muted { color: var(--ink-3); }
.mono  { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

/* 中英文混排断行优化：标题两端均衡，正文避免孤字 */
.display, .h1, .h2, .h3,
.sec-title, .cs-title, .cs-lead, .reader__title, .reader__lede,
.contact__title, .group-head__title, .cap__title, .cs-next__t,
.pcard__title, .prow__title { text-wrap: balance; }
.sec-desc, .pcard__desc, .prow__desc, .note-item__excerpt,
.hero__sub, .contact__desc, .legend__desc { text-wrap: pretty; }

.prose { max-width: var(--container-text); color: var(--ink-2); }
.prose > * + * { margin-top: var(--sp-5); }
.prose p { text-wrap: pretty; line-height: var(--lh-relaxed); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose h2 {
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: var(--ls-heading);
  margin-top: var(--sp-8);
}
.prose h3 {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--sp-7);
}
.prose ul, .prose ol { padding-left: 0; }
.prose li {
  position: relative;
  padding-left: var(--sp-5);
  line-height: var(--lh-relaxed);
}
.prose li + li { margin-top: var(--sp-2); }
.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border: 1px solid var(--green-3);
  border-radius: var(--r-pill);
}
.prose ol { counter-reset: prose-ol; }
.prose ol li::before {
  counter-increment: prose-ol;
  content: counter(prose-ol);
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-4);
}
.prose blockquote {
  border-left: 2px solid var(--green-3);
  padding-left: var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink);
}

/* ---------------------------------------------------------------- 03 布局 */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  position: relative;
  z-index: var(--z-base);
}
.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }

.section { padding-block: var(--sp-10); }
.section--tight { padding-block: var(--sp-9); }
.section--loose { padding-block: var(--sp-11); }

.rule {
  height: 1px;
  background-color: var(--line);
  border: 0;
  margin: 0;
}

/* ---------------------------------------------------------------- 04 导航 */
.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-top);
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
}
.nav.is-scrolled {
  background-color: var(--paper);
  border-bottom-color: var(--line-3);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--nav-h);
}
.brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  min-width: 0;
}
.brand__mark {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__domain {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.nav__panel {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}
.nav__link {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  position: relative;
  padding-block: 4px;
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 500; }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--ink-4);
  margin-left: 6px;
  letter-spacing: var(--ls-label);
}
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  background: none;
  border: 1px solid var(--line-2);
  border-radius: var(--r-pill);
  padding: 7px 14px 7px 11px;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  transition: border-color var(--dur-fast) var(--ease);
}
.nav__toggle:hover { border-color: var(--ink-3); }
.nav__panel-foot { display: none; }

/* -------------------------------------------------------- 05 按钮与链接 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 11px 20px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              transform var(--dur-base) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform var(--dur-base) var(--ease); }
.btn:hover .icon { transform: translateX(3px); }

.btn--primary { background-color: var(--ink); color: var(--paper); }
.btn--primary:hover { background-color: var(--green-2); }

.btn--ghost { border-color: var(--line-2); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background-color: var(--paper-2); }

.btn--quiet { padding: 6px 0; color: var(--ink-2); }
.btn--quiet:hover { color: var(--ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 3px;
  transition: border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.link-arrow .icon { transition: transform var(--dur-base) var(--ease); }
.link-arrow:hover { color: var(--green-2); border-bottom-color: var(--green-3); }
.link-arrow:hover .icon { transform: translateX(3px); }

.link-plain {
  color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.link-plain:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

/* ------------------------------------------------------- 06 生长状态系统 */
.icon { width: 20px; height: 20px; flex: none; }
.icon--16 { width: 16px; height: 16px; }
.icon--24 { width: 24px; height: 24px; }
.icon--14 { width: 14px; height: 14px; }

.status {
  --st: var(--st-growing);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--st);
  line-height: 1;
}
.status .icon { stroke-width: 1.6; }
.status__zh {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: none;
}
.status--seed     { --st: var(--st-seed); }
.status--sprouting{ --st: var(--st-sprouting); }
.status--growing  { --st: var(--st-growing); }
.status--shipped  { --st: var(--st-shipped); }
.status--dormant  { --st: var(--st-dormant); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--paper-2);
}

/* 状态图例（首页/项目页底部） */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-6);
  padding: var(--sp-5) 0 0;
  border-top: 1px solid var(--line-3);
  margin-top: var(--sp-8);
}
.legend__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.legend__desc { font-size: var(--fs-xs); color: var(--ink-3); }

/* ------------------------------------------------------------ 07 首页 Hero */
.hero { padding-top: var(--sp-9); padding-bottom: var(--sp-10); }
.hero__title {
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: none;
  text-wrap: balance;
}
.hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--green-2);
}
.hero__below {
  margin-top: var(--sp-7);
}
.hero__sub {
  /* 单行：不再限宽，整句在桌面端一次读完 */
  max-width: none;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.hero__foot {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5) var(--sp-6);
}
.now-line {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--paper-2);
}
.now-line__pulse {
  width: 7px;
  height: 7px;
  border-radius: var(--r-pill);
  background-color: var(--st-growing);
  flex: none;
}
.now-line .icon { color: var(--ink-4); }
.now-line strong { color: var(--ink); font-weight: 500; }
/* 产品名成组：组内用固定小间距，避免 flex gap（12px）叠在分隔符两侧把胶囊撑宽 */
.now-line__set {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.now-line__dot { color: var(--ink-4); }

/* ------------------------------------------------------------ 08 区块标题 */
.sec-head { margin-bottom: var(--sp-7); }
.sec-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
  margin-top: var(--sp-4);
}
.sec-title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  margin-top: var(--sp-4);
}
.sec-desc {
  margin-top: var(--sp-3);
  max-width: 52ch;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------- 09 项目卡 */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
}
.pcard {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  position: relative;
}
.pcard__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-md);
}
.pcard__plate { transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease); }
.pcard:hover .pcard__plate { transform: translateY(-4px); border-color: var(--line-2); }
.pcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.pcard__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--ink-4);
}
.pcard__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: var(--sp-3);
}
.pcard__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 36ch;
}
.pcard__meta {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.pcard__meta span + span::before {
  content: "·";
  margin-right: var(--sp-3);
  color: var(--line-2);
}
.pcard__cta {
  margin-top: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--green-2);
}

/* 项目卡视觉底板：代码绘制，无位图依赖 */
.plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background-color: var(--paper-2);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
  color: var(--green);
  isolation: isolate;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(
    circle at 28% 18%,
    var(--leaf) 0%,
    transparent 58%
  );
  opacity: 0.85;
  z-index: -1;
}
.plate--wide { aspect-ratio: 16 / 9; }
.plate--tall { aspect-ratio: 3 / 4; }
.plate--square { aspect-ratio: 1 / 1; }
.plate--clay { color: var(--brown); }
.plate--ink { color: var(--ink-2); }
.plate--muted { color: var(--ink-3); }

.plate__figure { width: 68%; height: auto; max-height: 78%; }
.plate__figure--sm { width: 46%; }
.plate__figure--lg { width: 84%; }
.plate__caption {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
}
.plate__badge {
  position: absolute;
  right: var(--sp-4);
  top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  background-color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 9px;
}

/* ------------------------------------------------- 10 后院日志 / Now 面板 */
.log-split {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--sp-8);
  align-items: start;
}
.log { border-top: 1px solid var(--line); }
.log__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line-3);
  align-items: baseline;
}
.log__date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.log__text { font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); }
.log__text strong { color: var(--ink); font-weight: 500; }
.log__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--green-3);
  margin-left: var(--sp-2);
}

.now-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--paper-2);
  padding: var(--sp-6);
}
.now-panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--green-2);
}
.now-panel__title {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  margin: 0;
  color: var(--ink-3);
}
.now-list { margin-top: var(--sp-5); }
.now-list__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-3);
  font-size: var(--fs-sm);
}
.now-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.now-list__k { color: var(--ink-4); font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: var(--ls-label); text-transform: uppercase; }
.now-list__v { color: var(--ink); text-align: right; }

/* ------------------------------------------------------------ 11 手记列表 */
.notes { border-top: 1px solid var(--line); }

.note-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--sp-6);
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--line-3);
  align-items: start;
  transition: background-color var(--dur-base) var(--ease);
}
.note-item:hover { background-color: var(--paper-2); }
.note-item__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: 4px;
}
.note-item__date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.note-item__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  text-wrap: balance;
}
.note-item__excerpt {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 60ch;
}
.note-item__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: var(--paper);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--green-2);
  white-space: nowrap;
}
.tag--brown { color: var(--brown-2); }
.tag--muted { color: var(--ink-3); }
.note-item__go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--green-2);
}
.note-item:hover .note-item__go .icon { transform: translateX(3px); }
.note-item__go .icon { transition: transform var(--dur-base) var(--ease); }

/* ------------------------------------------------------------ 12 能力三线 */
.capabilities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-8);
}
.cap { border-top: 1px solid var(--line-2); padding-top: var(--sp-5); }
.cap__icon { color: var(--green-2); }
.cap__title {
  margin-top: var(--sp-5);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cap__sub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.cap__list { margin-top: var(--sp-5); }
.cap__list li {
  position: relative;
  padding-left: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--ink-2);
}
.cap__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 5px;
  height: 5px;
  background-color: var(--leaf);
  border: 1px solid var(--green-3);
  border-radius: var(--r-pill);
}
.cap-note {
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-3);
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  color: var(--ink-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 68ch;
}
.cap-note .icon { color: var(--brown); margin-top: 3px; }

/* ------------------------------------------------------------ 13 试验场 */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--sp-6);
}
.gitem { display: flex; flex-direction: column; gap: var(--sp-4); }
.gitem__plate { transition: transform var(--dur-slow) var(--ease-out); }
.gitem:hover .gitem__plate { transform: translateY(-3px); }
.gitem__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.gitem__meta {
  margin-top: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
/* 真实截图版位：作品卡专用，与 inline SVG 插画版位并存 */
.plate--shot { display: block; background-image: none; }
.plate--shot::before { content: none; }
.gitem__shot { display: block; width: 100%; height: 100%; object-fit: cover; }

.gitem__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  text-decoration: none;
  color: inherit;
}
.gitem__link:hover .gitem__title { color: var(--green); }
.gitem__link:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.gallery--strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------------------------------------------------------- 14 关于 */
.about-split {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--sp-9);
  align-items: start;
}
.about-portrait {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background-color: var(--paper-2);
  background-image: radial-gradient(var(--line-2) 1px, transparent 1px);
  background-size: 16px 16px;
  display: grid;
  place-items: center;
  color: var(--green);
}
.facts { border-top: 1px solid var(--line); margin-top: var(--sp-6); }
.facts__row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--line-3);
  font-size: var(--fs-sm);
}
.facts__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 3px;
}
.facts__v { color: var(--ink-2); }

/* ------------------------------------------------- 15 合作入口 / 页脚 */
.contact {
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background-color: var(--paper-2);
  padding: clamp(28px, 4vw, 56px);
  position: relative;
  overflow: hidden;
}
.contact::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: var(--r-pill);
  background-image: radial-gradient(circle, var(--leaf) 0%, transparent 68%);
  pointer-events: none;
}
.contact__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  max-width: 22ch;
}
.contact__desc {
  margin-top: var(--sp-4);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.contact__actions {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) var(--sp-6);
  position: relative;
  z-index: 1;
}
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
}
.social {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition: color var(--dur-fast) var(--ease);
}
.social:hover { color: var(--ink); }
.social .icon { color: var(--ink-3); transition: color var(--dur-fast) var(--ease); }
.social:hover .icon { color: var(--green-2); }

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  margin-top: var(--sp-10);
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5) var(--sp-7);
  justify-content: space-between;
  align-items: flex-start;
}
.footer__brand { font-size: var(--fs-sm); font-weight: 600; }
.footer__note {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.footer__links a:hover { color: var(--ink); }
.footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
/* 备案号：合规项需清晰可读，且是法律行里唯一的链接 —— 比同排文字深一档 */
.footer__icp {
  color: var(--ink-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.footer__icp:hover { color: var(--ink); }

/* ---------------------------------------------------------- 16 项目详情页 */
.cs-hero { padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--sp-7);
  transition: color var(--dur-fast) var(--ease);
}
.cs-back:hover { color: var(--ink); }
.cs-back .icon { transition: transform var(--dur-base) var(--ease); }
.cs-back:hover .icon { transform: translateX(-3px); }

.cs-title {
  font-size: var(--fs-h1);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}
.cs-lead {
  margin-top: var(--sp-5);
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 32ch;
}
.cs-meta {
  margin-top: var(--sp-7);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.cs-meta__cell { display: flex; flex-direction: column; gap: 6px; }
.cs-meta__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.cs-meta__v {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  /* 字距与 .status__zh（胶囊内中文）一致：--ls-label(0.14em) 是给全大写英文标签的，
     用在含中文的内容上会把字拉散 */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}

.cs-plate-wrap { margin-block: var(--sp-8); }
.cs-plate-wrap .plate { aspect-ratio: 16 / 8; }
.cs-plate-wrap figcaption {
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.cs-section {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--sp-7);
  padding-block: var(--sp-8);
  border-top: 1px solid var(--line-3);
}
.cs-section__head { position: sticky; top: calc(var(--nav-h) + 32px); }
.cs-section__num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--ink-4);
}
.cs-section__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.cs-section__en {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.pull {
  border-left: 2px solid var(--brown-soft);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
  margin: var(--sp-6) 0;
  font-family: var(--font-serif);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 46ch;
}
.pull cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.iter-list { border-top: 1px solid var(--line-3); }
.iter {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--line-3);
}
.iter__when {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 3px;
}
.iter__body h3 { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.iter__body p {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.iter__verdict {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brown-2);
}

.cs-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line);
}
.cs-next__item {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  background-color: var(--paper-2);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.cs-next__item:hover { border-color: var(--line-2); transform: translateY(-3px); }
.cs-next__k {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.cs-next__t { margin-top: var(--sp-4); font-size: var(--fs-h3); font-weight: 500; }
.cs-next__d { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--ink-2); line-height: var(--lh-relaxed); }

/* -------------------------------------------------------- 17 手记阅读视图 */
.reader__bar {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-base);
  background-color: var(--paper);
  border-bottom: 1px solid var(--line-3);
  padding-block: var(--sp-4);
}
.reader__bar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}
.reader__bar .cs-back { margin-bottom: 0; }
.reader__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reader__head { padding-block: var(--sp-8) var(--sp-6); }
.reader__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.015em;
}
.reader__lede {
  margin-top: var(--sp-5);
  font-family: var(--font-serif);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 44ch;
}
body.is-reading [data-notes-hero] { display: none; }

/* ------------------------------------------------------------- 18 工具类 */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -80px;
  z-index: var(--z-top);
  background-color: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-size: var(--fs-sm);
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 14px; }

.stack-4 > * + * { margin-top: var(--sp-4); }
.stack-5 > * + * { margin-top: var(--sp-5); }
.stack-6 > * + * { margin-top: var(--sp-6); }
.stack-7 > * + * { margin-top: var(--sp-7); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* 滚动入场（仅在 JS 可用时生效，保证无 JS 也能读全文） */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-reveal) var(--ease-out),
              transform var(--dur-reveal) var(--ease-out);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------- 20 项目索引行（Projects 页） */
.projects { border-top: 1px solid var(--line); }
.projects--flush { border-top: 0; }
.projects--flush > .prow:last-child { border-bottom: 0; }
.prow {
  position: relative;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-7);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--line-3);
  align-items: start;
}
.prow__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--r-md);
}
.prow .plate {
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur-base) var(--ease);
}
.prow:hover .plate { transform: translateY(-3px); border-color: var(--line-2); }
.prow__body { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: 2px; }
.prow__top {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.prow__index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  color: var(--ink-4);
}
.prow__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: var(--ls-heading);
  line-height: var(--lh-snug);
  transition: color var(--dur-base) var(--ease);
}
.prow:hover .prow__title { color: var(--green-2); }
.prow__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
  max-width: 58ch;
}
.prow__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--green-2);
}
.prow:hover .prow__cta .icon { transform: translateX(3px); }
.prow__cta .icon { transition: transform var(--dur-base) var(--ease); }
.prow--archived .prow__title,
.prow--archived .prow__desc { color: var(--ink-3); }
.prow--archived .plate { opacity: 0.85; }
.prow--archived:hover .prow__title { color: var(--brown-2); }

.group-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.group-head__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.012em;
}
.group-head__en {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label-lg);
  text-transform: uppercase;
  color: var(--ink-4);
}
.group-head__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.empty-note {
  margin-top: var(--sp-7);
  padding: var(--sp-6);
  border: 1px dashed var(--line-2);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--ink-3);
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
}
.empty-note .icon { color: var(--green-3); margin-top: 2px; }

@media (max-width: 767px) {
  .prow { grid-template-columns: 1fr; padding: var(--sp-6) 0; }
  .prow .plate { aspect-ratio: 16 / 9; }
  .group-head__count { margin-left: 0; }
}

/* ------------------------------------------------------------- 19 响应式 */
@media (max-width: 1023px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards > :first-child { grid-column: 1 / -1; }
  .capabilities { grid-template-columns: 1fr 1fr; }
  .gallery--strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .about-portrait { max-width: 340px; aspect-ratio: 4 / 3; }
  .log-split { grid-template-columns: 1fr; gap: var(--sp-7); }
  .cs-section { grid-template-columns: 1fr; gap: var(--sp-5); padding-block: var(--sp-7); }
  .cs-section__head { position: static; }
}

@media (max-width: 767px) {
  :root { --nav-h: 60px; }

  .nav__toggle { display: inline-flex; }
  .nav__panel { display: none; }
  .nav-open .nav__panel {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-overlay);
    background-color: var(--paper);
    padding: var(--sp-7) var(--gutter) var(--sp-8);
    overflow-y: auto;
  }
  .nav-open body { overflow: hidden; }
  .nav__panel .nav__link {
    font-size: 1.5rem;
    font-weight: 500;
    padding-block: var(--sp-5);
    border-bottom: 1px solid var(--line-3);
    color: var(--ink);
  }
  .nav__panel .nav__link::after { display: none; }
  .nav__panel .nav__sub { font-size: var(--fs-xs); }
  .nav__panel-foot {
    display: block;
    margin-top: var(--sp-7);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--ink-4);
  }

  .cards { grid-template-columns: 1fr; gap: var(--sp-7); }
  .capabilities { grid-template-columns: 1fr; gap: var(--sp-7); }
  .gallery, .gallery--strip { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .log__item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .note-item { grid-template-columns: 1fr; gap: var(--sp-4); }
  .note-item__foot { padding-top: 0; }
  .cs-next { grid-template-columns: 1fr; }
  .iter { grid-template-columns: 1fr; gap: var(--sp-3); }
  .cs-meta { gap: var(--sp-4) var(--sp-6); }
  .section { padding-block: var(--sp-9); }
  .section--loose { padding-block: var(--sp-10); }
  .contact { border-radius: var(--r-md); }
  .btn { width: 100%; justify-content: center; }
  .btn--quiet { width: auto; justify-content: flex-start; }
  .brand__domain { display: none; }
  .footer__legal { font-size: var(--fs-micro); }
}

@media (max-width: 479px) {
  .gallery, .gallery--strip { grid-template-columns: 1fr; }
  .note-item__title { font-size: var(--fs-h4); }
  /* 窄屏放不下一整行，交回自然折行，字号回到接近改动前的档位 */
  .hero__title { font-size: clamp(28px, 9.6vw, 44px); }
  /* 正文略降一档，使首屏副文案在 390px 上仍容得下整行词组 */
  .hero__sub { font-size: 16.5px; }
  /* 胶囊原宽 313px，窄屏放不下会被 flex 压成竖排：收窄间距 + 去掉装饰性箭头 */
  .now-line { gap: var(--sp-2); }
  .now-line > svg.icon { display: none; }
}

@media (max-width: 359px) {
  /* 320px 仍需再让 20px，名字降一档字号 */
  .now-line { font-size: 12px; }
}

/* -------------------------------------------------------------- 21 404 页 */
.notfound {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-8) var(--sp-9);
}
.notfound__plate {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background-color: var(--paper-2);
  display: grid;
  place-items: center;
  color: var(--green-2);
}
.notfound__plate .plate__figure { width: 62%; height: 62%; }
.notfound__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  margin-top: var(--sp-4);
}
.notfound__desc {
  margin-top: var(--sp-5);
  max-width: 42ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--ink-2);
}
.notfound__links { margin-top: var(--sp-7); }

@media (max-width: 767px) {
  .notfound { grid-template-columns: 1fr; gap: var(--sp-7); padding-block: var(--sp-7); }
  .notfound__plate { max-width: 220px; }
}

@media print {
  .nav, .contact, .footer__links, [data-nav-toggle] { display: none; }
  body { background-color: #fff; }
  .js [data-reveal] { opacity: 1; transform: none; }
}