/* Hallmark · genre: editorial · macrostructure: Index-First · theme: Almanac · design-system: design.md · designed-as-app
 * linxiexie.com 主页:一页目录。大字标 + 双细线 + 引导点条目,零 JS,像一本书的 contents 页。
 * enrichment: none(typography only) · nav: 无(页面本身即导航) · footer: 单行版权
 * pre-emit critique: P5 H4 E4 S4 R5 V4
 */

.sheet {
  max-width: 42rem;
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: clamp(2.5rem, 8vh, 5.5rem) clamp(1.25rem, 5vw, 2rem) var(--space-lg);
  box-sizing: border-box;
}

/* —— 字标区 —— */
.mast-domain {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-neutral);
  margin: 0 0 var(--space-sm);
}
.mast-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-display);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 var(--space-lg);
  overflow-wrap: anywhere;
  min-width: 0;
}
.mast-name .seal {
  display: inline-block;
  width: 0.16em; height: 0.16em;
  background: var(--color-accent);
  margin-left: 0.22em;
  vertical-align: 0.06em;
}
.mast-rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-ink);
  height: 4px;
  margin: 0 0 var(--space-2xl);
  background: none;
}

/* —— 目录 —— */
.contents-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-accent-text);
  margin: 0 0 var(--space-lg);
}
.contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-xl);
}
.entry {
  display: block;
  text-decoration: none;
  color: inherit;
}
.entry-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
}
.entry .no {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.entry .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  line-height: 1.3;
  transition: color var(--dur-short) var(--ease-out);
}
.entry:hover .name { color: var(--color-accent-text); }
.entry .leader {
  flex: 1;
  min-width: 1.5rem;
  border-bottom: 1px dotted var(--color-rule);
  transform: translateY(-0.28em);
  transition: border-color var(--dur-short) var(--ease-out);
}
.entry:hover .leader { border-bottom-color: var(--color-neutral); }
.entry .dom {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-neutral);
  flex: none;
  transition: color var(--dur-short) var(--ease-out);
}
.entry:hover .dom { color: var(--color-ink); }
.entry .desc {
  display: block;
  margin: var(--space-2xs) 0 0 calc(1.7rem + var(--space-sm));
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
  max-width: 34em;
}

/* —— 版权行 —— */
.colo {
  margin-top: auto;
  padding-top: var(--space-3xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-neutral);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.colo p { margin: 0; }

/* —— 响应式 —— */
@media (max-width: 40rem) {
  .entry .leader { display: none; }
  .entry-line { flex-wrap: wrap; }
  .entry .dom { margin-left: auto; }
  .entry .desc { margin-left: calc(1.55rem + var(--space-sm)); }
  .contents ol { gap: var(--space-lg); }
}