/* ═══════════════════════════════════════════════════════
   郸客松 · 共创图景 · B《拆开以后，才看懂》
   14 皮影幕布 × 36 陶片结构辅助：深色舞台、幕后暖光、
   半透明镂空部件、铆钉与操纵杆；黑白纹样关系致敬白地黑花。
   ═══════════════════════════════════════════════════════ */

:root {
  --stage: #171310;        /* 舞台黑 */
  --stage-2: #241d17;
  --glow: #f0d9a8;         /* 幕后暖光 */
  --glow-deep: #d9b97e;
  --hide: #e9ded2;         /* 皮影皮色（半透明暖白） */
  --hide-line: #b98d54;
  --ink-blue: #2b3440;     /* 黑花（近黑的蓝黑） */
  --paper-note: #efe7d8;   /* 正文纸色 */
  --warm: #c98f4e;
  --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(--stage); 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(--paper-note);
  background:
    radial-gradient(ellipse 130% 60% at 50% -8%, rgba(240, 217, 168, 0.07), transparent 55%),
    var(--stage);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
::selection { background: var(--warm); color: var(--stage); }
:focus-visible { outline: 2px dashed var(--warm); outline-offset: 3px; }

.skip-link { position: fixed; top: -60px; left: 14px; z-index: 60; padding: 9px 16px; background: var(--paper-note); color: var(--stage); 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; }

/* ---------- 幕首幕尾 ---------- */
.stage-head { position: sticky; top: 0; z-index: 50; background: rgba(23, 19, 16, 0.92); backdrop-filter: blur(4px); border-bottom: 1px solid rgba(240, 217, 168, 0.22); }
.stage-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: rgba(239, 231, 216, 0.78); text-decoration: none; border-bottom: 1px solid rgba(240, 217, 168, 0.3); padding-bottom: 2px; }
.back:hover { color: var(--glow); border-color: var(--glow); }
.folio { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.24em; color: var(--warm); }
.stage-foot { border-top: 1px solid rgba(240, 217, 168, 0.22); }
.stage-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: rgba(239, 231, 216, 0.5); }
.stage-foot span + span { padding-top: 0; padding-bottom: 16px; }

/* ---------- 标题与引子（一句+两句，即入舞台） ---------- */
.act { width: var(--wrap); margin-inline: auto; padding-block: clamp(40px, 6vh, 72px) 0; }
.act-open { padding-top: clamp(30px, 5vh, 52px); text-align: center; }
.play-title {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(38px, 7vw, 88px); line-height: 1.22; letter-spacing: 0.03em;
  color: var(--paper-note);
  text-shadow: 0.05em 0.04em 0 rgba(201, 143, 78, 0.35);   /* 幕前皮影的双层错位 */
}
.play-title em { font-style: normal; color: var(--glow); }
.prologue {
  margin: clamp(14px, 2.6vh, 26px) auto 0; max-width: 34em;
  font-family: var(--serif); font-size: clamp(15.5px, 1.4vw, 18px); line-height: 2.1;
  color: rgba(239, 231, 216, 0.82);
}

/* ---------- 舞台 ---------- */
.act-stage { padding-top: clamp(24px, 4vh, 40px); }
.screen-wrap {
  position: relative; width: 100%; aspect-ratio: 16 / 8.4;
  border: 2px solid rgba(240, 217, 168, 0.3);
  background: linear-gradient(180deg, #1d1712, #26201a 70%, #171310);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 6px rgba(23, 19, 16, 0.9);
}
.screen-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 62% 56% at 50% 46%, rgba(240, 217, 168, 0.34), rgba(240, 217, 168, 0.1) 55%, transparent 75%);
  pointer-events: none;
}
.screen-floor {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55));
  border-top: 1px solid rgba(240, 217, 168, 0.18);
  pointer-events: none;
}
.puppet-layer, .shadow-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.shadow-layer { pointer-events: none; }

/* 皮影部件：样式施加在 g 容器，经 use 继承进引用内容（shadow 树不吃后代选择器） */
.pp-part { cursor: pointer; }
#pp-handle {
  fill: none; stroke: rgba(233, 222, 210, 0.88); stroke-width: 7; stroke-linecap: round;
}
#pp-handle circle { fill: rgba(185, 141, 84, 0.9); }
#pp-body {
  fill: rgba(233, 222, 210, 0.36);
  stroke: rgba(233, 222, 210, 0.85); stroke-width: 3; stroke-linejoin: round;
}
#pp-petal {
  fill: rgba(233, 222, 210, 0.4);
  stroke: rgba(233, 222, 210, 0.82); stroke-width: 2.4; stroke-linejoin: round;
}
.pp-rivet { fill: var(--hide-line); stroke: rgba(23, 19, 16, 0.6); stroke-width: 1.4; }

/* 操纵杆 */
.rod { stroke: rgba(185, 141, 84, 0.8); stroke-width: 2.2; stroke-dasharray: 1 6; stroke-linecap: round; }
.rod-knob { fill: var(--warm); }
.rod-group { opacity: 0; transition: opacity 0.4s ease; }
.is-open .rod-group { opacity: 1; }

/* 影层：同一 symbol 轮廓的投影（fill 继承自容器，覆盖默认） */
.sh-part { fill: rgba(14, 10, 7, 0.44); stroke: none; }   /* 无 filter——暗色锐利剪影 */
.door-way line { stroke: rgba(240, 217, 168, 0.4); stroke-width: 3; stroke-dasharray: 2 7; }
.door-way circle { fill: rgba(240, 217, 168, 0.5); }
.door-way text { font-family: var(--mono); font-size: 11px; fill: rgba(240, 217, 168, 0.55); letter-spacing: 4px; }

.screen-caption {
  position: absolute; right: 14px; bottom: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em; color: rgba(240, 217, 168, 0.45);
}

.st-read {
  margin-top: 14px; font-family: var(--mono); font-size: 14px; letter-spacing: 0.05em;
  min-height: 1.9em; border-left: 4px solid var(--warm); padding-left: 14px;
}
.st-actions { margin-top: 12px; display: flex; gap: 13px; flex-wrap: wrap; }
.st-actions button {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em;
  color: var(--stage); background: var(--glow);
  border: 1.5px solid var(--glow); padding: 10px 22px; cursor: pointer;
}
.st-actions button:hover { background: var(--warm); border-color: var(--warm); }
.st-actions button:focus-visible { outline: 2px dashed var(--glow); outline-offset: 3px; }
#btn-open[disabled], .is-open #btn-open { opacity: 0.35; cursor: default; }
.st-kbd { margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(239, 231, 216, 0.55); }

/* ---------- 无 JS 静态两态 ---------- */
.static-two { border: 1.5px solid rgba(240, 217, 168, 0.3); padding: clamp(14px, 2.4vw, 24px); background: rgba(36, 29, 23, 0.5); }
.st-card figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--warm); margin-bottom: 14px; }
.st-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-cell { border: 1px solid rgba(240, 217, 168, 0.22); padding: 10px; }
.st-cell svg { display: block; width: 100%; height: auto; }
.s-glow { fill: rgba(240, 217, 168, 0.16); }
.s-body { fill: rgba(233, 222, 210, 0.3); fill-rule: evenodd; stroke: rgba(233, 222, 210, 0.7); stroke-width: 2; }
.s-arc { fill: none; stroke: rgba(233, 222, 210, 0.7); stroke-width: 2; }
.s-rivet { fill: var(--hide-line); }
.s-pet { fill: rgba(233, 222, 210, 0.32); stroke: rgba(233, 222, 210, 0.72); stroke-width: 2; }
.s-shadow-arrow { fill: none; stroke: rgba(16, 12, 8, 0.5); stroke-width: 5; stroke-linecap: round; }
.s-tag { font-family: var(--mono); font-size: 9px; fill: rgba(239, 231, 216, 0.6); letter-spacing: 1.5px; text-anchor: middle; }
.static-say { margin-top: 14px; font-size: 14.5px; line-height: 2; color: rgba(239, 231, 216, 0.75); max-width: 52em; }

/* ---------- 部件/新用途/注/收束 ---------- */
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--warm); 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; }

.parts { list-style: none; margin-top: 6px; }
.parts li { display: flex; gap: 18px; padding: 18px 4px; border-top: 1px solid rgba(240, 217, 168, 0.18); }
.parts li:last-child { border-bottom: 1px solid rgba(240, 217, 168, 0.18); }
.p-no { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--stage); background: var(--warm); padding: 4px 10px; margin-top: 5px; height: fit-content; }
.parts h3 { font-family: var(--serif); font-size: 18.5px; font-weight: 700; letter-spacing: 0.06em; }
.parts p { margin-top: 4px; font-size: 15.5px; color: rgba(239, 231, 216, 0.78); max-width: 42em; }

.newuse-grid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 36px); }
.nu-cell { border: 1.5px solid rgba(240, 217, 168, 0.3); padding: clamp(16px, 2.6vw, 26px); background: rgba(36, 29, 23, 0.45); }
.nu-hot { border-color: var(--glow); background: rgba(240, 217, 168, 0.08); }
.nu-tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.26em; color: var(--warm); margin-bottom: 10px; }
.nu-cell p:not(.nu-tag) { font-size: 15.5px; line-height: 2.05; }
.nu-cell strong { color: var(--glow); }
.nu-say { margin-top: clamp(20px, 3.4vh, 32px); font-family: var(--serif); font-size: clamp(16.5px, 1.6vw, 20px); line-height: 2.1; max-width: 38em; border-top: 1px solid rgba(240, 217, 168, 0.3); padding-top: 20px; }

.note-p { font-size: 14px; line-height: 2; color: rgba(239, 231, 216, 0.65); max-width: 48em; border-left: 3px solid rgba(201, 143, 78, 0.6); padding-left: 16px; }
.note-p::before { content: "◆ "; color: var(--warm); font-size: 9px; }

.close-copy { margin-top: 10px; font-size: 16.5px; max-width: 42em; }
.close-note { margin-top: 14px; font-size: 14px; color: rgba(239, 231, 216, 0.6); max-width: 46em; }
.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(--stage); background: var(--glow); text-decoration: none; padding: 12px 24px;
}
.go-works:hover { background: var(--warm); }
.go-home { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: rgba(239, 231, 216, 0.72); text-decoration: none; align-self: center; border-bottom: 1px solid rgba(240, 217, 168, 0.3); padding-bottom: 3px; }
.go-home:hover { color: var(--glow); }

/* 拆开位移：真三件沿不同方向分离（提梁上左、灯身左下；花饰由 JS 至 PETAL_OUT） */
#pp-handle, #sh-handle, #pp-body, #sh-body { transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.3, 1); }
#pp-handle.is-off, #sh-handle.is-off { transform: translate(-30px, -36px); }
#pp-body.is-off, #sh-body.is-off { transform: translate(-56px, 10px); }

/* ---------- reveal / reduce / 手机 ---------- */
[data-anim] .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-anim] .reveal.inview { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .st-pair, .newuse-grid { grid-template-columns: 1fr; }
  .parts li { flex-direction: column; gap: 8px; }
  .screen-wrap { aspect-ratio: 5 / 4; }
  .play-title br { display: none; }
  .act-open { text-align: left; }
}