/* ═══════════════════════════════════════════════════════
   郸客松 · 共创图景 · G《把中间的位置，让出来》
   21 轨道未来图录 × 30 生长关系：明亮矿白底、深航海蓝细轨道、
   赭金活节点——一张可操作的未来条件图录。
   ═══════════════════════════════════════════════════════ */

:root {
  --ore: #f4f2ec;          /* 矿白 */
  --ore-2: #ece9df;
  --sea: #1d3a5f;          /* 深航海蓝 */
  --sea-soft: rgba(29, 58, 95, 0.55);
  --gold: #b5822f;         /* 赭金活节点 */
  --gold-2: #d3a552;
  --ink: #232730;
  --ink-soft: #5b5f68;
  --line: rgba(29, 58, 95, 0.16);
  --serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --wrap: min(980px, 90vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ore); scroll-padding-top: 70px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--sans); font-size: 16px; line-height: 2; color: var(--ink);
  background:
    repeating-linear-gradient(90deg, rgba(29, 58, 95, 0.026) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(29, 58, 95, 0.026) 0 1px, transparent 1px 64px),
    var(--ore);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--gold-2); color: var(--ink); }
:focus-visible { outline: 2px dashed var(--sea); outline-offset: 3px; }
.skip-link { position: fixed; top: -60px; left: 14px; z-index: 60; padding: 9px 16px; background: var(--sea); color: var(--ore); font-size: 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 图录页眉页脚 ---------- */
.atlas-head { position: sticky; top: 0; z-index: 50; background: rgba(244, 242, 236, 0.94); backdrop-filter: blur(4px); border-bottom: 2px solid var(--sea); }
.atlas-inner { width: var(--wrap); margin-inline: auto; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 6px; }
.back { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.back:hover { color: var(--sea); border-color: var(--sea); }
.folio { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; color: var(--gold); }
.atlas-foot { border-top: 2px solid var(--sea); }
.atlas-foot span { display: block; width: var(--wrap); margin-inline: auto; padding-block: 12px 4px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--ink-soft); }
.atlas-foot span + span { padding-top: 0; padding-bottom: 16px; }

/* ---------- 标题与引子 ---------- */
.act { width: var(--wrap); margin-inline: auto; padding-block: clamp(40px, 6vh, 74px) 0; }
.act-open { padding-top: clamp(28px, 4.5vh, 50px); }
.atlas-title {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(36px, 6.8vw, 84px); line-height: 1.24; letter-spacing: 0.02em;
}
.atlas-title em { font-style: normal; color: var(--gold); }
.prologue {
  margin: clamp(12px, 2.4vh, 24px) 0 0; max-width: 40em;
  font-family: var(--serif); font-size: clamp(15.5px, 1.4vw, 18px); line-height: 2.1; color: var(--ink-soft);
}

/* ---------- 图录舞台 ---------- */
.act-stage { padding-top: clamp(20px, 3.4vh, 34px); }
.board-wrap {
  position: relative; width: min(100%, 760px); margin-inline: auto; aspect-ratio: 640 / 430;
  border: 2px solid var(--sea);
  background:
    repeating-linear-gradient(90deg, rgba(29, 58, 95, 0.045) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg, rgba(29, 58, 95, 0.045) 0 1px, transparent 1px 42px),
    #f8f6f1;
  overflow: hidden;
  box-shadow: 8px 8px 0 rgba(29, 58, 95, 0.1);
}
.board { position: absolute; inset: 0; width: 100%; height: 100%; }
.board-cap { position: absolute; right: 14px; bottom: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em; color: var(--sea-soft); }

/* 中央资源 */
.hub-core { fill: var(--gold); stroke: var(--sea); stroke-width: 2.5; }
.hub-ring { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-dasharray: 4 7; opacity: 0.7; }
.hub-name { font-family: var(--serif); font-size: 21px; font-weight: 800; fill: #fdfcf8; text-anchor: middle; letter-spacing: 2px; }
.hub-sub { font-family: var(--mono); font-size: 9.5px; fill: #fdfcf8; text-anchor: middle; letter-spacing: 1.5px; opacity: 0.85; }
/* 收起态：中央虚影 */
.is-pulled .hub { opacity: 0.28; }
.is-pulled .hub-core { fill: none; stroke: var(--sea-soft); stroke-dasharray: 5 6; }
.is-pulled .hub-name, .is-pulled .hub-sub { fill: var(--sea-soft); }
.is-pulled .hub-ring { opacity: 0.3; }

/* 中央式轨道 */
.spoke { fill: none; stroke: var(--sea); stroke-width: 1.8; }
.is-pulled .spoke { stroke-dasharray: 3 9; stroke: rgba(29, 58, 95, 0.35); }
.is-rewired .spoke { opacity: 0.08; }
.is-rewired .hub { opacity: 0.12; }
.is-rewired .hub-core { fill: none; stroke: rgba(29, 58, 95, 0.3); }
.is-rewired .hub-ring { opacity: 0.15; }

/* 尝试节点 */
.try { cursor: default; }
.try-dot { fill: #fdfcf8; stroke: var(--sea); stroke-width: 2.6; }
.try-name { font-family: var(--sans); font-size: 15.5px; font-weight: 700; fill: var(--ink); }
.try-need { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); letter-spacing: 0.5px; }
.try-gap {
  font-family: var(--mono); font-size: 11px; fill: #8a4a1f; letter-spacing: 1px;
  opacity: 0;
}
.is-pulled .try-gap { opacity: 1; }
.is-pulled .try-dot { fill: var(--ore-2); }
.is-rewired .try-gap { opacity: 0; }
.is-rewired .try-dot { fill: var(--gold-2); }

/* 小条件与生长轨道（rewired 出现） */
.conds { opacity: 0; transition: opacity 0.5s ease; }
.is-rewired .conds { opacity: 1; }
.cond-dot { fill: #fdfcf8; stroke: var(--gold); stroke-width: 2.6; }
.is-rewired .cond-dot { fill: var(--gold); }
.cond-name { font-family: var(--sans); font-size: 13.5px; font-weight: 700; fill: var(--gold); text-anchor: middle; letter-spacing: 1px; }
.cond-sub { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-soft); text-anchor: middle; letter-spacing: 0.5px; }
.cond-link { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 620; stroke-dashoffset: 620; }
.is-rewired .cond-link { animation: grow 0.9s ease-out forwards; }
.is-rewired .cond:nth-of-type(2) .cond-link { animation-delay: 0.12s; }
.is-rewired .cond:nth-of-type(3) .cond-link { animation-delay: 0.24s; }
@keyframes grow { to { stroke-dashoffset: 0; } }

.why { font-family: var(--serif); font-size: 12.5px; fill: var(--sea); letter-spacing: 1px; opacity: 0; }
.is-rewired .why { opacity: 0.9; transition: opacity 0.5s ease 0.7s; }

.read {
  margin-top: 14px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em;
  min-height: 1.9em; border-left: 4px solid var(--gold); padding-left: 14px;
}
.acts-row { margin-top: 12px; display: flex; gap: 13px; flex-wrap: wrap; }
.acts-row button {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.12em;
  color: var(--ore); background: var(--sea);
  border: 1.5px solid var(--sea); padding: 10px 22px; cursor: pointer;
}
.acts-row button:hover { background: var(--gold); border-color: var(--gold); }
.acts-row button:focus-visible { outline: 2px dashed var(--sea); outline-offset: 3px; }
.state-central #btn-pull, .state-pulled #btn-rewire { box-shadow: 0 0 0 3px rgba(181, 130, 47, 0.28); }
.kbd-note { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-soft); }

/* ---------- 无 JS 静态三态 ---------- */
.static-three { border: 1.5px solid var(--sea); padding: clamp(14px, 2.4vw, 24px); background: rgba(248, 246, 241, 0.7); }
.st3 figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; color: var(--gold); margin-bottom: 12px; }
.st3-svg { display: block; width: 100%; height: auto; }
.m-line { stroke: var(--sea); stroke-width: 1.6; }
.m-line.dash { stroke-dasharray: 3 7; stroke: rgba(29, 58, 95, 0.4); }
.m-grow { stroke: var(--gold); stroke-width: 1.8; }
.m-big { fill: var(--gold); stroke: var(--sea); stroke-width: 1.6; }
.m-ghost { fill: none; stroke: rgba(29, 58, 95, 0.4); stroke-dasharray: 4 5; }
.m-node { fill: #fdfcf8; stroke: var(--sea); stroke-width: 2; }
.m-node.off { fill: var(--ore-2); }
.m-cond { fill: var(--gold); }
.m-t { font-family: var(--mono); font-size: 8px; fill: var(--ink-soft); letter-spacing: 1px; text-anchor: middle; }
.static-say { margin-top: 12px; font-size: 14px; line-height: 2; color: var(--ink-soft); max-width: 52em; }

/* ---------- 正文各段 ---------- */
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 12px; }
.sec-t { font-family: var(--serif); font-weight: 800; font-size: clamp(23px, 3.2vw, 36px); line-height: 1.5; letter-spacing: 0.03em; }
.miss-copy { margin-top: 10px; font-size: 16px; max-width: 44em; }
.miss-copy b { color: var(--sea); }
.rw-grid { margin-top: 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.4vw, 28px); }
.rw-cell { border: 1.5px solid var(--line); border-top: 3px solid var(--gold); padding: 16px 18px; background: rgba(248, 246, 241, 0.75); }
.rw-tag { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; color: var(--gold); margin-bottom: 8px; }
.rw-cell p:not(.rw-tag) { font-size: 15px; line-height: 2; }
.rw-cell b { color: var(--sea); }
.rw-say { margin-top: clamp(18px, 3vh, 28px); font-family: var(--serif); font-size: clamp(16.5px, 1.6vw, 20px); line-height: 2.1; max-width: 38em; border-top: 1.5px solid var(--sea); padding-top: 18px; }
.close-copy { margin-top: 10px; font-size: 16.5px; max-width: 42em; }
.close-note { margin-top: 14px; font-size: 14px; color: var(--ink-soft); max-width: 46em; }
.close-note::before { content: "◆ "; color: var(--gold); font-size: 9px; }
.close-links { margin-top: 24px; display: flex; gap: 16px; flex-wrap: wrap; }
.go-works { display: inline-block; font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; color: var(--ore); background: var(--sea); text-decoration: none; padding: 12px 24px; }
.go-works:hover { background: var(--gold); }
.go-home { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--ink-soft); text-decoration: none; align-self: center; border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.go-home:hover { color: var(--sea); }

/* URL 预设直达终态：无动画（仅限 rewired；其他态不露出重接条件） */
.no-anim.is-rewired .conds { transition: none; opacity: 1; }
.no-anim.is-rewired .cond-link { animation: none; stroke-dashoffset: 0; }
.no-anim.is-rewired .why { transition: none; opacity: 0.9; }

/* ---------- reduce / 手机 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .conds, .why { transition: none !important; }
  .is-rewired .cond-link { animation: none !important; stroke-dashoffset: 0; }
}

.dom-legend {
  list-style: none; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px;
}
.dom-legend li { font-size: 16px; line-height: 2.05; color: var(--ink-soft); padding-block: 3px; }
.dom-legend b { color: var(--sea); }

@media (max-width: 760px) {
  /* 不做反向降字：手机靠下方 16px DOM 说明阅读，SVG 保持原字号随宽度缩放 */
  .rw-grid { grid-template-columns: 1fr; }
  .atlas-title br { display: none; }
}